feat: add soundboard and admin sounds management pages with routing
This commit is contained in:
JSC
388
src/pages/AdminSoundsPage.tsx
Normal file
388
src/pages/AdminSoundsPage.tsx
Normal file
@@ -0,0 +1,388 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
RefreshCw,
|
||||
Volume2,
|
||||
Trash2,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertCircle,
|
||||
Database,
|
||||
Zap
|
||||
} from 'lucide-react';
|
||||
import { apiService } from '@/services/api';
|
||||
|
||||
interface Sound {
|
||||
id: number;
|
||||
name: string;
|
||||
filename: string;
|
||||
type: string;
|
||||
duration: number;
|
||||
size: number;
|
||||
play_count: number;
|
||||
is_normalized: boolean;
|
||||
normalized_filename?: string;
|
||||
original_exists: boolean;
|
||||
normalized_exists: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface ScanStats {
|
||||
total_sounds: number;
|
||||
soundboard_sounds: number;
|
||||
music_sounds: number;
|
||||
total_size_bytes: number;
|
||||
total_duration: number;
|
||||
total_plays: number;
|
||||
}
|
||||
|
||||
interface NormalizationStats {
|
||||
total_sounds: number;
|
||||
normalized_count: number;
|
||||
normalization_percentage: number;
|
||||
total_original_size: number;
|
||||
total_normalized_size: number;
|
||||
size_difference: number;
|
||||
}
|
||||
|
||||
export default function AdminSoundsPage() {
|
||||
const [sounds, setSounds] = useState<Sound[]>([]);
|
||||
const [scanStats, setScanStats] = useState<ScanStats | null>(null);
|
||||
const [normalizationStats, setNormalizationStats] = useState<NormalizationStats | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const [normalizing, setNormalizing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [page]);
|
||||
|
||||
const fetchData = async () => {
|
||||
await Promise.all([
|
||||
fetchSounds(),
|
||||
fetchScanStats(),
|
||||
fetchNormalizationStats()
|
||||
]);
|
||||
};
|
||||
|
||||
const fetchSounds = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await apiService.get(`/api/admin/sounds/list?page=${page}&per_page=20`);
|
||||
const data = await response.json();
|
||||
setSounds(data.sounds || []);
|
||||
setTotalPages(data.pagination?.pages || 1);
|
||||
} catch (err) {
|
||||
setError('Failed to load sounds');
|
||||
console.error('Error fetching sounds:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchScanStats = async () => {
|
||||
try {
|
||||
const response = await apiService.get('/api/admin/sounds/scan/status');
|
||||
const data = await response.json();
|
||||
setScanStats(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching scan stats:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchNormalizationStats = async () => {
|
||||
try {
|
||||
const response = await apiService.get('/api/admin/sounds/normalize/status');
|
||||
const data = await response.json();
|
||||
setNormalizationStats(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching normalization stats:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleScanSounds = async () => {
|
||||
try {
|
||||
setScanning(true);
|
||||
setError(null);
|
||||
const response = await apiService.post('/api/admin/sounds/scan');
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
alert(`Scan completed: ${data.files_added} new sounds added, ${data.files_skipped} skipped`);
|
||||
await fetchData();
|
||||
} else {
|
||||
setError(data.error || 'Scan failed');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to scan sounds');
|
||||
console.error('Error scanning sounds:', err);
|
||||
} finally {
|
||||
setScanning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNormalizeAll = async () => {
|
||||
try {
|
||||
setNormalizing(true);
|
||||
setError(null);
|
||||
const response = await apiService.post('/api/admin/sounds/normalize', {
|
||||
overwrite: false,
|
||||
two_pass: true
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
alert(`Normalization completed: ${data.successful} successful, ${data.failed} failed, ${data.skipped} skipped`);
|
||||
await fetchData();
|
||||
} else {
|
||||
setError(data.error || 'Normalization failed');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to normalize sounds');
|
||||
console.error('Error normalizing sounds:', err);
|
||||
} finally {
|
||||
setNormalizing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNormalizeSound = async (soundId: number) => {
|
||||
try {
|
||||
const response = await apiService.post(`/api/admin/sounds/${soundId}/normalize`, {
|
||||
overwrite: false,
|
||||
two_pass: true
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
alert(`Sound normalized successfully`);
|
||||
await fetchData();
|
||||
} else {
|
||||
alert(`Normalization failed: ${data.error}`);
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Failed to normalize sound');
|
||||
console.error('Error normalizing sound:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteSound = async (soundId: number, soundName: string) => {
|
||||
if (!confirm(`Are you sure you want to delete "${soundName}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await apiService.delete(`/api/admin/sounds/${soundId}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
alert('Sound deleted successfully');
|
||||
await fetchData();
|
||||
} else {
|
||||
alert(`Delete failed: ${data.error}`);
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Failed to delete sound');
|
||||
console.error('Error deleting sound:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
const formatDuration = (ms: number) => {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">Sound Management</h1>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleScanSounds}
|
||||
disabled={scanning}
|
||||
variant="outline"
|
||||
>
|
||||
{scanning ? <RefreshCw className="w-4 h-4 animate-spin mr-2" /> : <Database className="w-4 h-4 mr-2" />}
|
||||
{scanning ? 'Scanning...' : 'Scan Sounds'}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleNormalizeAll}
|
||||
disabled={normalizing}
|
||||
>
|
||||
{normalizing ? <RefreshCw className="w-4 h-4 animate-spin mr-2" /> : <Zap className="w-4 h-4 mr-2" />}
|
||||
{normalizing ? 'Normalizing...' : 'Normalize All'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Statistics Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{scanStats && (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Sounds</CardTitle>
|
||||
<Volume2 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{scanStats.total_sounds}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{scanStats.soundboard_sounds} soundboard, {scanStats.music_sounds} music
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{normalizationStats && (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Normalized</CardTitle>
|
||||
<Zap className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{normalizationStats.normalized_count}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{normalizationStats.normalization_percentage.toFixed(1)}% of total sounds
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{scanStats && (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Size</CardTitle>
|
||||
<Database className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{formatFileSize(scanStats.total_size_bytes)}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{scanStats.total_plays} total plays
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sounds List */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Sounds ({sounds.length})</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<RefreshCw className="w-6 h-6 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sounds.map((sound) => (
|
||||
<div
|
||||
key={sound.id}
|
||||
className="flex items-center justify-between p-3 border rounded-lg"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-medium">{sound.name}</h3>
|
||||
<div className="flex gap-1">
|
||||
{sound.original_exists ? (
|
||||
<div title="Original file exists">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
</div>
|
||||
) : (
|
||||
<div title="Original file missing">
|
||||
<XCircle className="w-4 h-4 text-red-500" />
|
||||
</div>
|
||||
)}
|
||||
{sound.is_normalized ? (
|
||||
sound.normalized_exists ? (
|
||||
<div title="Normalized file exists">
|
||||
<CheckCircle className="w-4 h-4 text-blue-500" />
|
||||
</div>
|
||||
) : (
|
||||
<div title="Normalized in DB but file missing">
|
||||
<AlertCircle className="w-4 h-4 text-yellow-500" />
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div title="Not normalized">
|
||||
<XCircle className="w-4 h-4 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{sound.filename} • {formatFileSize(sound.size)} • {formatDuration(sound.duration)} • {sound.play_count} plays
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{!sound.is_normalized && (
|
||||
<Button
|
||||
onClick={() => handleNormalizeSound(sound.id)}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
<Zap className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => handleDeleteSound(sound.id, sound.name)}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="text-red-500 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex justify-center gap-2 mt-4">
|
||||
<Button
|
||||
onClick={() => setPage(p => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<span className="py-2 px-3 text-sm">
|
||||
Page {page} of {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
|
||||
disabled={page === totalPages}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
205
src/pages/SoundboardPage.tsx
Normal file
205
src/pages/SoundboardPage.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Play, Square, Volume2 } from 'lucide-react';
|
||||
import { apiService } from '@/services/api';
|
||||
|
||||
interface Sound {
|
||||
id: number;
|
||||
name: string;
|
||||
filename: string;
|
||||
type: string;
|
||||
duration: number;
|
||||
play_count: number;
|
||||
is_normalized: boolean;
|
||||
normalized_filename?: string;
|
||||
}
|
||||
|
||||
interface SoundCardProps {
|
||||
sound: Sound;
|
||||
onPlay: (soundId: number) => void;
|
||||
isPlaying: boolean;
|
||||
}
|
||||
|
||||
const SoundCard: React.FC<SoundCardProps> = ({ sound, onPlay, isPlaying }) => {
|
||||
const handlePlay = () => {
|
||||
onPlay(sound.id);
|
||||
};
|
||||
|
||||
const formatDuration = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="transition-all duration-200 hover:shadow-lg cursor-pointer group">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium truncate" title={sound.name}>
|
||||
{sound.name}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Volume2 size={12} />
|
||||
<span>{formatDuration(sound.duration)}</span>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{sound.play_count} plays
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handlePlay}
|
||||
className="w-full"
|
||||
variant={isPlaying ? "secondary" : "default"}
|
||||
size="sm"
|
||||
>
|
||||
<Play size={16} className="mr-2" />
|
||||
{isPlaying ? 'Playing...' : 'Play'}
|
||||
</Button>
|
||||
{sound.is_normalized && (
|
||||
<div className="mt-2 text-xs text-green-600 text-center">
|
||||
Normalized
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default function SoundboardPage() {
|
||||
const [sounds, setSounds] = useState<Sound[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [playingSound, setPlayingSound] = useState<number | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
fetchSounds();
|
||||
}, []);
|
||||
|
||||
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');
|
||||
console.error('Error fetching sounds:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePlaySound = async (soundId: number) => {
|
||||
try {
|
||||
setPlayingSound(soundId);
|
||||
await apiService.post(`/api/soundboard/sounds/${soundId}/play`);
|
||||
|
||||
// Reset playing state after a short delay
|
||||
setTimeout(() => {
|
||||
setPlayingSound(null);
|
||||
}, 1000);
|
||||
} catch (err) {
|
||||
setError('Failed to play sound');
|
||||
console.error('Error playing sound:', err);
|
||||
setPlayingSound(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStopAll = async () => {
|
||||
try {
|
||||
await apiService.post('/api/soundboard/stop-all');
|
||||
setPlayingSound(null);
|
||||
} catch (err) {
|
||||
setError('Failed to stop sounds');
|
||||
console.error('Error stopping sounds:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleForceStopAll = async () => {
|
||||
try {
|
||||
const response = await apiService.post('/api/soundboard/force-stop');
|
||||
const data = await response.json();
|
||||
setPlayingSound(null);
|
||||
alert(`Force stopped ${data.stopped_count} sound instances`);
|
||||
} catch (err) {
|
||||
setError('Failed to force stop sounds');
|
||||
console.error('Error force stopping sounds:', err);
|
||||
}
|
||||
};
|
||||
|
||||
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 justify-between">
|
||||
<h1 className="text-2xl font-bold">Soundboard</h1>
|
||||
<div className="flex gap-2">
|
||||
<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-4">
|
||||
{filteredSounds.map((sound) => (
|
||||
<SoundCard
|
||||
key={sound.id}
|
||||
sound={sound}
|
||||
onPlay={handlePlaySound}
|
||||
isPlaying={playingSound === sound.id}
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user