a simple web player for subsonic tinysub.devins.page
subsonic navidrome javascript
11
fork

Configure Feed

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

chore: improve virtual scroller code

+12 -24
+3 -2
src/lib/Queue.svelte
··· 219 219 > 220 220 {#if settings.artSong > 0} 221 221 {@const artId = track.albumId || track.coverArt || track.id} 222 - <div class="col-artwork" style="inline-size: {settings.artSong}px;"> 222 + <div class="col-artwork" style:inline-size="{settings.artSong}px"> 223 223 <img 224 224 class="artwork" 225 225 src={api.art(artId, settings.artSong)} ··· 227 227 artId, 228 228 settings.artSong * 2, 229 229 )} 2x" 230 - style="inline-size: {settings.artSong}px; block-size: {settings.artSong}px;" 230 + style:inline-size="{settings.artSong}px" 231 + style:block-size="{settings.artSong}px" 231 232 alt="" 232 233 loading="lazy" 233 234 />
+9 -22
src/lib/VirtualList.svelte
··· 1 1 <script lang="ts"> 2 - import { onMount, type Snippet } from "svelte"; 2 + import type { Snippet } from "svelte"; 3 3 4 4 let { 5 5 items, ··· 37 37 Math.ceil((scrollTop + containerHeight) / itemHeight) + 5, 38 38 ), 39 39 ); 40 - 41 - let visibleIndices = $derived( 42 - Array.from( 43 - { length: visibleEnd - visibleStart }, 44 - (_, index) => visibleStart + index, 45 - ), 46 - ); 47 - 48 - onMount(() => { 49 - const resizeObserver = new ResizeObserver((entries) => { 50 - containerHeight = entries[0].contentRect.height; 51 - }); 52 - resizeObserver.observe(container); 53 - return () => resizeObserver.disconnect(); 54 - }); 55 40 </script> 56 41 57 42 <div 58 43 bind:this={container} 44 + bind:clientHeight={containerHeight} 59 45 class="virtual-container" 60 - onscroll={(e) => (scrollTop = (e.target as HTMLDivElement).scrollTop)} 46 + onscroll={() => (scrollTop = container.scrollTop)} 61 47 tabindex="-1" 62 48 > 63 - <div class="virtual-spacer" style="block-size: {items.length * itemHeight}px"> 64 - {#each visibleIndices as index (index)} 49 + <div class="virtual-spacer" style:block-size="{items.length * itemHeight}px"> 50 + {#each items.slice(visibleStart, visibleEnd) as item, i (i + visibleStart)} 51 + {@const index = i + visibleStart} 65 52 <div 66 53 class="virtual-item" 67 - style="block-size: {itemHeight}px; transform: translateY({index * 68 - itemHeight}px)" 54 + style:block-size="{itemHeight}px" 55 + style:transform="translateY({index * itemHeight}px)" 69 56 > 70 - {@render children(items[index], index)} 57 + {@render children(item, index)} 71 58 </div> 72 59 {/each} 73 60 </div>