103 lines
3.5 KiB
Svelte
103 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import { Play, X } from "@lucide/svelte";
|
|
import { Button } from "$lib/components/ui/button";
|
|
import { player } from "$lib/player/store.svelte";
|
|
import type { Track } from "$lib/player/types";
|
|
|
|
function onRemove(id: number) {
|
|
player.remove(id);
|
|
}
|
|
|
|
function onJump(track: Track) {
|
|
player.playNext(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);
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
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>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="h-6 w-6 p-0"
|
|
onclick={() => player.clearQueue()}
|
|
>
|
|
<span class="sr-only">Clear</span>
|
|
<X class="h-3 w-3" />
|
|
</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 (track.id)}
|
|
<div
|
|
role="button"
|
|
tabindex="0"
|
|
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:active={player.currentId === track.id}
|
|
>
|
|
<div
|
|
class="w-8 flex-shrink-0 text-center text-xs text-muted-foreground/60 font-mono"
|
|
>
|
|
{#if player.currentId === track.id}
|
|
<div
|
|
class="w-2 h-2 bg-primary rounded-full mx-auto animate-pulse"
|
|
></div>
|
|
{:else}
|
|
<span class="group-hover:hidden">#</span>
|
|
<Play
|
|
class="hidden group-hover:block mx-auto h-3 w-3 text-muted-foreground"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div
|
|
class="font-medium truncate"
|
|
class:text-primary={player.currentId === track.id}
|
|
>
|
|
{track.title}
|
|
</div>
|
|
<div class="text-xs text-muted-foreground truncate">
|
|
{track.artist}
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
class="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onclick={(e) => {
|
|
e.stopPropagation();
|
|
onRemove(track.id);
|
|
}}
|
|
>
|
|
<X class="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@reference "../../../routes/layout.css";
|
|
.active {
|
|
@apply bg-muted/40;
|
|
}
|
|
</style>
|