WIP Player

frontend/app/page.tsx

@@ -5,6 +5,7 @@ import { useQuery } from "@tanstack/react-query"
 import { getTracks, getStats } from "@/lib/api"
 import type { FilterParams, Track } from "@/lib/types"
 import FilterPanel from "@/components/FilterPanel"
+import AudioPlayer from "@/components/AudioPlayer"
 
 // Helper function to format Discogs genre labels (e.g., "Pop---Ballad" -> ["Pop", "Ballad"])
 function formatGenre(genre: string): { category: string; subgenre: string } {
@@ -54,6 +55,7 @@ function extractFilterOptions(tracks: Track[]) {
 export default function Home() {
   const [filters, setFilters] = useState<FilterParams>({})
   const [page, setPage] = useState(0)
+  const [currentTrack, setCurrentTrack] = useState<Track | null>(null)
   const limit = 50
 
   const { data: tracksData, isLoading: isLoadingTracks } = useQuery({
@@ -87,7 +89,7 @@ export default function Home() {
       </header>
 
       {/* Main Content */}
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <main className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 ${currentTrack ? 'pb-32' : ''}`}>
         {/* Stats */}
         {stats && (
           <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
@@ -220,14 +222,12 @@ export default function Home() {
                       )}
                     </div>
                     <div className="ml-4 flex gap-2">
-                      <a
-                        href={`${process.env.NEXT_PUBLIC_API_URL}/api/audio/stream/${track.id}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
+                      <button
+                        onClick={() => setCurrentTrack(track)}
                         className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
                       >
-                        Play
-                      </a>
+                        {currentTrack?.id === track.id ? '▶ Playing' : 'Play'}
+                      </button>
                       <a
                         href={`${process.env.NEXT_PUBLIC_API_URL}/api/audio/download/${track.id}`}
                         download
@@ -282,6 +282,13 @@ export default function Home() {
           </ol>
         </div>
       </main>
+
+      {/* Fixed Audio Player at bottom */}
+      {currentTrack && (
+        <div className="fixed bottom-0 left-0 right-0 z-50 shadow-2xl">
+          <AudioPlayer track={currentTrack} onClose={() => setCurrentTrack(null)} />
+        </div>
+      )}
     </div>
   )
 }