ede3546f4b
- Lot G: Recherche avancée (musical_key, tri pertinence, autocomplete, facettes, historique) - Lot H: Analytics créateur (stats, charts, completion rate, export CSV/JSON) - Lot F: Seller dashboard (GET /sell/stats, liste produits) - Lot C: Player (crossfade, gapless preload, PiP) - Lot D2: Autoplay (GET /tracks/recommendations, section À écouter ensuite) Backend: GetRecommendations handler, route /tracks/recommendations Frontend: PlayerQueue recommendations, fix TS errors (GlobalPlayer, AnalyticsViewKpiGrid, etc.) Docs: FEATURE_STATUS, PROJECT_STATE, CHANGELOG, SCOPE_CONTROL
199 lines
12 KiB
TypeScript
199 lines
12 KiB
TypeScript
import { usePlayerStore } from '../store/playerStore';
|
|
import { useUIStore } from '@/stores/ui';
|
|
import { cn } from '@/lib/utils';
|
|
import { X, GripVertical, ListMusic, Sparkles } from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { EmptyState } from '@/components/ui/empty-state';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useAuthStore } from '@/features/auth/store/authStore';
|
|
import { tracksApi } from '@/services/api/tracks';
|
|
import { getHLSMasterPlaylistURL } from '@/features/streaming/services/hlsService';
|
|
import type { Track as PlayerTrack } from '../types';
|
|
import type { Track as ApiTrack } from '@/features/tracks/types/track';
|
|
|
|
interface PlayerQueueProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
currentTrackId?: string;
|
|
onPlay: (track: any) => void;
|
|
}
|
|
|
|
function mapApiTrackToPlayerTrack(t: ApiTrack): PlayerTrack {
|
|
const apiTrack = t as ApiTrack & { stream_manifest_url?: string; cover_art_path?: string };
|
|
return {
|
|
id: t.id,
|
|
title: t.title,
|
|
artist: t.artist,
|
|
duration: t.duration ?? 0,
|
|
url: apiTrack.stream_manifest_url ?? getHLSMasterPlaylistURL(t.id),
|
|
cover: apiTrack.cover_art_path,
|
|
genre: t.genre,
|
|
like_count: t.like_count,
|
|
};
|
|
}
|
|
|
|
export function PlayerQueue({ isOpen, onClose, onPlay }: PlayerQueueProps) {
|
|
const { queue, currentIndex, removeFromQueue, clearQueue } = usePlayerStore();
|
|
const { sidebarOpen } = useUIStore();
|
|
const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
|
|
const { data: recommendations = [], isLoading: recommendationsLoading } = useQuery({
|
|
queryKey: ['track-recommendations'],
|
|
queryFn: () => tracksApi.getRecommendations({ limit: 10 }),
|
|
enabled: isOpen && isAuthenticated && queue.length === 0,
|
|
staleTime: 60_000,
|
|
});
|
|
const playerTracks = recommendations.map(mapApiTrackToPlayerTrack);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"fixed bottom-24 left-4 right-4 z-40 transition-all duration-[var(--sumi-duration-normal)] ease-[var(--sumi-ease-out)] transform",
|
|
sidebarOpen ? "lg:left-main-expanded" : "lg:left-main-collapsed",
|
|
"lg:right-4",
|
|
isOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0 pointer-events-none"
|
|
)}
|
|
>
|
|
<div className="max-w-4xl mx-auto bg-black/80 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden max-h-layout-drawer flex flex-col">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 border-b border-white/5 bg-white/5">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-foreground font-bold font-heading tracking-wide">Play Queue</h3>
|
|
<Badge variant="secondary" className="border-primary/20 text-primary bg-primary/10">
|
|
{queue.length} Tracks
|
|
</Badge>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={clearQueue}
|
|
className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-white/10 rounded-md transition-colors duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
|
|
>
|
|
Clear
|
|
</button>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-white/10 rounded-full transition-colors duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-hidden relative">
|
|
{queue.length === 0 ? (
|
|
<div className="flex flex-col gap-4 p-4">
|
|
{playerTracks.length > 0 ? (
|
|
<>
|
|
<h4 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
|
|
<Sparkles className="w-4 h-4 text-primary" />
|
|
À écouter ensuite
|
|
</h4>
|
|
<ScrollArea className="max-h-layout-list">
|
|
<div className="space-y-1">
|
|
{playerTracks.map((track) => (
|
|
<div
|
|
key={track.id}
|
|
className="group flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 transition-colors cursor-pointer border border-transparent hover:border-white/5"
|
|
onClick={() => onPlay(track)}
|
|
>
|
|
<div className="w-6 text-center text-xs font-mono text-muted-foreground">—</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className="text-sm font-medium truncate text-foreground">{track.title}</h4>
|
|
<p className="text-xs text-muted-foreground truncate">{track.artist}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
<p className="text-xs text-muted-foreground">Cliquez pour lire</p>
|
|
</>
|
|
) : recommendationsLoading ? (
|
|
<div className="flex items-center justify-center py-8 text-muted-foreground text-sm">Chargement des suggestions…</div>
|
|
) : (
|
|
<EmptyState
|
|
icon={<ListMusic className="w-full h-full" />}
|
|
title="Your queue is empty"
|
|
description="Add tracks to keep the vibe going."
|
|
size="sm"
|
|
className="border-0 shadow-none bg-transparent"
|
|
/>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<ScrollArea className="h-full max-h-layout-list">
|
|
<div className="p-2 space-y-1">
|
|
{queue.map((track, index) => {
|
|
const isCurrent = index === currentIndex;
|
|
const isPast = index < currentIndex;
|
|
|
|
return (
|
|
<div
|
|
key={`${track.id}-${index}`}
|
|
className={cn(
|
|
"group flex items-center gap-3 p-2 rounded-lg transition-all duration-[var(--duration-fast)] border border-transparent",
|
|
isCurrent
|
|
? "bg-primary/10 border-primary/20 shadow-queue-item-current"
|
|
: "hover:bg-white/5 hover:border-white/5",
|
|
isPast && "opacity-50"
|
|
)}
|
|
>
|
|
{/* Drag Handle (Simulated) */}
|
|
<div className="text-white/20 group-hover:text-white/40 cursor-grab px-1">
|
|
<GripVertical className="w-4 h-4" />
|
|
</div>
|
|
|
|
{/* Number/Status */}
|
|
<div className="w-6 text-center text-xs font-mono text-muted-foreground">
|
|
{isCurrent ? (
|
|
<div className="w-2 h-2 rounded-full bg-primary mx-auto animate-pulse shadow-queue-item-current" />
|
|
) : (
|
|
index + 1
|
|
)}
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div
|
|
className="flex-1 min-w-0 cursor-pointer"
|
|
onClick={() => !isCurrent && onPlay(track)}
|
|
>
|
|
<h4 className={cn(
|
|
"text-sm font-medium truncate transition-colors",
|
|
isCurrent ? "text-primary" : "text-foreground group-hover:text-foreground"
|
|
)}>
|
|
{track.title}
|
|
</h4>
|
|
<p className="text-xs text-muted-foreground truncate opacity-70 group-hover:opacity-100">
|
|
{track.artist}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
removeFromQueue(index);
|
|
}}
|
|
className="opacity-0 group-hover:opacity-100 p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-full transition-all duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</ScrollArea>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Backdrop for explicit dismissal on mobile if needed */}
|
|
<div
|
|
className="fixed inset-0 bg-black/20 -z-10 backdrop-blur-sm md:hidden"
|
|
onClick={onClose}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|