feat(immersive): add Queue tab to stay in immersive mode
- Create QueuePanel component for immersive mode - Add queue tab to ImmersiveHeader with ListMusic icon - Update ImmersivePlayer to render QueuePanel and pass queue data - Add Q keyboard shortcut to switch to queue tab - Pass queue tracks from +page.svelte to ImmersivePlayer Users can now manage their queue without leaving immersive mode.
This commit is contained in:
vicrodh committed
1 parent
f744615b0e
commit
07b7228538
4 files changed
+342
-3
No files matched your search
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { X, Maximize2, Minimize2, Music2, Info, Radio, BarChart3 } from 'lucide-svelte';
|
||||
import { X, Maximize2, Minimize2, Music2, Info, Radio, BarChart3, ListMusic } from 'lucide-svelte';
|
||||
import { t } from '$lib/i18n';
|
||||
|
||||
export type ImmersiveTab = 'lyrics' | 'credits' | 'suggestions' | 'visualizer';
|
||||
export type ImmersiveTab = 'lyrics' | 'credits' | 'suggestions' | 'visualizer' | 'queue';
|
||||
|
||||
interface Props {
|
||||
activeTab: ImmersiveTab;
|
||||
@@ -31,6 +31,7 @@
|
||||
{ id: 'credits' as const, label: $t('player.credits') || 'Credits', icon: Info, enabled: hasCredits },
|
||||
{ id: 'suggestions' as const, label: $t('player.suggestions') || 'Suggestions', icon: Radio, enabled: hasSuggestions },
|
||||
{ id: 'visualizer' as const, label: $t('player.visualizer') || 'Visualizer', icon: BarChart3, enabled: hasVisualizer },
|
||||
{ id: 'queue' as const, label: $t('player.queue') || 'Queue', icon: ListMusic, enabled: true },
|
||||
].filter(tab => tab.enabled));
|
||||
</script>
|
||||
|
||||
|
||||
@@ -8,11 +8,20 @@
|
||||
import CreditsPanel from './panels/CreditsPanel.svelte';
|
||||
import SuggestionsPanel from './panels/SuggestionsPanel.svelte';
|
||||
import VisualizerPanel from './panels/VisualizerPanel.svelte';
|
||||
import QueuePanel from './panels/QueuePanel.svelte';
|
||||
|
||||
interface LyricsLine {
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface QueueTrack {
|
||||
id: string | number;
|
||||
title: string;
|
||||
artist: string;
|
||||
artwork: string;
|
||||
duration?: string | number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
@@ -56,6 +65,11 @@
|
||||
enableCredits?: boolean;
|
||||
enableSuggestions?: boolean;
|
||||
enableVisualizer?: boolean;
|
||||
// Queue
|
||||
queueTracks?: QueueTrack[];
|
||||
queueCurrentIndex?: number;
|
||||
onQueuePlayTrack?: (index: number) => void;
|
||||
onQueueClear?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -94,7 +108,11 @@
|
||||
lyricsError = null,
|
||||
enableCredits = true,
|
||||
enableSuggestions = true,
|
||||
enableVisualizer = false
|
||||
enableVisualizer = false,
|
||||
queueTracks = [],
|
||||
queueCurrentIndex = 0,
|
||||
onQueuePlayTrack,
|
||||
onQueueClear
|
||||
}: Props = $props();
|
||||
|
||||
// UI State
|
||||
@@ -159,6 +177,10 @@
|
||||
case 'V':
|
||||
if (enableVisualizer) activeTab = 'visualizer';
|
||||
break;
|
||||
case 'q':
|
||||
case 'Q':
|
||||
activeTab = 'queue';
|
||||
break;
|
||||
}
|
||||
resetHideTimer();
|
||||
}
|
||||
@@ -232,6 +254,13 @@
|
||||
<SuggestionsPanel {trackId} {artistId} />
|
||||
{:else if activeTab === 'visualizer'}
|
||||
<VisualizerPanel {isPlaying} />
|
||||
{:else if activeTab === 'queue'}
|
||||
<QueuePanel
|
||||
tracks={queueTracks}
|
||||
currentIndex={queueCurrentIndex}
|
||||
onPlayTrack={(index) => onQueuePlayTrack?.(index)}
|
||||
onClear={onQueueClear}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,297 @@
|
||||
<script lang="ts">
|
||||
import { List, Play } from 'lucide-svelte';
|
||||
import { t } from '$lib/i18n';
|
||||
|
||||
interface QueueTrack {
|
||||
id: string | number;
|
||||
title: string;
|
||||
artist: string;
|
||||
artwork: string;
|
||||
duration?: string | number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tracks: QueueTrack[];
|
||||
currentIndex: number;
|
||||
onPlayTrack: (index: number) => void;
|
||||
onClear?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
tracks = [],
|
||||
currentIndex = 0,
|
||||
onPlayTrack,
|
||||
onClear
|
||||
}: Props = $props();
|
||||
|
||||
const upcomingTracks = $derived(tracks.slice(currentIndex + 1));
|
||||
const currentTrack = $derived(tracks[currentIndex]);
|
||||
const hasUpcoming = $derived(upcomingTracks.length > 0);
|
||||
|
||||
function formatDuration(duration?: string | number): string {
|
||||
if (!duration) return '';
|
||||
// If already a string (e.g., "3:45"), return as-is
|
||||
if (typeof duration === 'string') return duration;
|
||||
// If number (seconds), format it
|
||||
const mins = Math.floor(duration / 60);
|
||||
const secs = Math.floor(duration % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="queue-panel">
|
||||
<!-- Header -->
|
||||
<div class="panel-header">
|
||||
<div class="header-title">
|
||||
<List size={18} />
|
||||
<span>{$t('player.queue') || 'Queue'}</span>
|
||||
</div>
|
||||
{#if hasUpcoming && onClear}
|
||||
<button class="clear-btn" onclick={onClear}>
|
||||
{$t('actions.clearQueue') || 'Clear'}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Now Playing -->
|
||||
{#if currentTrack}
|
||||
<div class="section">
|
||||
<div class="section-label">{$t('player.nowPlaying') || 'Now Playing'}</div>
|
||||
<div class="track-item current">
|
||||
<img src={currentTrack.artwork} alt="" class="track-artwork" />
|
||||
<div class="track-info">
|
||||
<div class="track-title">{currentTrack.title}</div>
|
||||
<div class="track-artist">{currentTrack.artist}</div>
|
||||
</div>
|
||||
<div class="track-duration">{formatDuration(currentTrack.duration)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Up Next -->
|
||||
<div class="section upcoming-section">
|
||||
<div class="section-label">
|
||||
{$t('player.upNext') || 'Up Next'}
|
||||
{#if hasUpcoming}
|
||||
<span class="track-count">({upcomingTracks.length})</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if hasUpcoming}
|
||||
<div class="tracks-list">
|
||||
{#each upcomingTracks as track, i (track.id + '-' + i)}
|
||||
{@const actualIndex = currentIndex + 1 + i}
|
||||
<div class="track-item">
|
||||
<button
|
||||
class="play-btn"
|
||||
onclick={() => onPlayTrack(actualIndex)}
|
||||
title={$t('actions.playNow') || 'Play now'}
|
||||
>
|
||||
<Play size={14} />
|
||||
</button>
|
||||
<img src={track.artwork} alt="" class="track-artwork" />
|
||||
<div class="track-info">
|
||||
<div class="track-title">{track.title}</div>
|
||||
<div class="track-artist">{track.artist}</div>
|
||||
</div>
|
||||
<div class="track-duration">{formatDuration(track.duration)}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="empty-state">
|
||||
<span>{$t('player.queueEmpty') || 'Queue is empty'}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.queue-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 4px 16px;
|
||||
border-bottom: 1px solid var(--alpha-10, rgba(255, 255, 255, 0.1));
|
||||
margin-bottom: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
padding: 6px 12px;
|
||||
background: var(--alpha-10, rgba(255, 255, 255, 0.1));
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--alpha-70, rgba(255, 255, 255, 0.7));
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
background: var(--alpha-15, rgba(255, 255, 255, 0.15));
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.upcoming-section {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--alpha-50, rgba(255, 255, 255, 0.5));
|
||||
margin-bottom: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.track-count {
|
||||
font-weight: 400;
|
||||
color: var(--alpha-40, rgba(255, 255, 255, 0.4));
|
||||
}
|
||||
|
||||
.tracks-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.tracks-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.tracks-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tracks-list::-webkit-scrollbar-thumb {
|
||||
background: var(--alpha-20, rgba(255, 255, 255, 0.2));
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.track-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
transition: background 150ms ease;
|
||||
}
|
||||
|
||||
.track-item:hover {
|
||||
background: var(--alpha-10, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.track-item.current {
|
||||
background: var(--alpha-10, rgba(255, 255, 255, 0.1));
|
||||
border: 1px solid var(--alpha-15, rgba(255, 255, 255, 0.15));
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--alpha-15, rgba(255, 255, 255, 0.15));
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: var(--alpha-70, rgba(255, 255, 255, 0.7));
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 150ms ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.track-item:hover .play-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.play-btn:hover {
|
||||
background: var(--alpha-25, rgba(255, 255, 255, 0.25));
|
||||
color: var(--text-primary, white);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.track-artwork {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.track-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary, white);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.track-artist {
|
||||
font-size: 12px;
|
||||
color: var(--alpha-60, rgba(255, 255, 255, 0.6));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.track-duration {
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--alpha-50, rgba(255, 255, 255, 0.5));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120px;
|
||||
color: var(--alpha-40, rgba(255, 255, 255, 0.4));
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
@@ -3109,6 +3109,18 @@
|
||||
enableCredits={true}
|
||||
enableSuggestions={true}
|
||||
enableVisualizer={false}
|
||||
queueTracks={[
|
||||
...(currentQueueTrack ? [currentQueueTrack] : []),
|
||||
...queue
|
||||
]}
|
||||
queueCurrentIndex={0}
|
||||
onQueuePlayTrack={(index) => {
|
||||
// Index 0 is current track, 1+ is upcoming (index - 1 in queue array)
|
||||
if (index > 0) {
|
||||
handleQueueTrackPlay(queue[index - 1]?.id?.toString() ?? '');
|
||||
}
|
||||
}}
|
||||
onQueueClear={handleClearQueue}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
||||
Reference in new issue
Block a user