feat: refactor player component structure and introduce new player controls, progress, track info, and volume components
This commit is contained in:
JSC
@@ -1,14 +1,5 @@
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { filesService } from '@/lib/api/services/files'
|
||||
import {
|
||||
type MessageResponse,
|
||||
@@ -20,30 +11,18 @@ import { soundsService } from '@/lib/api/services/sounds'
|
||||
import { PLAYER_EVENTS, playerEvents } from '@/lib/events'
|
||||
import { cn } from '@/lib/utils'
|
||||
import {
|
||||
ArrowRight,
|
||||
ArrowRightToLine,
|
||||
Download,
|
||||
ExternalLink,
|
||||
List,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
MoreVertical,
|
||||
Music,
|
||||
Pause,
|
||||
Play,
|
||||
Repeat,
|
||||
Repeat1,
|
||||
Shuffle,
|
||||
SkipBack,
|
||||
SkipForward,
|
||||
Square,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
} from 'lucide-react'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Playlist } from './Playlist'
|
||||
import { NumberFlowDuration } from '../ui/number-flow-duration'
|
||||
import { PlayerControls } from './PlayerControls'
|
||||
import { PlayerProgress } from './PlayerProgress'
|
||||
import { PlayerTrackInfo } from './PlayerTrackInfo'
|
||||
import { PlayerVolume } from './PlayerVolume'
|
||||
import { useRenderFlash } from '@/hooks/useRenderFlash'
|
||||
|
||||
export type PlayerDisplayMode = 'normal' | 'minimized' | 'maximized' | 'sidebar'
|
||||
|
||||
@@ -130,6 +109,8 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
|
||||
const [showPlaylist, setShowPlaylist] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const playlistFlashClass = useRenderFlash([showPlaylist, state.playlist?.id, state.playlist?.sounds.length], 'purple')
|
||||
|
||||
// Load initial state
|
||||
useEffect(() => {
|
||||
const loadState = async () => {
|
||||
@@ -279,31 +260,6 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Memoize expensive calculations to prevent unnecessary re-computations
|
||||
const modeIcon = useMemo(() => {
|
||||
switch (state.mode) {
|
||||
case 'continuous':
|
||||
return <ArrowRight className="h-4 w-4" />
|
||||
case 'loop':
|
||||
return <Repeat className="h-4 w-4" />
|
||||
case 'loop_one':
|
||||
return <Repeat1 className="h-4 w-4" />
|
||||
case 'random':
|
||||
return <Shuffle className="h-4 w-4" />
|
||||
default:
|
||||
return <ArrowRightToLine className="h-4 w-4" />
|
||||
}
|
||||
}, [state.mode])
|
||||
|
||||
const progressPercentage = useMemo(() =>
|
||||
(state.position / (state.duration || 1)) * 100,
|
||||
[state.position, state.duration]
|
||||
)
|
||||
|
||||
const modeLabel = useMemo(() =>
|
||||
state.mode.replace('_', ' '),
|
||||
[state.mode]
|
||||
)
|
||||
|
||||
const expandFromSidebar = useCallback(() => {
|
||||
setDisplayMode('normal')
|
||||
@@ -326,46 +282,17 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
|
||||
<Card className="w-48 bg-background/90 backdrop-blur-sm pt-0 pb-0">
|
||||
<CardContent className="p-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handlePrevious}
|
||||
disabled={isLoading}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<SkipBack className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handlePlayPause}
|
||||
disabled={isLoading}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
{state.status === 'playing' ? (
|
||||
<Pause className="h-4 w-4" />
|
||||
) : (
|
||||
<Play className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleStop}
|
||||
disabled={isLoading}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleNext}
|
||||
disabled={isLoading}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<SkipForward className="h-4 w-4" />
|
||||
</Button>
|
||||
<PlayerControls
|
||||
status={state.status}
|
||||
mode={state.mode}
|
||||
isLoading={isLoading}
|
||||
onPlayPause={handlePlayPause}
|
||||
onStop={handleStop}
|
||||
onPrevious={handlePrevious}
|
||||
onNext={handleNext}
|
||||
onModeChange={handleModeChange}
|
||||
variant="minimized"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
@@ -404,184 +331,42 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Album Art / Thumbnail */}
|
||||
<div className="mb-4">
|
||||
{state.current_sound?.thumbnail ? (
|
||||
<div className="w-full aspect-auto bg-muted rounded-lg flex items-center justify-center overflow-hidden">
|
||||
<img
|
||||
src={filesService.getThumbnailUrl(state.current_sound.id)}
|
||||
alt={state.current_sound.name}
|
||||
className="w-full h-full object-cover"
|
||||
onError={e => {
|
||||
// Hide image and show music icon if thumbnail fails to load
|
||||
const target = e.target as HTMLImageElement
|
||||
target.style.display = 'none'
|
||||
const musicIcon = target.nextElementSibling as HTMLElement
|
||||
if (musicIcon) musicIcon.style.display = 'block'
|
||||
}}
|
||||
/>
|
||||
<Music
|
||||
className={cn(
|
||||
'h-8 w-8 text-muted-foreground',
|
||||
state.current_sound?.thumbnail ? 'hidden' : 'block',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<PlayerTrackInfo
|
||||
currentSound={state.current_sound}
|
||||
onDownloadSound={handleDownloadSound}
|
||||
/>
|
||||
|
||||
{/* Track Info */}
|
||||
<div className="mb-4 text-center">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<h3 className="font-medium text-sm truncate">
|
||||
{state.current_sound?.name || 'No track selected'}
|
||||
</h3>
|
||||
{state.current_sound &&
|
||||
(state.current_sound.extract_url || state.current_sound.id) && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="h-4 w-4 p-0">
|
||||
<MoreVertical className="h-3 w-3" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
{state.current_sound.extract_url && (
|
||||
<DropdownMenuItem asChild>
|
||||
<a
|
||||
href={state.current_sound.extract_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Source
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem
|
||||
onClick={handleDownloadSound}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
File
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<PlayerProgress
|
||||
position={state.position}
|
||||
duration={state.duration || 0}
|
||||
onSeek={handleSeek}
|
||||
/>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-4">
|
||||
<Progress
|
||||
value={progressPercentage}
|
||||
className="w-full h-2 cursor-pointer"
|
||||
onClick={e => {
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
const clickX = e.clientX - rect.left
|
||||
const percentage = clickX / rect.width
|
||||
const newPosition = Math.round(percentage * (state.duration || 0))
|
||||
handleSeek([newPosition])
|
||||
}}
|
||||
<PlayerControls
|
||||
status={state.status}
|
||||
mode={state.mode}
|
||||
isLoading={isLoading}
|
||||
showPlaylistButton={true}
|
||||
onPlayPause={handlePlayPause}
|
||||
onStop={handleStop}
|
||||
onPrevious={handlePrevious}
|
||||
onNext={handleNext}
|
||||
onModeChange={handleModeChange}
|
||||
onTogglePlaylist={() => setShowPlaylist(!showPlaylist)}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-end">
|
||||
<PlayerVolume
|
||||
volume={state.volume}
|
||||
onVolumeChange={handleVolumeChange}
|
||||
onMute={handleMute}
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-muted-foreground mt-1">
|
||||
<NumberFlowDuration duration={state.position} />
|
||||
<NumberFlowDuration duration={state.duration || 0} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Controls */}
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleModeChange}
|
||||
className="h-8 w-8 p-0"
|
||||
title={`Mode: ${modeLabel}`}
|
||||
>
|
||||
{modeIcon}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handlePrevious}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SkipBack className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handlePlayPause}
|
||||
disabled={isLoading}
|
||||
className="h-10 w-10 rounded-full"
|
||||
>
|
||||
{state.status === 'playing' ? (
|
||||
<Pause className="h-5 w-5" />
|
||||
) : (
|
||||
<Play className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleStop}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleNext}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SkipForward className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setShowPlaylist(!showPlaylist)}
|
||||
className="h-8 w-8 p-0"
|
||||
title="Toggle Playlist"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Secondary Controls */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{modeLabel}
|
||||
</Badge>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleMute}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
{state.volume === 0 ? (
|
||||
<VolumeX className="h-4 w-4" />
|
||||
) : (
|
||||
<Volume2 className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<div className="w-16">
|
||||
<Slider
|
||||
value={[state.volume]}
|
||||
max={100}
|
||||
step={1}
|
||||
onValueChange={handleVolumeChange}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Playlist */}
|
||||
{showPlaylist && state.playlist && (
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
<div className={`mt-4 pt-4 border-t ${playlistFlashClass}`}>
|
||||
{/* DEBUG: Playlist - PURPLE FLASH */}
|
||||
<Playlist
|
||||
playlist={state.playlist}
|
||||
currentIndex={state.index}
|
||||
@@ -627,168 +412,43 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
|
||||
<div className="flex-1 flex">
|
||||
{/* Main Player Area */}
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-8">
|
||||
{/* Large Album Art */}
|
||||
<div className="max-w-300 max-h-200 aspect-auto bg-muted rounded-lg flex items-center justify-center overflow-hidden mb-8">
|
||||
{state.current_sound?.thumbnail ? (
|
||||
<img
|
||||
src={filesService.getThumbnailUrl(state.current_sound.id)}
|
||||
alt={state.current_sound.name}
|
||||
className="w-full h-full object-cover"
|
||||
onError={e => {
|
||||
// Hide image and show music icon if thumbnail fails to load
|
||||
const target = e.target as HTMLImageElement
|
||||
target.style.display = 'none'
|
||||
const musicIcon = target.nextElementSibling as HTMLElement
|
||||
if (musicIcon) musicIcon.style.display = 'block'
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<Music
|
||||
className={cn(
|
||||
'h-32 w-32 text-muted-foreground',
|
||||
state.current_sound?.thumbnail ? 'hidden' : 'block',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<PlayerTrackInfo
|
||||
currentSound={state.current_sound}
|
||||
onDownloadSound={handleDownloadSound}
|
||||
variant="maximized"
|
||||
/>
|
||||
|
||||
{/* Track Info */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center gap-3 mb-2">
|
||||
<h1 className="text-2xl font-bold">
|
||||
{state.current_sound?.name || 'No track selected'}
|
||||
</h1>
|
||||
{state.current_sound &&
|
||||
(state.current_sound.extract_url || state.current_sound.id) && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="h-6 w-6 p-0">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
{state.current_sound.extract_url && (
|
||||
<DropdownMenuItem asChild>
|
||||
<a
|
||||
href={state.current_sound.extract_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Source
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem
|
||||
onClick={handleDownloadSound}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
File
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<PlayerProgress
|
||||
position={state.position}
|
||||
duration={state.duration || 0}
|
||||
onSeek={handleSeek}
|
||||
variant="maximized"
|
||||
/>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="w-full max-w-md mb-8">
|
||||
<Progress
|
||||
value={progressPercentage}
|
||||
className="w-full h-3 cursor-pointer"
|
||||
onClick={e => {
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
const clickX = e.clientX - rect.left
|
||||
const percentage = clickX / rect.width
|
||||
const newPosition = Math.round(
|
||||
percentage * (state.duration || 0),
|
||||
)
|
||||
handleSeek([newPosition])
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-between text-sm text-muted-foreground mt-2">
|
||||
<NumberFlowDuration duration={state.position} />
|
||||
<NumberFlowDuration duration={state.duration || 0} />
|
||||
</div>
|
||||
</div>
|
||||
<PlayerControls
|
||||
status={state.status}
|
||||
mode={state.mode}
|
||||
isLoading={isLoading}
|
||||
onPlayPause={handlePlayPause}
|
||||
onStop={handleStop}
|
||||
onPrevious={handlePrevious}
|
||||
onNext={handleNext}
|
||||
onModeChange={handleModeChange}
|
||||
variant="maximized"
|
||||
/>
|
||||
|
||||
{/* Large Controls */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="ghost"
|
||||
onClick={handlePrevious}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SkipBack className="h-6 w-6" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={handlePlayPause}
|
||||
disabled={isLoading}
|
||||
className="h-16 w-16 rounded-full"
|
||||
>
|
||||
{state.status === 'playing' ? (
|
||||
<Pause className="h-8 w-8" />
|
||||
) : (
|
||||
<Play className="h-8 w-8" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="ghost"
|
||||
onClick={handleStop}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Square className="h-6 w-6" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="ghost"
|
||||
onClick={handleNext}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SkipForward className="h-6 w-6" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Secondary Controls */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button size="sm" variant="ghost" onClick={handleModeChange}>
|
||||
{modeIcon}
|
||||
</Button>
|
||||
<Badge variant="secondary">{modeLabel}</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button size="sm" variant="ghost" onClick={handleMute}>
|
||||
{state.volume === 0 ? (
|
||||
<VolumeX className="h-4 w-4" />
|
||||
) : (
|
||||
<Volume2 className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<div className="w-24">
|
||||
<Slider
|
||||
value={[state.volume]}
|
||||
max={100}
|
||||
step={1}
|
||||
onValueChange={handleVolumeChange}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground w-8">
|
||||
{Math.round(state.volume)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<PlayerVolume
|
||||
volume={state.volume}
|
||||
onVolumeChange={handleVolumeChange}
|
||||
onMute={handleMute}
|
||||
variant="maximized"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Playlist Sidebar */}
|
||||
{state.playlist && (
|
||||
<div className="w-96 border-l bg-muted/10 backdrop-blur-sm">
|
||||
<div className={`w-96 border-l bg-muted/10 backdrop-blur-sm ${playlistFlashClass}`}>
|
||||
{/* DEBUG: Playlist Sidebar - PURPLE FLASH */}
|
||||
<div className="p-4 border-b">
|
||||
<h3 className="font-semibold">Playlist</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
|
||||
248
src/components/player/PlayerControls.tsx
Normal file
248
src/components/player/PlayerControls.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import type { PlayerMode, PlayerState } from '@/lib/api/services/player'
|
||||
import {
|
||||
ArrowRight,
|
||||
ArrowRightToLine,
|
||||
List,
|
||||
Pause,
|
||||
Play,
|
||||
Repeat,
|
||||
Repeat1,
|
||||
Shuffle,
|
||||
SkipBack,
|
||||
SkipForward,
|
||||
Square,
|
||||
} from 'lucide-react'
|
||||
import { memo, useMemo } from 'react'
|
||||
import { useRenderFlash } from '@/hooks/useRenderFlash'
|
||||
|
||||
interface PlayerControlsProps {
|
||||
status: PlayerState['status']
|
||||
mode: PlayerMode
|
||||
isLoading: boolean
|
||||
showPlaylistButton?: boolean
|
||||
onPlayPause: () => void
|
||||
onStop: () => void
|
||||
onPrevious: () => void
|
||||
onNext: () => void
|
||||
onModeChange: () => void
|
||||
onTogglePlaylist?: () => void
|
||||
variant?: 'normal' | 'maximized' | 'minimized'
|
||||
}
|
||||
|
||||
export const PlayerControls = memo(function PlayerControls({
|
||||
status,
|
||||
mode,
|
||||
isLoading,
|
||||
showPlaylistButton = false,
|
||||
onPlayPause,
|
||||
onStop,
|
||||
onPrevious,
|
||||
onNext,
|
||||
onModeChange,
|
||||
onTogglePlaylist,
|
||||
variant = 'normal',
|
||||
}: PlayerControlsProps) {
|
||||
const isMinimized = variant === 'minimized'
|
||||
const isMaximized = variant === 'maximized'
|
||||
const flashClass = useRenderFlash([status, mode], 'green')
|
||||
|
||||
const modeIcon = useMemo(() => {
|
||||
switch (mode) {
|
||||
case 'continuous':
|
||||
return <ArrowRight className="h-4 w-4" />
|
||||
case 'loop':
|
||||
return <Repeat className="h-4 w-4" />
|
||||
case 'loop_one':
|
||||
return <Repeat1 className="h-4 w-4" />
|
||||
case 'random':
|
||||
return <Shuffle className="h-4 w-4" />
|
||||
default:
|
||||
return <ArrowRightToLine className="h-4 w-4" />
|
||||
}
|
||||
}, [mode])
|
||||
|
||||
const modeLabel = useMemo(() =>
|
||||
mode.replace('_', ' '),
|
||||
[mode]
|
||||
)
|
||||
|
||||
if (isMinimized) {
|
||||
return (
|
||||
<div className={`${flashClass} flex items-center gap-1`}>
|
||||
{/* DEBUG: PlayerControls Minimized - GREEN FLASH */}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onPrevious}
|
||||
disabled={isLoading}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<SkipBack className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onPlayPause}
|
||||
disabled={isLoading}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
{status === 'playing' ? (
|
||||
<Pause className="h-4 w-4" />
|
||||
) : (
|
||||
<Play className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onStop}
|
||||
disabled={isLoading}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onNext}
|
||||
disabled={isLoading}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<SkipForward className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (isMaximized) {
|
||||
return (
|
||||
<div className={flashClass}>
|
||||
{/* DEBUG: PlayerControls Maximized - GREEN FLASH */}
|
||||
{/* Large Controls */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="ghost"
|
||||
onClick={onPrevious}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SkipBack className="h-6 w-6" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={onPlayPause}
|
||||
disabled={isLoading}
|
||||
className="h-16 w-16 rounded-full"
|
||||
>
|
||||
{status === 'playing' ? (
|
||||
<Pause className="h-8 w-8" />
|
||||
) : (
|
||||
<Play className="h-8 w-8" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="ghost"
|
||||
onClick={onStop}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Square className="h-6 w-6" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="ghost"
|
||||
onClick={onNext}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SkipForward className="h-6 w-6" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Secondary Controls */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button size="sm" variant="ghost" onClick={onModeChange}>
|
||||
{modeIcon}
|
||||
</Button>
|
||||
<Badge variant="secondary">{modeLabel}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Normal variant
|
||||
return (
|
||||
<div className={flashClass}>
|
||||
{/* DEBUG: PlayerControls Normal - GREEN FLASH */}
|
||||
{/* Main Controls */}
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onModeChange}
|
||||
className="h-8 w-8 p-0"
|
||||
title={`Mode: ${modeLabel}`}
|
||||
>
|
||||
{modeIcon}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onPrevious}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SkipBack className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={onPlayPause}
|
||||
disabled={isLoading}
|
||||
className="h-10 w-10 rounded-full"
|
||||
>
|
||||
{status === 'playing' ? (
|
||||
<Pause className="h-5 w-5" />
|
||||
) : (
|
||||
<Play className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onStop}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onNext}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SkipForward className="h-4 w-4" />
|
||||
</Button>
|
||||
{showPlaylistButton && onTogglePlaylist && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onTogglePlaylist}
|
||||
className="h-8 w-8 p-0"
|
||||
title="Toggle Playlist"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Secondary Controls */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{modeLabel}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
59
src/components/player/PlayerProgress.tsx
Normal file
59
src/components/player/PlayerProgress.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { memo, useMemo } from 'react'
|
||||
import { NumberFlowDuration } from '../ui/number-flow-duration'
|
||||
import { useRenderFlash } from '@/hooks/useRenderFlash'
|
||||
|
||||
interface PlayerProgressProps {
|
||||
position: number
|
||||
duration: number
|
||||
onSeek: (position: number[]) => void
|
||||
variant?: 'normal' | 'maximized'
|
||||
}
|
||||
|
||||
export const PlayerProgress = memo(function PlayerProgress({
|
||||
position,
|
||||
duration,
|
||||
onSeek,
|
||||
variant = 'normal',
|
||||
}: PlayerProgressProps) {
|
||||
const isMaximized = variant === 'maximized'
|
||||
const flashClass = useRenderFlash([position, duration], 'blue')
|
||||
|
||||
const progressPercentage = useMemo(() =>
|
||||
(position / (duration || 1)) * 100,
|
||||
[position, duration]
|
||||
)
|
||||
|
||||
const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
const clickX = e.clientX - rect.left
|
||||
const percentage = clickX / rect.width
|
||||
const newPosition = Math.round(percentage * (duration || 0))
|
||||
onSeek([newPosition])
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
flashClass,
|
||||
isMaximized ? 'w-full max-w-md mb-8' : 'mb-4'
|
||||
)}>
|
||||
{/* DEBUG: PlayerProgress - BLUE FLASH */}
|
||||
<Progress
|
||||
value={progressPercentage}
|
||||
className={cn(
|
||||
'w-full cursor-pointer',
|
||||
isMaximized ? 'h-3' : 'h-2'
|
||||
)}
|
||||
onClick={handleProgressClick}
|
||||
/>
|
||||
<div className={cn(
|
||||
'flex justify-between text-muted-foreground mt-1',
|
||||
isMaximized ? 'text-sm mt-2' : 'text-xs'
|
||||
)}>
|
||||
<NumberFlowDuration duration={position} />
|
||||
<NumberFlowDuration duration={duration || 0} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
106
src/components/player/PlayerTrackInfo.tsx
Normal file
106
src/components/player/PlayerTrackInfo.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { filesService } from '@/lib/api/services/files'
|
||||
import type { PlayerState } from '@/lib/api/services/player'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Download, ExternalLink, MoreVertical, Music } from 'lucide-react'
|
||||
import { memo } from 'react'
|
||||
import { useRenderFlash } from '@/hooks/useRenderFlash'
|
||||
|
||||
interface PlayerTrackInfoProps {
|
||||
currentSound: PlayerState['current_sound']
|
||||
onDownloadSound: () => void
|
||||
variant?: 'normal' | 'maximized'
|
||||
}
|
||||
|
||||
export const PlayerTrackInfo = memo(function PlayerTrackInfo({
|
||||
currentSound,
|
||||
onDownloadSound,
|
||||
variant = 'normal',
|
||||
}: PlayerTrackInfoProps) {
|
||||
const isMaximized = variant === 'maximized'
|
||||
const flashClass = useRenderFlash([currentSound?.id, currentSound?.name, currentSound?.thumbnail], 'red')
|
||||
|
||||
return (
|
||||
<div className={flashClass}>
|
||||
{/* DEBUG: PlayerTrackInfo - RED FLASH */}
|
||||
{/* Album Art / Thumbnail */}
|
||||
<div className={isMaximized ? 'max-w-300 max-h-200 aspect-auto bg-muted rounded-lg flex items-center justify-center overflow-hidden mb-8' : 'mb-4'}>
|
||||
{currentSound?.thumbnail ? (
|
||||
<div className={isMaximized ? 'w-full h-full' : 'w-full aspect-auto bg-muted rounded-lg flex items-center justify-center overflow-hidden'}>
|
||||
<img
|
||||
src={filesService.getThumbnailUrl(currentSound.id)}
|
||||
alt={currentSound.name}
|
||||
className="w-full h-full object-cover"
|
||||
onError={e => {
|
||||
// Hide image and show music icon if thumbnail fails to load
|
||||
const target = e.target as HTMLImageElement
|
||||
target.style.display = 'none'
|
||||
const musicIcon = target.nextElementSibling as HTMLElement
|
||||
if (musicIcon) musicIcon.style.display = 'block'
|
||||
}}
|
||||
/>
|
||||
<Music
|
||||
className={cn(
|
||||
isMaximized ? 'h-32 w-32 text-muted-foreground' : 'h-8 w-8 text-muted-foreground',
|
||||
currentSound?.thumbnail ? 'hidden' : 'block',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
) : isMaximized ? (
|
||||
<Music className="h-32 w-32 text-muted-foreground" />
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Track Info */}
|
||||
<div className={cn('text-center', isMaximized ? 'mb-8' : 'mb-4')}>
|
||||
<div className={cn('flex items-center justify-center gap-2', isMaximized && 'gap-3 mb-2')}>
|
||||
<h3 className={cn('font-medium truncate', isMaximized ? 'text-2xl font-bold' : 'text-sm')}>
|
||||
{currentSound?.name || 'No track selected'}
|
||||
</h3>
|
||||
{currentSound &&
|
||||
(currentSound.extract_url || currentSound.id) && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={isMaximized ? 'h-6 w-6 p-0' : 'h-4 w-4 p-0'}
|
||||
>
|
||||
<MoreVertical className={isMaximized ? 'h-4 w-4' : 'h-3 w-3'} />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
{currentSound.extract_url && (
|
||||
<DropdownMenuItem asChild>
|
||||
<a
|
||||
href={currentSound.extract_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Source
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem
|
||||
onClick={onDownloadSound}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
File
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
77
src/components/player/PlayerVolume.tsx
Normal file
77
src/components/player/PlayerVolume.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { Volume2, VolumeX } from 'lucide-react'
|
||||
import { memo } from 'react'
|
||||
import { useRenderFlash } from '@/hooks/useRenderFlash'
|
||||
|
||||
interface PlayerVolumeProps {
|
||||
volume: number
|
||||
onVolumeChange: (volume: number[]) => void
|
||||
onMute: () => void
|
||||
variant?: 'normal' | 'maximized'
|
||||
}
|
||||
|
||||
export const PlayerVolume = memo(function PlayerVolume({
|
||||
volume,
|
||||
onVolumeChange,
|
||||
onMute,
|
||||
variant = 'normal',
|
||||
}: PlayerVolumeProps) {
|
||||
const isMaximized = variant === 'maximized'
|
||||
const flashClass = useRenderFlash([volume], 'yellow')
|
||||
|
||||
if (isMaximized) {
|
||||
return (
|
||||
<div className={`${flashClass} flex items-center gap-2`}>
|
||||
{/* DEBUG: PlayerVolume Maximized - YELLOW FLASH */}
|
||||
<Button size="sm" variant="ghost" onClick={onMute}>
|
||||
{volume === 0 ? (
|
||||
<VolumeX className="h-4 w-4" />
|
||||
) : (
|
||||
<Volume2 className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<div className="w-24">
|
||||
<Slider
|
||||
value={[volume]}
|
||||
max={100}
|
||||
step={1}
|
||||
onValueChange={onVolumeChange}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground w-8">
|
||||
{Math.round(volume)}%
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Normal variant
|
||||
return (
|
||||
<div className={`${flashClass} flex items-center gap-2`}>
|
||||
{/* DEBUG: PlayerVolume Normal - YELLOW FLASH */}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onMute}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
{volume === 0 ? (
|
||||
<VolumeX className="h-4 w-4" />
|
||||
) : (
|
||||
<Volume2 className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<div className="w-16">
|
||||
<Slider
|
||||
value={[volume]}
|
||||
max={100}
|
||||
step={1}
|
||||
onValueChange={onVolumeChange}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
@@ -37,7 +37,7 @@ export function SchedulersTable({ tasks, onTaskDeleted }: SchedulersTableProps)
|
||||
|
||||
// Confirm deletion
|
||||
const confirmMessage = `Are you sure you want to delete the task "${task.name}"?${
|
||||
task.status === 'scheduled' || task.status === 'running'
|
||||
task.status === 'pending' || task.status === 'running'
|
||||
? '\n\nThis task is currently active and will be stopped immediately.'
|
||||
: ''
|
||||
}\n\nThis action cannot be undone.`
|
||||
|
||||
Reference in New Issue
Block a user