Rename FullScreenNowPlaying to ExpandedPlayer + add lyrics
ExpandedPlayer: - Renamed from FullScreenNowPlaying for clearer nomenclature - Added lyrics panel on right side (Cider-style blend) - Blurred album art background with gradient overlay - All buttons now have tooltips - Horizontal layout: artwork+controls left, lyrics right - Responsive breakpoints for smaller screens FocusMode: - Centered main layout (max-width: 1400px) - Fixed empty space on right side Nomenclature: - NowPlayingBar: Bottom bar (always visible) - ExpandedPlayer: Expanded view (click artwork) - FocusMode: Immersive lyrics view (from ExpandedPlayer)
This commit is contained in:
vicrodh committed
1 parent
afa1a71a4f
commit
8f77e01578
4 files changed
+801
-480
No files matched your search
@@ -0,0 +1,783 @@
|
||||
<script lang="ts">
|
||||
import { X, Shuffle, SkipBack, Play, Pause, SkipForward, Repeat, Heart, List, Maximize2, MoreHorizontal, Cast } from 'lucide-svelte';
|
||||
import QualityBadge from './QualityBadge.svelte';
|
||||
import LyricsLines from './lyrics/LyricsLines.svelte';
|
||||
|
||||
interface LyricsLine {
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
artwork: string;
|
||||
trackTitle: string;
|
||||
artist: string;
|
||||
album: string;
|
||||
quality: string;
|
||||
qualityLevel: number;
|
||||
bitDepth?: number;
|
||||
samplingRate?: number;
|
||||
isPlaying: boolean;
|
||||
onTogglePlay: () => void;
|
||||
onSkipBack?: () => void;
|
||||
onSkipForward?: () => void;
|
||||
currentTime: number;
|
||||
duration: number;
|
||||
onSeek: (time: number) => void;
|
||||
volume: number;
|
||||
onVolumeChange: (volume: number) => void;
|
||||
isShuffle: boolean;
|
||||
onToggleShuffle: () => void;
|
||||
repeatMode: 'off' | 'all' | 'one';
|
||||
onToggleRepeat: () => void;
|
||||
isFavorite: boolean;
|
||||
onToggleFavorite: () => void;
|
||||
onOpenQueue?: () => void;
|
||||
onOpenFocusMode?: () => void;
|
||||
onCast?: () => void;
|
||||
// Lyrics props
|
||||
lyricsLines?: LyricsLine[];
|
||||
lyricsActiveIndex?: number;
|
||||
lyricsActiveProgress?: number;
|
||||
lyricsSynced?: boolean;
|
||||
lyricsLoading?: boolean;
|
||||
lyricsError?: string | null;
|
||||
}
|
||||
|
||||
let {
|
||||
isOpen,
|
||||
onClose,
|
||||
artwork,
|
||||
trackTitle,
|
||||
artist,
|
||||
album,
|
||||
quality,
|
||||
qualityLevel,
|
||||
bitDepth,
|
||||
samplingRate,
|
||||
isPlaying,
|
||||
onTogglePlay,
|
||||
onSkipBack,
|
||||
onSkipForward,
|
||||
currentTime,
|
||||
duration,
|
||||
onSeek,
|
||||
volume,
|
||||
onVolumeChange,
|
||||
isShuffle,
|
||||
onToggleShuffle,
|
||||
repeatMode,
|
||||
onToggleRepeat,
|
||||
isFavorite,
|
||||
onToggleFavorite,
|
||||
onOpenQueue,
|
||||
onOpenFocusMode,
|
||||
onCast,
|
||||
lyricsLines = [],
|
||||
lyricsActiveIndex = -1,
|
||||
lyricsActiveProgress = 0,
|
||||
lyricsSynced = false,
|
||||
lyricsLoading = false,
|
||||
lyricsError = null
|
||||
}: Props = $props();
|
||||
|
||||
let progressRef: HTMLDivElement | null = $state(null);
|
||||
let volumeRef: HTMLDivElement | null = $state(null);
|
||||
let isDraggingProgress = $state(false);
|
||||
let isDraggingVolume = $state(false);
|
||||
|
||||
const progress = $derived((currentTime / duration) * 100 || 0);
|
||||
const hasLyrics = $derived(lyricsLines.length > 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 handleProgressMouseDown(e: MouseEvent) {
|
||||
isDraggingProgress = true;
|
||||
updateProgress(e);
|
||||
}
|
||||
|
||||
function updateProgress(e: MouseEvent) {
|
||||
if (progressRef) {
|
||||
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 handleVolumeMouseDown(e: MouseEvent) {
|
||||
isDraggingVolume = true;
|
||||
updateVolume(e);
|
||||
}
|
||||
|
||||
function updateVolume(e: MouseEvent) {
|
||||
if (volumeRef) {
|
||||
const rect = volumeRef.getBoundingClientRect();
|
||||
const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
|
||||
onVolumeChange(Math.round(percentage));
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(e: MouseEvent) {
|
||||
if (isDraggingProgress) updateProgress(e);
|
||||
if (isDraggingVolume) updateVolume(e);
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
isDraggingProgress = false;
|
||||
isDraggingVolume = false;
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (!isOpen) return;
|
||||
if (e.key === 'Escape') {
|
||||
onClose();
|
||||
} else if (e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onTogglePlay();
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (isDraggingProgress || isDraggingVolume) {
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (isOpen) {
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeydown);
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if isOpen}
|
||||
<div class="expanded-player">
|
||||
<!-- Blurred Background -->
|
||||
<div class="background">
|
||||
<img src={artwork} alt="" aria-hidden="true" />
|
||||
<div class="background-overlay"></div>
|
||||
</div>
|
||||
|
||||
<!-- Close Button -->
|
||||
<button class="close-btn" onclick={onClose} title="Close (Esc)">
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
<!-- Left Side: Artwork + Track Info -->
|
||||
<div class="left-section">
|
||||
<div class="artwork">
|
||||
<img src={artwork} alt={trackTitle} />
|
||||
</div>
|
||||
|
||||
<div class="track-info">
|
||||
<h1 class="title">{trackTitle}</h1>
|
||||
<h2 class="artist">{artist}</h2>
|
||||
<h3 class="album">{album}</h3>
|
||||
<div class="quality-info">
|
||||
<QualityBadge {quality} {bitDepth} {samplingRate} size="md" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="progress-container">
|
||||
<div class="time-display">
|
||||
<span>{formatTime(currentTime)}</span>
|
||||
<span>{formatTime(duration)}</span>
|
||||
</div>
|
||||
<div
|
||||
class="progress-bar"
|
||||
bind:this={progressRef}
|
||||
onmousedown={handleProgressMouseDown}
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-valuenow={currentTime}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={duration}
|
||||
>
|
||||
<div class="progress-fill" style="width: {progress}%"></div>
|
||||
<div class="progress-thumb" style="left: {progress}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Playback Controls -->
|
||||
<div class="controls">
|
||||
<button
|
||||
class="control-btn"
|
||||
class:active={isShuffle}
|
||||
onclick={onToggleShuffle}
|
||||
title="Shuffle"
|
||||
>
|
||||
<Shuffle size={22} />
|
||||
</button>
|
||||
<button class="control-btn primary" onclick={onSkipBack} title="Previous">
|
||||
<SkipBack size={28} />
|
||||
</button>
|
||||
<button class="control-btn primary play-pause" onclick={onTogglePlay} title={isPlaying ? 'Pause' : 'Play'}>
|
||||
{#if isPlaying}
|
||||
<Pause size={36} />
|
||||
{:else}
|
||||
<Play size={36} class="play-icon" />
|
||||
{/if}
|
||||
</button>
|
||||
<button class="control-btn primary" onclick={onSkipForward} title="Next">
|
||||
<SkipForward size={28} />
|
||||
</button>
|
||||
<button
|
||||
class="control-btn"
|
||||
class:active={repeatMode !== 'off'}
|
||||
onclick={onToggleRepeat}
|
||||
title={repeatMode === 'off' ? 'Repeat' : repeatMode === 'all' ? 'Repeat All' : 'Repeat One'}
|
||||
>
|
||||
<Repeat size={22} />
|
||||
{#if repeatMode === 'one'}
|
||||
<span class="repeat-one">1</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Volume Control -->
|
||||
<div class="volume-container">
|
||||
<div
|
||||
class="volume-bar"
|
||||
bind:this={volumeRef}
|
||||
onmousedown={handleVolumeMouseDown}
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-valuenow={volume}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
title="Volume"
|
||||
>
|
||||
<div class="volume-fill" style="width: {volume}%"></div>
|
||||
<div class="volume-thumb" style="left: {volume}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Actions -->
|
||||
<div class="bottom-actions">
|
||||
<button class="action-btn" onclick={onOpenQueue} title="Queue">
|
||||
<List size={22} />
|
||||
</button>
|
||||
<button class="action-btn" onclick={onOpenFocusMode} title="Focus Mode">
|
||||
<Maximize2 size={22} />
|
||||
</button>
|
||||
<button class="action-btn" onclick={onCast} title="Cast to device">
|
||||
<Cast size={22} />
|
||||
</button>
|
||||
<button
|
||||
class="action-btn"
|
||||
class:active={isFavorite}
|
||||
onclick={onToggleFavorite}
|
||||
title={isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
|
||||
>
|
||||
<Heart size={22} fill={isFavorite ? 'var(--accent-primary)' : 'none'} color={isFavorite ? 'var(--accent-primary)' : 'currentColor'} />
|
||||
</button>
|
||||
<button class="action-btn" title="More options">
|
||||
<MoreHorizontal size={22} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side: Lyrics -->
|
||||
<div class="right-section">
|
||||
{#if lyricsLoading}
|
||||
<div class="lyrics-state">
|
||||
<div class="spinner"></div>
|
||||
<span>Loading lyrics...</span>
|
||||
</div>
|
||||
{:else if lyricsError}
|
||||
<div class="lyrics-state">
|
||||
<span class="error-text">{lyricsError}</span>
|
||||
</div>
|
||||
{:else if hasLyrics}
|
||||
<div class="lyrics-container">
|
||||
<LyricsLines
|
||||
lines={lyricsLines}
|
||||
activeIndex={lyricsActiveIndex}
|
||||
activeProgress={lyricsActiveProgress}
|
||||
isSynced={lyricsSynced}
|
||||
center={false}
|
||||
compact={false}
|
||||
immersive={true}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="lyrics-state">
|
||||
<span class="no-lyrics">No lyrics available</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.expanded-player {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #0a0a0a;
|
||||
animation: fadeIn 200ms ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Blurred Background */
|
||||
.background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: blur(100px) saturate(1.2) brightness(0.4);
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
.background-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 0.7) 0%,
|
||||
rgba(0, 0, 0, 0.5) 40%,
|
||||
rgba(0, 0, 0, 0.3) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
z-index: 10;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 60px;
|
||||
gap: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Left Section */
|
||||
.left-section {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 420px;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.artwork {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.artwork img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 0 0 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.album {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.quality-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
transition: width 100ms linear;
|
||||
}
|
||||
|
||||
.progress-thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.progress-bar:hover .progress-thumb {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.control-btn.primary {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.control-btn.active {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.repeat-one {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control-btn.play-pause {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.control-btn.play-pause:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.control-btn.play-pause :global(.play-icon) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* Volume */
|
||||
.volume-container {
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.volume-bar {
|
||||
height: 4px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.volume-fill {
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.volume-thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
.volume-bar:hover .volume-thumb {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Bottom Actions */
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.action-btn.active {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Right Section: Lyrics */
|
||||
.right-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.lyrics-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
max-height: calc(100vh - 160px);
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 85%,
|
||||
transparent 100%
|
||||
);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 85%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.lyrics-container :global(.lyrics-lines) {
|
||||
--text-primary: rgba(255, 255, 255, 0.9);
|
||||
--text-secondary: rgba(255, 255, 255, 0.45);
|
||||
--text-muted: rgba(255, 255, 255, 0.2);
|
||||
--bg-tertiary: rgba(255, 255, 255, 0.08);
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.lyrics-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 15px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: rgba(255, 100, 100, 0.6);
|
||||
}
|
||||
|
||||
.no-lyrics {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1100px) {
|
||||
.main-content {
|
||||
padding: 40px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.left-section {
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.artwork {
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.main-content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 24px;
|
||||
gap: 24px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.left-section {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
padding-right: 0;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.lyrics-container {
|
||||
max-height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.main-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.artwork {
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.control-btn.play-pause {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -302,11 +302,17 @@
|
||||
/* Main Layout */
|
||||
.main-layout {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
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: 40px;
|
||||
gap: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,474 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { X, Shuffle, SkipBack, Play, Pause, SkipForward, Repeat, Heart, List, Mic2, Maximize2, MoreHorizontal, Cast } from 'lucide-svelte';
|
||||
import QualityBadge from './QualityBadge.svelte';
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
artwork: string;
|
||||
trackTitle: string;
|
||||
artist: string;
|
||||
album: string;
|
||||
quality: string;
|
||||
qualityLevel: number;
|
||||
bitDepth?: number;
|
||||
samplingRate?: number;
|
||||
isPlaying: boolean;
|
||||
onTogglePlay: () => void;
|
||||
onSkipBack?: () => void;
|
||||
onSkipForward?: () => void;
|
||||
currentTime: number;
|
||||
duration: number;
|
||||
onSeek: (time: number) => void;
|
||||
volume: number;
|
||||
onVolumeChange: (volume: number) => void;
|
||||
isShuffle: boolean;
|
||||
onToggleShuffle: () => void;
|
||||
repeatMode: 'off' | 'all' | 'one';
|
||||
onToggleRepeat: () => void;
|
||||
isFavorite: boolean;
|
||||
onToggleFavorite: () => void;
|
||||
onOpenQueue?: () => void;
|
||||
onOpenFocusMode?: () => void;
|
||||
onCast?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
isOpen,
|
||||
onClose,
|
||||
artwork,
|
||||
trackTitle,
|
||||
artist,
|
||||
album,
|
||||
quality,
|
||||
qualityLevel,
|
||||
bitDepth,
|
||||
samplingRate,
|
||||
isPlaying,
|
||||
onTogglePlay,
|
||||
onSkipBack,
|
||||
onSkipForward,
|
||||
currentTime,
|
||||
duration,
|
||||
onSeek,
|
||||
volume,
|
||||
onVolumeChange,
|
||||
isShuffle,
|
||||
onToggleShuffle,
|
||||
repeatMode,
|
||||
onToggleRepeat,
|
||||
isFavorite,
|
||||
onToggleFavorite,
|
||||
onOpenQueue,
|
||||
onOpenFocusMode,
|
||||
onCast
|
||||
}: Props = $props();
|
||||
|
||||
let progressRef: HTMLDivElement;
|
||||
let volumeRef: HTMLDivElement;
|
||||
let isDraggingProgress = $state(false);
|
||||
let isDraggingVolume = $state(false);
|
||||
|
||||
const progress = $derived((currentTime / duration) * 100);
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function handleProgressMouseDown(e: MouseEvent) {
|
||||
isDraggingProgress = true;
|
||||
updateProgress(e);
|
||||
}
|
||||
|
||||
function updateProgress(e: MouseEvent) {
|
||||
if (progressRef) {
|
||||
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 handleVolumeMouseDown(e: MouseEvent) {
|
||||
isDraggingVolume = true;
|
||||
updateVolume(e);
|
||||
}
|
||||
|
||||
function updateVolume(e: MouseEvent) {
|
||||
if (volumeRef) {
|
||||
const rect = volumeRef.getBoundingClientRect();
|
||||
const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
|
||||
onVolumeChange(Math.round(percentage));
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(e: MouseEvent) {
|
||||
if (isDraggingProgress) updateProgress(e);
|
||||
if (isDraggingVolume) updateVolume(e);
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
isDraggingProgress = false;
|
||||
isDraggingVolume = false;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (isDraggingProgress || isDraggingVolume) {
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if isOpen}
|
||||
<div class="fullscreen-player">
|
||||
<!-- Close Button -->
|
||||
<button class="close-btn" onclick={onClose}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<!-- Album Artwork -->
|
||||
<div class="artwork">
|
||||
<img src={artwork} alt={trackTitle} />
|
||||
</div>
|
||||
|
||||
<!-- Track Info -->
|
||||
<div class="track-info">
|
||||
<h1 class="title">{trackTitle}</h1>
|
||||
<h2 class="artist">{artist}</h2>
|
||||
<h3 class="album">{album}</h3>
|
||||
</div>
|
||||
|
||||
<!-- Quality Info -->
|
||||
<div class="quality-info">
|
||||
<QualityBadge {quality} {bitDepth} {samplingRate} size="md" />
|
||||
<div class="quality-text">{quality}</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="progress-container">
|
||||
<div
|
||||
class="progress-bar"
|
||||
bind:this={progressRef}
|
||||
onmousedown={handleProgressMouseDown}
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-valuenow={currentTime}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={duration}
|
||||
>
|
||||
<div class="progress-fill" style="width: {progress}%"></div>
|
||||
<div class="progress-thumb" style="left: {progress}%"></div>
|
||||
</div>
|
||||
<div class="time-display">
|
||||
<span>{formatTime(currentTime)}</span>
|
||||
<span>{formatTime(duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Playback Controls -->
|
||||
<div class="controls">
|
||||
<button class="control-btn" class:active={isShuffle} onclick={onToggleShuffle}>
|
||||
<Shuffle size={24} />
|
||||
</button>
|
||||
<button class="control-btn primary" onclick={onSkipBack}>
|
||||
<SkipBack size={32} />
|
||||
</button>
|
||||
<button class="control-btn primary play-pause" onclick={onTogglePlay}>
|
||||
{#if isPlaying}
|
||||
<Pause size={40} />
|
||||
{:else}
|
||||
<Play size={40} />
|
||||
{/if}
|
||||
</button>
|
||||
<button class="control-btn primary" onclick={onSkipForward}>
|
||||
<SkipForward size={32} />
|
||||
</button>
|
||||
<button class="control-btn" class:active={repeatMode !== 'off'} onclick={onToggleRepeat}>
|
||||
<Repeat size={24} />
|
||||
{#if repeatMode === 'one'}
|
||||
<span class="repeat-one">1</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Volume Control -->
|
||||
<div class="volume-container">
|
||||
<div
|
||||
class="volume-bar"
|
||||
bind:this={volumeRef}
|
||||
onmousedown={handleVolumeMouseDown}
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-valuenow={volume}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
>
|
||||
<div class="volume-fill" style="width: {volume}%"></div>
|
||||
<div class="volume-thumb" style="left: {volume}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Actions -->
|
||||
<div class="bottom-actions">
|
||||
<button class="action-btn" onclick={onOpenQueue}>
|
||||
<List size={24} />
|
||||
</button>
|
||||
<button class="action-btn" onclick={onOpenFocusMode}>
|
||||
<Maximize2 size={24} />
|
||||
</button>
|
||||
<button class="action-btn" onclick={onCast} title="Cast to device">
|
||||
<Cast size={24} />
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<Mic2 size={24} />
|
||||
</button>
|
||||
<button class="action-btn" onclick={onToggleFavorite}>
|
||||
<Heart size={24} fill={isFavorite ? 'var(--accent-primary)' : 'none'} color={isFavorite ? 'var(--accent-primary)' : '#888888'} />
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<MoreHorizontal size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.fullscreen-player {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0a0a0a;
|
||||
animation: fadeIn 200ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: var(--text-primary);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.artwork {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.artwork img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-size: 20px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.album {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.quality-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.quality-text {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background-color: #333333;
|
||||
border-radius: 9999px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background-color: var(--accent-primary);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.progress-thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
.progress-bar:hover .progress-thumb {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: color 150ms ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.control-btn.primary {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.control-btn.primary:hover {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.control-btn.active {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.repeat-one {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.control-btn.play-pause {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.volume-container {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.volume-bar {
|
||||
height: 4px;
|
||||
background-color: #333333;
|
||||
border-radius: 9999px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.volume-fill {
|
||||
height: 100%;
|
||||
background-color: var(--accent-primary);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.volume-thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
.volume-bar:hover .volume-thumb {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
</style>
|
||||
+10
-4
@@ -197,7 +197,7 @@
|
||||
|
||||
// Overlays
|
||||
import QueuePanel from '$lib/components/QueuePanel.svelte';
|
||||
import FullScreenNowPlaying from '$lib/components/FullScreenNowPlaying.svelte';
|
||||
import ExpandedPlayer from '$lib/components/ExpandedPlayer.svelte';
|
||||
import FocusMode from '$lib/components/FocusMode.svelte';
|
||||
import PlaylistModal from '$lib/components/PlaylistModal.svelte';
|
||||
import CastPicker from '$lib/components/CastPicker.svelte';
|
||||
@@ -958,7 +958,7 @@
|
||||
|
||||
// Start/stop lyrics active line updates based on playback state and visibility
|
||||
$effect(() => {
|
||||
const lyricsVisible = lyricsSidebarVisible || isFocusModeOpen;
|
||||
const lyricsVisible = lyricsSidebarVisible || isFocusModeOpen || isFullScreenOpen;
|
||||
if (isPlaying && lyricsIsSynced && lyricsVisible) {
|
||||
startActiveLineUpdates();
|
||||
} else {
|
||||
@@ -1174,9 +1174,9 @@
|
||||
onSaveAsPlaylist={() => showToast('Save as playlist coming soon', 'info')}
|
||||
/>
|
||||
|
||||
<!-- Full Screen Now Playing -->
|
||||
<!-- Expanded Player -->
|
||||
{#if currentTrack}
|
||||
<FullScreenNowPlaying
|
||||
<ExpandedPlayer
|
||||
isOpen={isFullScreenOpen}
|
||||
onClose={closeFullScreen}
|
||||
artwork={currentTrack.artwork}
|
||||
@@ -1211,6 +1211,12 @@
|
||||
openFocusMode();
|
||||
}}
|
||||
onCast={openCastPicker}
|
||||
lyricsLines={lyricsLines.map(l => ({ text: l.text }))}
|
||||
lyricsActiveIndex={lyricsActiveIndex}
|
||||
lyricsActiveProgress={lyricsActiveProgress}
|
||||
lyricsSynced={lyricsIsSynced}
|
||||
lyricsLoading={lyricsStatus === 'loading'}
|
||||
lyricsError={lyricsStatus === 'error' ? lyricsError : (lyricsStatus === 'not_found' ? 'No lyrics found' : null)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
||||
Reference in new issue
Block a user