From d80d8588f6ab8b793dbab3c2c440818e1aa4451c Mon Sep 17 00:00:00 2001 From: JSC Date: Sun, 10 Aug 2025 21:55:20 +0200 Subject: [PATCH] fix: update previous_volume to 80 in CompactPlayer and Player components for consistency --- src/components/player/CompactPlayer.tsx | 2 +- src/components/player/Player.tsx | 7 +- src/pages/PlaylistEditPage.tsx | 513 +++--------------------- 3 files changed, 68 insertions(+), 454 deletions(-) diff --git a/src/components/player/CompactPlayer.tsx b/src/components/player/CompactPlayer.tsx index f66b79f..56735db 100644 --- a/src/components/player/CompactPlayer.tsx +++ b/src/components/player/CompactPlayer.tsx @@ -27,7 +27,7 @@ export function CompactPlayer({ className }: CompactPlayerProps) { status: 'stopped', mode: 'continuous', volume: 80, - previous_volume: 50, + previous_volume: 80, position: 0 }) const [isLoading, setIsLoading] = useState(false) diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx index 49ee910..3e41019 100644 --- a/src/components/player/Player.tsx +++ b/src/components/player/Player.tsx @@ -46,7 +46,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) { status: 'stopped', mode: 'continuous', volume: 80, - previous_volume: 50, + previous_volume: 80, position: 0 }) const [displayMode, setDisplayMode] = useState(() => { @@ -566,11 +566,6 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) { )} - {state.playlist && ( -

- {state.playlist.name} -

- )} {/* Progress Bar */} diff --git a/src/pages/PlaylistEditPage.tsx b/src/pages/PlaylistEditPage.tsx index 33c53b3..e44b87c 100644 --- a/src/pages/PlaylistEditPage.tsx +++ b/src/pages/PlaylistEditPage.tsx @@ -2,14 +2,11 @@ import { useEffect, useState, useCallback } from 'react' import { useParams, useNavigate } from 'react-router' import { DndContext, - DragOverlay, - DragStartEvent, DragEndEvent, closestCenter, PointerSensor, useSensor, useSensors, - useDroppable, } from '@dnd-kit/core' import { SortableContext, @@ -19,7 +16,6 @@ import { import { CSS } from '@dnd-kit/utilities' import { AppLayout } from '@/components/AppLayout' import { playlistsService, type Playlist, type PlaylistSound } from '@/lib/api/services/playlists' -import { soundsService, type Sound } from '@/lib/api/services/sounds' import { Skeleton } from '@/components/ui/skeleton' import { Input } from '@/components/ui/input' import { Button } from '@/components/ui/button' @@ -28,53 +24,10 @@ import { Label } from '@/components/ui/label' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Badge } from '@/components/ui/badge' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' -import { AlertCircle, Save, Music, Clock, ChevronUp, ChevronDown, Trash2, RefreshCw, Edit, X, ArrowLeft, Plus } from 'lucide-react' +import { AlertCircle, Save, Music, Clock, ChevronUp, ChevronDown, Trash2, RefreshCw, Edit, X, ArrowLeft } from 'lucide-react' import { toast } from 'sonner' import { formatDuration } from '@/utils/format-duration' -// Sortable playlist item component for add sounds mode -interface SortablePlaylistItemProps { - sound: PlaylistSound - index: number -} - -function SortablePlaylistItem({ sound, index }: SortablePlaylistItemProps) { - const { - attributes, - listeners, - setNodeRef, - transform, - transition, - isDragging, - } = useSortable({ id: `playlist-sound-${sound.id}` }) - - const style = { - transform: CSS.Transform.toString(transform), - transition, - opacity: isDragging ? 0.5 : 1, - } - - return ( -
-
- {index + 1} -
- -
-
{sound.name}
-
- {formatDuration(sound.duration || 0)} -
-
-
- ) -} // Sortable table row component for normal table view interface SortableTableRowProps { @@ -184,99 +137,6 @@ function SortableTableRow({ ) } -// Draggable available sound component -interface DraggableAvailableSoundProps { - sound: Sound - onAddSound: (soundId: number) => void -} - -function DraggableAvailableSound({ sound, onAddSound }: DraggableAvailableSoundProps) { - const { - attributes, - listeners, - setNodeRef, - transform, - transition, - isDragging, - } = useSortable({ id: sound.id.toString() }) - - const style = { - transform: CSS.Transform.toString(transform), - transition, - opacity: isDragging ? 0.5 : 1, - } - - return ( -
onAddSound(sound.id)} - > - -
-
{sound.name}
-
- {formatDuration(sound.duration || 0)} • {sound.type} -
-
- -
- ) -} - -// Drop zone component -interface DropZoneProps { - position: number - isActive?: boolean -} - -function DropZone({ position, isActive }: DropZoneProps) { - const { - setNodeRef, - isOver, - } = useDroppable({ - id: `playlist-position-${position}`, - data: { type: 'position', position } - }) - - return ( -
- ) -} - -// Empty playlist drop zone -function EmptyPlaylistDropZone() { - const { - setNodeRef, - isOver, - } = useDroppable({ - id: 'playlist-position-0', - data: { type: 'position', position: 0 } - }) - - return ( -
-

Drag sounds here to add to playlist

-
- ) -} export function PlaylistEditPage() { const { id } = useParams<{ id: string }>() @@ -290,12 +150,7 @@ export function PlaylistEditPage() { const [error, setError] = useState(null) const [saving, setSaving] = useState(false) const [isEditMode, setIsEditMode] = useState(false) - const [isAddSoundsMode, setIsAddSoundsMode] = useState(false) - const [availableSounds, setAvailableSounds] = useState([]) - const [loadingAvailableSounds, setLoadingAvailableSounds] = useState(false) - // dnd-kit state - const [draggedSound, setDraggedSound] = useState(null) // dnd-kit sensors const sensors = useSensors( @@ -481,135 +336,24 @@ export function PlaylistEditPage() { } } - const fetchAvailableSounds = useCallback(async () => { - try { - setLoadingAvailableSounds(true) - // Get all EXT sounds - const allExtSounds = await soundsService.getSoundsByType('EXT') - - // Filter out sounds that are already in the current playlist - const currentSoundIds = sounds.map(sound => sound.id) - const available = allExtSounds.filter(sound => !currentSoundIds.includes(sound.id)) - - setAvailableSounds(available) - } catch (err) { - const errorMessage = err instanceof Error ? err.message : 'Failed to fetch available sounds' - toast.error(errorMessage) - } finally { - setLoadingAvailableSounds(false) - } - }, [sounds]) - - const handleOpenAddSounds = async () => { - setIsAddSoundsMode(true) - await fetchAvailableSounds() - } - - const handleCloseAddSounds = () => { - setIsAddSoundsMode(false) - setAvailableSounds([]) - } - - const handleAddSoundToPlaylist = async (soundId: number, position?: number) => { - // Find the sound being added for potential rollback - const soundToAdd = availableSounds.find(sound => sound.id === soundId) - - try { - // Optimistically remove the sound from available sounds for instant feedback - setAvailableSounds(prev => prev.filter(sound => sound.id !== soundId)) - - await playlistsService.addSoundToPlaylist(playlistId, soundId, position) - toast.success('Sound added to playlist') - - // Refresh playlist sounds to show the new addition - await fetchSounds() - } catch (err) { - // Rollback: add the sound back to available sounds if the API call failed - if (soundToAdd) { - setAvailableSounds(prev => [...prev, soundToAdd]) - } - const errorMessage = err instanceof Error ? err.message : 'Failed to add sound to playlist' - toast.error(errorMessage) - } - } - - // dnd-kit drag handlers - const handleDragStart = (event: DragStartEvent) => { - const { active } = event - - // Extract sound ID from different ID formats - const activeId = active.id as string - const getSoundId = (id: string) => { - if (id.startsWith('table-sound-')) { - return parseInt(id.replace('table-sound-', ''), 10) - } else if (id.startsWith('playlist-sound-')) { - return parseInt(id.replace('playlist-sound-', ''), 10) - } else { - return parseInt(id, 10) - } - } - - const soundId = getSoundId(activeId) - const availableSound = availableSounds.find(s => s.id === soundId) - const playlistSound = sounds.find(s => s.id === soundId) - - setDraggedSound(availableSound || playlistSound || null) - } - - const handleDragOver = () => { - // Handle drag over logic here if needed for visual feedback - } + // dnd-kit drag handler const handleDragEnd = async (event: DragEndEvent) => { const { active, over } = event - setDraggedSound(null) - if (!over) return const activeId = active.id as string const overId = over.id as string - // Extract sound ID from different ID formats - const getDraggedSoundId = (id: string) => { - if (id.startsWith('table-sound-')) { - return parseInt(id.replace('table-sound-', ''), 10) - } else if (id.startsWith('playlist-sound-')) { - return parseInt(id.replace('playlist-sound-', ''), 10) - } else { - return parseInt(id, 10) - } - } - - const getTargetSoundId = (id: string) => { - if (id.startsWith('table-sound-')) { - return parseInt(id.replace('table-sound-', ''), 10) - } else if (id.startsWith('playlist-sound-')) { - return parseInt(id.replace('playlist-sound-', ''), 10) - } else { - return parseInt(id, 10) - } - } - - const draggedSoundId = getDraggedSoundId(activeId) - - // Check if dragging from available sounds (adding new sound) - const isFromAvailable = availableSounds.some(s => s.id === draggedSoundId) - - // Handle dropping onto playlist positions (inserting new sound in add sounds mode) - if (overId.startsWith('playlist-position-') && isFromAvailable) { - const position = parseInt(overId.replace('playlist-position-', ''), 10) - await handleAddSoundToPlaylist(draggedSoundId, position) - return - } - - // Handle reordering within playlist (both add sounds mode and table mode) - if (overId.startsWith('playlist-sound-') || overId.startsWith('table-sound-')) { - const targetSoundId = getTargetSoundId(overId) + // Only handle table-sound reordering + if (overId.startsWith('table-sound-')) { + const draggedSoundId = parseInt(activeId.replace('table-sound-', ''), 10) + const targetSoundId = parseInt(overId.replace('table-sound-', ''), 10) + const draggedIndex = sounds.findIndex(s => s.id === draggedSoundId) const targetIndex = sounds.findIndex(s => s.id === targetSoundId) - // Only allow reordering if both sounds are in the playlist if (draggedIndex !== -1 && targetIndex !== -1 && draggedIndex !== targetIndex) { // Reorder sounds in playlist const newSounds = [...sounds] @@ -628,11 +372,6 @@ export function PlaylistEditPage() { toast.error(errorMessage) } } - // Handle dropping from available sounds onto existing playlist item (insert before) - else if (isFromAvailable && targetIndex !== -1) { - await handleAddSoundToPlaylist(draggedSoundId, targetIndex) - return - } } } @@ -690,8 +429,6 @@ export function PlaylistEditPage() {
-

{playlist.name}

@@ -892,189 +621,79 @@ export function PlaylistEditPage() {

- {isAddSoundsMode ? 'Add Sounds to Playlist' : `Playlist Sounds (${sounds.length})`} + Playlist Sounds ({sounds.length})
- {isAddSoundsMode ? ( - - ) : ( - <> - - - - )} +
- {isAddSoundsMode && ( -

- Drag sounds from the available list (right) to add them to your playlist (left) at specific positions, or click a sound to add it to the end. -

- )} - {isAddSoundsMode ? ( - /* Add Sounds Mode - Two Column Layout */ -
- {/* Current Playlist Sounds - Left Column */} -
-

- - Current Playlist ({sounds.length} sounds) -

-
- `playlist-sound-${sound.id}`)} - strategy={verticalListSortingStrategy} - > - {sounds.length === 0 ? ( - - ) : ( -
- {/* Drop zone at the top */} - - - {sounds.map((sound, index) => ( -
- - -
- ))} -
- )} - -
-
- - {/* Available Sounds - Right Column */} -
-

- - Available EXT Sounds ({availableSounds.length} available) -

-
- {loadingAvailableSounds ? ( -
- -
- ) : availableSounds.length === 0 ? ( -
-

No available EXT sounds

-
- ) : ( - sound.id.toString())} - strategy={verticalListSortingStrategy} - > -
- {availableSounds.map((sound) => ( - - ))} -
- - )} -
-
+ {soundsLoading ? ( +
+ {Array.from({ length: 3 }).map((_, i) => ( + + ))} +
+ ) : sounds.length === 0 ? ( +
+ +

No sounds in this playlist

) : ( - /* Normal Mode - Table View */ - soundsLoading ? ( -
- {Array.from({ length: 3 }).map((_, i) => ( - - ))} -
- ) : sounds.length === 0 ? ( -
- -

No sounds in this playlist

-
- ) : ( -
- `table-sound-${sound.id}`)} - strategy={verticalListSortingStrategy} - > - - - - -
-
-
-
-
-
- # +
+ `table-sound-${sound.id}`)} + strategy={verticalListSortingStrategy} + > +
+ + + +
+
+
+
+
- - Name - Duration - Type - Plays - Actions - - - - {sounds.map((sound, index) => ( - - ))} - -
- -
- ) + # +
+ + Name + Duration + Type + Plays + Actions + + + + {sounds.map((sound, index) => ( + + ))} + + + +
)}
- {/* Drag Overlay */} - - {draggedSound && ( -
- -
-
{draggedSound.name}
-
- {formatDuration(draggedSound.duration || 0)} -
-
-
- )} - )