a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
chore: improve virtual scroller code
+12
-24
+3
-2
src/lib/Queue.svelte
+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
+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>