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,125 @@
+import { Play, Pause, ThumbsDown, Disc3, Sparkles } from 'lucide-react';
+import { Link, useRouter } from '@tanstack/react-router';
+import type { Track } from '../types';
+import { usePlaybackStore } from '../store/usePlaybackStore';
+import { useDislikeTrack } from '../hooks/useDislikeTrack';
+import { vibeService } from '../services/vibeService';
+import { Artwork } from './Artwork';
+import { ArtistLinks } from './ArtistLinks';
+
+export function formatDuration(seconds?: number | null): string {
+  if (!seconds || seconds < 0 || !Number.isFinite(seconds)) return '0:00';
+  const total = Math.floor(seconds);
+  return `${Math.floor(total / 60)}:${(total % 60).toString().padStart(2, '0')}`;
+}
+
+type TrackRowVariant = 'default' | 'compact';
+
+interface TrackRowProps {
+  track: Track;
+  queue: Track[];
+  index: number;
+  showActions?: boolean;
+  /** compact — smaller artwork, no duration, for queue panels / VibeTimeline */
+  variant?: TrackRowVariant;
+  /** Show a "Vibe by track" button that starts a vibe session seeded from this track. */
+  showVibe?: boolean;
+}
+
+export function TrackRow({ track, queue, index, showActions = true, variant = 'default', showVibe = false }: TrackRowProps) {
+  const { setQueue, playTrack, play, pause, currentTrack, isPlaying } = usePlaybackStore();
+  const dislikeTrack = useDislikeTrack();
+  const router = useRouter();
+  const isCurrent = currentTrack?.id === track.id;
+  const compact = variant === 'compact';
+
+  const handlePlay = () => {
+    if (isCurrent) { isPlaying ? pause() : play(); return; }
+    setQueue(queue.slice(index));
+    playTrack(track);
+  };
+
+  const handleDislike = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    dislikeTrack(track.id);
+  };
+
+  const handleVibe = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    // Start a vibe session then navigate to the vibe page.
+    vibeService.start(track.id).then(() => {
+      router.navigate({ to: '/vibe' });
+    }).catch(() => {
+      // Session failed — still navigate so the user can try manually.
+      router.navigate({ to: '/vibe' });
+    });
+  };
+
+  return (
+    <div
+      onClick={handlePlay}
+      className={`group flex w-full cursor-pointer items-center gap-3 rounded-lg border transition-colors ${
+        compact ? 'p-2' : 'p-2.5'
+      } ${
+        isCurrent
+          ? 'border-accent/60 bg-accent/10'
+          : 'border-border/70 bg-surface0/50 hover:border-accent/30 hover:bg-surface1'
+      }`}
+    >
+      {/* Artwork + play overlay */}
+      <div className={`relative flex flex-none items-center justify-center rounded overflow-hidden ${
+        compact ? 'h-9 w-9' : 'h-10 w-10'
+      }`}>
+        <Artwork seed={`${track.title} ${track.artist}`} src={track.artwork_id} className="absolute inset-0 w-full h-full" />
+        {isCurrent && isPlaying ? (
+          <Pause size={compact ? 14 : 18} className="absolute z-20 text-text opacity-100" />
+        ) : (
+          <Play size={compact ? 14 : 18} className="absolute z-20 text-text opacity-0 group-hover:opacity-100" />
+        )}
+      </div>
+
+      {/* Title + artist */}
+      <div className="min-w-0 flex-1">
+        <div className={`truncate font-medium ${isCurrent ? 'text-accent' : 'text-text'} ${compact ? 'text-sm' : 'text-sm'}`}>
+          {track.title || 'Untitled'}
+        </div>
+        <ArtistLinks
+          artists={track.artists}
+          fallback={track.artist}
+          stopPropagation
+          className={`truncate block text-muted ${compact ? 'text-xs' : 'text-xs'}`}
+        />
+      </div>
+
+      {/* Actions (vibe → album link → dislike) */}
+      {showActions && !compact && (
+        <div className="flex flex-none items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+          {showVibe && (
+            <button onClick={handleVibe} title="Vibe by track" className="rounded p-1.5 text-muted hover:bg-surface1 hover:text-accent">
+              <Sparkles size={16} />
+            </button>
+          )}
+          {track.album_id && (
+            <Link
+              to="/albums/$albumId"
+              params={{ albumId: track.album_id }}
+              onClick={(e) => e.stopPropagation()}
+              title="Go to album"
+              className="rounded p-1.5 text-muted hover:bg-surface1 hover:text-text"
+            >
+              <Disc3 size={16} />
+            </Link>
+          )}
+          <button onClick={handleDislike} title="Dislike" className="rounded p-1.5 text-muted hover:bg-surface1 hover:text-red-400">
+            <ThumbsDown size={16} />
+          </button>
+        </div>
+      )}
+
+      {/* Duration (hidden in compact) */}
+      {!compact && (
+        <div className="flex-none text-xs tabular-nums text-muted">{formatDuration(track.duration)}</div>
+      )}
+    </div>
+  );
+}