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