CaZzzer/amqtrain
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add extra song information to player

Browse Source
This commit is contained in:
Yura
2026-02-10 05:00:53 -08:00
parent 864a11fac4
commit cdd90016f8
12 changed files with 213 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/lib/components/player/Queue.svelte
View File

@@ -3,6 +3,7 @@
import { Button } from "$lib/components/ui/button";
import { player } from "$lib/player/store.svelte";
import type { Track } from "$lib/player/types";
import { songTypeNumberLabel } from "$lib/utils/amq";
function onRemove(id: number) {
player.remove(id);
@@ -41,101 +42,113 @@
</script>
<div
class="flex flex-col h-full w-full bg-background/50 backdrop-blur rounded-lg border overflow-hidden"
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="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, i (track.id)}
<div
role="button"
tabindex="0"
draggable="true"
ondragstart={(e) => onDragStart(e, i)}
ondragover={(e) => onDragOver(e, i)}
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:active={player.currentId === track.id}
class:border-t-2={dragOverIndex === i}
class:border-primary={dragOverIndex === i}
>
<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>
{:else}
<span>{i + 1}</span>
{/if}
</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)}
<div
role="button"
tabindex="0"
draggable="true"
ondragstart={(e) => onDragStart(e, i)}
ondragover={(e) => onDragOver(e, i)}
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:active={player.currentId === track.id}
class:border-t-2={dragOverIndex === i}
class:border-primary={dragOverIndex === i}
>
<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>
{:else}
<span>{i + 1}</span>
{/if}
</div>
<!-- Hover: Grip Handle -->
<div
class="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"
>
<GripVertical class="h-4 w-4" />
</div>
</div>
<!-- Hover: Grip Handle -->
<div
class="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"
>
<GripVertical class="h-4 w-4" />
</div>
</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>
<div class="flex-1 min-w-0">
<div
class="font-medium"
class:text-primary={player.currentId === track.id}
>
{track.animeName}
<span class="tag"
>{songTypeNumberLabel(
track.type,
track.number,
)}</span
>
<span class="text-muted-foreground font-normal"
>{track.globalPercent}%</span
>
</div>
<div class="text-xs text-foreground/80">
{track.title} —
<span class="text-muted-foreground"
>{track.artist}</span
>
</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>
<Button
variant="ghost"
size="icon"
class="h-6 w-6 opacity-50 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;
}
@reference "../../../routes/layout.css";
.active {
@apply bg-muted/40;
}
</style>