vielle.dev
Personal Site
Remove random console logs and make it so the popup updates at the same time as the album art. Like A Sane Person Would Do
+23
-21
src/components/home/playing/NowPlaying.astro
+23
-21
src/components/home/playing/NowPlaying.astro
···
92
92
// flatmap flattens the returned array into the new map
93
93
.flatMap((x, i) => (i === 0 ? x : [", ", x]))
94
94
) : (
95
-
// artist defined by default because
95
+
// artist defined by default because
96
96
// i cant be bothered to do client error handling
97
97
// and this is easier
98
98
<a href="#">Artist Name</a>
···
513
513
);
514
514
const addArtists = playing.artists.slice(artistLen);
515
515
516
-
console.log(replaceArtists, addArtists);
517
-
518
516
let lastValidArtist = elIs(
519
517
this.elements.artists.children[0],
520
518
HTMLElement,
···
633
631
const ev = new EventSource("/now-playing-sse");
634
632
635
633
// close event source safely
636
-
window.addEventListener("beforeunload", () => ev.close())
634
+
window.addEventListener("beforeunload", () => ev.close());
637
635
638
636
let i = -1;
639
637
ev.addEventListener("playing", (event) => {
···
648
646
if (!isNowPlaying(data))
649
647
return console.warn("Unexpected package from server:", data, event.data);
650
648
649
+
// data is valid nowPlayingData
651
650
try {
652
-
// data is valid nowPlayingData
653
-
// first call so assume prev is in an invalid state (which it is)
654
-
if (i === 0) console.log("SKIP: i = 0");
655
-
// if both are null, quit since re-rendering is pointless
656
-
else if (data == prev) console.log("MATCH: null = null");
657
-
// now if both are valid play items, so check the ID for equality
658
-
else if (data !== null && prev !== null && data.id === prev.id)
659
-
console.log("MATCH: nowPlaying = nowPlaying");
660
-
else {
661
-
console.log("DIFFERENT");
651
+
if (
652
+
!(
653
+
// first call so assume prev is in an invalid state (which it is)
654
+
(
655
+
i === 0 ||
656
+
// if both are null, quit since re-rendering is pointless
657
+
data == prev ||
658
+
// now if both are valid play items, so check the ID for equality
659
+
(data !== null && prev !== null && data.id === prev.id)
660
+
)
661
+
)
662
+
) {
662
663
// there is now a difference between the previous setting and the new setting
663
664
// so it is worth updating the UI
664
-
665
-
if (data) elements.nowPlaying.updateMetadata(data);
666
-
else elements.nowPlaying.nothingPlaying();
667
665
668
666
// spinner head animation:
669
667
// 1. pause current animation.
···
682
680
? data?.album.images[0].url
683
681
: "https://undefined";
684
682
685
-
// 5. reset the position of the infinite animation
683
+
// 5. update popup
684
+
if (data) elements.nowPlaying.updateMetadata(data);
685
+
else elements.nowPlaying.nothingPlaying();
686
+
687
+
// 6. reset the position of the infinite animation
686
688
animations.forEach((anim) => (anim.currentTime = 0));
687
689
688
-
// 6. if new track is not null then, after 2s
690
+
// 7. if new track is not null then, after 2s
689
691
if (data)
690
692
setTimeout(() => {
691
-
// 7. resume the infinite animation
693
+
// 8. resume the infinite animation
692
694
animations.forEach((anim) => anim.play());
693
695
}, 2000);
694
696
695
-
// 8. make sure the record is in the right state (playing or paused)
697
+
// 9. make sure the record is in the right state (playing or paused)
696
698
elements.player.dataset.playing = data ? "true" : "false";
697
699
}),
698
700
);