Personal Site
Add proper content to now-playing popup (SSE data not yet loaded) and add layout
+72
-5
+72
-5
src/components/playing/NowPlaying.astro
+72
-5
src/components/playing/NowPlaying.astro
···
8
8
import mp3PlaybackHead from "/assets/mp3/playback-head.png";
9
9
import boxTlbr from "/assets/box-tlbr.png";
10
10
import popoutSpeech from "/assets/popout-speech.png";
11
+
import smallBoxMask from "/assets/small-box-mask.png";
11
12
12
13
const track = await spotifyNowPlaying().catch((err) => {
13
14
if (!(err instanceof SpotifyError)) throw new Error("Unhandled exception");
···
16
17
console.error(err.code, err.human, err.details);
17
18
return err;
18
19
});
20
+
21
+
const dataTrack = (
22
+
t: typeof track,
23
+
): t is Exclude<typeof track, SpotifyError | null> =>
24
+
!(track instanceof SpotifyError || !track);
19
25
---
20
26
21
27
<section
···
29
35
--mp3-playback-head-png: url(${mp3PlaybackHead.src});
30
36
--box-tlbr-png: url("${boxTlbr.src}");
31
37
--popout-speech-png: url("${popoutSpeech.src}");
38
+
--small-box-mask-png: url("${smallBoxMask.src}");
32
39
`}
33
40
>
34
41
<div
···
47
54
48
55
<div class="record">
49
56
<img
50
-
src={track instanceof SpotifyError || !track
57
+
src={!dataTrack(track)
51
58
? "https://undefined/"
52
59
: track.album.images[0].url}
53
60
alt=""
···
61
68
</div>
62
69
63
70
<now-playing>
64
-
test
71
+
<a
72
+
slot="title"
73
+
href={(dataTrack(track) && track.external_urls.spotify) || ""}
74
+
>
75
+
{dataTrack(track) && track.name}</a
76
+
>
77
+
<span slot="album">{dataTrack(track) && track.album.name}</span>
78
+
<span slot="artists">
79
+
{
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]))
88
+
}
89
+
</span>
90
+
<img
91
+
slot="art"
92
+
src={!dataTrack(track)
93
+
? "https://undefined/"
94
+
: track.album.images[0].url}
95
+
alt=""
96
+
/>
65
97
66
98
<template shadowrootmode="open" shadowrootdelegatesfocus>
67
-
<slot is:inline />
68
-
69
-
<input type="text" />
99
+
<div class="layout">
100
+
<span class="name">
101
+
<slot is:inline name="title" />
102
+
(<slot is:inline name="album" />)
103
+
</span>
104
+
<span class="artists">
105
+
<slot is:inline name="artists" />
106
+
</span>
107
+
<div class="art">
108
+
<slot is:inline name="art" />
109
+
</div>
110
+
</div>
70
111
71
112
<style>
72
113
:host {
···
99
140
background-size: contain;
100
141
background-position: center;
101
142
background-repeat: no-repeat;
143
+
}
144
+
}
145
+
146
+
.layout {
147
+
display: grid;
148
+
grid-template:
149
+
"name art" auto
150
+
"artists art" auto
151
+
/ 1fr 80px;
152
+
align-items: center;
153
+
justify-content: center;
154
+
155
+
.name {
156
+
grid-area: name;
157
+
align-self: end;
158
+
}
159
+
160
+
.artists {
161
+
grid-area: artists;
162
+
align-self: start;
163
+
}
164
+
165
+
.art {
166
+
grid-area: art;
167
+
width: 80px;
168
+
height: 80ps;
102
169
}
103
170
}
104
171
</style>