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
// 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>
···
513
);
514
const addArtists = playing.artists.slice(artistLen);
515
516
-
console.log(replaceArtists, addArtists);
517
-
518
let lastValidArtist = elIs(
519
this.elements.artists.children[0],
520
HTMLElement,
···
633
const ev = new EventSource("/now-playing-sse");
634
635
// close event source safely
636
-
window.addEventListener("beforeunload", () => ev.close())
637
638
let i = -1;
639
ev.addEventListener("playing", (event) => {
···
648
if (!isNowPlaying(data))
649
return console.warn("Unexpected package from server:", data, event.data);
650
651
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");
662
// there is now a difference between the previous setting and the new setting
663
// so it is worth updating the UI
664
-
665
-
if (data) elements.nowPlaying.updateMetadata(data);
666
-
else elements.nowPlaying.nothingPlaying();
667
668
// spinner head animation:
669
// 1. pause current animation.
···
682
? data?.album.images[0].url
683
: "https://undefined";
684
685
-
// 5. reset the position of the infinite animation
686
animations.forEach((anim) => (anim.currentTime = 0));
687
688
-
// 6. if new track is not null then, after 2s
689
if (data)
690
setTimeout(() => {
691
-
// 7. resume the infinite animation
692
animations.forEach((anim) => anim.play());
693
}, 2000);
694
695
-
// 8. make sure the record is in the right state (playing or paused)
696
elements.player.dataset.playing = data ? "true" : "false";
697
}),
698
);
···
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>
···
513
);
514
const addArtists = playing.artists.slice(artistLen);
515
516
let lastValidArtist = elIs(
517
this.elements.artists.children[0],
518
HTMLElement,
···
631
const ev = new EventSource("/now-playing-sse");
632
633
// close event source safely
634
+
window.addEventListener("beforeunload", () => ev.close());
635
636
let i = -1;
637
ev.addEventListener("playing", (event) => {
···
646
if (!isNowPlaying(data))
647
return console.warn("Unexpected package from server:", data, event.data);
648
649
+
// data is valid nowPlayingData
650
try {
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
+
) {
663
// there is now a difference between the previous setting and the new setting
664
// so it is worth updating the UI
665
666
// spinner head animation:
667
// 1. pause current animation.
···
680
? data?.album.images[0].url
681
: "https://undefined";
682
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
688
animations.forEach((anim) => (anim.currentTime = 0));
689
690
+
// 7. if new track is not null then, after 2s
691
if (data)
692
setTimeout(() => {
693
+
// 8. resume the infinite animation
694
animations.forEach((anim) => anim.play());
695
}, 2000);
696
697
+
// 9. make sure the record is in the right state (playing or paused)
698
elements.player.dataset.playing = data ? "true" : "false";
699
}),
700
);