lfg2025/archy
1
0
Fork 0
Code Issues 27 Pull Requests 4 Actions Packages Projects Releases 74 Wiki Activity

feat(app): add music queue management with next/prev navigation

Browse Source 
Add queue (ShallowRef<Song[]>), currentIndex, playNext, playPrevious,
addToQueue, removeFromQueue to usePlayer. Auto-advance on song end.
Add prev/next buttons and queue count to PlayerBar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-03 20:22:51 +00:00
co-authored by Claude Opus 4.6
parent 81ccd69aae
commit 79691c9a25
2 changed files with 116 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/player/PlayerBar.vue
+36
View File
@@ -36,6 +36,19 @@
<div class="flex flex-col gap-1 flex-1 max-w-xl mx-4">
<div class="flex items-center gap-2">
<!-- Previous button -->
<button
class="w-8 h-8 rounded-full flex items-center justify-center shrink-0 transition-all hover:scale-105 active:scale-95"
:class="hasPrevious
? isDark ? 'text-white/70 hover:text-white/90' : 'text-gray-600 hover:text-gray-800'
: isDark ? 'text-white/20' : 'text-gray-300'"
:disabled="!hasPrevious"
@click="playPrevious"
>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z" />
</svg>
</button>
<button
class="w-12 h-12 rounded-full flex items-center justify-center glass-button shrink-0 transition-all hover:scale-105 active:scale-95"
@click="toggle"
@@ -51,6 +64,19 @@
<path d="M8 5v14l11-7L8 5z" />
</svg>
</button>
<!-- Next button -->
<button
class="w-8 h-8 rounded-full flex items-center justify-center shrink-0 transition-all hover:scale-105 active:scale-95"
:class="hasNext
? isDark ? 'text-white/70 hover:text-white/90' : 'text-gray-600 hover:text-gray-800'
: isDark ? 'text-white/20' : 'text-gray-300'"
:disabled="!hasNext"
@click="playNext"
>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z" />
</svg>
</button>
<span class="text-[10px] font-mono tabular-nums"
:class="isDark ? 'text-white/40' : 'text-gray-400'">
{{ formatTime(currentTime) }}
@@ -73,6 +99,11 @@
<p v-if="error" class="text-[10px] text-red-400">{{ error }}</p>
</div>
<span
v-if="queue.length > 1"
class="text-[10px] font-mono tabular-nums shrink-0"
:class="isDark ? 'text-white/30' : 'text-gray-400'"
>{{ queue.length }} songs</span>
<button
class="w-9 h-9 rounded-xl flex items-center justify-center path-glass-button path-glass-button-sm shrink-0 transition-all hover:scale-105"
@click="clear"
@@ -102,9 +133,14 @@ const {
currentTime,
duration,
progress,
queue,
hasNext,
hasPrevious,
toggle,
seek,
clear,
playNext,
playPrevious,
setContainer,
} = usePlayer()