+
+
+
+
+
+
+
+
+
+
+
+ {/* Album Art / Thumbnail */}
+
+ {state.current_sound?.thumbnail ? (
+
+
+ {/* Track Info */}
+
+ })
{
+ // Hide image and show music icon if thumbnail fails to load
+ const target = e.target as HTMLImageElement
+ target.style.display = 'none'
+ const musicIcon = target.nextElementSibling as HTMLElement
+ if (musicIcon) musicIcon.style.display = 'block'
+ }}
+ />
+
+ ) : null}
+
+
+
+ {/* Progress Bar */}
+
+ {state.current_sound && (state.current_sound.extract_url || state.current_sound.id) && (
+
+
+
+
+
+ {state.current_sound.extract_url && (
+
+
+
+ )}
+
+
+
+
+ )}
+
+ {state.playlist && (
+ + {state.current_sound?.name || 'No track selected'} +
++ {state.playlist.name} +
+ )} +
+
+
+ {/* Main Controls */}
+
+
+
+
+
+
+
+
+
+ {/* Secondary Controls */}
+
+
+ {state.mode.replace('_', ' ')}
+
+
+
+
+ {/* Playlist */}
+ {showPlaylist && state.playlist && (
+
+
+
+
+
+
+ executeAction(() => playerService.playAtIndex(index), 'play track')}
+ />
+
+ )}
+
+ {/* Header */}
+
+ )
+
+ if (!state) return null
+
+ return (
+
+
+
+ Now Playing
+ +
+ {/* Main Player Area */}
+
+
+ {/* Large Album Art */}
+
+
+ {/* Playlist Sidebar */}
+ {state.playlist && (
+
+ {state.current_sound?.thumbnail ? (
+ {
+ // Hide image and show music icon if thumbnail fails to load
+ const target = e.target as HTMLImageElement
+ target.style.display = 'none'
+ const musicIcon = target.nextElementSibling as HTMLElement
+ if (musicIcon) musicIcon.style.display = 'block'
+ }}
+ />
+ ) : null}
+
+
+ {/* Track Info */}
+
+
+
+ {/* Progress Bar */}
+
+ {state.current_sound && (state.current_sound.extract_url || state.current_sound.id) && (
+
+
+
+
+
+ {state.current_sound.extract_url && (
+
+
+
+ )}
+
+
+
+
+ )}
+
+ {state.playlist && (
+ + {state.current_sound?.name || 'No track selected'} +
++ {state.playlist.name} +
+ )} +
+
+
+ {/* Large Controls */}
+
+
+
+
+
+
+
+ {/* Secondary Controls */}
+
+
+
+
+
+ {state.mode.replace('_', ' ')}
+
+
+
+
+
+
+
+
+
+ {Math.round(isMuted ? 0 : state.volume)}%
+
+
+
+ )}
+
+
+ Playlist
++ {state.playlist.sounds.length} tracks +
+
+ executeAction(() => playerService.playAtIndex(index), 'play track')}
+ variant="maximized"
+ />
+
+
+ {displayMode === 'minimized' && renderMinimizedPlayer()}
+ {displayMode === 'normal' && renderNormalPlayer()}
+ {displayMode === 'maximized' && renderMaximizedPlayer()}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/player/Playlist.tsx b/src/components/player/Playlist.tsx
new file mode 100644
index 0000000..23d54cb
--- /dev/null
+++ b/src/components/player/Playlist.tsx
@@ -0,0 +1,134 @@
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Badge } from '@/components/ui/badge'
+import { Music, Play } from 'lucide-react'
+import { type PlayerPlaylist } from '@/lib/api/services/player'
+import { filesService } from '@/lib/api/services/files'
+import { cn } from '@/lib/utils'
+import { formatDuration } from '@/utils/format-duration'
+
+interface PlaylistProps {
+ playlist: PlayerPlaylist
+ currentIndex?: number
+ onTrackSelect: (index: number) => void
+ variant?: 'normal' | 'maximized'
+}
+
+export function Playlist({
+ playlist,
+ currentIndex,
+ onTrackSelect,
+ variant = 'normal'
+}: PlaylistProps) {
+ const maxHeight = variant === 'maximized' ? 'max-h-[calc(100vh-200px)]' : 'max-h-60'
+
+ return (
+
+
+
+
+ {/* Playlist Stats */}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..2a03bd3
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+ React.ComponentRef
+
+ {playlist.sounds.length} tracks
+
+
+
+ + {playlist.name} +
+
+ {playlist.sounds.map((sound, index) => (
+
+ onTrackSelect(index)}
+ >
+ {/* Track Number or Play Icon */}
+
+ ))}
+
+ {currentIndex === index ? (
+
+
+ {/* Thumbnail */}
+
+ {sound.thumbnail ? (
+ })
{
+ // Hide image and show music icon if thumbnail fails to load
+ const target = e.target as HTMLImageElement
+ target.style.display = 'none'
+ const musicIcon = target.nextElementSibling as HTMLElement
+ if (musicIcon) musicIcon.style.display = 'block'
+ }}
+ />
+ ) : null}
+
+
+ {/* Track Info */}
+
+
+
+ {/* Duration and Type */}
+ + {sound.name} +
++ {sound.filename} +
+
+
+ {formatDuration(sound.duration)}
+
+
+ {sound.type}
+
+
+
+
+
+ {playlist.sounds.length} tracks
+ {formatDuration(playlist.duration)}
+
+
-
Audio Extractions
-- Audio extraction management interface coming soon... -
+
+
+
+
+
+ ) : (
+
+
+ Recent Extractions ({extractions.length})
+
+
+
+
+
+
+ )}
)
+
+
+ {isLoading ? (
+
+
+
+
+ Audio Extractions
++ Extract audio from YouTube, SoundCloud, and other platforms +
+
+
+ ) : extractions.length === 0 ? (
+
+
+ No extractions yet
++ Start by adding a URL to extract audio from your favorite platforms +
+ +