vielle.dev
Personal Site
Add sane error handling for SSR mode
+32
-35
src/components/playing/NowPlaying.astro
+32
-35
src/components/playing/NowPlaying.astro
···
18
18
return err;
19
19
});
20
20
21
+
if (track instanceof SpotifyError)
22
+
console.error("Encountered spotify error:", track);
23
+
21
24
const dataTrack = (
22
25
t: typeof track,
23
26
): t is Exclude<typeof track, SpotifyError | null> =>
24
-
!(track instanceof SpotifyError || !track);
27
+
!(t instanceof SpotifyError || !t);
25
28
---
26
29
30
+
{
31
+
track instanceof SpotifyError && (
32
+
<script
33
+
set:html={`console.error("Failed to load nowPlaying. See server console for reason.")`}
34
+
/>
35
+
)
36
+
}
37
+
27
38
<section
28
39
class="playing"
29
40
id="now-playing"
···
38
49
--small-box-mask-png: url("${smallBoxMask.src}");
39
50
`}
40
51
>
41
-
<div
42
-
class="player"
43
-
tabindex="0"
44
-
style={`display: ${track instanceof SpotifyError ? "none" : "block"};` +
45
-
new Array(5)
46
-
.fill(0)
47
-
.map(
48
-
(_, i) =>
49
-
`--head-move-${(i + 2) * 10}: ${Math.random() * 20 + 25}deg;`,
50
-
)
51
-
.join("")}
52
-
>
52
+
<div class="player" tabindex="0">
53
53
<div class="spinner"></div>
54
54
55
55
<div class="record">
···
59
59
: track.album.images[0].url}
60
60
alt=""
61
61
class="art"
62
-
style={`display: ${track instanceof SpotifyError ? "none" : "block"}`}
63
62
/>
64
63
</div>
65
64
···
67
66
<div class="head"></div>
68
67
</div>
69
68
70
-
<now-playing>
69
+
<now-playing data-render={dataTrack(track)}>
71
70
<a
72
71
slot="title"
73
-
href={(dataTrack(track) && track.external_urls.spotify) || ""}
72
+
href={dataTrack(track) ? track.external_urls.spotify : "#"}
74
73
>
75
-
{dataTrack(track) && track.name}</a
76
-
>
77
-
<span slot="album">{dataTrack(track) && track.album.name}</span>
74
+
{dataTrack(track) ? track.name : null}
75
+
</a>
76
+
<span slot="album">{dataTrack(track) ? track.album.name : null}</span>
78
77
<span slot="artists">
79
78
{
80
-
dataTrack(track) &&
81
-
track.artists
82
-
.map((artist) => (
83
-
<a href={artist.external_urls.spotify}>{artist.name}</a>
84
-
))
85
-
// inject a comma before each entry in the list except the first one
86
-
// flatmap flattens the returned array into the new map
87
-
.flatMap((x, i) => (i === 0 ? x : [", ", x]))
79
+
dataTrack(track)
80
+
? track.artists
81
+
.map((artist) => (
82
+
<a href={artist.external_urls.spotify}>{artist.name}</a>
83
+
))
84
+
// inject a comma before each entry in the list except the first one
85
+
// flatmap flattens the returned array into the new map
86
+
.flatMap((x, i) => (i === 0 ? x : [", ", x]))
87
+
: null
88
88
}
89
89
</span>
90
90
<img
···
110
110
</div>
111
111
112
112
<style>
113
+
/* dont show element if it errored or nothing is playing */
114
+
:host([data-render="false"]) {
115
+
display: none !important;
116
+
}
117
+
113
118
:host {
114
119
contain: layout;
115
120
position: absolute;
···
173
178
</now-playing>
174
179
</div>
175
180
</section>
176
-
177
-
{
178
-
track instanceof SpotifyError && (
179
-
<script
180
-
set:html={`console.error("Failed to load nowPlaying:", ${JSON.stringify(track)})`}
181
-
/>
182
-
)
183
-
}
184
181
185
182
<style>
186
183
@keyframes spin {