vielle.dev
Personal Site
Add proper hover popout to (later) show song metadata
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
import mp3RecordCircle from "/assets/mp3/record-circle.png";
7
import mp3HeadCircle from "/assets/mp3/head-circle.png";
8
import mp3PlaybackHead from "/assets/mp3/playback-head.png";
9
10
const track = await spotifyNowPlaying().catch((err) => {
11
if (!(err instanceof SpotifyError)) throw new Error("Unhandled exception");
12
if (err.code === "NO_CONTENT") return null;
13
-
14
console.error(err.code, err.human, err.details);
15
return err;
16
});
···
25
--mp3-record-circle-png: url(${mp3RecordCircle.src});
26
--mp3-head-circle-png: url(${mp3HeadCircle.src});
27
--mp3-playback-head-png: url(${mp3PlaybackHead.src});
28
`}
29
>
30
<div
···
54
<div class="spinner hidden">
55
<div class="head"></div>
56
</div>
57
</div>
58
</section>
59
···
119
}
120
121
.player {
122
-
contain: strict;
123
container: player / size;
124
width: 100%;
125
/* design size is 300px by 244px
···
184
width: calc((30 / 3) * 1cqw);
185
height: calc((200 / 3) * 1cqw);
186
background-image: var(--mp3-playback-head-png);
187
}
188
}
189
}
···
6
import mp3RecordCircle from "/assets/mp3/record-circle.png";
7
import mp3HeadCircle from "/assets/mp3/head-circle.png";
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";
11
12
const track = await spotifyNowPlaying().catch((err) => {
13
if (!(err instanceof SpotifyError)) throw new Error("Unhandled exception");
14
if (err.code === "NO_CONTENT") return null;
15
+
16
console.error(err.code, err.human, err.details);
17
return err;
18
});
···
27
--mp3-record-circle-png: url(${mp3RecordCircle.src});
28
--mp3-head-circle-png: url(${mp3HeadCircle.src});
29
--mp3-playback-head-png: url(${mp3PlaybackHead.src});
30
+
--box-tlbr-png: url("${boxTlbr.src}");
31
+
--popout-speech-png: url("${popoutSpeech.src}");
32
`}
33
>
34
<div
···
58
<div class="spinner hidden">
59
<div class="head"></div>
60
</div>
61
+
62
+
<now-playing>
63
+
<template shadowrootmode="open">
64
+
<style></style>
65
+
<h1>Popup here</h1>
66
+
</template>
67
+
</now-playing>
68
</div>
69
</section>
70
···
130
}
131
132
.player {
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;
137
container: player / size;
138
width: 100%;
139
/* design size is 300px by 244px
···
198
width: calc((30 / 3) * 1cqw);
199
height: calc((200 / 3) * 1cqw);
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;
235
}
236
}
237
}