initial state: muzick music player + recommendation engine

2026-07-14 01:35:52 +04:00
commit 737bf19fd1
196 changed files with 32431 additions and 0 deletions
@@ -0,0 +1,72 @@
+import { useQuery } from '@tanstack/react-query';
+import { X } from 'lucide-react';
+import { usePlaybackStore } from '../store/usePlaybackStore';
+import { trackService } from '../services/trackService';
+import { albumService } from '../services/albumService';
+import { Artwork } from './Artwork';
+import { ArtistLinks } from './ArtistLinks';
+import { SyncedLyrics } from './SyncedLyrics';
+
+/**
+ * Dedicated, roomy lyrics view — overlays the content area (not the playback
+ * bar, so transport stays usable). Separated from the queue sidebar so the
+ * karaoke lyrics get the space they deserve.
+ */
+export function LyricsOverlay({ onClose }: { onClose: () => void }) {
+  const currentTrack = usePlaybackStore((s) => s.currentTrack);
+
+  const albumQ = useQuery({
+    queryKey: ['album', currentTrack?.album_id],
+    queryFn: () => albumService.getAlbum(currentTrack!.album_id),
+    enabled: !!currentTrack?.album_id,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const lyricsQ = useQuery({
+    queryKey: ['lyrics', currentTrack?.id],
+    queryFn: () => trackService.getLyrics(currentTrack!.id),
+    enabled: !!currentTrack,
+    retry: false,
+  });
+
+  return (
+    <div className="absolute inset-0 z-40 glass flex flex-col animate-rise">
+      {/* Header */}
+      <div className="flex items-center gap-4 px-6 py-4 border-b border-border/70">
+        {currentTrack && (
+          <div className="w-12 h-12 flex-none rounded-lg overflow-hidden shadow-md shadow-black/40">
+            <Artwork seed={`${currentTrack.title} ${currentTrack.artist}`} src={albumQ.data?.artwork_id} className="w-full h-full" rounded="lg" />
+          </div>
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="text-lg font-bold text-text truncate">{currentTrack?.title ?? 'Lyrics'}</div>
+          {currentTrack && (
+            <ArtistLinks artists={currentTrack.artists} fallback={currentTrack.artist} className="block text-sm text-muted truncate" />
+          )}
+        </div>
+        <button onClick={onClose} aria-label="Close lyrics" className="rounded-md p-2 text-muted hover:text-text hover:bg-surface1 transition-colors">
+          <X size={18} />
+        </button>
+      </div>
+
+      {/* Lyrics */}
+      <div
+        className="flex-1 overflow-y-auto mx-auto w-full max-w-2xl"
+        style={{
+          WebkitMaskImage: 'linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%)',
+          maskImage: 'linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%)',
+        }}
+      >
+        {!currentTrack ? (
+          <p className="px-6 py-10 text-center text-sm text-muted italic">Nothing playing.</p>
+        ) : lyricsQ.isLoading ? (
+          <p className="px-6 py-10 text-center text-sm text-muted">Loading…</p>
+        ) : lyricsQ.isError || !lyricsQ.data ? (
+          <p className="px-6 py-10 text-center text-sm text-muted italic">No lyrics available.</p>
+        ) : (
+          <SyncedLyrics synced={lyricsQ.data.synced_lyrics} plain={lyricsQ.data.lyrics_text} />
+        )}
+      </div>
+    </div>
+  );
+}