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