vielle.dev
Personal Site
Pause animations when nothing playing
- 🟠 figure out what causes "The connection to http://localhost:3000/now-playing-sse was interrupted while the page was loading." error
- 🟠 preload all assets
- 🟠 figure out why firefox warns about unused box-circle-mask.png preload when it is used in bsky pfp in landing
+47
-19
src/components/playing/NowPlaying.astro
+47
-19
src/components/playing/NowPlaying.astro
···
49
49
--small-box-mask-png: url("${smallBoxMask.src}");
50
50
`}
51
51
>
52
-
<div class="player" tabindex="0" aria-label="Record player">
52
+
<div
53
+
class="player"
54
+
tabindex="0"
55
+
aria-label="Record player"
56
+
data-playing={dataTrack(track) ? "true" : "false"}
57
+
>
53
58
<div class="spinner"></div>
54
59
55
60
<div class="record">
···
78
83
<span slot="album">{dataTrack(track) ? track.album.name : null}</span>
79
84
<span slot="artists">
80
85
{
81
-
dataTrack(track)
82
-
? track.artists
83
-
.map((artist) => (
84
-
<a href={artist.external_urls.spotify}>{artist.name}</a>
85
-
))
86
-
// inject a comma before each entry in the list except the first one
87
-
// flatmap flattens the returned array into the new map
88
-
.flatMap((x, i) => (i === 0 ? x : [", ", x]))
89
-
: null
86
+
dataTrack(track) ? (
87
+
track.artists
88
+
.map((artist) => (
89
+
<a href={artist.external_urls.spotify}>{artist.name}</a>
90
+
))
91
+
// inject a comma before each entry in the list except the first one
92
+
// flatmap flattens the returned array into the new map
93
+
.flatMap((x, i) => (i === 0 ? x : [", ", x]))
94
+
) : (
95
+
// artist defined by default because
96
+
// i cant be bothered to do client error handling
97
+
// and this is easier
98
+
<a href="#">Artist Name</a>
99
+
)
90
100
}
91
101
</span>
92
102
<img
···
242
252
243
253
animation: 30s linear forwards infinite spin;
244
254
255
+
[data-playing="false"] & {
256
+
animation-play-state: paused;
257
+
}
258
+
245
259
& .art {
246
260
position: absolute;
247
261
top: calc((50 / 3) * 1cqw);
···
266
280
height: calc((60 / 3) * 1cqw);
267
281
268
282
animation: 60s linear 2.5s infinite forwards head-move;
283
+
284
+
[data-playing="false"] & {
285
+
animation-play-state: paused;
286
+
}
269
287
270
288
&.hidden {
271
289
background: none;
···
500
518
let lastValidArtist = elIs(
501
519
this.elements.artists.children[0],
502
520
HTMLElement,
521
+
"artist",
503
522
);
504
523
replaceArtists.forEach((artist, i) => {
505
524
// if this index exists in both arrays, update in place
···
552
571
spinner: Array.from(querySelectorAll(".player .spinner", HTMLDivElement)),
553
572
recordArt: querySelector(".record .art", HTMLImageElement),
554
573
nowPlaying: querySelector("now-playing", HTMLNowPlayingElement),
574
+
player: querySelector(".player", HTMLElement),
555
575
};
556
576
557
577
if (elements.spinner.length !== 2)
···
598
618
iterations: Infinity,
599
619
}),
600
620
);
621
+
622
+
if (elements.player.dataset.playing === "false") {
623
+
// dont play animations
624
+
animations.forEach((anim) => anim.pause());
625
+
}
601
626
602
627
/************
603
628
* LISTENER *
···
641
666
// 1. pause current animation.
642
667
animations.forEach((anim) => anim.pause());
643
668
elements.spinner.forEach((el) =>
644
-
// 2. send the playback head to the start
669
+
// 2. send the playback head to the start
645
670
el
646
671
.animate(goToStartAnimation, {
647
672
duration: 2.5 * 1000,
648
673
easing: "ease-in-out",
649
674
})
650
675
// 3. when the playback head is at the start
651
-
.finished.then(async (x) => {
652
-
676
+
.finished.then(async () => {
653
677
// 4. update the record art
654
678
elements.recordArt.src = data
655
679
? data?.album.images[0].url
656
680
: "https://undefined";
657
681
658
-
// 5. reset the position of the infinite animation
682
+
// 5. reset the position of the infinite animation
659
683
animations.forEach((anim) => (anim.currentTime = 0));
660
684
661
-
// 6. after 2s
662
-
setTimeout(() => {
663
-
// resume the infinite animation
664
-
animations.forEach((anim) => anim.play());
665
-
}, 2000);
685
+
// 6. if new track is not null then, after 2s
686
+
if (data)
687
+
setTimeout(() => {
688
+
// 7. resume the infinite animation
689
+
animations.forEach((anim) => anim.play());
690
+
}, 2000);
691
+
692
+
// 8. make sure the record is in the right state (playing or paused)
693
+
elements.player.dataset.playing = data ? "true" : "false";
666
694
}),
667
695
);
668
696
}