vielle.dev
Personal Site
Listen to the SSe, and if the ID is different, or it changes from nothing to something (or vice versa), update the popup and record art
+44
+44
src/components/playing/NowPlaying.astro
+44
src/components/playing/NowPlaying.astro
···
552
nowPlaying: querySelector("now-playing", HTMLNowPlayingElement),
553
};
554
555
+
/************
556
+
* LISTENER *
557
+
************/
558
+
559
+
let prev: nowPlaying = null;
560
+
561
+
const ev = new EventSource("/now-playing-sse");
562
+
563
+
let i = -1;
564
+
ev.addEventListener("playing", (event) => {
565
+
i++;
566
+
const data = (() => {
567
+
try {
568
+
return JSON.parse(event.data);
569
+
} catch (e) {
570
+
return e;
571
+
}
572
+
})();
573
+
if (!isNowPlaying(data))
574
+
return console.warn("Unexpected package from server:", data, event.data);
575
+
576
+
// data is valid nowPlayingData
577
+
// first call so assume prev is in an invalid state (which it is)
578
+
if (i === 0) console.log("SKIP: i = 0");
579
+
// if both are null, quit since re-rendering is pointless
580
+
else if (data == prev) console.log("MATCH: null = null");
581
+
// now if both are valid play items, so check the ID for equality
582
+
else if (data !== null && prev !== null && data.id === prev.id)
583
+
console.log("MATCH: nowPlaying = nowPlaying");
584
+
else {
585
+
console.log("DIFFERENT");
586
+
// there is now a difference between the previous setting and the new setting
587
+
// so it is worth updating the UI
588
+
589
+
elements.recordArt.src = data
590
+
? data?.album.images[0].url
591
+
: "https://undefined";
592
+
593
+
if (data) elements.nowPlaying.updateMetadata(data);
594
+
else elements.nowPlaying.nothingPlaying();
595
+
}
596
+
597
+
prev = data;
598
+
});
599
</script>