A music player that connects to your cloud/distributed storage.
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: debounce loading artwork for covers

+19 -5
-1
src/themes/blur/browser/element.css
··· 478 478 width: 100%; 479 479 } 480 480 481 - 482 481 .cover-info { 483 482 display: flex; 484 483 flex-direction: column;
+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>