Personal Site
Add proper hover popout to (later) show song metadata
+50
-2
src/assets/popout-speech.png
src/assets/popout-speech.png
This is a binary file and will not be displayed.
+50
-2
src/components/playing/NowPlaying.astro
+50
-2
src/components/playing/NowPlaying.astro
···
6
6
import mp3RecordCircle from "/assets/mp3/record-circle.png";
7
7
import mp3HeadCircle from "/assets/mp3/head-circle.png";
8
8
import mp3PlaybackHead from "/assets/mp3/playback-head.png";
9
+
import boxTlbr from "/assets/box-tlbr.png";
10
+
import popoutSpeech from "/assets/popout-speech.png";
9
11
10
12
const track = await spotifyNowPlaying().catch((err) => {
11
13
if (!(err instanceof SpotifyError)) throw new Error("Unhandled exception");
12
14
if (err.code === "NO_CONTENT") return null;
13
-
15
+
14
16
console.error(err.code, err.human, err.details);
15
17
return err;
16
18
});
···
25
27
--mp3-record-circle-png: url(${mp3RecordCircle.src});
26
28
--mp3-head-circle-png: url(${mp3HeadCircle.src});
27
29
--mp3-playback-head-png: url(${mp3PlaybackHead.src});
30
+
--box-tlbr-png: url("${boxTlbr.src}");
31
+
--popout-speech-png: url("${popoutSpeech.src}");
28
32
`}
29
33
>
30
34
<div
···
54
58
<div class="spinner hidden">
55
59
<div class="head"></div>
56
60
</div>
61
+
62
+
<now-playing>
63
+
<template shadowrootmode="open">
64
+
<style></style>
65
+
<h1>Popup here</h1>
66
+
</template>
67
+
</now-playing>
57
68
</div>
58
69
</section>
59
70
···
119
130
}
120
131
121
132
.player {
122
-
contain: strict;
133
+
/* internal and external nodes dont affect each other
134
+
children dont affect this size
135
+
properties dont affect external nodes */
136
+
contain: layout size style;
123
137
container: player / size;
124
138
width: 100%;
125
139
/* design size is 300px by 244px
···
184
198
width: calc((30 / 3) * 1cqw);
185
199
height: calc((200 / 3) * 1cqw);
186
200
background-image: var(--mp3-playback-head-png);
201
+
}
202
+
}
203
+
204
+
&:hover now-playing,
205
+
& now-playing:hover {
206
+
display: block;
207
+
}
208
+
209
+
& now-playing {
210
+
display: none;
211
+
contain: layout style;
212
+
position: absolute;
213
+
bottom: 105cqh;
214
+
215
+
width: 100cqw;
216
+
height: auto;
217
+
218
+
border-image: var(--box-tlbr-png) 10 fill / calc((20 / 3) * 1cqw) round;
219
+
220
+
&::after {
221
+
content: "";
222
+
223
+
position: absolute;
224
+
bottom: calc((-20 / 3) * 1cqw);
225
+
left: 0;
226
+
227
+
/* width 100% catches :hover to stop it disapearing. also makes centering less magic numbery */
228
+
width: 100cqw;
229
+
height: calc((40 / 3) * 1cqw);
230
+
231
+
background-image: var(--popout-speech-png);
232
+
background-size: contain;
233
+
background-position: center;
234
+
background-repeat: no-repeat;
187
235
}
188
236
}
189
237
}