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 { Button } from '@/components/ui/button'
|
||||||
import { Card, CardContent } from '@/components/ui/card'
|
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 { filesService } from '@/lib/api/services/files'
|
||||||
import {
|
import {
|
||||||
type MessageResponse,
|
type MessageResponse,
|
||||||
@@ -20,30 +11,18 @@ import { soundsService } from '@/lib/api/services/sounds'
|
|||||||
import { PLAYER_EVENTS, playerEvents } from '@/lib/events'
|
import { PLAYER_EVENTS, playerEvents } from '@/lib/events'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import {
|
import {
|
||||||
ArrowRight,
|
|
||||||
ArrowRightToLine,
|
|
||||||
Download,
|
|
||||||
ExternalLink,
|
|
||||||
List,
|
|
||||||
Maximize2,
|
Maximize2,
|
||||||
Minimize2,
|
Minimize2,
|
||||||
MoreVertical,
|
|
||||||
Music,
|
|
||||||
Pause,
|
|
||||||
Play,
|
|
||||||
Repeat,
|
|
||||||
Repeat1,
|
|
||||||
Shuffle,
|
|
||||||
SkipBack,
|
|
||||||
SkipForward,
|
|
||||||
Square,
|
Square,
|
||||||
Volume2,
|
|
||||||
VolumeX,
|
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||||
import { toast } from 'sonner'
|
import { toast } from 'sonner'
|
||||||
import { Playlist } from './Playlist'
|
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'
|
export type PlayerDisplayMode = 'normal' | 'minimized' | 'maximized' | 'sidebar'
|
||||||
|
|
||||||
@@ -130,6 +109,8 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
|
|||||||
const [showPlaylist, setShowPlaylist] = useState(false)
|
const [showPlaylist, setShowPlaylist] = useState(false)
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
|
||||||
|
const playlistFlashClass = useRenderFlash([showPlaylist, state.playlist?.id, state.playlist?.sounds.length], 'purple')
|
||||||
|
|
||||||
// Load initial state
|
// Load initial state
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadState = async () => {
|
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(() => {
|
const expandFromSidebar = useCallback(() => {
|
||||||
setDisplayMode('normal')
|
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">
|
<Card className="w-48 bg-background/90 backdrop-blur-sm pt-0 pb-0">
|
||||||
<CardContent className="p-2">
|
<CardContent className="p-2">
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<Button
|
<PlayerControls
|
||||||
size="sm"
|
status={state.status}
|
||||||
variant="ghost"
|
mode={state.mode}
|
||||||
onClick={handlePrevious}
|
isLoading={isLoading}
|
||||||
disabled={isLoading}
|
onPlayPause={handlePlayPause}
|
||||||
className="h-8 w-8 p-0"
|
onStop={handleStop}
|
||||||
>
|
onPrevious={handlePrevious}
|
||||||
<SkipBack className="h-4 w-4" />
|
onNext={handleNext}
|
||||||
</Button>
|
onModeChange={handleModeChange}
|
||||||
<Button
|
variant="minimized"
|
||||||
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>
|
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@@ -404,184 +331,42 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Album Art / Thumbnail */}
|
<PlayerTrackInfo
|
||||||
<div className="mb-4">
|
currentSound={state.current_sound}
|
||||||
{state.current_sound?.thumbnail ? (
|
onDownloadSound={handleDownloadSound}
|
||||||
<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(
|
<PlayerProgress
|
||||||
'h-8 w-8 text-muted-foreground',
|
position={state.position}
|
||||||
state.current_sound?.thumbnail ? 'hidden' : 'block',
|
duration={state.duration || 0}
|
||||||
)}
|
onSeek={handleSeek}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Track Info */}
|
<PlayerControls
|
||||||
<div className="mb-4 text-center">
|
status={state.status}
|
||||||
<div className="flex items-center justify-center gap-2">
|
mode={state.mode}
|
||||||
<h3 className="font-medium text-sm truncate">
|
isLoading={isLoading}
|
||||||
{state.current_sound?.name || 'No track selected'}
|
showPlaylistButton={true}
|
||||||
</h3>
|
onPlayPause={handlePlayPause}
|
||||||
{state.current_sound &&
|
onStop={handleStop}
|
||||||
(state.current_sound.extract_url || state.current_sound.id) && (
|
onPrevious={handlePrevious}
|
||||||
<DropdownMenu>
|
onNext={handleNext}
|
||||||
<DropdownMenuTrigger asChild>
|
onModeChange={handleModeChange}
|
||||||
<Button variant="ghost" size="sm" className="h-4 w-4 p-0">
|
onTogglePlaylist={() => setShowPlaylist(!showPlaylist)}
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* 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])
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<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-end">
|
||||||
<div className="flex items-center justify-center gap-2 mb-4">
|
<PlayerVolume
|
||||||
<Button
|
volume={state.volume}
|
||||||
size="sm"
|
onVolumeChange={handleVolumeChange}
|
||||||
variant="ghost"
|
onMute={handleMute}
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Playlist */}
|
{/* Playlist */}
|
||||||
{showPlaylist && state.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
|
||||||
playlist={state.playlist}
|
playlist={state.playlist}
|
||||||
currentIndex={state.index}
|
currentIndex={state.index}
|
||||||
@@ -627,168 +412,43 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
|
|||||||
<div className="flex-1 flex">
|
<div className="flex-1 flex">
|
||||||
{/* Main Player Area */}
|
{/* Main Player Area */}
|
||||||
<div className="flex-1 flex flex-col items-center justify-center p-8">
|
<div className="flex-1 flex flex-col items-center justify-center p-8">
|
||||||
{/* Large Album Art */}
|
<PlayerTrackInfo
|
||||||
<div className="max-w-300 max-h-200 aspect-auto bg-muted rounded-lg flex items-center justify-center overflow-hidden mb-8">
|
currentSound={state.current_sound}
|
||||||
{state.current_sound?.thumbnail ? (
|
onDownloadSound={handleDownloadSound}
|
||||||
<img
|
variant="maximized"
|
||||||
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
|
<PlayerProgress
|
||||||
className={cn(
|
position={state.position}
|
||||||
'h-32 w-32 text-muted-foreground',
|
duration={state.duration || 0}
|
||||||
state.current_sound?.thumbnail ? 'hidden' : 'block',
|
onSeek={handleSeek}
|
||||||
)}
|
variant="maximized"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Track Info */}
|
<PlayerControls
|
||||||
<div className="text-center mb-8">
|
status={state.status}
|
||||||
<div className="flex items-center justify-center gap-3 mb-2">
|
mode={state.mode}
|
||||||
<h1 className="text-2xl font-bold">
|
isLoading={isLoading}
|
||||||
{state.current_sound?.name || 'No track selected'}
|
onPlayPause={handlePlayPause}
|
||||||
</h1>
|
onStop={handleStop}
|
||||||
{state.current_sound &&
|
onPrevious={handlePrevious}
|
||||||
(state.current_sound.extract_url || state.current_sound.id) && (
|
onNext={handleNext}
|
||||||
<DropdownMenu>
|
onModeChange={handleModeChange}
|
||||||
<DropdownMenuTrigger asChild>
|
variant="maximized"
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
|
|
||||||
{/* Large Controls */}
|
<PlayerVolume
|
||||||
<div className="flex items-center gap-4 mb-8">
|
volume={state.volume}
|
||||||
<Button
|
onVolumeChange={handleVolumeChange}
|
||||||
size="lg"
|
onMute={handleMute}
|
||||||
variant="ghost"
|
variant="maximized"
|
||||||
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>
|
</div>
|
||||||
<span className="text-sm text-muted-foreground w-8">
|
|
||||||
{Math.round(state.volume)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Playlist Sidebar */}
|
{/* Playlist Sidebar */}
|
||||||
{state.playlist && (
|
{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">
|
<div className="p-4 border-b">
|
||||||
<h3 className="font-semibold">Playlist</h3>
|
<h3 className="font-semibold">Playlist</h3>
|
||||||
<p className="text-sm text-muted-foreground">
|
<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
|
// Confirm deletion
|
||||||
const confirmMessage = `Are you sure you want to delete the task "${task.name}"?${
|
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 task is currently active and will be stopped immediately.'
|
||||||
: ''
|
: ''
|
||||||
}\n\nThis action cannot be undone.`
|
}\n\nThis action cannot be undone.`
|
||||||
|
|||||||
88
src/hooks/usePlayerState.ts
Normal file
88
src/hooks/usePlayerState.ts
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
import { PLAYER_EVENTS, playerEvents } from '@/lib/events'
|
||||||
|
import type { PlayerState } from '@/lib/api/services/player'
|
||||||
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||||
|
|
||||||
|
// Type for selecting specific parts of the player state
|
||||||
|
type PlayerStateSelector<T> = (state: PlayerState) => T
|
||||||
|
|
||||||
|
// Custom hook for subscribing to specific parts of player state
|
||||||
|
export function usePlayerState<T>(
|
||||||
|
selector: PlayerStateSelector<T>,
|
||||||
|
equalityFn?: (a: T, b: T) => boolean
|
||||||
|
): T | null {
|
||||||
|
const [selectedState, setSelectedState] = useState<T | null>(null)
|
||||||
|
const selectorRef = useRef(selector)
|
||||||
|
const equalityRef = useRef(equalityFn)
|
||||||
|
|
||||||
|
// Keep refs updated
|
||||||
|
selectorRef.current = selector
|
||||||
|
equalityRef.current = equalityFn
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handlePlayerState = (...args: unknown[]) => {
|
||||||
|
const newState = args[0] as PlayerState
|
||||||
|
const newSelectedState = selectorRef.current(newState)
|
||||||
|
|
||||||
|
setSelectedState(prevSelected => {
|
||||||
|
// Use custom equality function if provided, otherwise use shallow comparison
|
||||||
|
if (equalityRef.current) {
|
||||||
|
if (prevSelected !== null && equalityRef.current(prevSelected, newSelectedState)) {
|
||||||
|
return prevSelected
|
||||||
|
}
|
||||||
|
} else if (prevSelected === newSelectedState) {
|
||||||
|
return prevSelected
|
||||||
|
}
|
||||||
|
|
||||||
|
return newSelectedState
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
playerEvents.on(PLAYER_EVENTS.PLAYER_STATE, handlePlayerState)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
playerEvents.off(PLAYER_EVENTS.PLAYER_STATE, handlePlayerState)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return selectedState
|
||||||
|
}
|
||||||
|
|
||||||
|
// Specific hooks for common state selections
|
||||||
|
export function usePlayerProgress() {
|
||||||
|
return usePlayerState(
|
||||||
|
useCallback((state: PlayerState) => ({
|
||||||
|
position: state.position,
|
||||||
|
duration: state.duration || 0,
|
||||||
|
}), [])
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function usePlayerTrackInfo() {
|
||||||
|
return usePlayerState(
|
||||||
|
useCallback((state: PlayerState) => state.current_sound, [])
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function usePlayerControls() {
|
||||||
|
return usePlayerState(
|
||||||
|
useCallback((state: PlayerState) => ({
|
||||||
|
status: state.status,
|
||||||
|
mode: state.mode,
|
||||||
|
}), [])
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function usePlayerVolume() {
|
||||||
|
return usePlayerState(
|
||||||
|
useCallback((state: PlayerState) => state.volume, [])
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function usePlayerPlaylist() {
|
||||||
|
return usePlayerState(
|
||||||
|
useCallback((state: PlayerState) => ({
|
||||||
|
playlist: state.playlist,
|
||||||
|
index: state.index,
|
||||||
|
}), [])
|
||||||
|
)
|
||||||
|
}
|
||||||
35
src/hooks/useRenderFlash.ts
Normal file
35
src/hooks/useRenderFlash.ts
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react'
|
||||||
|
|
||||||
|
export function useRenderFlash(deps: any[], color: string = 'red', duration: number = 300) {
|
||||||
|
const [isFlashing, setIsFlashing] = useState(false)
|
||||||
|
const prevDepsRef = useRef<any[]>()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Check if this is the first render
|
||||||
|
if (!prevDepsRef.current) {
|
||||||
|
prevDepsRef.current = deps
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if any dependency actually changed
|
||||||
|
const hasChanged = deps.some((dep, index) => dep !== prevDepsRef.current![index])
|
||||||
|
|
||||||
|
if (hasChanged) {
|
||||||
|
setIsFlashing(true)
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setIsFlashing(false)
|
||||||
|
}, duration)
|
||||||
|
|
||||||
|
prevDepsRef.current = deps
|
||||||
|
return () => clearTimeout(timer)
|
||||||
|
}
|
||||||
|
|
||||||
|
prevDepsRef.current = deps
|
||||||
|
}, deps)
|
||||||
|
|
||||||
|
const flashClass = isFlashing
|
||||||
|
? `border-2 border-${color}-500 border-dashed animate-pulse`
|
||||||
|
: ''
|
||||||
|
|
||||||
|
return flashClass
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user