A music player that connects to your cloud/distributed storage.
chore: debounce loading artwork for covers
+19
-5
-1
src/themes/blur/browser/element.css
-1
src/themes/blur/browser/element.css
+19
-4
src/themes/blur/browser/element.js
+19
-4
src/themes/blur/browser/element.js
···
165
165
166
166
#observedCards = new WeakSet();
167
167
168
+
/** @type {Map<string, Track>} */
169
+
#pendingVisibleCards = new Map();
170
+
171
+
/** @type {ReturnType<typeof setTimeout> | undefined} */
172
+
#artFetchDebounce = undefined;
173
+
168
174
/** @type {VirtualItem[]} */
169
175
#flatItems = [];
170
176
···
421
427
/** @type {HTMLElement} */ (entry.target).dataset.albumKey;
422
428
if (!albumKey) continue;
423
429
const track = this.$albumTrackMap().get(albumKey);
424
-
if (track) this.#fetchAlbumArt(albumKey, track);
430
+
if (track) this.#pendingVisibleCards.set(albumKey, track);
425
431
this.#coverObserver?.unobserve(entry.target);
426
432
}
433
+
clearTimeout(this.#artFetchDebounce);
434
+
this.#artFetchDebounce = setTimeout(() => {
435
+
for (const [albumKey, track] of this.#pendingVisibleCards) {
436
+
this.#fetchAlbumArt(albumKey, track);
437
+
}
438
+
this.#pendingVisibleCards.clear();
439
+
}, 150);
427
440
},
428
441
{ root, rootMargin: "200px" },
429
442
);
···
469
482
this.#coverObserver?.disconnect();
470
483
this.#coverObserver = undefined;
471
484
this.#observedCards = new WeakSet();
485
+
clearTimeout(this.#artFetchDebounce);
486
+
this.#pendingVisibleCards.clear();
472
487
}
473
488
474
489
// RENDER
···
593
608
<div class="cover-art">
594
609
${artUrl
595
610
? html`
596
-
<img src="${artUrl}" alt="${artistName}" loading="lazy" />
611
+
<img src="${artUrl}" alt="${artistName}" loading="lazy" @error="${() => { this.#coverArtCache.set(artistKey, null); this.#scheduleArtRender(); }}" />
597
612
`
598
613
: html`
599
614
<div class="cover-art-placeholder"><i class="ph-fill ph-vinyl-record"></i></div>
···
660
675
<div class="cover-art">
661
676
${artUrl
662
677
? html`
663
-
<img src="${artUrl}" alt="${albumName}" loading="lazy" />
678
+
<img src="${artUrl}" alt="${albumName}" loading="lazy" @error="${() => { this.#coverArtCache.set(albumKey, null); this.#scheduleArtRender(); }}" />
664
679
`
665
680
: html`
666
681
<div class="cover-art-placeholder"><i class="ph-fill ph-vinyl-record"></i></div>
···
956
971
<div class="album-detail-art">
957
972
${artUrl
958
973
? html`
959
-
<img src="${artUrl}" alt="${name}" />
974
+
<img src="${artUrl}" alt="${name}" @error="${() => { this.#coverArtCache.set(key, null); this.#scheduleArtRender(); }}" />
960
975
`
961
976
: html`
962
977
<div class="cover-art-placeholder"><i class="ph-fill ph-vinyl-record"></i></div>