quaik8/sdb-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reorganize imports and improve code formatting in SoundboardPage component
Some checks failed
Frontend CI / lint (push) Failing after 5m35s
Details
Frontend CI / build (push) Has been skipped
Details

Browse Source
This commit is contained in:
JSC
2025-07-13 00:00:18 +02:00
parent f7523e15b6
commit 792442e3cf
1 changed files with 96 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/pages/SoundboardPage.tsx
View File

@@ -1,16 +1,16 @@
import React, { useState, useEffect } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Play, Square, Plus, Clock, Weight } from 'lucide-react';
import { toast } from 'sonner';
import { apiService } from '@/services/api';
import { AddUrlDialog } from '@/components/AddUrlDialog';
import { useAddUrlShortcut } from '@/hooks/use-keyboard-shortcuts';
import { formatDuration } from '@/lib/format-duration';
import { cn } from '@/lib/utils';
import NumberFlow from '@number-flow/react';
import { formatSize } from '@/lib/format-size';
import { useTheme } from 'next-themes';
import { AddUrlDialog } from '@/components/AddUrlDialog'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
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',
@@ -43,33 +43,37 @@ const darkModeColors = [
]
interface Sound {
id: number;
name: string;
filename: string;
type: string;
duration: number;
size: number;
play_count: number;
is_normalized: boolean;
normalized_filename?: string;
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;
sound: Sound
onPlay: (soundId: number) => void
colorClasses: string
}
const SoundCard: React.FC<SoundCardProps> = ({ sound, onPlay, colorClasses }) => {
const SoundCard: React.FC<SoundCardProps> = ({
sound,
onPlay,
colorClasses,
}) => {
const handlePlay = () => {
onPlay(sound.id);
};
onPlay(sound.id)
}
return (
<Card
onClick={handlePlay}
className={cn(
'py-2 transition-all duration-100 border-0 shadow-sm cursor-pointer active:scale-95',
'py-2 transition-all duration-100 shadow-sm cursor-pointer active:scale-95',
colorClasses,
)}
>
@@ -91,33 +95,33 @@ const SoundCard: React.FC<SoundCardProps> = ({ sound, onPlay, colorClasses }) =>
</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 [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)
// Setup keyboard shortcut for CTRL+U
useAddUrlShortcut(() => setAddUrlDialogOpen(true));
useAddUrlShortcut(() => setAddUrlDialogOpen(true))
useEffect(() => {
fetchSounds();
}, []);
fetchSounds()
}, [])
const { resolvedTheme } = useTheme()
const { theme } = useTheme()
useEffect(() => {
if (resolvedTheme === 'dark') {
if (theme === 'dark') {
setCurrentColors(darkModeColors)
} else {
setCurrentColors(lightModeColors)
}
}, [resolvedTheme])
}, [theme])
const getSoundColor = (soundIdx: number) => {
const index = soundIdx % currentColors.length
@@ -126,58 +130,58 @@ export function SoundboardPage() {
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 (err) {
setError('Failed to load sounds');
toast.error('Failed to load sounds');
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);
setLoading(false)
}
};
}
const handlePlaySound = async (soundId: number) => {
try {
await apiService.post(`/api/soundboard/sounds/${soundId}/play`);
} catch (err) {
setError('Failed to play sound');
toast.error('Failed to play sound');
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 (err) {
setError('Failed to stop sounds');
toast.error('Failed to stop sounds');
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 (err) {
setError('Failed to force stop sounds');
toast.error('Failed to force stop sounds');
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())
);
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) {
@@ -185,7 +189,7 @@ export function SoundboardPage() {
<div className="flex justify-center items-center h-64">
<div className="text-lg text-red-500">{error}</div>
</div>
);
)
}
return (
@@ -206,7 +210,12 @@ export function SoundboardPage() {
<Square size={16} className="mr-2" />
Stop All
</Button>
<Button onClick={handleForceStopAll} variant="outline" size="sm" className="text-red-600">
<Button
onClick={handleForceStopAll}
variant="outline"
size="sm"
className="text-red-600"
>
<Square size={16} className="mr-2" />
Force Stop
</Button>
@@ -219,7 +228,7 @@ export function SoundboardPage() {
type="text"
placeholder="Search sounds..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
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>
@@ -228,7 +237,7 @@ export function SoundboardPage() {
</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-4">
<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}
@@ -242,7 +251,9 @@ export function SoundboardPage() {
{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.'}
{searchTerm
? 'No sounds found matching your search.'
: 'No sounds available.'}
</div>
</div>
)}
@@ -253,5 +264,5 @@ export function SoundboardPage() {
onOpenChange={setAddUrlDialogOpen}
/>
</div>
);
)
}