feat(queue): auto-scroll to currently playing on queue open
Adds a visible prop to Queue that triggers auto-scroll to the currently playing track when the queue becomes visible. PlayerMobile passes the drawer open state, PlayerDesktop passes whether a track exists.
This commit is contained in:
@@ -95,7 +95,7 @@
|
|||||||
<div class="flex-1 overflow-hidden relative p-4">
|
<div class="flex-1 overflow-hidden relative p-4">
|
||||||
<div class="absolute inset-0 p-4 pt-0">
|
<div class="absolute inset-0 p-4 pt-0">
|
||||||
<div class="h-full overflow-hidden rounded-lg border bg-muted/20">
|
<div class="h-full overflow-hidden rounded-lg border bg-muted/20">
|
||||||
<Queue />
|
<Queue visible={!!player.currentTrack} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -108,7 +108,7 @@
|
|||||||
<!-- Queue -->
|
<!-- Queue -->
|
||||||
<div class="flex-1 overflow-hidden relative mt-auto">
|
<div class="flex-1 overflow-hidden relative mt-auto">
|
||||||
<div class="absolute inset-0">
|
<div class="absolute inset-0">
|
||||||
<Queue />
|
<Queue visible={open} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { GripVertical, LocateFixed, Play, X } from "@lucide/svelte";
|
import { GripVertical, LocateFixed, Play, X } from "@lucide/svelte";
|
||||||
|
import { tick } from "svelte";
|
||||||
import * as AlertDialog from "$lib/components/ui/alert-dialog";
|
import * as AlertDialog from "$lib/components/ui/alert-dialog";
|
||||||
import { Button } from "$lib/components/ui/button";
|
import { Button } from "$lib/components/ui/button";
|
||||||
import VirtualList from "$lib/components/ui/VirtualList.svelte";
|
import VirtualList from "$lib/components/ui/VirtualList.svelte";
|
||||||
@@ -7,6 +8,8 @@
|
|||||||
import type { Track } from "$lib/player/types";
|
import type { Track } from "$lib/player/types";
|
||||||
import { songTypeNumberLabel } from "$lib/utils/amq";
|
import { songTypeNumberLabel } from "$lib/utils/amq";
|
||||||
|
|
||||||
|
let { visible = true }: { visible?: boolean } = $props();
|
||||||
|
|
||||||
let virtualList: ReturnType<typeof VirtualList>;
|
let virtualList: ReturnType<typeof VirtualList>;
|
||||||
|
|
||||||
function scrollToCurrentlyPlaying() {
|
function scrollToCurrentlyPlaying() {
|
||||||
@@ -17,6 +20,12 @@
|
|||||||
if (index !== -1) virtualList?.scrollToIndex(index);
|
if (index !== -1) virtualList?.scrollToIndex(index);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (visible) {
|
||||||
|
tick().then(() => scrollToCurrentlyPlaying());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const ITEM_HEIGHT = 64;
|
const ITEM_HEIGHT = 64;
|
||||||
|
|
||||||
function onRemove(id: number) {
|
function onRemove(id: number) {
|
||||||
|
|||||||
Reference in New Issue
Block a user