vielle.dev
Personal Site
Completely remove javascript scripts. I did a rewrite so this is to make sure the commits are sane
+1
-84
src/components/playing/NowPlaying.astro
+1
-84
src/components/playing/NowPlaying.astro
···
343
343
</style>
344
344
345
345
<script>
346
-
import { type nowPlaying, isNowPlaying } from "./spotify/client";
347
-
348
-
class HTMLNowPlayingElement extends HTMLElement {
349
-
internals = this.attachInternals();
350
-
351
-
elements = {
352
-
// typecast bc checked in constructor
353
-
title: this.querySelector("[slot=title]") as HTMLAnchorElement,
354
-
album: this.querySelector("[slot=album]") as HTMLSpanElement,
355
-
artists: this.querySelector("[slot=artists]") as HTMLSpanElement,
356
-
art: this.querySelector("[slot=art]") as HTMLImageElement,
357
-
} as const;
358
-
359
-
constructor() {
360
-
super();
361
-
362
-
if (!(this.elements.title instanceof HTMLAnchorElement))
363
-
throw new Error("[slot=title] not defined or wrong type");
364
-
365
-
if (!(this.elements.album instanceof HTMLSpanElement))
366
-
throw new Error("[slot=album] not defined or wrong type");
367
-
368
-
if (!(this.elements.artists instanceof HTMLSpanElement))
369
-
throw new Error("[slot=artists] not defined or wrong type");
370
-
371
-
if (!(this.elements.art instanceof HTMLImageElement))
372
-
throw new Error("[slot=art] not defined or wrong type");
373
-
}
374
-
375
-
updateMetadata(metadata: Exclude<nowPlaying, null>) {
376
-
this.elements.title.innerText = metadata.name;
377
-
this.elements.title.href = metadata.external_urls.spotify;
378
-
379
-
this.elements.album.innerText = metadata.album.name;
380
-
381
-
this.elements.artists.innerText = "";
382
-
this.elements.artists.append(
383
-
...metadata.artists.flatMap((artist, i) => {
384
-
const a = document.createElement("a");
385
-
a.innerText = artist.name;
386
-
a.href = artist.external_urls.spotify;
387
-
return i === 0 ? a : [", ", a];
388
-
}),
389
-
);
390
-
391
-
this.elements.art.src = metadata.album.images[0].url;
392
-
}
393
-
}
394
-
395
-
const nowPlayingEl = document.getElementById("now-playing");
396
-
if (!nowPlayingEl) throw new Error("Could not find #now-playing");
397
-
const art = nowPlayingEl.querySelector(".art");
398
-
if (!art || !(art instanceof HTMLImageElement))
399
-
throw new Error("Could not find #now-playing img.art");
400
-
const nowPlayings = document.querySelectorAll("now-playing");
401
-
402
-
customElements.define("now-playing", HTMLNowPlayingElement);
403
-
404
-
const renderNowPlaying = (playing: Exclude<nowPlaying, null>) => {
405
-
art.src = playing.album.images[0].url;
406
-
nowPlayings.forEach(
407
-
(el) => el instanceof HTMLNowPlayingElement && el.updateMetadata(playing),
408
-
);
409
-
};
410
-
411
-
const renderSilent = () => {
412
-
art.src = "https://undefined/";
413
-
};
414
-
415
-
const events = new EventSource("/now-playing-sse");
416
-
events.addEventListener("playing", (ev) => {
417
-
const playing = JSON.parse(ev.data);
418
-
419
-
// nothing is playing
420
-
if (playing === null) return renderSilent();
421
-
422
-
// something is playing
423
-
if (isNowPlaying(playing) && playing !== null)
424
-
return renderNowPlaying(playing);
425
-
426
-
// server sent strange/error response
427
-
console.error("Unexpected value sent from server:", playing);
428
-
// continue as normal as the previous value WAS ok
429
-
});
346
+
430
347
</script>