83f400acbb
- Added AvailableSound component for displaying and adding sounds to playlists. - Introduced DragOverlayComponents for drag-and-drop functionality with inline previews and drop areas. - Created PlaylistDetailsCard for editing playlist details with save and cancel options. - Implemented PlaylistEditHeader for displaying playlist title and current status. - Added PlaylistStatsCard to show statistics about the playlist. - Refactored PlaylistEditPage to utilize new components, enhancing readability and maintainability. - Introduced loading and error states with PlaylistEditLoading and PlaylistEditError components. - Updated SortableTableRow and SimpleSortableRow for better drag-and-drop handling.
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import type { PlaylistSound } from '@/lib/api/services/playlists'
|
|
import type { Sound } from '@/lib/api/services/sounds'
|
|
import { useDroppable } from '@dnd-kit/core'
|
|
import { Music } from 'lucide-react'
|
|
|
|
// Simple drop area for the end of the playlist
|
|
export function EndDropArea() {
|
|
const { setNodeRef } = useDroppable({
|
|
id: 'playlist-end',
|
|
data: { type: 'playlist-end' },
|
|
})
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
className="h-8 w-full" // Invisible drop area
|
|
/>
|
|
)
|
|
}
|
|
|
|
// Inline preview component that shows where the sound will be dropped
|
|
interface InlinePreviewProps {
|
|
sound: Sound | PlaylistSound
|
|
position: number
|
|
}
|
|
|
|
export function InlinePreview({ sound, position }: InlinePreviewProps) {
|
|
return (
|
|
<div className="flex items-center gap-3 p-3 border-2 border-dashed border-primary rounded-lg bg-primary/10 animate-pulse">
|
|
<span className="text-sm font-mono text-primary min-w-[1.5rem] text-center flex-shrink-0">
|
|
{position + 1}
|
|
</span>
|
|
|
|
<Music className="h-4 w-4 text-primary flex-shrink-0" />
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="font-medium truncate text-primary">{sound.name}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Drag overlay component that shows the dragged item
|
|
interface DragOverlayContentProps {
|
|
sound: Sound | PlaylistSound
|
|
position?: number
|
|
}
|
|
|
|
export function DragOverlayContent({ sound, position }: DragOverlayContentProps) {
|
|
// If position is provided, show as current playlist style
|
|
if (position !== undefined) {
|
|
return (
|
|
<div className="flex items-center gap-3 p-3 border rounded-lg bg-background shadow-lg">
|
|
<span className="text-sm font-mono text-muted-foreground min-w-[1.5rem] text-center flex-shrink-0">
|
|
{position + 1}
|
|
</span>
|
|
|
|
<Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="font-medium truncate">{sound.name}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Default available sound style
|
|
return (
|
|
<div className="flex items-center gap-3 p-3 border rounded-lg bg-background shadow-lg">
|
|
<Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="font-medium truncate">{sound.name}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |