301 lines
9.6 KiB
TypeScript
301 lines
9.6 KiB
TypeScript
import { AddUrlDialog } from '@/components/AddUrlDialog'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
// import { useSocket } from '@/contexts/SocketContext'
|
|
import { useAddUrlShortcut } from '@/hooks/use-keyboard-shortcuts'
|
|
import { useTheme } from '@/hooks/use-theme'
|
|
import { formatDuration } from '@/lib/format-duration'
|
|
import { formatSize } from '@/lib/format-size'
|
|
import { cn } from '@/lib/utils'
|
|
import { apiService } from '@/services/api'
|
|
import NumberFlow from '@number-flow/react'
|
|
import { Clock, Play, Plus, Square, Weight } from 'lucide-react'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { toast } from 'sonner'
|
|
|
|
const lightModeColors = [
|
|
'bg-red-600/30 hover:bg-red-600/40 text-red-900 border-red-600/20',
|
|
'bg-blue-700/30 hover:bg-blue-700/40 text-blue-900 border-blue-700/20',
|
|
'bg-yellow-400/30 hover:bg-yellow-400/40 text-yellow-800 border-yellow-400/20',
|
|
'bg-purple-700/30 hover:bg-purple-700/40 text-purple-900 border-purple-700/20',
|
|
'bg-green-600/30 hover:bg-green-600/40 text-green-900 border-green-600/20',
|
|
'bg-pink-500/30 hover:bg-pink-500/40 text-pink-900 border-pink-500/20',
|
|
'bg-cyan-500/30 hover:bg-cyan-500/40 text-cyan-900 border-cyan-500/20',
|
|
'bg-amber-500/30 hover:bg-amber-500/40 text-amber-900 border-amber-500/20',
|
|
'bg-indigo-800/30 hover:bg-indigo-800/40 text-indigo-900 border-indigo-800/20',
|
|
'bg-lime-500/30 hover:bg-lime-500/40 text-lime-900 border-lime-500/20',
|
|
'bg-fuchsia-600/30 hover:bg-fuchsia-600/40 text-fuchsia-900 border-fuchsia-600/20',
|
|
'bg-orange-600/30 hover:bg-orange-600/40 text-orange-900 border-orange-600/20',
|
|
]
|
|
|
|
const darkModeColors = [
|
|
'bg-red-700/40 hover:bg-red-700/50 text-red-100 border border-red-500/50',
|
|
'bg-blue-800/40 hover:bg-blue-800/50 text-blue-100 border border-blue-600/50',
|
|
'bg-yellow-600/40 hover:bg-yellow-600/50 text-yellow-100 border border-yellow-400/50',
|
|
'bg-purple-800/40 hover:bg-purple-800/50 text-purple-100 border border-purple-600/50',
|
|
'bg-green-700/40 hover:bg-green-700/50 text-green-100 border border-green-500/50',
|
|
'bg-pink-700/40 hover:bg-pink-700/50 text-pink-100 border border-pink-500/50',
|
|
'bg-cyan-700/40 hover:bg-cyan-700/50 text-cyan-100 border border-cyan-500/50',
|
|
'bg-amber-700/40 hover:bg-amber-700/50 text-amber-100 border border-amber-500/50',
|
|
'bg-indigo-900/40 hover:bg-indigo-900/50 text-indigo-100 border border-indigo-700/50',
|
|
'bg-lime-700/40 hover:bg-lime-700/50 text-lime-100 border border-lime-500/50',
|
|
'bg-fuchsia-800/40 hover:bg-fuchsia-800/50 text-fuchsia-100 border border-fuchsia-600/50',
|
|
'bg-orange-700/40 hover:bg-orange-700/50 text-orange-100 border border-orange-500/50',
|
|
]
|
|
|
|
interface Sound {
|
|
id: number
|
|
name: string
|
|
filename: string
|
|
type: string
|
|
duration: number
|
|
size: number
|
|
play_count: number
|
|
is_normalized: boolean
|
|
normalized_filename?: string
|
|
}
|
|
|
|
interface SoundCardProps {
|
|
sound: Sound
|
|
onPlay: (soundId: number) => void
|
|
colorClasses: string
|
|
}
|
|
|
|
const SoundCard: React.FC<SoundCardProps> = ({
|
|
sound,
|
|
onPlay,
|
|
colorClasses,
|
|
}) => {
|
|
const handlePlay = () => {
|
|
onPlay(sound.id)
|
|
}
|
|
|
|
return (
|
|
<Card
|
|
onClick={handlePlay}
|
|
className={cn(
|
|
'py-2 transition-all duration-100 shadow-sm cursor-pointer active:scale-95',
|
|
colorClasses,
|
|
)}
|
|
>
|
|
<CardContent className="grid grid-cols-1 pl-3 pr-3 gap-1">
|
|
<h3 className="font-medium text-s truncate">{sound.name}</h3>
|
|
<div className="grid grid-cols-3 gap-1 text-xs text-muted-foreground">
|
|
<div className="flex">
|
|
<Clock className="h-3.5 w-3.5 mr-0.5" />
|
|
<span>{formatDuration(sound.duration)}</span>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<Weight className="h-3.5 w-3.5 mr-0.5" />
|
|
<span>{formatSize(sound.size)}</span>
|
|
</div>
|
|
<div className="flex justify-end items-center">
|
|
<Play className="h-3.5 w-3.5 mr-0.5" />
|
|
<NumberFlow value={sound.play_count} />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function SoundboardPage() {
|
|
const [sounds, setSounds] = useState<Sound[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [addUrlDialogOpen, setAddUrlDialogOpen] = useState(false)
|
|
const [currentColors, setCurrentColors] = useState<string[]>(lightModeColors)
|
|
// const { socket, isConnected } = useSocket()
|
|
|
|
// Setup keyboard shortcut for CTRL+U
|
|
useAddUrlShortcut(() => setAddUrlDialogOpen(true))
|
|
|
|
useEffect(() => {
|
|
fetchSounds()
|
|
}, [])
|
|
|
|
// Listen for sound_play_count_changed events from socket
|
|
useEffect(() => {
|
|
const handleSoundPlayCountChanged = (event: CustomEvent) => {
|
|
const { sound_id, play_count } = event.detail;
|
|
|
|
// Update the sound in the local state
|
|
setSounds(prevSounds =>
|
|
prevSounds.map(sound =>
|
|
sound.id === sound_id
|
|
? { ...sound, play_count }
|
|
: sound
|
|
)
|
|
);
|
|
};
|
|
|
|
// Listen for the custom event
|
|
window.addEventListener('sound_play_count_changed', handleSoundPlayCountChanged as EventListener);
|
|
|
|
// Cleanup
|
|
return () => {
|
|
window.removeEventListener('sound_play_count_changed', handleSoundPlayCountChanged as EventListener);
|
|
};
|
|
}, []);
|
|
|
|
const { theme } = useTheme()
|
|
|
|
useEffect(() => {
|
|
if (theme === 'dark') {
|
|
setCurrentColors(darkModeColors)
|
|
} else {
|
|
setCurrentColors(lightModeColors)
|
|
}
|
|
}, [theme])
|
|
|
|
const getSoundColor = (soundIdx: number) => {
|
|
const index = soundIdx % currentColors.length
|
|
return currentColors[index]
|
|
}
|
|
|
|
const fetchSounds = async () => {
|
|
try {
|
|
setLoading(true)
|
|
const response = await apiService.get('/api/soundboard/sounds?type=SDB')
|
|
const data = await response.json()
|
|
setSounds(data.sounds || [])
|
|
} catch {
|
|
setError('Failed to load sounds')
|
|
toast.error('Failed to load sounds')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handlePlaySound = async (soundId: number) => {
|
|
try {
|
|
// // Try socket.io first if connected
|
|
// if (socket && isConnected) {
|
|
// socket.emit('play_sound', { soundId })
|
|
// return
|
|
// }
|
|
|
|
// Fallback to API request
|
|
await apiService.post(`/api/soundboard/sounds/${soundId}/play`)
|
|
} catch {
|
|
setError('Failed to play sound')
|
|
toast.error('Failed to play sound')
|
|
}
|
|
}
|
|
|
|
const handleStopAll = async () => {
|
|
try {
|
|
await apiService.post('/api/soundboard/stop-all')
|
|
toast.success('All sounds stopped')
|
|
} catch {
|
|
setError('Failed to stop sounds')
|
|
toast.error('Failed to stop sounds')
|
|
}
|
|
}
|
|
|
|
const handleForceStopAll = async () => {
|
|
try {
|
|
const response = await apiService.post('/api/soundboard/force-stop')
|
|
const data = await response.json()
|
|
toast.success(`Force stopped ${data.stopped_count} sound instances`)
|
|
} catch {
|
|
setError('Failed to force stop sounds')
|
|
toast.error('Failed to force stop sounds')
|
|
}
|
|
}
|
|
|
|
const filteredSounds = sounds.filter(sound =>
|
|
sound.name.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
)
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex justify-center items-center h-64">
|
|
<div className="text-lg">Loading sounds...</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex justify-center items-center h-64">
|
|
<div className="text-lg text-red-500">{error}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center">
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={() => setAddUrlDialogOpen(true)}
|
|
variant="outline"
|
|
size="sm"
|
|
title="Add URL (Ctrl+U)"
|
|
>
|
|
<Plus size={16} className="mr-2" />
|
|
Add URL
|
|
</Button>
|
|
<Button onClick={handleStopAll} variant="outline" size="sm">
|
|
<Square size={16} className="mr-2" />
|
|
Stop All
|
|
</Button>
|
|
<Button
|
|
onClick={handleForceStopAll}
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-red-600"
|
|
>
|
|
<Square size={16} className="mr-2" />
|
|
Force Stop
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex-1">
|
|
<input
|
|
type="text"
|
|
placeholder="Search sounds..."
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
{filteredSounds.length} of {sounds.length} sounds
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
|
|
{filteredSounds.map((sound, idx) => (
|
|
<SoundCard
|
|
key={sound.id}
|
|
sound={sound}
|
|
onPlay={handlePlaySound}
|
|
colorClasses={getSoundColor(idx)}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{filteredSounds.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<div className="text-lg text-muted-foreground">
|
|
{searchTerm
|
|
? 'No sounds found matching your search.'
|
|
: 'No sounds available.'}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Add URL Dialog */}
|
|
<AddUrlDialog
|
|
open={addUrlDialogOpen}
|
|
onOpenChange={setAddUrlDialogOpen}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|