perf(player): virtualize queue list rendering
Extract a generic VirtualList.svelte component that only renders visible rows + overscan buffer using absolute positioning in a tall sentinel div. Queue.svelte now uses VirtualList with 64px row height (supporting 2-line titles) instead of rendering all items. This reduces DOM nodes from 1000+ to ~20 for large queues.
This commit is contained in:
@@ -1,18 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { GripVertical, Play, X } from "@lucide/svelte";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import VirtualList from "$lib/components/ui/VirtualList.svelte";
|
||||
import { player } from "$lib/player/store.svelte";
|
||||
import type { Track } from "$lib/player/types";
|
||||
import { songTypeNumberLabel } from "$lib/utils/amq";
|
||||
|
||||
const ITEM_HEIGHT = 64;
|
||||
|
||||
function onRemove(id: number) {
|
||||
player.remove(id);
|
||||
}
|
||||
|
||||
function onJump(track: Track) {
|
||||
// Wait, jump usually means play immediately?
|
||||
// "Jump to track" -> set as current.
|
||||
// If it's in the queue, we can just set currentId.
|
||||
player.playId(track.id);
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
function onDragOver(e: DragEvent, index: number) {
|
||||
e.preventDefault(); // allow drop
|
||||
e.preventDefault();
|
||||
if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
|
||||
dragOverIndex = index;
|
||||
}
|
||||
@@ -45,7 +45,14 @@
|
||||
class="flex flex-col h-full w-full bg-background/50 backdrop-blur rounded-lg border overflow-hidden"
|
||||
>
|
||||
<div class="px-4 py-3 border-b flex justify-between items-center bg-muted/20">
|
||||
<h3 class="font-semibold text-sm">Up Next</h3>
|
||||
<h3 class="font-semibold text-sm">
|
||||
Up Next
|
||||
{#if player.displayQueue.length > 0}
|
||||
<span class="text-muted-foreground font-normal ml-1"
|
||||
>({player.displayQueue.length})</span
|
||||
>
|
||||
{/if}
|
||||
</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@@ -57,13 +64,14 @@
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-2 space-y-1">
|
||||
{#if player.displayQueue.length === 0}
|
||||
<div class="text-center py-8 text-muted-foreground text-sm">
|
||||
Queue is empty
|
||||
</div>
|
||||
{:else}
|
||||
{#each player.displayQueue as track, i (track.id)}
|
||||
<VirtualList
|
||||
items={player.displayQueue}
|
||||
itemHeight={ITEM_HEIGHT}
|
||||
overscan={5}
|
||||
class="p-2"
|
||||
key={(track) => track.id}
|
||||
>
|
||||
{#snippet row({ item: track, index: i })}
|
||||
<div
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@@ -73,7 +81,7 @@
|
||||
ondrop={(e) => onDrop(e, i)}
|
||||
onclick={() => onJump(track)}
|
||||
onkeydown={(e) => e.key === "Enter" && onJump(track)}
|
||||
class="group flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-sm"
|
||||
class="group flex items-center gap-2 px-3 h-full rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-sm"
|
||||
class:active={player.currentId === track.id}
|
||||
class:border-t-2={dragOverIndex === i}
|
||||
class:border-primary={dragOverIndex === i}
|
||||
@@ -81,20 +89,16 @@
|
||||
<div
|
||||
class="w-6 shrink-0 flex items-center justify-center text-xs text-muted-foreground/60 font-mono"
|
||||
>
|
||||
<!-- Default: Number or Active Indicator -->
|
||||
<div
|
||||
class="group-hover:hidden flex items-center justify-center w-full h-full"
|
||||
>
|
||||
{#if player.currentId === track.id}
|
||||
<div
|
||||
class="w-2 h-2 bg-primary rounded-full animate-pulse"
|
||||
></div>
|
||||
<div class="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
|
||||
{:else}
|
||||
<span>{i + 1}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Hover: Grip Handle -->
|
||||
<div
|
||||
class="[@media(hover:hover)]:hidden group-hover:flex items-center justify-center w-full h-full cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-foreground"
|
||||
aria-label="Drag to reorder"
|
||||
@@ -105,7 +109,7 @@
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div
|
||||
class="font-medium"
|
||||
class="font-medium line-clamp-2 leading-tight"
|
||||
class:text-primary={player.currentId === track.id}
|
||||
>
|
||||
{track.animeName}
|
||||
@@ -116,7 +120,7 @@
|
||||
>{track.globalPercent}%</span
|
||||
>
|
||||
</div>
|
||||
<div class="text-xs text-foreground/80">
|
||||
<div class="text-xs text-foreground/80 truncate">
|
||||
{track.title} —
|
||||
<span class="text-muted-foreground">{track.artist}</span>
|
||||
</div>
|
||||
@@ -125,7 +129,7 @@
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-6 w-6 opacity-50 group-hover:opacity-100 transition-opacity"
|
||||
class="h-6 w-6 opacity-50 group-hover:opacity-100 transition-opacity shrink-0"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRemove(track.id);
|
||||
@@ -134,9 +138,14 @@
|
||||
<X class="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet empty()}
|
||||
<div class="text-center py-8 text-muted-foreground text-sm">
|
||||
Queue is empty
|
||||
</div>
|
||||
{/snippet}
|
||||
</VirtualList>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
101
src/lib/components/ui/VirtualList.svelte
Normal file
101
src/lib/components/ui/VirtualList.svelte
Normal file
@@ -0,0 +1,101 @@
|
||||
<!--
|
||||
Generic fixed-height virtual list.
|
||||
Usage:
|
||||
<VirtualList items={myArray} itemHeight={64} overscan={5}>
|
||||
{#snippet row({ item, index })}
|
||||
<div>…</div>
|
||||
{/snippet}
|
||||
</VirtualList>
|
||||
-->
|
||||
<script lang="ts" generics="T">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
type Props = {
|
||||
items: T[];
|
||||
itemHeight: number;
|
||||
overscan?: number;
|
||||
class?: string;
|
||||
row: Snippet<[{ item: T; index: number }]>;
|
||||
empty?: Snippet;
|
||||
key?: (item: T, index: number) => unknown;
|
||||
};
|
||||
|
||||
let {
|
||||
items,
|
||||
itemHeight,
|
||||
overscan = 5,
|
||||
class: className = "",
|
||||
row,
|
||||
empty,
|
||||
key,
|
||||
}: Props = $props();
|
||||
|
||||
let containerEl = $state<HTMLDivElement | null>(null);
|
||||
let scrollTop = $state(0);
|
||||
let containerHeight = $state(0);
|
||||
|
||||
const totalHeight = $derived(items.length * itemHeight);
|
||||
|
||||
const startIndex = $derived(
|
||||
Math.max(0, Math.floor(scrollTop / itemHeight) - overscan),
|
||||
);
|
||||
const endIndex = $derived(
|
||||
Math.min(
|
||||
items.length,
|
||||
Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan,
|
||||
),
|
||||
);
|
||||
const visibleItems = $derived(
|
||||
items.slice(startIndex, endIndex).map((item, i) => ({
|
||||
item,
|
||||
index: startIndex + i,
|
||||
})),
|
||||
);
|
||||
|
||||
function onScroll(e: Event) {
|
||||
scrollTop = (e.target as HTMLDivElement).scrollTop;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (!containerEl) return;
|
||||
const ro = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
containerHeight = entry.contentRect.height;
|
||||
}
|
||||
});
|
||||
ro.observe(containerEl);
|
||||
return () => ro.disconnect();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="virtual-list-container {className}"
|
||||
bind:this={containerEl}
|
||||
onscroll={onScroll}
|
||||
>
|
||||
{#if items.length === 0}
|
||||
{@render empty?.()}
|
||||
{:else}
|
||||
<div
|
||||
class="virtual-list-sentinel"
|
||||
style="height: {totalHeight}px; position: relative;"
|
||||
>
|
||||
{#each visibleItems as entry (key ? key(entry.item, entry.index) : entry.index)}
|
||||
<div
|
||||
class="virtual-list-item"
|
||||
style="position: absolute; top: {entry.index *
|
||||
itemHeight}px; left: 0; right: 0; height: {itemHeight}px;"
|
||||
>
|
||||
{@render row(entry)}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.virtual-list-container {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user