vielle.dev
Personal Site
Random formatting change idk man
+36
-36
src/components/playing/NowPlaying.astro
+36
-36
src/components/playing/NowPlaying.astro
···
348
348
}
349
349
350
350
now-playing {
351
-
[slot="art"] {
351
+
& img {
352
352
mask-image: var(--small-box-mask-png);
353
353
mask-size: contain;
354
354
}
355
-
356
-
a {
355
+
& a {
357
356
color: black;
358
357
359
358
&:focus,
···
372
371
import { type nowPlaying, isNowPlaying } from "./spotify/client";
373
372
374
373
class HTMLNowPlayingElement extends HTMLElement {
375
-
internals = this.attachInternals();
374
+
internals = this.attachInternals();
376
375
377
-
elements = {
378
-
// typecast bc checked in constructor
379
-
title: this.querySelector("[slot=title]") as HTMLAnchorElement,
380
-
album: this.querySelector("[slot=album]") as HTMLSpanElement,
381
-
artists: this.querySelector("[slot=artists]") as HTMLSpanElement,
382
-
art: this.querySelector("[slot=art]") as HTMLImageElement,
383
-
} as const;
376
+
elements = {
377
+
// typecast bc checked in constructor
378
+
title: this.querySelector("[slot=title]") as HTMLAnchorElement,
379
+
album: this.querySelector("[slot=album]") as HTMLSpanElement,
380
+
artists: this.querySelector("[slot=artists]") as HTMLSpanElement,
381
+
art: this.querySelector("[slot=art]") as HTMLImageElement,
382
+
} as const;
384
383
385
-
constructor() {
386
-
super();
384
+
constructor() {
385
+
super();
387
386
388
-
if (!(this.elements.title instanceof HTMLAnchorElement))
389
-
throw new Error("[slot=title] not defined or wrong type");
387
+
if (!(this.elements.title instanceof HTMLAnchorElement))
388
+
throw new Error("[slot=title] not defined or wrong type");
390
389
391
-
if (!(this.elements.album instanceof HTMLSpanElement))
392
-
throw new Error("[slot=album] not defined or wrong type");
390
+
if (!(this.elements.album instanceof HTMLSpanElement))
391
+
throw new Error("[slot=album] not defined or wrong type");
393
392
394
-
if (!(this.elements.artists instanceof HTMLSpanElement))
395
-
throw new Error("[slot=artists] not defined or wrong type");
393
+
if (!(this.elements.artists instanceof HTMLSpanElement))
394
+
throw new Error("[slot=artists] not defined or wrong type");
396
395
397
-
if (!(this.elements.art instanceof HTMLImageElement))
398
-
throw new Error("[slot=art] not defined or wrong type");
399
-
}
396
+
if (!(this.elements.art instanceof HTMLImageElement))
397
+
throw new Error("[slot=art] not defined or wrong type");
398
+
}
400
399
401
-
updateMetadata(metadata: Exclude<nowPlaying, null>) {
402
-
this.elements.title.innerText = metadata.name;
403
-
this.elements.title.href = metadata.external_urls.spotify;
400
+
updateMetadata(metadata: Exclude<nowPlaying, null>) {
401
+
this.elements.title.innerText = metadata.name;
402
+
this.elements.title.href = metadata.external_urls.spotify;
404
403
405
-
this.elements.album.innerText = metadata.album.name;
404
+
this.elements.album.innerText = metadata.album.name;
406
405
407
-
this.elements.artists.innerText = "";
408
-
this.elements.artists.append(...metadata.artists.flatMap((artist, i) => {
406
+
this.elements.artists.innerText = "";
407
+
this.elements.artists.append(
408
+
...metadata.artists.flatMap((artist, i) => {
409
409
const a = document.createElement("a");
410
410
a.innerText = artist.name;
411
411
a.href = artist.external_urls.spotify;
412
412
return i === 0 ? a : [", ", a];
413
-
}));
413
+
}),
414
+
);
414
415
415
-
this.elements.art.src = metadata.album.images[0].url
416
-
}
416
+
this.elements.art.src = metadata.album.images[0].url;
417
417
}
418
+
}
418
419
419
420
const nowPlayingEl = document.getElementById("now-playing");
420
421
if (!nowPlayingEl) throw new Error("Could not find #now-playing");
···
423
424
throw new Error("Could not find #now-playing img.art");
424
425
const nowPlayings = document.querySelectorAll("now-playing");
425
426
426
-
customElements.define(
427
-
"now-playing",
428
-
HTMLNowPlayingElement,
429
-
);
427
+
customElements.define("now-playing", HTMLNowPlayingElement);
430
428
431
429
const renderNowPlaying = (playing: Exclude<nowPlaying, null>) => {
432
430
art.src = playing.album.images[0].url;
433
-
nowPlayings.forEach(el => el instanceof HTMLNowPlayingElement && el.updateMetadata(playing))
431
+
nowPlayings.forEach(
432
+
(el) => el instanceof HTMLNowPlayingElement && el.updateMetadata(playing),
433
+
);
434
434
};
435
435
436
436
const renderSilent = () => {