392 lines
17 KiB
TypeScript
392 lines
17 KiB
TypeScript
import { useState } from 'react'
|
|
import {
|
|
Play,
|
|
Pause,
|
|
SkipBack,
|
|
SkipForward,
|
|
Shuffle,
|
|
Repeat,
|
|
Repeat1,
|
|
X,
|
|
ListMusic,
|
|
Heart,
|
|
Volume2,
|
|
VolumeX,
|
|
ChevronDown,
|
|
} from '../../lib/icons'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { useMusicStore } from '../../stores/music-store'
|
|
import { getBestImage, getStoredServerUrl } from '../../api/jellyfin'
|
|
|
|
interface NowPlayingProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export default function NowPlaying({ isOpen, onClose }: NowPlayingProps) {
|
|
const [showQueue, setShowQueue] = useState(false)
|
|
const {
|
|
currentTrack,
|
|
isPlaying,
|
|
currentTime,
|
|
duration,
|
|
shuffle,
|
|
repeat,
|
|
queue,
|
|
queueIndex,
|
|
volume,
|
|
isMuted,
|
|
pause,
|
|
resume,
|
|
nextTrack,
|
|
prevTrack,
|
|
toggleShuffle,
|
|
cycleRepeat,
|
|
seekTo,
|
|
toggleMute,
|
|
setVolume,
|
|
} = useMusicStore()
|
|
|
|
const serverUrl = getStoredServerUrl()
|
|
|
|
const imageUrl = currentTrack
|
|
? getBestImage(serverUrl, currentTrack, 'primary', 800)
|
|
: ''
|
|
const bgImageUrl = currentTrack
|
|
? getBestImage(serverUrl, currentTrack, 'primary', 320)
|
|
: ''
|
|
|
|
const title = currentTrack?.Name || 'Unknown track'
|
|
const artist = currentTrack?.AlbumArtist || currentTrack?.Artists?.[0] || ''
|
|
const album = currentTrack?.Album || ''
|
|
|
|
const RepeatIcon = repeat === 'one' ? Repeat1 : Repeat
|
|
const VolIcon = isMuted || volume === 0 ? VolumeX : Volume2
|
|
|
|
function formatTime(s: number): string {
|
|
if (!s || !isFinite(s)) return '0:00'
|
|
const m = Math.floor(s / 60)
|
|
const sec = Math.floor(s % 60)
|
|
return `${m}:${sec.toString().padStart(2, '0')}`
|
|
}
|
|
|
|
const playedPercent = duration > 0 ? (currentTime / duration) * 100 : 0
|
|
|
|
function handleScrubClick(e: React.MouseEvent<HTMLDivElement>) {
|
|
const rect = e.currentTarget.getBoundingClientRect()
|
|
const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
|
|
seekTo(pct * duration)
|
|
}
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && currentTrack && (
|
|
<motion.div
|
|
initial={{ y: '100%' }}
|
|
animate={{ y: 0 }}
|
|
exit={{ y: '100%' }}
|
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
|
className="fixed inset-0 z-fullscreen flex"
|
|
>
|
|
{/* ── Cinematic background ────────────────────────────── */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
{bgImageUrl && (
|
|
<>
|
|
{/* Heavy blurred album art as ambient backdrop */}
|
|
<motion.div
|
|
initial={{ scale: 1.04 }}
|
|
animate={{ scale: 1.12 }}
|
|
transition={{ duration: 30, ease: 'linear', repeat: Infinity, repeatType: 'reverse' }}
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: `url(${bgImageUrl})`,
|
|
filter: 'blur(80px) saturate(140%)',
|
|
opacity: 0.55,
|
|
}}
|
|
/>
|
|
{/* Color wash */}
|
|
<div className="absolute inset-0 bg-void/65" />
|
|
<div className="absolute inset-0 bg-gradient-to-b from-void/40 via-transparent to-void/80" />
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Header ────────────────────────────────────────── */}
|
|
<div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-6 pt-5">
|
|
<button
|
|
onClick={onClose}
|
|
className="group flex items-center gap-2 text-white/70 hover:text-white transition-colors px-2 py-1 rounded-md focus-ring"
|
|
>
|
|
<ChevronDown size={20} strokeWidth={2.25} className="transition-transform duration-200 group-hover:translate-y-0.5" />
|
|
<span className="text-[12px] font-medium uppercase tracking-[0.14em]">Hide</span>
|
|
</button>
|
|
|
|
<span className="text-[11px] uppercase tracking-[0.18em] text-white/55 font-semibold">
|
|
Now playing
|
|
</span>
|
|
|
|
<button
|
|
onClick={onClose}
|
|
className="w-9 h-9 rounded-full bg-white/8 hover:bg-white/15 backdrop-blur grid place-items-center text-white/70 hover:text-white transition-all duration-200 focus-ring"
|
|
aria-label="Close"
|
|
>
|
|
<X size={17} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* ── Main content ─────────────────────────────────── */}
|
|
<div className="relative flex-1 flex flex-col items-center justify-center px-8 pt-14 pb-10">
|
|
{/* Album art */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30, scale: 0.94 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1], delay: 0.15 }}
|
|
className="relative mb-9"
|
|
>
|
|
{/* Glow halo */}
|
|
<div className="absolute inset-0 rounded-2xl bg-accent/20 blur-3xl scale-110" />
|
|
{/* Reflection-like shadow */}
|
|
<div className="absolute -bottom-6 left-4 right-4 h-12 bg-black/60 blur-2xl rounded-full opacity-70" />
|
|
|
|
<div className="relative w-[300px] h-[300px] md:w-[340px] md:h-[340px] rounded-2xl overflow-hidden ring-1 ring-white/10 shadow-[0_30px_80px_-20px_rgba(0,0,0,0.8)] bg-elevated">
|
|
{imageUrl ? (
|
|
<img src={imageUrl} alt={title} className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full grid place-items-center bg-gradient-to-br from-elevated to-surface">
|
|
<ListMusic size={72} className="text-text-3" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Track info */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 14 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1], delay: 0.3 }}
|
|
className="text-center mb-7 max-w-2xl"
|
|
>
|
|
<h2 className="font-display text-3xl md:text-4xl font-bold text-white tracking-tight mb-2 line-clamp-2">
|
|
{title}
|
|
</h2>
|
|
<p className="text-[15px] text-white/70 truncate">
|
|
{artist}
|
|
{album && (
|
|
<>
|
|
<span className="text-white/30 mx-2">·</span>
|
|
<span className="text-white/55">{album}</span>
|
|
</>
|
|
)}
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Scrubber */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1], delay: 0.4 }}
|
|
className="w-full max-w-md mb-6"
|
|
>
|
|
<div
|
|
onClick={handleScrubClick}
|
|
className="relative h-5 cursor-pointer group/scrub"
|
|
>
|
|
<div className="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-1 group-hover/scrub:h-1.5 rounded-full bg-white/15 overflow-hidden transition-all duration-150">
|
|
<div
|
|
className="absolute left-0 top-0 bottom-0 bg-accent rounded-full"
|
|
style={{ width: `${playedPercent}%` }}
|
|
/>
|
|
</div>
|
|
<div
|
|
className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3.5 h-3.5 rounded-full bg-accent shadow-[0_0_12px_rgba(245,182,66,0.6)] pointer-events-none transition-opacity duration-150 opacity-0 group-hover/scrub:opacity-100"
|
|
style={{ left: `${playedPercent}%` }}
|
|
/>
|
|
</div>
|
|
<div className="flex justify-between text-[11px] text-white/55 mt-1.5 tabular-nums font-medium">
|
|
<span>{formatTime(currentTime)}</span>
|
|
<span>-{formatTime(Math.max(0, duration - currentTime))}</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Transport */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1], delay: 0.5 }}
|
|
className="flex items-center gap-5 mb-6"
|
|
>
|
|
<NPButton onClick={toggleShuffle} active={shuffle} aria-label="Shuffle">
|
|
<Shuffle size={18} />
|
|
</NPButton>
|
|
<NPButton onClick={prevTrack} aria-label="Previous">
|
|
<SkipBack size={22} fill="currentColor" />
|
|
</NPButton>
|
|
|
|
<button
|
|
onClick={isPlaying ? pause : resume}
|
|
className="relative w-16 h-16 rounded-full bg-white text-void grid place-items-center transition-all duration-200 hover:scale-105 active:scale-95 shadow-[0_8px_24px_-6px_rgba(0,0,0,0.6)] focus-ring"
|
|
aria-label={isPlaying ? 'Pause' : 'Play'}
|
|
>
|
|
<div className="absolute inset-0 rounded-full bg-white/30 blur-2xl scale-110 opacity-0 hover:opacity-100 transition-opacity" />
|
|
{isPlaying ? (
|
|
<Pause size={26} fill="currentColor" />
|
|
) : (
|
|
<Play size={26} fill="currentColor" className="translate-x-0.5" />
|
|
)}
|
|
</button>
|
|
|
|
<NPButton onClick={nextTrack} aria-label="Next">
|
|
<SkipForward size={22} fill="currentColor" />
|
|
</NPButton>
|
|
<NPButton onClick={cycleRepeat} active={repeat !== 'off'} aria-label="Repeat">
|
|
<RepeatIcon size={18} />
|
|
</NPButton>
|
|
</motion.div>
|
|
|
|
{/* Secondary controls */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.6 }}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<NPButton aria-label="Favorite">
|
|
<Heart
|
|
size={16}
|
|
className={currentTrack.UserData?.IsFavorite ? 'text-accent' : ''}
|
|
fill={currentTrack.UserData?.IsFavorite ? 'currentColor' : 'none'}
|
|
/>
|
|
</NPButton>
|
|
|
|
{/* Volume */}
|
|
<div className="flex items-center gap-2 px-3 h-9 rounded-full bg-white/8 hover:bg-white/12 transition-colors">
|
|
<button onClick={toggleMute} className="text-white/70 hover:text-white transition-colors">
|
|
<VolIcon size={14} />
|
|
</button>
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={1}
|
|
step={0.01}
|
|
value={isMuted ? 0 : volume}
|
|
onChange={e => setVolume(Number(e.target.value))}
|
|
className="slider w-24"
|
|
aria-label="Volume"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setShowQueue(!showQueue)}
|
|
className={`flex items-center gap-2 h-9 px-3 rounded-full transition-all duration-200 text-[12px] font-medium focus-ring ${
|
|
showQueue
|
|
? 'bg-accent/15 text-accent border border-accent/25'
|
|
: 'bg-white/8 text-white/70 hover:bg-white/12 hover:text-white border border-transparent'
|
|
}`}
|
|
>
|
|
<ListMusic size={14} />
|
|
Queue
|
|
<span className="text-white/40">·</span>
|
|
<span className="tabular-nums">{queue.length}</span>
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* ── Queue panel ───────────────────────────────────── */}
|
|
<AnimatePresence>
|
|
{showQueue && (
|
|
<motion.div
|
|
initial={{ x: 360, opacity: 0 }}
|
|
animate={{ x: 0, opacity: 1 }}
|
|
exit={{ x: 360, opacity: 0 }}
|
|
transition={{ duration: 0.36, ease: [0.16, 1, 0.3, 1] }}
|
|
className="relative w-[340px] glass-strong border-l border-border overflow-y-auto content-scroll"
|
|
>
|
|
<div className="sticky top-0 px-6 py-4 bg-glass-strong backdrop-blur-xl border-b border-border z-10">
|
|
<p className="text-[10px] font-semibold text-text-2 uppercase tracking-[0.14em]">Up next</p>
|
|
<h3 className="text-[15px] font-semibold text-text-1 tracking-tight mt-0.5">
|
|
{queue.length} {queue.length === 1 ? 'track' : 'tracks'}
|
|
</h3>
|
|
</div>
|
|
<div className="p-3 space-y-1">
|
|
{queue.map((track, i) => {
|
|
const isActive = i === queueIndex
|
|
const thumbUrl = getBestImage(serverUrl, track, 'primary', 100)
|
|
return (
|
|
<div
|
|
key={`${track.Id}-${i}`}
|
|
className={`group flex items-center gap-3 p-2 rounded-lg transition-all duration-150 ${
|
|
isActive ? 'bg-accent/12 ring-1 ring-accent/25' : 'hover:bg-glass-light'
|
|
}`}
|
|
>
|
|
<div className="relative w-10 h-10 rounded-md overflow-hidden bg-elevated shrink-0 ring-1 ring-border">
|
|
{thumbUrl ? (
|
|
<img src={thumbUrl} alt="" className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full grid place-items-center text-text-3">
|
|
<ListMusic size={14} />
|
|
</div>
|
|
)}
|
|
{isActive && isPlaying && <Equalizer />}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className={`text-[13px] truncate font-medium tracking-tight ${isActive ? 'text-accent' : 'text-text-1'}`}>
|
|
{track.Name || 'Unknown'}
|
|
</p>
|
|
<p className="text-[11.5px] text-text-3 truncate">
|
|
{track.AlbumArtist || track.Artists?.[0] || 'Unknown artist'}
|
|
</p>
|
|
</div>
|
|
<span className="text-[10px] text-text-4 tabular-nums shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
{track.RunTimeTicks
|
|
? formatTime(Number(track.RunTimeTicks) / 10000000)
|
|
: ''}
|
|
</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|
|
|
|
function NPButton({
|
|
active,
|
|
children,
|
|
...props
|
|
}: React.ButtonHTMLAttributes<HTMLButtonElement> & { active?: boolean }) {
|
|
return (
|
|
<button
|
|
{...props}
|
|
className={`w-10 h-10 grid place-items-center rounded-full transition-all duration-200 hover:bg-white/12 focus-ring ${
|
|
active ? 'text-accent bg-accent/12' : 'text-white/80 hover:text-white'
|
|
}`}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function Equalizer() {
|
|
return (
|
|
<div className="absolute inset-0 grid place-items-center bg-black/55 backdrop-blur-sm">
|
|
<div className="flex items-end gap-[2px] h-3.5">
|
|
{[0, 1, 2].map(i => (
|
|
<div
|
|
key={i}
|
|
className="w-[3px] bg-accent rounded-full origin-bottom"
|
|
style={{
|
|
animation: `equalizer-bar 0.9s ease-in-out infinite`,
|
|
animationDelay: `${i * 0.15}s`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|