269 lines
13 KiB
TypeScript
269 lines
13 KiB
TypeScript
import { useState } from 'react';
|
|
import { useParams, Link } from 'react-router-dom';
|
|
import { usePlaylist } from '../hooks/usePlaylist';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { playlistsApi } from '@/services/api/playlists';
|
|
import { usePlaylistPermissions } from '../hooks/usePlaylistPermissions';
|
|
import { PlaylistActions } from '../components/playlist-actions';
|
|
import { PlaylistTrackList } from '../components/PlaylistTrackList';
|
|
import { AddTrackToPlaylistModal } from '../components/AddTrackToPlaylistModal';
|
|
import { CollaboratorList } from '../components/CollaboratorList';
|
|
import { PlaylistRecommendations } from '../components/PlaylistRecommendations';
|
|
import { SharePlaylistModal } from '../components/SharePlaylistModal';
|
|
import { AddCollaboratorModal } from '../components/AddCollaboratorModal';
|
|
import { Button } from '@/components/ui/button';
|
|
import { LoadingSpinner } from '@/components/ui/loading-spinner';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
|
import { Plus, Users, Sparkles, Music, Calendar, Search, Play, Shuffle } from 'lucide-react';
|
|
import toast from '@/utils/toast';
|
|
import type { Track } from '../types';
|
|
import { Avatar } from '@/components/ui/avatar';
|
|
import { format } from 'date-fns';
|
|
import { cn } from '@/lib/utils';
|
|
import { PlaylistFollowButton } from '../components/PlaylistFollowButton';
|
|
|
|
export function PlaylistDetailPage() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const [isAddTrackModalOpen, setIsAddTrackModalOpen] = useState(false);
|
|
const [isShareModalOpen, setIsShareModalOpen] = useState(false);
|
|
const [isAddCollaboratorModalOpen, setIsAddCollaboratorModalOpen] = useState(false);
|
|
|
|
const { data: playlist, isLoading, error, refetch } = usePlaylist(id || '');
|
|
const permissions = usePlaylistPermissions(playlist);
|
|
|
|
const { data: collaborators, refetch: refetchCollaborators } = useQuery({
|
|
queryKey: ['playlistCollaborators', id],
|
|
queryFn: () => playlistsApi.getCollaborators(id || ''),
|
|
enabled: !!id && permissions.canRead,
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<LoadingSpinner />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !playlist) {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8 flex flex-col items-center justify-center min-h-layout-page text-center">
|
|
<div className="text-9xl mb-4">👾</div>
|
|
<h2 className="text-3xl font-display font-bold text-destructive mb-2">Playlist Not Found</h2>
|
|
<Button variant="outline" className="mt-8" asChild>
|
|
<Link to="/features/library">Back to Library</Link>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const tracks = (playlist.tracks?.map((pt) => pt.track).filter((t) => !!t) as Track[]) || [];
|
|
const playlistTracks = playlist.tracks || [];
|
|
|
|
const handleTrackAdded = () => { setIsAddTrackModalOpen(false); refetch(); toast.success('Track added'); };
|
|
const handleTrackRemoved = () => { refetch(); toast.success('Track removed'); };
|
|
const handleTracksReordered = () => { refetch(); toast.success('Reordered'); };
|
|
|
|
return (
|
|
<div className="min-h-screen pb-24">
|
|
{/* 1. Cinematic Hero Banner */}
|
|
<div className="relative h-80 md:h-96 w-full overflow-hidden">
|
|
{/* Dynamic Background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-900/50 via-black to-magenta-900/50" />
|
|
{playlist.cover_url && (
|
|
<div className="absolute inset-0 opacity-30 blur-3xl scale-110"
|
|
style={{ backgroundImage: `url(${playlist.cover_url})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
|
|
/>
|
|
)}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent" />
|
|
|
|
{/* Abstract Shapes/Noise */}
|
|
<div className="absolute inset-0 noise opacity-30" />
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 md:px-8 relative -mt-40 z-10">
|
|
<div className="flex flex-col md:flex-row gap-8 items-end">
|
|
{/* Cover Art Card */}
|
|
<Card variant="glass" className="w-52 h-52 md:w-64 md:h-64 flex-shrink-0 p-2 border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.5)] bg-black/40 backdrop-blur-3xl overflow-hidden rounded-2xl group">
|
|
{playlist.cover_url ? (
|
|
<img
|
|
src={playlist.cover_url}
|
|
alt={playlist.title}
|
|
className="w-full h-full object-cover rounded-xl shadow-inner group-hover:scale-105 transition-transform duration-700"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full bg-gradient-to-br from-cyan-900 to-magenta-900 rounded-xl flex items-center justify-center">
|
|
<Music className="w-20 h-20 text-white/20" />
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Playlist Info */}
|
|
<div className="flex-1 pb-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className={cn(
|
|
"px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border",
|
|
playlist.is_public ? "bg-cyan-500/10 text-cyan-500 border-cyan-500/20" : "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
|
)}>
|
|
{playlist.is_public ? "Public Signal" : "Encrypted"}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground/80 font-mono flex items-center gap-1">
|
|
<Calendar className="w-3 h-3" /> Updated {format(new Date(playlist.updated_at), 'MMM d, yyyy')}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="text-4xl md:text-6xl font-display font-bold text-white mb-4 tracking-tight drop-shadow-lg">
|
|
{playlist.title}
|
|
</h1>
|
|
|
|
{playlist.description && (
|
|
<p className="text-lg text-white/70 max-w-2xl font-light leading-relaxed mb-6 font-sans">
|
|
{playlist.description}
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex items-center gap-4 text-sm md:text-base">
|
|
<div className="flex items-center gap-2 text-white/90">
|
|
<Avatar className="w-6 h-6 border border-white/20" fallback="U" src={playlist.user?.avatar_url} />
|
|
<span className="font-semibold">{playlist.user?.username}</span>
|
|
</div>
|
|
<span className="text-white/30">•</span>
|
|
<span className="text-white/80">{playlist.track_count} tracks</span>
|
|
<span className="text-white/30">•</span>
|
|
<div className="flex items-center gap-2">
|
|
<Users className="w-4 h-4 text-muted-foreground" />
|
|
{/* Casting since follower_count often missing in strict type */}
|
|
<span className="text-white/80">{(playlist as any).follower_count || 0} followers</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions Bar */}
|
|
<div className="mt-8 flex flex-wrap items-center gap-4 mb-8">
|
|
<Button size="lg" className="rounded-full h-14 px-8 text-lg font-bold shadow-[0_0_30px_rgba(var(--primary),0.4)] hover:shadow-[0_0_50px_rgba(var(--primary),0.6)] hover:scale-105 transition-all bg-primary text-primary-foreground">
|
|
<Play className="w-5 h-5 mr-2 fill-current" /> Play All
|
|
</Button>
|
|
<Button size="lg" variant="outline" className="rounded-full h-14 px-6 border-white/10 hover:bg-white/5 backdrop-blur-sm">
|
|
<Shuffle className="w-5 h-5 mr-2" /> Shuffle
|
|
</Button>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<div className="flex items-center gap-2">
|
|
<PlaylistFollowButton playlistId={playlist.id} initialFollowerCount={(playlist as any).follower_count} initialFollowing={(playlist as any).is_following} />
|
|
<PlaylistActions
|
|
playlist={playlist}
|
|
onUpdated={refetch}
|
|
onShareClick={() => setIsShareModalOpen(true)}
|
|
canShare={permissions.canRead}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Tabs */}
|
|
<Tabs defaultValue="tracks" className="w-full">
|
|
<TabsList className="bg-transparent border-b border-white/10 w-full justify-start h-auto p-0 rounded-none gap-8 mb-6">
|
|
<TabsTrigger value="tracks" className="rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent data-[state=active]:border-primary data-[state=active]:text-primary py-4 px-0 text-lg font-display bg-transparent">
|
|
Tracks
|
|
</TabsTrigger>
|
|
{permissions.canRead && (
|
|
<TabsTrigger value="collaborators" className="rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent data-[state=active]:border-primary data-[state=active]:text-primary py-4 px-0 text-lg font-display bg-transparent">
|
|
Collaborators
|
|
</TabsTrigger>
|
|
)}
|
|
<TabsTrigger value="recommendations" className="rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent data-[state=active]:border-primary data-[state=active]:text-primary py-4 px-0 text-lg font-display bg-transparent">
|
|
Recommendations
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="tracks">
|
|
<Card variant="glass" className="overflow-hidden border-white/5">
|
|
<div className="p-4 border-b border-white/5 flex justify-between items-center bg-black/20">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
<input placeholder="Filter tracks..." className="bg-transparent border-none text-sm text-foreground placeholder:text-muted-foreground focus:outline-none pl-9 py-2 w-64" />
|
|
</div>
|
|
{permissions.canAddTracks && (
|
|
<Button size="sm" onClick={() => setIsAddTrackModalOpen(true)} variant="ghost" className="text-primary hover:text-primary hover:bg-primary/10">
|
|
<Plus className="w-4 h-4 mr-2" /> Add Tracks
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="p-0">
|
|
<PlaylistTrackList
|
|
playlistTracks={playlistTracks}
|
|
tracks={tracks}
|
|
playlistId={playlist.id}
|
|
onTrackRemoved={handleTrackRemoved}
|
|
onTracksReordered={handleTracksReordered}
|
|
enableDragAndDrop={permissions.canEdit}
|
|
canRemoveTracks={permissions.canRemoveTracks}
|
|
className="divide-y divide-white/5"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="collaborators">
|
|
<Card variant="glass" className="p-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="text-xl font-bold flex items-center gap-2"><Users className="w-5 h-5 text-primary" /> Squad Members</h3>
|
|
{permissions.canManageCollaborators && (
|
|
<Button onClick={() => setIsAddCollaboratorModalOpen(true)}>
|
|
<Plus className="w-4 h-4 mr-2" /> Invite
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<CollaboratorList
|
|
collaborators={collaborators || []}
|
|
playlistId={playlist.id}
|
|
canManage={permissions.canManageCollaborators}
|
|
/>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="recommendations">
|
|
<div className="bg-gradient-to-br from-primary/10 to-transparent p-6 rounded-2xl border border-primary/20">
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<Sparkles className="w-5 h-5 text-yellow-400 animate-pulse" />
|
|
<h3 className="text-xl font-bold">Suggested for you</h3>
|
|
</div>
|
|
<PlaylistRecommendations
|
|
limit={8}
|
|
minScore={0.1}
|
|
includeOwn={false}
|
|
onPlaylistClick={(recPlaylist) => window.location.href = `/playlists/${recPlaylist.id}`}
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
<AddTrackToPlaylistModal
|
|
open={isAddTrackModalOpen}
|
|
onClose={() => setIsAddTrackModalOpen(false)}
|
|
playlistId={playlist.id}
|
|
onTracksAdded={handleTrackAdded}
|
|
/>
|
|
|
|
{playlist && (
|
|
<SharePlaylistModal
|
|
open={isShareModalOpen}
|
|
onClose={() => setIsShareModalOpen(false)}
|
|
playlistId={playlist.id}
|
|
/>
|
|
)}
|
|
|
|
{playlist && (
|
|
<AddCollaboratorModal
|
|
open={isAddCollaboratorModalOpen}
|
|
onClose={() => setIsAddCollaboratorModalOpen(false)}
|
|
playlistId={playlist.id}
|
|
onAdded={() => { refetchCollaborators(); refetch(); }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|