diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx index 1988bf0..55f78dd 100644 --- a/src/components/ThemeProvider.tsx +++ b/src/components/ThemeProvider.tsx @@ -1,6 +1,5 @@ -import { createContext, useContext, useEffect, useState } from 'react' - -type Theme = 'dark' | 'light' | 'system' +import { useEffect, useState } from 'react' +import { ThemeProviderContext, type Theme } from '@/contexts/ThemeContext' type ThemeProviderProps = { children: React.ReactNode @@ -8,22 +7,10 @@ type ThemeProviderProps = { storageKey?: string } -type ThemeProviderState = { - theme: Theme - setTheme: (theme: Theme) => void -} - -const initialState: ThemeProviderState = { - theme: 'system', - setTheme: () => null, -} - -const ThemeProviderContext = createContext(initialState) - export function ThemeProvider({ children, defaultTheme = 'system', - storageKey = 'vite-ui-theme', + storageKey = 'theme', ...props }: ThemeProviderProps) { const [theme, setTheme] = useState( @@ -62,12 +49,3 @@ export function ThemeProvider({ ) } - -export const useTheme = () => { - const context = useContext(ThemeProviderContext) - - if (context === undefined) - throw new Error('useTheme must be used within a ThemeProvider') - - return context -} diff --git a/src/components/sounds/SoundCard.tsx b/src/components/sounds/SoundCard.tsx new file mode 100644 index 0000000..a0bec32 --- /dev/null +++ b/src/components/sounds/SoundCard.tsx @@ -0,0 +1,47 @@ +import { Card, CardContent } from '@/components/ui/card' +import { Play, Clock, Weight } from 'lucide-react' +import { type Sound } from '@/lib/api/services/sounds' +import { cn } from '@/lib/utils' +import { formatDuration } from '@/utils/format-duration' +import { formatSize } from '@/utils/format-size' +import NumberFlow from '@number-flow/react' + +interface SoundCardProps { + sound: Sound + playSound: (sound: Sound) => void + colorClasses: string +} + +export function SoundCard({ sound, playSound, colorClasses }: SoundCardProps) { + const handlePlaySound = () => { + playSound(sound) + } + + return ( + + +

{sound.name}

+
+
+ + {formatDuration(sound.duration)} +
+
+ + {formatSize(sound.size)} +
+
+ + +
+
+ + + ) +} \ No newline at end of file diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx new file mode 100644 index 0000000..ef5d063 --- /dev/null +++ b/src/contexts/ThemeContext.tsx @@ -0,0 +1,16 @@ +import { createContext } from 'react' + +type Theme = 'dark' | 'light' | 'system' + +type ThemeProviderState = { + theme: Theme + setTheme: (theme: Theme) => void +} + +const initialState: ThemeProviderState = { + theme: 'system', + setTheme: () => null, +} + +export const ThemeProviderContext = createContext(initialState) +export type { Theme, ThemeProviderState } \ No newline at end of file diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts new file mode 100644 index 0000000..295dbf6 --- /dev/null +++ b/src/hooks/use-theme.ts @@ -0,0 +1,11 @@ +import { useContext } from 'react' +import { ThemeProviderContext } from '@/contexts/ThemeContext' + +export const useTheme = () => { + const context = useContext(ThemeProviderContext) + + if (context === undefined) + throw new Error('useTheme must be used within a ThemeProvider') + + return context +} \ No newline at end of file diff --git a/src/lib/api/services/index.ts b/src/lib/api/services/index.ts new file mode 100644 index 0000000..0d4fc89 --- /dev/null +++ b/src/lib/api/services/index.ts @@ -0,0 +1,2 @@ +export * from './auth' +export * from './sounds' \ No newline at end of file diff --git a/src/lib/api/services/sounds.ts b/src/lib/api/services/sounds.ts new file mode 100644 index 0000000..ba25a6d --- /dev/null +++ b/src/lib/api/services/sounds.ts @@ -0,0 +1,83 @@ +import { apiClient } from '../client' + +export interface Sound { + id: number + name: string + filename: string + duration: number + size: number + hash: string + type: 'SDB' | 'TTS' | 'EXT' + play_count: number + is_normalized: boolean + normalized_filename?: string + normalized_duration?: number + normalized_size?: number + normalized_hash?: string + thumbnail?: string + is_music: boolean + is_deletable: boolean + created_at: string + updated_at: string +} + +export interface GetSoundsParams { + types?: string[] +} + +export interface GetSoundsResponse { + sounds: Sound[] +} + +export class SoundsService { + /** + * Get all sounds with optional type filtering + */ + async getSounds(params?: GetSoundsParams): Promise { + const queryParams: Record = {} + + if (params?.types) { + // Handle multiple types by building query string manually + const searchParams = new URLSearchParams() + params.types.forEach(type => { + searchParams.append('types', type) + }) + + const response = await apiClient.get(`/api/v1/sounds/?${searchParams.toString()}`) + return response.sounds || [] + } + + const response = await apiClient.get('/api/v1/sounds/', { params: queryParams }) + return response.sounds || [] + } + + /** + * Get sounds of a specific type + */ + async getSoundsByType(type: string): Promise { + return this.getSounds({ types: [type] }) + } + + /** + * Get SDB type sounds + */ + async getSDBSounds(): Promise { + return this.getSoundsByType('SDB') + } + + /** + * Play a sound by ID + */ + async playSound(soundId: number): Promise { + await apiClient.post(`/api/v1/sounds/play/${soundId}`) + } + + /** + * Stop all playing sounds + */ + async stopSounds(): Promise { + await apiClient.post('/api/v1/sounds/stop') + } +} + +export const soundsService = new SoundsService() \ No newline at end of file diff --git a/src/pages/SoundsPage.tsx b/src/pages/SoundsPage.tsx index 6286332..7817ef9 100644 --- a/src/pages/SoundsPage.tsx +++ b/src/pages/SoundsPage.tsx @@ -1,6 +1,171 @@ +import { useEffect, useState } from 'react' import { AppLayout } from '@/components/AppLayout' +import { SoundCard } from '@/components/sounds/SoundCard' +import { soundsService, type Sound } from '@/lib/api/services/sounds' +import { Skeleton } from '@/components/ui/skeleton' +import { AlertCircle } from 'lucide-react' +import { toast } from 'sonner' +import { useTheme } from '@/hooks/use-theme' +import { soundEvents, SOUND_EVENTS } from '@/lib/events' + +interface SoundPlayedEventData { + sound_id: number + sound_name: string + user_id: number | null + user_name: string | null + play_count: number +} + +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', +] export function SoundsPage() { + const [sounds, setSounds] = useState([]) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + const [currentColors, setCurrentColors] = useState(lightModeColors) + + const handlePlaySound = async (sound: Sound) => { + try { + await soundsService.playSound(sound.id) + toast.success(`Playing: ${sound.name || sound.filename}`) + } catch (error) { + toast.error(`Failed to play sound: ${error instanceof Error ? error.message : 'Unknown error'}`) + } + } + + 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] + } + + useEffect(() => { + const fetchSounds = async () => { + try { + setLoading(true) + setError(null) + const sdbSounds = await soundsService.getSDBSounds() + setSounds(sdbSounds) + } catch (err) { + const errorMessage = err instanceof Error ? err.message : 'Failed to fetch sounds' + setError(errorMessage) + toast.error(errorMessage) + } finally { + setLoading(false) + } + } + + fetchSounds() + }, []) + + // Listen for sound_played events and update play_count + useEffect(() => { + const handleSoundPlayed = (eventData: SoundPlayedEventData) => { + setSounds(prevSounds => + prevSounds.map(sound => + sound.id === eventData.sound_id + ? { ...sound, play_count: eventData.play_count } + : sound + ) + ) + } + + soundEvents.on(SOUND_EVENTS.SOUND_PLAYED, handleSoundPlayed) + + return () => { + soundEvents.off(SOUND_EVENTS.SOUND_PLAYED, handleSoundPlayed) + } + }, []) + + const renderContent = () => { + if (loading) { + return ( +
+ {Array.from({ length: 10 }).map((_, i) => ( +
+ +
+ ))} +
+ ) + } + + if (error) { + return ( +
+ +

Failed to load sounds

+

{error}

+ +
+ ) + } + + if (sounds.length === 0) { + return ( +
+
+ 🎵 +
+

No sounds found

+

+ No SDB type sounds are available in your library. +

+
+ ) + } + + return ( +
+ {sounds.map((sound, idx) => ( + + ))} +
+ ) + } + return (
-

Sounds

-

- Sound management interface coming soon... -

+
+
+

Sounds

+

+ Browse and play your soundboard library +

+
+ {!loading && !error && ( +
+ {sounds.length} sound{sounds.length !== 1 ? 's' : ''} +
+ )} +
+ {renderContent()}
) diff --git a/src/utils/format-duration.ts b/src/utils/format-duration.ts new file mode 100644 index 0000000..c203568 --- /dev/null +++ b/src/utils/format-duration.ts @@ -0,0 +1,18 @@ +export function formatDuration(ms: number): string { + if (isNaN(ms) || ms < 0) return '0:00' + + // Convert milliseconds to seconds + const totalSeconds = Math.floor(ms / 1000) + + // Calculate hours, minutes, and remaining seconds + const hours = Math.floor(totalSeconds / 3600) + const minutes = Math.floor((totalSeconds % 3600) / 60) + const seconds = totalSeconds % 60 + + // Format based on duration + if (hours > 0) { + return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}` + } else { + return `${minutes}:${seconds.toString().padStart(2, '0')}` + } +} diff --git a/src/utils/format-size.ts b/src/utils/format-size.ts new file mode 100644 index 0000000..61d41ab --- /dev/null +++ b/src/utils/format-size.ts @@ -0,0 +1,65 @@ +/** + * Units for file sizes + */ +const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'] + +/** + * Interface for file size + */ +export interface FileSize { + value: number + unit: string +} + +/** + * Base function to parse file size in bytes to value and unit + * @param bytes File size in bytes + * @param binary Whether to use binary (1024) or decimal (1000) units + * @returns Object with numeric value and unit string + */ +function parseSize(bytes: number, binary: boolean = false): FileSize { + // Handle invalid input + if (bytes === null || bytes === undefined || isNaN(bytes) || bytes < 0) { + return { value: 0, unit: 'B' } + } + + // If the size is 0, return early + if (bytes === 0) { + return { value: 0, unit: 'B' } + } + + // Otherwise, determine the appropriate unit based on the size + const unit = binary ? 1024 : 1000 + const unitIndex = Math.floor(Math.log(bytes) / Math.log(unit)) + const unitSize = Math.pow(unit, unitIndex) + const value = bytes / unitSize + + // Make sure we don't exceed our units array + const safeUnitIndex = Math.min(unitIndex, FILE_SIZE_UNITS.length - 1) + + return { + value: Math.round(value * 100) / 100, // Round to 2 decimal places + unit: FILE_SIZE_UNITS[safeUnitIndex] + } +} + +/** + * Converts a file size in bytes to a human-readable string + * @param bytes File size in bytes + * @param binary Whether to use binary (1024) or decimal (1000) units + * @returns Formatted file size string (e.g., "1.5 MB") + */ +export function formatSize(bytes: number, binary: boolean = false): string { + const { value, unit } = parseSize(bytes, binary) + return `${value.toFixed(2)} ${unit}` +} + +/** + * Converts a file size in bytes to an object with value and unit + * @param bytes File size in bytes + * @param binary Whether to use binary (1024) or decimal (1000) units + * @returns Object with numeric value and unit string + */ +export function formatSizeObject(bytes: number, binary: boolean = false): FileSize { + return parseSize(bytes, binary) +} \ No newline at end of file