73e8372b0e
- Bulk replace text-white → text-foreground across 116 component files (preserving text-white/ opacity variants) - Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow classes from all components - Replace --duration-normal/--duration-immersive/--duration-slow with --sumi-duration-normal/--sumi-duration-slow across 130+ files - Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out - Replace focus:ring-blue-500 → focus:ring-primary (4 files) - Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms (SUMI anti-pattern: no scale on hover) - Clean up stale kodo- references in comments Co-authored-by: Cursor <cursoragent@cursor.com>
241 lines
12 KiB
TypeScript
241 lines
12 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { usePlayerStore } from '../store/playerStore';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Slider } from '@/components/ui/slider';
|
|
import { Tooltip } from '@/components/ui/tooltip';
|
|
import {
|
|
ChevronDown, Heart, MoreHorizontal, Share2,
|
|
Mic2, AlignLeft
|
|
} from 'lucide-react';
|
|
import { PlayPauseButton } from './PlayPauseButton'; // We might reuse or inline for consistent style
|
|
import { NextPreviousButtons } from './NextPreviousButtons';
|
|
import { RepeatShuffleButtons } from './RepeatShuffleButtons';
|
|
|
|
interface PlayerExpandedProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
currentTime: number;
|
|
duration: number;
|
|
onSeek: (time: number) => void;
|
|
player: any; // Using the player hook object
|
|
}
|
|
|
|
export function PlayerExpanded({ isOpen, onClose, currentTime, duration, onSeek, player }: PlayerExpandedProps) {
|
|
const { currentTrack } = usePlayerStore();
|
|
const [showLyrics, setShowLyrics] = useState(false);
|
|
const [autoScrollLyrics, setAutoScrollLyrics] = useState(true);
|
|
const lyricsScrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
if (!isOpen || !currentTrack) return null;
|
|
|
|
const lyrics = currentTrack.lyrics;
|
|
const formatTime = (seconds: number) => {
|
|
if (!seconds && seconds !== 0) return '0:00';
|
|
const m = Math.floor(seconds / 60);
|
|
const s = Math.floor(seconds % 60);
|
|
return `${m}:${s.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
// Auto-scroll lyrics to active line
|
|
useEffect(() => {
|
|
if (!autoScrollLyrics || !lyrics?.length || !lyricsScrollRef.current) return;
|
|
const activeIndex = lyrics.findIndex(
|
|
(line, i) =>
|
|
currentTime >= line.time &&
|
|
(i === lyrics.length - 1 || currentTime < lyrics[i + 1].time)
|
|
);
|
|
if (activeIndex >= 0) {
|
|
const el = lyricsScrollRef.current.children[activeIndex] as HTMLElement;
|
|
el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
}, [currentTime, lyrics, autoScrollLyrics]);
|
|
|
|
return (
|
|
<div className={cn(
|
|
"fixed inset-0 z-[500] bg-black/95 backdrop-blur-3xl overflow-hidden flex flex-col transition-all duration-[var(--sumi-duration-slow)]",
|
|
isOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-full pointer-events-none"
|
|
)}>
|
|
{/* Dynamic Background */}
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center opacity-30 blur-[100px] scale-110 transition-all duration-1000"
|
|
style={{ backgroundImage: `url(${currentTrack.cover || '/placeholder.svg'})` }}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/20 via-black/60 to-black/90" />
|
|
</div>
|
|
|
|
{/* Header */}
|
|
<div className="relative z-10 flex items-center justify-between p-6">
|
|
<Button variant="ghost" className="text-foreground hover:bg-white/10 rounded-full" onClick={onClose}>
|
|
<ChevronDown className="w-6 h-6" />
|
|
</Button>
|
|
<span className="text-xs font-bold tracking-widest uppercase text-white/50">Following the Signal</span>
|
|
<Button variant="ghost" className="text-foreground hover:bg-white/10 rounded-full">
|
|
<MoreHorizontal className="w-6 h-6" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className={cn(
|
|
"flex-1 flex flex-col md:flex-row items-center justify-center gap-12 px-8 pb-12 relative z-10 max-w-7xl mx-auto w-full transition-all duration-[var(--sumi-duration-slow)]",
|
|
showLyrics && "md:gap-8"
|
|
)}>
|
|
{/* Left: Album Art */}
|
|
<div className={cn(
|
|
"relative group transition-all duration-[var(--sumi-duration-slow)]",
|
|
showLyrics ? "w-full max-w-md md:max-w-sm aspect-square" : "w-full max-w-md md:max-w-xl aspect-square"
|
|
)}>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-xl blur-2xl transform group-hover:scale-105 transition-transform duration-700" />
|
|
<img
|
|
src={currentTrack.cover || '/placeholder.svg'}
|
|
alt={currentTrack.title}
|
|
className="w-full h-full object-cover rounded-xl shadow-cover-depth relative z-10 border border-white/10"
|
|
/>
|
|
</div>
|
|
|
|
{/* Right: Info & Controls */}
|
|
<div className="w-full max-w-xl flex flex-col justify-end space-y-8">
|
|
|
|
<div className="flex items-end justify-between">
|
|
<div className="space-y-2">
|
|
<h2 className="text-4xl md:text-5xl font-heading font-bold text-foreground leading-tight">
|
|
{currentTrack.title}
|
|
</h2>
|
|
<p className="text-xl md:text-2xl text-muted-foreground font-medium">
|
|
{currentTrack.artist}
|
|
</p>
|
|
</div>
|
|
<Button size="icon" variant="ghost" className="text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-full h-12 w-12 transition-all">
|
|
<Heart className="w-6 h-6" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Progress */}
|
|
<div className="space-y-4 group/progress">
|
|
<Slider
|
|
value={[currentTime]}
|
|
onValueChange={(val) => onSeek(val[0])}
|
|
max={duration || 100}
|
|
step={0.1}
|
|
className="py-2"
|
|
/>
|
|
<div className="flex items-center justify-between text-xs font-mono text-muted-foreground">
|
|
<span>{formatTime(currentTime)}</span>
|
|
<span>{formatTime(duration)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Controls */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
{/* Todo: Reuse or reimplement buttons with larger sizes */}
|
|
<RepeatShuffleButtons
|
|
repeat={player.repeat}
|
|
shuffle={player.shuffle}
|
|
onRepeatChange={player.setRepeat}
|
|
onShuffleToggle={player.toggleShuffle}
|
|
size="lg"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6 md:gap-8">
|
|
<NextPreviousButtons
|
|
onNext={player.next}
|
|
onPrevious={player.previous}
|
|
canGoNext={true}
|
|
canGoPrevious={true}
|
|
size="lg"
|
|
/>
|
|
<PlayPauseButton
|
|
isPlaying={player.isPlaying}
|
|
onClick={() => player.isPlaying ? player.pause() : player.resume()}
|
|
size="xl" // We need to support 'xl' maybe or modify the component
|
|
className="scale-125"
|
|
/>
|
|
<NextPreviousButtons
|
|
onNext={player.next}
|
|
onPrevious={player.previous}
|
|
canGoNext={true}
|
|
canGoPrevious={true}
|
|
size="lg"
|
|
className="hidden" // HACK: reusing comp just for previous button structure if needed
|
|
/>
|
|
{/* Wait, NextPrevious contains both buttons. I was using it wrong above. */}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Button size="icon" variant="ghost" className="text-muted-foreground hover:text-foreground">
|
|
<Share2 className="w-5 h-5" />
|
|
</Button>
|
|
<Tooltip content={showLyrics ? "Hide lyrics" : "Show lyrics"}>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className={cn("transition-colors", showLyrics ? "text-primary" : "text-muted-foreground hover:text-foreground")}
|
|
onClick={() => setShowLyrics(!showLyrics)}
|
|
>
|
|
<Mic2 className="w-5 h-5" />
|
|
</Button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lyrics Panel (when toggled and track has lyrics) */}
|
|
{showLyrics && (
|
|
<div
|
|
className={cn(
|
|
"group/lyrics w-full md:flex-1 h-layout-lyrics-sm md:h-layout-lyrics flex flex-col relative rounded-xl overflow-hidden border border-white/10 bg-black/30 backdrop-blur-md",
|
|
"animate-in slide-in-from-right-4 duration-300"
|
|
)}
|
|
onMouseEnter={() => setAutoScrollLyrics(false)}
|
|
onMouseLeave={() => setAutoScrollLyrics(true)}
|
|
>
|
|
<div className="absolute top-2 right-2 z-10 opacity-0 group-hover/lyrics:opacity-100 transition-opacity">
|
|
<Tooltip content="Auto-scroll">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={autoScrollLyrics ? "bg-primary/20 text-primary" : "text-muted-foreground"}
|
|
onClick={() => setAutoScrollLyrics(!autoScrollLyrics)}
|
|
>
|
|
<AlignLeft className="w-4 h-4" />
|
|
</Button>
|
|
</Tooltip>
|
|
</div>
|
|
{lyrics?.length ? (
|
|
<div
|
|
ref={lyricsScrollRef}
|
|
className="flex-1 overflow-y-auto custom-scrollbar px-6 py-8 space-y-6 text-center"
|
|
>
|
|
{lyrics.map((line, i) => {
|
|
const isActive =
|
|
currentTime >= line.time &&
|
|
(i === lyrics.length - 1 || currentTime < lyrics[i + 1].time);
|
|
return (
|
|
<p
|
|
key={i}
|
|
className={cn(
|
|
"text-xl md:text-2xl font-bold transition-all duration-[var(--sumi-duration-slow)] cursor-pointer hover:text-foreground",
|
|
isActive ? "text-foreground scale-105" : "text-white/20"
|
|
)}
|
|
onClick={() => onSeek(line.time)}
|
|
>
|
|
{line.text}
|
|
</p>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
|
|
<Mic2 className="w-12 h-12 mb-3 opacity-50" />
|
|
<p>No lyrics available for this track.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|