feat: implement compact player and enhance display mode management in AppLayout and Player components
This commit is contained in:
JSC
237
src/components/player/CompactPlayer.tsx
Normal file
237
src/components/player/CompactPlayer.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import {
|
||||
Play,
|
||||
Pause,
|
||||
SkipBack,
|
||||
SkipForward,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
Music,
|
||||
Maximize2
|
||||
} from 'lucide-react'
|
||||
import { playerService, type PlayerState, type MessageResponse } from '@/lib/api/services/player'
|
||||
import { filesService } from '@/lib/api/services/files'
|
||||
import { playerEvents, PLAYER_EVENTS } from '@/lib/events'
|
||||
import { toast } from 'sonner'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { formatDuration } from '@/utils/format-duration'
|
||||
|
||||
interface CompactPlayerProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function CompactPlayer({ className }: CompactPlayerProps) {
|
||||
const [state, setState] = useState<PlayerState>({
|
||||
status: 'stopped',
|
||||
mode: 'continuous',
|
||||
volume: 80,
|
||||
position: 0
|
||||
})
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
// Load initial state
|
||||
useEffect(() => {
|
||||
const loadState = async () => {
|
||||
try {
|
||||
const initialState = await playerService.getState()
|
||||
setState(initialState)
|
||||
} catch (error) {
|
||||
console.error('Failed to load player state:', error)
|
||||
}
|
||||
}
|
||||
loadState()
|
||||
}, [])
|
||||
|
||||
// Listen for player state updates
|
||||
useEffect(() => {
|
||||
const handlePlayerState = (newState: PlayerState) => {
|
||||
setState(newState)
|
||||
}
|
||||
|
||||
playerEvents.on(PLAYER_EVENTS.PLAYER_STATE, handlePlayerState)
|
||||
|
||||
return () => {
|
||||
playerEvents.off(PLAYER_EVENTS.PLAYER_STATE, handlePlayerState)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const executeAction = useCallback(async (action: () => Promise<void | MessageResponse>, actionName: string) => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
await action()
|
||||
} catch (error) {
|
||||
console.error(`Failed to ${actionName}:`, error)
|
||||
toast.error(`Failed to ${actionName}`)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handlePlayPause = useCallback(() => {
|
||||
if (state.status === 'playing') {
|
||||
executeAction(playerService.pause, 'pause')
|
||||
} else {
|
||||
executeAction(playerService.play, 'play')
|
||||
}
|
||||
}, [state.status, executeAction])
|
||||
|
||||
const handlePrevious = useCallback(() => {
|
||||
executeAction(playerService.previous, 'go to previous track')
|
||||
}, [executeAction])
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
executeAction(playerService.next, 'go to next track')
|
||||
}, [executeAction])
|
||||
|
||||
const handleVolumeToggle = useCallback(() => {
|
||||
if (state.volume === 0) {
|
||||
executeAction(() => playerService.setVolume(50), 'unmute')
|
||||
} else {
|
||||
executeAction(() => playerService.setVolume(0), 'mute')
|
||||
}
|
||||
}, [state.volume, executeAction])
|
||||
|
||||
// Don't show if no current sound
|
||||
if (!state.current_sound) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn("w-full", className)}>
|
||||
{/* Collapsed state - only play/pause button */}
|
||||
<div className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center hidden">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handlePlayPause}
|
||||
disabled={isLoading}
|
||||
className="h-8 w-8 p-0"
|
||||
title={state.status === 'playing' ? 'Pause' : 'Play'}
|
||||
>
|
||||
{state.status === 'playing' ? (
|
||||
<Pause className="h-4 w-4" />
|
||||
) : (
|
||||
<Play className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Expanded state - full player */}
|
||||
<div className="group-data-[collapsible=icon]:hidden">
|
||||
{/* Track Info */}
|
||||
<div className="flex items-center gap-2 mb-3 px-1">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-muted rounded flex items-center justify-center overflow-hidden">
|
||||
{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-4 w-4 text-muted-foreground",
|
||||
state.current_sound?.thumbnail ? "hidden" : "block"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium truncate">
|
||||
{state.current_sound.name}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{state.playlist?.name}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
const expandFn = (window as unknown as { __expandPlayerFromSidebar?: () => void }).__expandPlayerFromSidebar
|
||||
if (expandFn) expandFn()
|
||||
}}
|
||||
className="h-6 w-6 p-0 flex-shrink-0"
|
||||
title="Expand Player"
|
||||
>
|
||||
<Maximize2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-3">
|
||||
<Progress
|
||||
value={(state.position / (state.duration || 1)) * 100}
|
||||
className="w-full h-1"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-muted-foreground mt-1">
|
||||
<span>{formatDuration(state.position)}</span>
|
||||
<span>{formatDuration(state.duration || 0)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handlePrevious}
|
||||
disabled={isLoading}
|
||||
className="h-7 w-7 p-0"
|
||||
title="Previous"
|
||||
>
|
||||
<SkipBack className="h-3 w-3" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handlePlayPause}
|
||||
disabled={isLoading}
|
||||
className="h-8 w-8 p-0"
|
||||
title={state.status === 'playing' ? 'Pause' : 'Play'}
|
||||
>
|
||||
{state.status === 'playing' ? (
|
||||
<Pause className="h-4 w-4" />
|
||||
) : (
|
||||
<Play className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleNext}
|
||||
disabled={isLoading}
|
||||
className="h-7 w-7 p-0"
|
||||
title="Next"
|
||||
>
|
||||
<SkipForward className="h-3 w-3" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={handleVolumeToggle}
|
||||
className="h-7 w-7 p-0"
|
||||
title={state.volume === 0 ? 'Unmute' : 'Mute'}
|
||||
>
|
||||
{state.volume === 0 ? (
|
||||
<VolumeX className="h-3 w-3" />
|
||||
) : (
|
||||
<Volume2 className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user