feat(immersive): create unified ImmersivePlayer component
New component architecture: - ImmersivePlayer.svelte: Main container with tab system - ImmersiveHeader.svelte: Tabs (lyrics/credits/suggestions/visualizer) - ImmersiveControls.svelte: Bottom bar with all playback controls - ImmersiveArtwork.svelte: Album art with floating/vinyl variants - ImmersiveBackground.svelte: Optimized blur background (from Phase 1) Panel components: - LyricsPanel: Wrapper for existing LyricsLines - CreditsPanel: Placeholder (Phase 3) - SuggestionsPanel: Placeholder (Phase 4) - VisualizerPanel: Placeholder (Phase 5) Shared components: - ProgressBar: Reusable seek bar with keyboard support - VolumeSlider: Reusable volume control Features: - Tab-based navigation (L/C/S/V keyboard shortcuts) - Auto-hide UI after 4 seconds of inactivity - Full keyboard control (Space, Arrows, Escape) - Responsive layout (desktop/tablet/mobile) - Accessibility: ARIA roles, focus management
This commit is contained in:
vicrodh committed
1 parent
513614466e
commit
7c9f1820f8
11 files changed
+1730
No files matched your search
@@ -0,0 +1,115 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
artwork: string;
|
||||||
|
trackTitle: string;
|
||||||
|
variant?: 'floating' | 'vinyl';
|
||||||
|
}
|
||||||
|
|
||||||
|
let { artwork, trackTitle, variant = 'floating' }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="artwork-container" class:vinyl={variant === 'vinyl'}>
|
||||||
|
{#if variant === 'vinyl'}
|
||||||
|
<div class="vinyl-disc">
|
||||||
|
<div class="vinyl-grooves"></div>
|
||||||
|
<div class="vinyl-label">
|
||||||
|
<img src={artwork} alt={trackTitle} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="artwork-wrapper">
|
||||||
|
<img src={artwork} alt={trackTitle} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.artwork-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Floating variant (default) */
|
||||||
|
.artwork-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow:
|
||||||
|
0 32px 64px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-wrapper img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vinyl variant */
|
||||||
|
.vinyl-disc {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
#1a1a1a 0%,
|
||||||
|
#0a0a0a 50%,
|
||||||
|
#1a1a1a 100%
|
||||||
|
);
|
||||||
|
box-shadow:
|
||||||
|
0 32px 64px rgba(0, 0, 0, 0.6),
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl-grooves {
|
||||||
|
position: absolute;
|
||||||
|
inset: 5%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: repeating-radial-gradient(
|
||||||
|
circle at center,
|
||||||
|
transparent 0px,
|
||||||
|
transparent 2px,
|
||||||
|
rgba(255, 255, 255, 0.03) 2px,
|
||||||
|
rgba(255, 255, 255, 0.03) 3px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl-label {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 45%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl-label img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.artwork-wrapper,
|
||||||
|
.vinyl-disc {
|
||||||
|
max-width: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.artwork-wrapper,
|
||||||
|
.vinyl-disc {
|
||||||
|
max-width: 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,408 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Shuffle, SkipBack, Play, Pause, SkipForward, Repeat, Heart, List } from 'lucide-svelte';
|
||||||
|
import ProgressBar from './shared/ProgressBar.svelte';
|
||||||
|
import VolumeSlider from './shared/VolumeSlider.svelte';
|
||||||
|
import QualityBadge from '../QualityBadge.svelte';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
visible?: boolean;
|
||||||
|
// Track info
|
||||||
|
artwork: string;
|
||||||
|
trackTitle: string;
|
||||||
|
artist: string;
|
||||||
|
// Playback state
|
||||||
|
isPlaying: boolean;
|
||||||
|
currentTime: number;
|
||||||
|
duration: number;
|
||||||
|
// Controls
|
||||||
|
isShuffle: boolean;
|
||||||
|
repeatMode: 'off' | 'all' | 'one';
|
||||||
|
isFavorite: boolean;
|
||||||
|
volume: number;
|
||||||
|
// Quality info
|
||||||
|
quality?: string;
|
||||||
|
bitDepth?: number;
|
||||||
|
samplingRate?: number;
|
||||||
|
// Callbacks
|
||||||
|
onTogglePlay: () => void;
|
||||||
|
onSkipBack?: () => void;
|
||||||
|
onSkipForward?: () => void;
|
||||||
|
onSeek: (time: number) => void;
|
||||||
|
onToggleShuffle: () => void;
|
||||||
|
onToggleRepeat: () => void;
|
||||||
|
onToggleFavorite: () => void;
|
||||||
|
onVolumeChange: (volume: number) => void;
|
||||||
|
onOpenQueue?: () => void;
|
||||||
|
// Compact mode (hide some elements)
|
||||||
|
compact?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
visible = true,
|
||||||
|
artwork,
|
||||||
|
trackTitle,
|
||||||
|
artist,
|
||||||
|
isPlaying,
|
||||||
|
currentTime,
|
||||||
|
duration,
|
||||||
|
isShuffle,
|
||||||
|
repeatMode,
|
||||||
|
isFavorite,
|
||||||
|
volume,
|
||||||
|
quality,
|
||||||
|
bitDepth,
|
||||||
|
samplingRate,
|
||||||
|
onTogglePlay,
|
||||||
|
onSkipBack,
|
||||||
|
onSkipForward,
|
||||||
|
onSeek,
|
||||||
|
onToggleShuffle,
|
||||||
|
onToggleRepeat,
|
||||||
|
onToggleFavorite,
|
||||||
|
onVolumeChange,
|
||||||
|
onOpenQueue,
|
||||||
|
compact = false
|
||||||
|
}: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="immersive-controls" class:visible class:compact>
|
||||||
|
<!-- Left: Track Info -->
|
||||||
|
{#if !compact}
|
||||||
|
<div class="track-info">
|
||||||
|
<img src={artwork} alt="" class="mini-artwork" />
|
||||||
|
<div class="track-meta">
|
||||||
|
<div class="track-title">{trackTitle}</div>
|
||||||
|
<div class="track-artist">{artist}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Center: Playback Controls + Progress -->
|
||||||
|
<div class="playback-section">
|
||||||
|
<div class="controls">
|
||||||
|
<button
|
||||||
|
class="control-btn secondary"
|
||||||
|
class:active={isShuffle}
|
||||||
|
onclick={onToggleShuffle}
|
||||||
|
title="Shuffle"
|
||||||
|
>
|
||||||
|
<Shuffle size={18} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="control-btn"
|
||||||
|
onclick={onSkipBack}
|
||||||
|
disabled={!onSkipBack}
|
||||||
|
title="Previous"
|
||||||
|
>
|
||||||
|
<SkipBack size={20} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="control-btn play-btn"
|
||||||
|
onclick={onTogglePlay}
|
||||||
|
title={isPlaying ? 'Pause' : 'Play'}
|
||||||
|
>
|
||||||
|
{#if isPlaying}
|
||||||
|
<Pause size={24} />
|
||||||
|
{:else}
|
||||||
|
<Play size={24} class="play-icon" />
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="control-btn"
|
||||||
|
onclick={onSkipForward}
|
||||||
|
disabled={!onSkipForward}
|
||||||
|
title="Next"
|
||||||
|
>
|
||||||
|
<SkipForward size={20} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="control-btn secondary"
|
||||||
|
class:active={repeatMode !== 'off'}
|
||||||
|
onclick={onToggleRepeat}
|
||||||
|
title={repeatMode === 'off' ? 'Repeat' : repeatMode === 'all' ? 'Repeat All' : 'Repeat One'}
|
||||||
|
>
|
||||||
|
<Repeat size={18} />
|
||||||
|
{#if repeatMode === 'one'}
|
||||||
|
<span class="repeat-indicator">1</span>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="progress-wrapper">
|
||||||
|
<ProgressBar {currentTime} {duration} {onSeek} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: Volume + Actions -->
|
||||||
|
{#if !compact}
|
||||||
|
<div class="right-section">
|
||||||
|
<button
|
||||||
|
class="action-btn"
|
||||||
|
class:active={isFavorite}
|
||||||
|
onclick={onToggleFavorite}
|
||||||
|
title={isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
|
||||||
|
>
|
||||||
|
<Heart
|
||||||
|
size={18}
|
||||||
|
fill={isFavorite ? 'currentColor' : 'none'}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if onOpenQueue}
|
||||||
|
<button class="action-btn" onclick={onOpenQueue} title="Queue">
|
||||||
|
<List size={18} />
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="volume-wrapper">
|
||||||
|
<VolumeSlider {volume} {onVolumeChange} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if quality}
|
||||||
|
<div class="quality-wrapper">
|
||||||
|
<QualityBadge {quality} {bitDepth} {samplingRate} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.immersive-controls {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 20;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 24px;
|
||||||
|
padding: 20px 32px 28px;
|
||||||
|
background: linear-gradient(
|
||||||
|
to top,
|
||||||
|
rgba(0, 0, 0, 0.85) 0%,
|
||||||
|
rgba(0, 0, 0, 0.5) 50%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(8px);
|
||||||
|
transition: opacity 250ms ease, transform 250ms ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.immersive-controls.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track Info (Left) */
|
||||||
|
.track-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-artwork {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 6px;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-meta {
|
||||||
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Playback Section (Center) */
|
||||||
|
.playback-section {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: var(--alpha-85, rgba(255, 255, 255, 0.85));
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn:disabled {
|
||||||
|
opacity: 0.3;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn:not(:disabled):hover {
|
||||||
|
color: var(--text-primary, white);
|
||||||
|
background: var(--alpha-10, rgba(255, 255, 255, 0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.secondary {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
color: var(--alpha-60, rgba(255, 255, 255, 0.6));
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.secondary.active {
|
||||||
|
color: var(--accent-primary, #7c3aed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.play-btn {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
background: var(--alpha-15, rgba(255, 255, 255, 0.15));
|
||||||
|
color: var(--text-primary, white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.play-btn:hover {
|
||||||
|
background: var(--alpha-25, rgba(255, 255, 255, 0.25));
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.play-btn :global(.play-icon) {
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.repeat-indicator {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: 4px;
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Right Section */
|
||||||
|
.right-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
min-width: 200px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: var(--alpha-60, rgba(255, 255, 255, 0.6));
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn:hover {
|
||||||
|
color: var(--text-primary, white);
|
||||||
|
background: var(--alpha-10, rgba(255, 255, 255, 0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn.active {
|
||||||
|
color: var(--accent-primary, #7c3aed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-wrapper {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quality-wrapper {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Compact mode */
|
||||||
|
.immersive-controls.compact .playback-section {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.track-info,
|
||||||
|
.right-section {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.immersive-controls {
|
||||||
|
padding: 16px 24px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playback-section {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.immersive-controls {
|
||||||
|
padding: 12px 16px 20px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.play-btn {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.secondary {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,185 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { X, Maximize2, Minimize2, Music2, Info, Radio, BarChart3 } from 'lucide-svelte';
|
||||||
|
import { t } from '$lib/i18n';
|
||||||
|
|
||||||
|
export type ImmersiveTab = 'lyrics' | 'credits' | 'suggestions' | 'visualizer';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
activeTab: ImmersiveTab;
|
||||||
|
onTabChange: (tab: ImmersiveTab) => void;
|
||||||
|
onClose: () => void;
|
||||||
|
visible?: boolean;
|
||||||
|
hasLyrics?: boolean;
|
||||||
|
hasCredits?: boolean;
|
||||||
|
hasSuggestions?: boolean;
|
||||||
|
hasVisualizer?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
activeTab,
|
||||||
|
onTabChange,
|
||||||
|
onClose,
|
||||||
|
visible = true,
|
||||||
|
hasLyrics = true,
|
||||||
|
hasCredits = true,
|
||||||
|
hasSuggestions = true,
|
||||||
|
hasVisualizer = false
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
const tabs = $derived([
|
||||||
|
{ id: 'lyrics' as const, label: $t('player.lyrics'), icon: Music2, enabled: hasLyrics },
|
||||||
|
{ 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 },
|
||||||
|
].filter(tab => tab.enabled));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<header class="immersive-header" class:visible>
|
||||||
|
<!-- Left: Logo/Brand (optional) -->
|
||||||
|
<div class="header-left">
|
||||||
|
<!-- Reserved for future use -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Center/Right: Tabs -->
|
||||||
|
<nav class="tabs">
|
||||||
|
{#each tabs as tab (tab.id)}
|
||||||
|
<button
|
||||||
|
class="tab"
|
||||||
|
class:active={activeTab === tab.id}
|
||||||
|
onclick={() => onTabChange(tab.id)}
|
||||||
|
>
|
||||||
|
<tab.icon size={16} />
|
||||||
|
<span class="tab-label">{tab.label}</span>
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Right: Actions -->
|
||||||
|
<div class="header-actions">
|
||||||
|
<button class="action-btn" onclick={onClose} title={$t('actions.close') + ' (Esc)'}>
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.immersive-header {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 20;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 24px;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-8px);
|
||||||
|
transition: opacity 250ms ease, transform 250ms ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.immersive-header.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 4px;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
border: 1px solid var(--alpha-10, rgba(255, 255, 255, 0.1));
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--alpha-60, rgba(255, 255, 255, 0.6));
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
color: var(--alpha-90, rgba(255, 255, 255, 0.9));
|
||||||
|
background: var(--alpha-10, rgba(255, 255, 255, 0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
color: var(--text-primary, white);
|
||||||
|
background: var(--alpha-15, rgba(255, 255, 255, 0.15));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 100px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
border: 1px solid var(--alpha-10, rgba(255, 255, 255, 0.1));
|
||||||
|
border-radius: 50%;
|
||||||
|
color: var(--alpha-70, rgba(255, 255, 255, 0.7));
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn:hover {
|
||||||
|
color: var(--text-primary, white);
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.tabs {
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.immersive-header {
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,359 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { startActiveLineUpdates } from '$lib/stores/lyricsStore';
|
||||||
|
import ImmersiveBackground from './ImmersiveBackground.svelte';
|
||||||
|
import ImmersiveArtwork from './ImmersiveArtwork.svelte';
|
||||||
|
import ImmersiveHeader, { type ImmersiveTab } from './ImmersiveHeader.svelte';
|
||||||
|
import ImmersiveControls from './ImmersiveControls.svelte';
|
||||||
|
import LyricsPanel from './panels/LyricsPanel.svelte';
|
||||||
|
import CreditsPanel from './panels/CreditsPanel.svelte';
|
||||||
|
import SuggestionsPanel from './panels/SuggestionsPanel.svelte';
|
||||||
|
import VisualizerPanel from './panels/VisualizerPanel.svelte';
|
||||||
|
|
||||||
|
interface LyricsLine {
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
// Track info
|
||||||
|
artwork: string;
|
||||||
|
trackTitle: string;
|
||||||
|
artist: string;
|
||||||
|
album?: string;
|
||||||
|
trackId?: number;
|
||||||
|
artistId?: number;
|
||||||
|
// Quality
|
||||||
|
quality?: string;
|
||||||
|
bitDepth?: number;
|
||||||
|
samplingRate?: number;
|
||||||
|
// Playback state
|
||||||
|
isPlaying: boolean;
|
||||||
|
currentTime: number;
|
||||||
|
duration: number;
|
||||||
|
volume: number;
|
||||||
|
isShuffle: boolean;
|
||||||
|
repeatMode: 'off' | 'all' | 'one';
|
||||||
|
isFavorite: boolean;
|
||||||
|
// Callbacks
|
||||||
|
onTogglePlay: () => void;
|
||||||
|
onSkipBack?: () => void;
|
||||||
|
onSkipForward?: () => void;
|
||||||
|
onSeek: (time: number) => void;
|
||||||
|
onVolumeChange: (volume: number) => void;
|
||||||
|
onToggleShuffle: () => void;
|
||||||
|
onToggleRepeat: () => void;
|
||||||
|
onToggleFavorite: () => void;
|
||||||
|
onOpenQueue?: () => void;
|
||||||
|
// Lyrics
|
||||||
|
lyricsLines?: LyricsLine[];
|
||||||
|
lyricsActiveIndex?: number;
|
||||||
|
lyricsActiveProgress?: number;
|
||||||
|
lyricsSynced?: boolean;
|
||||||
|
lyricsLoading?: boolean;
|
||||||
|
lyricsError?: string | null;
|
||||||
|
// Feature flags
|
||||||
|
enableCredits?: boolean;
|
||||||
|
enableSuggestions?: boolean;
|
||||||
|
enableVisualizer?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
artwork,
|
||||||
|
trackTitle,
|
||||||
|
artist,
|
||||||
|
album,
|
||||||
|
trackId,
|
||||||
|
artistId,
|
||||||
|
quality,
|
||||||
|
bitDepth,
|
||||||
|
samplingRate,
|
||||||
|
isPlaying,
|
||||||
|
currentTime,
|
||||||
|
duration,
|
||||||
|
volume,
|
||||||
|
isShuffle,
|
||||||
|
repeatMode,
|
||||||
|
isFavorite,
|
||||||
|
onTogglePlay,
|
||||||
|
onSkipBack,
|
||||||
|
onSkipForward,
|
||||||
|
onSeek,
|
||||||
|
onVolumeChange,
|
||||||
|
onToggleShuffle,
|
||||||
|
onToggleRepeat,
|
||||||
|
onToggleFavorite,
|
||||||
|
onOpenQueue,
|
||||||
|
lyricsLines = [],
|
||||||
|
lyricsActiveIndex = -1,
|
||||||
|
lyricsActiveProgress = 0,
|
||||||
|
lyricsSynced = false,
|
||||||
|
lyricsLoading = false,
|
||||||
|
lyricsError = null,
|
||||||
|
enableCredits = true,
|
||||||
|
enableSuggestions = true,
|
||||||
|
enableVisualizer = false
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
// UI State
|
||||||
|
let activeTab: ImmersiveTab = $state('lyrics');
|
||||||
|
let showUI = $state(true);
|
||||||
|
let hideTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
|
const hasLyrics = $derived(lyricsLines.length > 0 || lyricsLoading);
|
||||||
|
const AUTO_HIDE_DELAY = 4000;
|
||||||
|
|
||||||
|
// Auto-hide UI after inactivity
|
||||||
|
function resetHideTimer() {
|
||||||
|
showUI = true;
|
||||||
|
if (hideTimeout) clearTimeout(hideTimeout);
|
||||||
|
hideTimeout = setTimeout(() => {
|
||||||
|
showUI = false;
|
||||||
|
}, AUTO_HIDE_DELAY);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseMove() {
|
||||||
|
resetHideTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleKeydown(e: KeyboardEvent) {
|
||||||
|
if (!isOpen) return;
|
||||||
|
|
||||||
|
switch (e.key) {
|
||||||
|
case 'Escape':
|
||||||
|
onClose();
|
||||||
|
break;
|
||||||
|
case ' ':
|
||||||
|
e.preventDefault();
|
||||||
|
onTogglePlay();
|
||||||
|
break;
|
||||||
|
case 'ArrowLeft':
|
||||||
|
if (e.shiftKey && onSkipBack) {
|
||||||
|
onSkipBack();
|
||||||
|
} else {
|
||||||
|
onSeek(Math.max(0, currentTime - 5));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'ArrowRight':
|
||||||
|
if (e.shiftKey && onSkipForward) {
|
||||||
|
onSkipForward();
|
||||||
|
} else {
|
||||||
|
onSeek(Math.min(duration, currentTime + 5));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'l':
|
||||||
|
case 'L':
|
||||||
|
activeTab = 'lyrics';
|
||||||
|
break;
|
||||||
|
case 'c':
|
||||||
|
case 'C':
|
||||||
|
if (enableCredits) activeTab = 'credits';
|
||||||
|
break;
|
||||||
|
case 's':
|
||||||
|
case 'S':
|
||||||
|
if (enableSuggestions) activeTab = 'suggestions';
|
||||||
|
break;
|
||||||
|
case 'v':
|
||||||
|
case 'V':
|
||||||
|
if (enableVisualizer) activeTab = 'visualizer';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
resetHideTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Setup event listeners when open
|
||||||
|
$effect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
resetHideTimer();
|
||||||
|
document.addEventListener('keydown', handleKeydown);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', handleKeydown);
|
||||||
|
if (hideTimeout) clearTimeout(hideTimeout);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Start lyrics updates when open and playing synced lyrics
|
||||||
|
$effect(() => {
|
||||||
|
if (isOpen && isPlaying && lyricsSynced) {
|
||||||
|
startActiveLineUpdates();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if isOpen}
|
||||||
|
<div
|
||||||
|
class="immersive-player"
|
||||||
|
onmousemove={handleMouseMove}
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label="Now Playing"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<!-- Background -->
|
||||||
|
<ImmersiveBackground {artwork} mode="blur" />
|
||||||
|
|
||||||
|
<!-- Header with tabs -->
|
||||||
|
<ImmersiveHeader
|
||||||
|
{activeTab}
|
||||||
|
onTabChange={(tab) => activeTab = tab}
|
||||||
|
{onClose}
|
||||||
|
visible={showUI}
|
||||||
|
hasLyrics={true}
|
||||||
|
hasCredits={enableCredits}
|
||||||
|
hasSuggestions={enableSuggestions}
|
||||||
|
hasVisualizer={enableVisualizer}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="main-content">
|
||||||
|
<!-- Left: Artwork -->
|
||||||
|
<div class="artwork-section">
|
||||||
|
<ImmersiveArtwork {artwork} {trackTitle} variant="floating" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: Active Panel -->
|
||||||
|
<div class="panel-section">
|
||||||
|
{#if activeTab === 'lyrics'}
|
||||||
|
<LyricsPanel
|
||||||
|
lines={lyricsLines}
|
||||||
|
activeIndex={lyricsActiveIndex}
|
||||||
|
activeProgress={lyricsActiveProgress}
|
||||||
|
isSynced={lyricsSynced}
|
||||||
|
isLoading={lyricsLoading}
|
||||||
|
error={lyricsError}
|
||||||
|
/>
|
||||||
|
{:else if activeTab === 'credits'}
|
||||||
|
<CreditsPanel {trackId} />
|
||||||
|
{:else if activeTab === 'suggestions'}
|
||||||
|
<SuggestionsPanel {trackId} {artistId} />
|
||||||
|
{:else if activeTab === 'visualizer'}
|
||||||
|
<VisualizerPanel {isPlaying} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom Controls -->
|
||||||
|
<ImmersiveControls
|
||||||
|
visible={showUI}
|
||||||
|
{artwork}
|
||||||
|
{trackTitle}
|
||||||
|
{artist}
|
||||||
|
{isPlaying}
|
||||||
|
{currentTime}
|
||||||
|
{duration}
|
||||||
|
{isShuffle}
|
||||||
|
{repeatMode}
|
||||||
|
{isFavorite}
|
||||||
|
{volume}
|
||||||
|
{quality}
|
||||||
|
{bitDepth}
|
||||||
|
{samplingRate}
|
||||||
|
{onTogglePlay}
|
||||||
|
{onSkipBack}
|
||||||
|
{onSkipForward}
|
||||||
|
{onSeek}
|
||||||
|
{onToggleShuffle}
|
||||||
|
{onToggleRepeat}
|
||||||
|
{onToggleFavorite}
|
||||||
|
{onVolumeChange}
|
||||||
|
{onOpenQueue}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.immersive-player {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: var(--bg-primary, #0a0a0b);
|
||||||
|
animation: fadeIn 200ms ease-out;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1400px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 80px 48px 140px;
|
||||||
|
gap: 60px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-section {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-section {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
max-width: 560px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.main-content {
|
||||||
|
padding: 70px 32px 130px;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-section {
|
||||||
|
max-width: 480px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.main-content {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 70px 24px 140px;
|
||||||
|
gap: 24px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-section {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-section {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.main-content {
|
||||||
|
padding: 60px 16px 130px;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
// Immersive Player Components
|
||||||
|
export { default as ImmersivePlayer } from './ImmersivePlayer.svelte';
|
||||||
|
export { default as ImmersiveBackground } from './ImmersiveBackground.svelte';
|
||||||
|
export { default as ImmersiveArtwork } from './ImmersiveArtwork.svelte';
|
||||||
|
export { default as ImmersiveHeader } from './ImmersiveHeader.svelte';
|
||||||
|
export { default as ImmersiveControls } from './ImmersiveControls.svelte';
|
||||||
|
|
||||||
|
// Panels
|
||||||
|
export { default as LyricsPanel } from './panels/LyricsPanel.svelte';
|
||||||
|
export { default as CreditsPanel } from './panels/CreditsPanel.svelte';
|
||||||
|
export { default as SuggestionsPanel } from './panels/SuggestionsPanel.svelte';
|
||||||
|
export { default as VisualizerPanel } from './panels/VisualizerPanel.svelte';
|
||||||
|
|
||||||
|
// Shared
|
||||||
|
export { default as ProgressBar } from './shared/ProgressBar.svelte';
|
||||||
|
export { default as VolumeSlider } from './shared/VolumeSlider.svelte';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
export type { ImmersiveTab } from './ImmersiveHeader.svelte';
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { t } from '$lib/i18n';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
trackId?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { trackId }: Props = $props();
|
||||||
|
|
||||||
|
// TODO: Implement credits fetching in Phase 3
|
||||||
|
let isLoading = $state(false);
|
||||||
|
let credits = $state<null>(null);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="credits-panel">
|
||||||
|
<div class="placeholder">
|
||||||
|
<span class="placeholder-icon">ℹ️</span>
|
||||||
|
<span class="placeholder-text">{$t('player.creditsComingSoon') || 'Credits coming soon'}</span>
|
||||||
|
<span class="placeholder-hint">Producer, Composer, Musicians...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.credits-panel {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 200px;
|
||||||
|
color: var(--alpha-40, rgba(255, 255, 255, 0.4));
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-icon {
|
||||||
|
font-size: 32px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-hint {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--alpha-30, rgba(255, 255, 255, 0.3));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import LyricsLines from '../../lyrics/LyricsLines.svelte';
|
||||||
|
import { t } from '$lib/i18n';
|
||||||
|
|
||||||
|
interface LyricsLine {
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
lines: LyricsLine[];
|
||||||
|
activeIndex?: number;
|
||||||
|
activeProgress?: number;
|
||||||
|
isSynced?: boolean;
|
||||||
|
isLoading?: boolean;
|
||||||
|
error?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
lines = [],
|
||||||
|
activeIndex = -1,
|
||||||
|
activeProgress = 0,
|
||||||
|
isSynced = false,
|
||||||
|
isLoading = false,
|
||||||
|
error = null
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
const hasLyrics = $derived(lines.length > 0);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="lyrics-panel">
|
||||||
|
{#if isLoading}
|
||||||
|
<div class="lyrics-state">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
<span>{$t('player.fetchingLyrics')}</span>
|
||||||
|
</div>
|
||||||
|
{:else if error}
|
||||||
|
<div class="lyrics-state">
|
||||||
|
<span class="error-text">{error}</span>
|
||||||
|
</div>
|
||||||
|
{:else if hasLyrics}
|
||||||
|
<div class="lyrics-container">
|
||||||
|
<LyricsLines
|
||||||
|
{lines}
|
||||||
|
{activeIndex}
|
||||||
|
{activeProgress}
|
||||||
|
{isSynced}
|
||||||
|
center={false}
|
||||||
|
compact={false}
|
||||||
|
immersive={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="lyrics-state">
|
||||||
|
<span class="no-lyrics">{$t('player.noLyrics') || 'No lyrics available'}</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.lyrics-panel {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lyrics-container {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
mask-image: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent 0%,
|
||||||
|
black 8%,
|
||||||
|
black 85%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
-webkit-mask-image: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent 0%,
|
||||||
|
black 8%,
|
||||||
|
black 85%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lyrics-container :global(.lyrics-lines) {
|
||||||
|
--text-primary: var(--alpha-95, rgba(255, 255, 255, 0.95));
|
||||||
|
--text-secondary: var(--alpha-50, rgba(255, 255, 255, 0.5));
|
||||||
|
--text-muted: var(--alpha-25, rgba(255, 255, 255, 0.25));
|
||||||
|
--bg-tertiary: var(--alpha-8, rgba(255, 255, 255, 0.08));
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lyrics-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 200px;
|
||||||
|
color: var(--alpha-50, rgba(255, 255, 255, 0.5));
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text {
|
||||||
|
color: var(--alpha-40, rgba(255, 255, 255, 0.4));
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-lyrics {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border: 2px solid var(--alpha-20, rgba(255, 255, 255, 0.2));
|
||||||
|
border-top-color: var(--alpha-80, rgba(255, 255, 255, 0.8));
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { t } from '$lib/i18n';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
trackId?: number;
|
||||||
|
artistId?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { trackId, artistId }: Props = $props();
|
||||||
|
|
||||||
|
// TODO: Implement suggestions fetching in Phase 4
|
||||||
|
let isLoading = $state(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="suggestions-panel">
|
||||||
|
<div class="placeholder">
|
||||||
|
<span class="placeholder-icon">📻</span>
|
||||||
|
<span class="placeholder-text">{$t('player.suggestionsComingSoon') || 'Suggestions coming soon'}</span>
|
||||||
|
<span class="placeholder-hint">Artist Radio, Track Radio, Similar Tracks...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.suggestions-panel {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 200px;
|
||||||
|
color: var(--alpha-40, rgba(255, 255, 255, 0.4));
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-icon {
|
||||||
|
font-size: 32px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-hint {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--alpha-30, rgba(255, 255, 255, 0.3));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { t } from '$lib/i18n';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
isPlaying?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { isPlaying = false }: Props = $props();
|
||||||
|
|
||||||
|
// TODO: Implement visualizer in Phase 5
|
||||||
|
// Will use spectrum-analyzer crate in Rust + Canvas rendering
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="visualizer-panel">
|
||||||
|
<div class="placeholder">
|
||||||
|
<span class="placeholder-icon">📊</span>
|
||||||
|
<span class="placeholder-text">{$t('player.visualizerComingSoon') || 'Visualizer coming soon'}</span>
|
||||||
|
<span class="placeholder-hint">Frequency Bars, Waveform, Circular...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.visualizer-panel {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 200px;
|
||||||
|
color: var(--alpha-40, rgba(255, 255, 255, 0.4));
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-icon {
|
||||||
|
font-size: 32px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-hint {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--alpha-30, rgba(255, 255, 255, 0.3));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,179 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
currentTime: number;
|
||||||
|
duration: number;
|
||||||
|
onSeek: (time: number) => void;
|
||||||
|
showTime?: boolean;
|
||||||
|
size?: 'small' | 'normal';
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
currentTime,
|
||||||
|
duration,
|
||||||
|
onSeek,
|
||||||
|
showTime = true,
|
||||||
|
size = 'normal'
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
let progressRef: HTMLDivElement | null = $state(null);
|
||||||
|
let isDragging = $state(false);
|
||||||
|
|
||||||
|
const progress = $derived(duration > 0 ? (currentTime / duration) * 100 : 0);
|
||||||
|
|
||||||
|
function formatTime(seconds: number): string {
|
||||||
|
if (!seconds || !isFinite(seconds)) return '0:00';
|
||||||
|
const mins = Math.floor(seconds / 60);
|
||||||
|
const secs = Math.floor(seconds % 60);
|
||||||
|
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseDown(e: MouseEvent) {
|
||||||
|
isDragging = true;
|
||||||
|
updateProgress(e);
|
||||||
|
document.addEventListener('mousemove', handleMouseMove);
|
||||||
|
document.addEventListener('mouseup', handleMouseUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseMove(e: MouseEvent) {
|
||||||
|
if (isDragging) updateProgress(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseUp() {
|
||||||
|
isDragging = false;
|
||||||
|
document.removeEventListener('mousemove', handleMouseMove);
|
||||||
|
document.removeEventListener('mouseup', handleMouseUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateProgress(e: MouseEvent) {
|
||||||
|
if (!progressRef) return;
|
||||||
|
const rect = progressRef.getBoundingClientRect();
|
||||||
|
const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
|
||||||
|
onSeek(Math.round((percentage / 100) * duration));
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleKeydown(e: KeyboardEvent) {
|
||||||
|
const step = e.shiftKey ? 10 : 5;
|
||||||
|
if (e.key === 'ArrowRight') {
|
||||||
|
e.preventDefault();
|
||||||
|
onSeek(Math.min(duration, currentTime + step));
|
||||||
|
} else if (e.key === 'ArrowLeft') {
|
||||||
|
e.preventDefault();
|
||||||
|
onSeek(Math.max(0, currentTime - step));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="progress-container" class:small={size === 'small'}>
|
||||||
|
{#if showTime}
|
||||||
|
<span class="time">{formatTime(currentTime)}</span>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-track"
|
||||||
|
bind:this={progressRef}
|
||||||
|
onmousedown={handleMouseDown}
|
||||||
|
onkeydown={handleKeydown}
|
||||||
|
role="slider"
|
||||||
|
tabindex="0"
|
||||||
|
aria-valuenow={currentTime}
|
||||||
|
aria-valuemin={0}
|
||||||
|
aria-valuemax={duration}
|
||||||
|
aria-label="Seek"
|
||||||
|
>
|
||||||
|
<div class="progress-fill" style="width: {progress}%"></div>
|
||||||
|
<div class="progress-thumb" style="left: {progress}%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if showTime}
|
||||||
|
<span class="time">{formatTime(duration)}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.progress-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container.small {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
color: var(--alpha-60, rgba(255, 255, 255, 0.6));
|
||||||
|
min-width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time:last-of-type {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-track {
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--alpha-20, rgba(255, 255, 255, 0.2));
|
||||||
|
border-radius: 2px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: height 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-track:hover,
|
||||||
|
.progress-track:focus-visible {
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-track:focus-visible {
|
||||||
|
outline: 2px solid var(--accent-primary, #7c3aed);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--text-primary, white);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: width 100ms linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-thumb {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--text-primary, white);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 150ms ease;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-track:hover .progress-thumb,
|
||||||
|
.progress-track:focus-visible .progress-thumb {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small variant */
|
||||||
|
.progress-container.small .time {
|
||||||
|
font-size: 11px;
|
||||||
|
min-width: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container.small .progress-track {
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container.small .progress-track:hover {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container.small .progress-thumb {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,160 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Volume2, VolumeX } from 'lucide-svelte';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
volume: number;
|
||||||
|
onVolumeChange: (volume: number) => void;
|
||||||
|
showIcon?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { volume, onVolumeChange, showIcon = true }: Props = $props();
|
||||||
|
|
||||||
|
let volumeRef: HTMLDivElement | null = $state(null);
|
||||||
|
let isDragging = $state(false);
|
||||||
|
let showValue = $state(false);
|
||||||
|
|
||||||
|
function handleMouseDown(e: MouseEvent) {
|
||||||
|
isDragging = true;
|
||||||
|
showValue = true;
|
||||||
|
updateVolume(e);
|
||||||
|
document.addEventListener('mousemove', handleMouseMove);
|
||||||
|
document.addEventListener('mouseup', handleMouseUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseMove(e: MouseEvent) {
|
||||||
|
if (isDragging) updateVolume(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseUp() {
|
||||||
|
isDragging = false;
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!isDragging) showValue = false;
|
||||||
|
}, 500);
|
||||||
|
document.removeEventListener('mousemove', handleMouseMove);
|
||||||
|
document.removeEventListener('mouseup', handleMouseUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateVolume(e: MouseEvent) {
|
||||||
|
if (!volumeRef) return;
|
||||||
|
const rect = volumeRef.getBoundingClientRect();
|
||||||
|
const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
|
||||||
|
onVolumeChange(Math.round(percentage));
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleMute() {
|
||||||
|
onVolumeChange(volume > 0 ? 0 : 50);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="volume-container">
|
||||||
|
{#if showIcon}
|
||||||
|
<button class="volume-icon" onclick={toggleMute} title={volume > 0 ? 'Mute' : 'Unmute'}>
|
||||||
|
{#if volume === 0}
|
||||||
|
<VolumeX size={18} />
|
||||||
|
{:else}
|
||||||
|
<Volume2 size={18} />
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="volume-slider">
|
||||||
|
<div class="volume-value" class:visible={showValue}>{volume}</div>
|
||||||
|
<div
|
||||||
|
class="volume-track"
|
||||||
|
bind:this={volumeRef}
|
||||||
|
onmousedown={handleMouseDown}
|
||||||
|
role="slider"
|
||||||
|
tabindex="0"
|
||||||
|
aria-valuenow={volume}
|
||||||
|
aria-valuemin={0}
|
||||||
|
aria-valuemax={100}
|
||||||
|
aria-label="Volume"
|
||||||
|
>
|
||||||
|
<div class="volume-fill" style="width: {volume}%"></div>
|
||||||
|
<div class="volume-thumb" style="left: {volume}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.volume-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: var(--alpha-70, rgba(255, 255, 255, 0.7));
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-icon:hover {
|
||||||
|
color: var(--text-primary, white);
|
||||||
|
background: var(--alpha-10, rgba(255, 255, 255, 0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider {
|
||||||
|
position: relative;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-value {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -28px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
color: var(--text-primary, white);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(4px);
|
||||||
|
transition: opacity 150ms ease, transform 150ms ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-value.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-track {
|
||||||
|
height: 4px;
|
||||||
|
background: var(--alpha-20, rgba(255, 255, 255, 0.2));
|
||||||
|
border-radius: 2px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--alpha-70, rgba(255, 255, 255, 0.7));
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-thumb {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--text-primary, white);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-track:hover .volume-thumb {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in new issue
Block a user