Personal Site
Change how the now playing popup works so that its more accessible
Specifically: use popover and anchor positioning.
NOTE: browsers without anchor positioning require the oddbird polyfill. As a result, this will NOT work on browsers without either native anchor positioning OR javascript.
Next commit will add a warning for this
+37
-23
+37
-23
src/components/home/playing/NowPlaying.astro
+37
-23
src/components/home/playing/NowPlaying.astro
···
34
34
--small-box-mask-png: url("${smallBoxMask.src}");
35
35
`}
36
36
>
37
-
<div
37
+
<button
38
38
class="player"
39
-
tabindex="0"
40
39
aria-label="Record player"
40
+
popovertarget="nowplaying"
41
41
data-playing={isSong(track) ? "true" : "false"}
42
42
>
43
43
<div class="spinner"></div>
···
58
58
59
59
<!-- aria-live=off means aria updates are only announced when focused.
60
60
this makes sense as what im listening too is irrelevant if -->
61
-
<now-playing data-render={isSong(track)} aria-live="off">
61
+
<now-playing
62
+
data-render={isSong(track)}
63
+
aria-live="off"
64
+
id="nowplaying"
65
+
popover="auto"
66
+
>
62
67
<a
63
68
slot="title"
64
69
href={isSong(track) ? track.item.external_urls.spotify : "#"}
···
108
113
</div>
109
114
</div>
110
115
111
-
<style>
112
-
/* dont show element if it errored or nothing is playing */
113
-
:host([data-render="false"]) {
114
-
display: none !important;
115
-
}
116
+
<style is:inline>
117
+
:host {
118
+
background: none;
119
+
border-image: var(--box-tlbr-png) 10 fill / calc((20 / 3) * 1cqw)
120
+
round;
116
121
117
-
:host {
118
122
contain: layout;
119
-
position: absolute;
120
-
bottom: 105cqh;
123
+
box-sizing: border-box;
121
124
122
125
width: 100cqw;
123
-
height: auto;
124
-
125
-
box-sizing: border-box;
126
+
height: max-content;
126
127
/* gets overridden by the fukcin * selector. for some reason */
127
128
padding: calc((25 / 3) * 1cqw) !important;
128
129
129
-
border-image: var(--box-tlbr-png) 10 fill / calc((20 / 3) * 1cqw)
130
-
round;
130
+
overflow: visible;
131
131
132
132
&::after {
133
133
content: "";
···
175
175
</style>
176
176
</template>
177
177
</now-playing>
178
-
</div>
178
+
</button>
179
179
</section>
180
180
181
181
<style>
···
239
239
image-rendering: pixelated;
240
240
background-image: var(--mp3-base-png);
241
241
background-size: contain;
242
+
243
+
/* remove the button styles */
244
+
background: none;
245
+
border: none;
242
246
243
247
* {
244
248
background-size: contain;
···
315
319
}
316
320
}
317
321
318
-
now-playing {
319
-
display: none;
320
-
}
321
-
322
322
/* setup the ::before to be usable for the outline
323
323
filter cannot be applied straight to .player
324
324
as the now-playing is a child and also gets the outline
···
354
354
drop-shadow(var(--outline-colour) calc(-1 * var(--outline-size)) 0);
355
355
}
356
356
}
357
+
</style>
357
358
358
-
:is(.player:focus, .player:focus-within, .player:hover) now-playing {
359
-
display: block;
359
+
<style is:inline>
360
+
.player {
361
+
anchor-name: --player;
360
362
}
361
363
362
364
now-playing {
365
+
inset: unset;
366
+
position: absolute;
367
+
left: anchor(--player left);
368
+
bottom: calc(anchor(--player top) + 5cqh);
369
+
363
370
& img {
364
371
mask-image: var(--small-box-mask-png);
365
372
mask-size: contain;
366
373
}
374
+
367
375
& a {
368
376
color: black;
369
377
···
378
386
}
379
387
}
380
388
</style>
389
+
381
390
<script>
382
391
/***********
383
392
* IMPORTS *
···
385
394
386
395
import { isNowPlaying, type nowPlaying } from "./spotify/client";
387
396
397
+
if (!CSS.supports("top", "calc(anchor(--player bottom) + 10px)")) {
398
+
// enable anchor polyfill
399
+
// @ts-expect-error ts cant find remote types lol
400
+
import("https://unpkg.com/@oddbird/css-anchor-positioning");
401
+
}
388
402
/*************
389
403
* FUNCTIONS *
390
404
*************/