kami
242 lines
9.3 KiB
TypeScript
242 lines
9.3 KiB
TypeScript
import { useCallback, useMemo, useRef, useState } from 'react';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Heart, Loader2, Play, Shuffle, ThumbsDown, Sparkles, Square } from 'lucide-react';
|
|
import { advanceVibe, endVibeSession, reportVibeEvent, startVibeSession, vibeErrorMessage } from '../services/vibeSession';
|
|
import { trackService } from '../services/trackService';
|
|
import { usePlaybackStore } from '../store/usePlaybackStore';
|
|
import { useVibeStore } from '../store/useVibeStore';
|
|
import { TrackRow } from '../components/TrackRow';
|
|
import { PageContainer } from '../components/PageContainer';
|
|
import type { Track } from '../types';
|
|
import { VibeTimeline } from '../components/VibeTimeline';
|
|
import { toast } from '../store/useToastStore';
|
|
|
|
const SEED_LIST_SIZE = 50;
|
|
|
|
function sampleTracks(tracks: Track[], count: number): Track[] {
|
|
const sampled = [...tracks];
|
|
for (let index = sampled.length - 1; index > 0; index--) {
|
|
const pick = Math.floor(Math.random() * (index + 1));
|
|
[sampled[index], sampled[pick]] = [sampled[pick], sampled[index]];
|
|
}
|
|
return sampled.slice(0, count);
|
|
}
|
|
|
|
export default function Vibe() {
|
|
const { currentTrack } = usePlaybackStore();
|
|
const {
|
|
activeSessionId,
|
|
buffer,
|
|
initialBatchStatus,
|
|
planVersion,
|
|
} = useVibeStore();
|
|
|
|
const [starting, setStarting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [empty, setEmpty] = useState(false);
|
|
const startingRef = useRef(false);
|
|
|
|
const { data: libraryTracks = [], isLoading: libraryLoading } = useQuery<Track[]>({
|
|
queryKey: ['library-seed'],
|
|
// Fetch the eligible library once so Surprise me is not restricted to the
|
|
// most-played 50 tracks. The backend excludes hidden/deleted tracks.
|
|
queryFn: () => trackService.listTracks({ limit: 5000, sort_by: 'title', order: 'ASC' }),
|
|
enabled: !activeSessionId,
|
|
});
|
|
const seedTracks = useMemo(() => sampleTracks(libraryTracks, SEED_LIST_SIZE), [libraryTracks]);
|
|
|
|
const startSession = useCallback(
|
|
async (seed: Track) => {
|
|
if (startingRef.current) return;
|
|
startingRef.current = true;
|
|
setStarting(true);
|
|
setError(null);
|
|
setEmpty(false);
|
|
try {
|
|
const result = await startVibeSession(seed);
|
|
if (result.tracks.length === 0) {
|
|
setEmpty(true);
|
|
setError('Could not load recommendations for this vibe. Please try another seed.');
|
|
}
|
|
} catch (startError) {
|
|
setError(vibeErrorMessage(startError));
|
|
} finally {
|
|
startingRef.current = false;
|
|
setStarting(false);
|
|
}
|
|
},
|
|
[]
|
|
);
|
|
|
|
const startFromCurrent = useCallback(() => {
|
|
if (currentTrack) void startSession(currentTrack);
|
|
}, [currentTrack, startSession]);
|
|
|
|
const surpriseMe = useCallback(() => {
|
|
if (libraryTracks.length === 0) return;
|
|
const seed = libraryTracks[Math.floor(Math.random() * libraryTracks.length)];
|
|
void startSession(seed);
|
|
}, [libraryTracks, startSession]);
|
|
|
|
const handleKeep = useCallback(() => {
|
|
if (currentTrack) {
|
|
void reportVibeEvent('kept', currentTrack.id).catch((feedbackError) => setError(vibeErrorMessage(feedbackError)));
|
|
toast.success(`Kept "${currentTrack.title}"`);
|
|
}
|
|
}, [currentTrack]);
|
|
|
|
const handleDislike = useCallback(() => {
|
|
if (currentTrack) {
|
|
void advanceVibe('disliked').catch((feedbackError) => setError(vibeErrorMessage(feedbackError)));
|
|
}
|
|
}, [currentTrack]);
|
|
|
|
const handleEnd = useCallback(() => {
|
|
void endVibeSession().catch((endError) => setError(vibeErrorMessage(endError)));
|
|
setEmpty(false);
|
|
}, []);
|
|
|
|
const upcoming = buffer;
|
|
|
|
// ---- Start screen (no active session) ----
|
|
if (!activeSessionId) {
|
|
return (
|
|
<PageContainer width="sm" className="py-8">
|
|
<header className="space-y-2 text-center">
|
|
<div className="inline-flex items-center gap-2 rounded-full bg-accent/10 px-4 py-1.5 text-sm text-accent">
|
|
<Sparkles size={16} />
|
|
Rolling Vibe
|
|
</div>
|
|
<h1 className="text-4xl font-bold text-text">Start a Vibe</h1>
|
|
<p className="text-muted">
|
|
An infinite, ever-rolling stream of recommendations seeded from a track you love.
|
|
</p>
|
|
<p className="mx-auto max-w-md text-xs text-muted/70">
|
|
Pick a seed below and playback starts immediately, with a rolling
|
|
timeline of upcoming tracks. <strong className="text-muted">Keep</strong> what you love,
|
|
<strong className="text-muted"> Dislike & skip</strong> what you don't — the vibe
|
|
adapts as you go.
|
|
</p>
|
|
</header>
|
|
|
|
{error && (
|
|
<div className="rounded-lg border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-3">
|
|
{currentTrack && (
|
|
<button
|
|
onClick={startFromCurrent}
|
|
disabled={starting}
|
|
className="flex w-full items-center gap-3 rounded-lg border border-accent/60 bg-accent/10 p-4 text-left transition-colors hover:bg-accent/20 disabled:opacity-60"
|
|
>
|
|
<Play size={20} className="text-accent" />
|
|
<div className="flex-1">
|
|
<div className="font-semibold text-text">Vibe from “{currentTrack.title}”</div>
|
|
<div className="text-sm text-muted">{currentTrack.artist}</div>
|
|
</div>
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
onClick={surpriseMe}
|
|
disabled={starting || libraryLoading || libraryTracks.length === 0}
|
|
className="flex w-full items-center gap-3 rounded-lg border border-border bg-surface0 p-4 text-left transition-colors hover:bg-surface1 disabled:opacity-60"
|
|
>
|
|
<Shuffle size={20} className="text-text" />
|
|
<div className="flex-1">
|
|
<div className="font-semibold text-text">Surprise me</div>
|
|
<div className="text-sm text-muted">
|
|
{libraryLoading
|
|
? 'Loading your library…'
|
|
: libraryTracks.length === 0
|
|
? 'No library tracks available to seed a vibe.'
|
|
: `Start from a random track across ${libraryTracks.length.toLocaleString()} library tracks.`}
|
|
</div>
|
|
</div>
|
|
{starting && <Loader2 size={18} className="animate-spin text-muted" />}
|
|
</button>
|
|
</div>
|
|
|
|
{!libraryLoading && seedTracks.length > 0 && (
|
|
<div className="space-y-2">
|
|
<h2 className="text-sm font-semibold text-muted">Or pick a seed track</h2>
|
|
<ul className="max-h-72 space-y-1 overflow-y-auto">
|
|
{seedTracks.map((track, index) => (
|
|
<li key={track.id}>
|
|
<TrackRow
|
|
track={track}
|
|
queue={seedTracks}
|
|
index={index}
|
|
showActions={false}
|
|
onSelect={startSession}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</PageContainer>
|
|
);
|
|
}
|
|
|
|
// ---- Active session ----
|
|
return (
|
|
<PageContainer width="sm" className="py-6">
|
|
<header className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Sparkles size={22} className="text-accent" />
|
|
<h1 className="text-2xl font-bold text-text">Vibing</h1>
|
|
{initialBatchStatus === 'loading' && <Loader2 size={16} className="animate-spin text-muted" />}
|
|
</div>
|
|
<button
|
|
onClick={handleEnd}
|
|
className="flex items-center gap-2 rounded-lg border border-border px-3 py-1.5 text-sm text-text transition-colors hover:border-red-500/60 hover:text-red-300"
|
|
>
|
|
<Square size={14} />
|
|
End Vibe
|
|
</button>
|
|
</header>
|
|
|
|
{(empty || initialBatchStatus === 'exhausted' || initialBatchStatus === 'failed') && (
|
|
<div className="rounded-lg border border-border bg-surface0 p-4 text-sm text-muted">
|
|
{initialBatchStatus === 'failed'
|
|
? 'Could not load recommendations for this Vibe. Try starting a different one.'
|
|
: 'No recommendations came back for this seed yet. Try ending and starting a different vibe.'}
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="rounded-lg border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{planVersion && <p className="text-xs text-muted/70">Plan revision {planVersion}; upcoming tracks may change as you listen.</p>}
|
|
|
|
{currentTrack && (
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={handleKeep}
|
|
className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-medium text-text transition-colors hover:border-pink-500/60 hover:text-pink-300"
|
|
>
|
|
<Heart size={16} />
|
|
Keep
|
|
</button>
|
|
<button
|
|
onClick={handleDislike}
|
|
className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-medium text-text transition-colors hover:border-red-500/60 hover:text-red-300"
|
|
>
|
|
<ThumbsDown size={16} />
|
|
Dislike & skip
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<VibeTimeline currentTrack={currentTrack} upcoming={upcoming} />
|
|
</PageContainer>
|
|
);
|
|
}
|