177 lines
11 KiB
TypeScript
177 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { dbService } from "@/services/db";
|
|
import { useLibrary } from "@/context/LibraryContext";
|
|
import Link from "next/link";
|
|
import { Plus } from "lucide-react";
|
|
import CreatePlaylistModal from "@/components/CreatePlaylistModal";
|
|
|
|
export default function LibraryPage() {
|
|
const { userPlaylists: playlists, libraryItems, refreshLibrary: refresh, activeFilter: activeTab, setActiveFilter: setActiveTab } = useLibrary();
|
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
|
|
|
const handleCreatePlaylist = async (name: string) => {
|
|
await dbService.createPlaylist(name);
|
|
refresh();
|
|
};
|
|
|
|
const showPlaylists = activeTab === 'all' || activeTab === 'playlists';
|
|
const showAlbums = activeTab === 'all' || activeTab === 'albums';
|
|
const showArtists = activeTab === 'all' || activeTab === 'artists';
|
|
|
|
// Filter items based on type
|
|
const albums = libraryItems.filter(item => item.type === 'Album');
|
|
const artists = libraryItems.filter(item => item.type === 'Artist');
|
|
const browsePlaylists = libraryItems.filter(item => item.type === 'Playlist');
|
|
|
|
return (
|
|
<div className="bg-gradient-to-b from-[#1e1e1e] to-black min-h-screen p-4 pb-24">
|
|
<div className="flex justify-between items-center mb-6 pt-4">
|
|
<h1 className="text-2xl font-bold text-white">Your Library</h1>
|
|
<button onClick={() => setIsCreateModalOpen(true)}>
|
|
<Plus className="text-white w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex gap-2 mb-6 overflow-x-auto no-scrollbar">
|
|
<button
|
|
onClick={() => setActiveTab('all')}
|
|
className={`px-4 py-2 rounded-full text-sm font-medium border transition whitespace-nowrap ${activeTab === 'all' ? 'bg-[#2a2a2a] text-white border-white/10' : 'bg-[#121212] text-spotify-text-muted border-white/5'}`}
|
|
>
|
|
All
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('playlists')}
|
|
className={`px-4 py-2 rounded-full text-sm font-medium border transition whitespace-nowrap ${activeTab === 'playlists' ? 'bg-[#2a2a2a] text-white border-white/10' : 'bg-[#121212] text-spotify-text-muted border-white/5'}`}
|
|
>
|
|
Playlists
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('albums')}
|
|
className={`px-4 py-2 rounded-full text-sm font-medium border transition whitespace-nowrap ${activeTab === 'albums' ? 'bg-[#2a2a2a] text-white border-white/10' : 'bg-[#121212] text-spotify-text-muted border-white/5'}`}
|
|
>
|
|
Albums
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('artists')}
|
|
className={`px-4 py-2 rounded-full text-sm font-medium border transition whitespace-nowrap ${activeTab === 'artists' ? 'bg-[#2a2a2a] text-white border-white/10' : 'bg-[#121212] text-spotify-text-muted border-white/5'}`}
|
|
>
|
|
Artists
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
|
|
{/* Playlists & Liked Songs */}
|
|
{showPlaylists && (
|
|
<>
|
|
<Link href="/collection/tracks">
|
|
<div className="bg-gradient-to-br from-indigo-700 to-blue-500 rounded-md p-4 aspect-square flex flex-col justify-end relative overflow-hidden shadow-lg">
|
|
<h3 className="text-white font-bold text-lg z-10">Liked Songs</h3>
|
|
<p className="text-white/80 text-xs z-10">Auto-generated</p>
|
|
</div>
|
|
</Link>
|
|
|
|
{playlists.map((playlist) => (
|
|
<Link href={`/playlist?id=${playlist.id}`} key={playlist.id}>
|
|
<div className="bg-[#181818] p-3 rounded-md hover:bg-[#282828] transition aspect-[3/4] flex flex-col">
|
|
<div className="aspect-square w-full mb-3 overflow-hidden rounded-md bg-[#282828] shadow-lg">
|
|
{playlist.cover_url && !playlist.cover_url.includes("placehold") ? (
|
|
<img src={playlist.cover_url} alt={playlist.title} className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center bg-[#333]">
|
|
<span className="text-2xl">🎵</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<h3 className="text-white font-bold text-sm truncate">{playlist.title}</h3>
|
|
<p className="text-[#a7a7a7] text-xs">Playlist • You</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
|
|
{browsePlaylists.map((playlist) => (
|
|
<Link href={`/playlist?id=${playlist.id}`} key={playlist.id}>
|
|
<div className="bg-[#181818] p-3 rounded-md hover:bg-[#282828] transition aspect-[3/4] flex flex-col">
|
|
<div className="aspect-square w-full mb-3 overflow-hidden rounded-md bg-[#282828] shadow-lg">
|
|
{playlist.cover_url && !playlist.cover_url.includes("placehold") ? (
|
|
<img src={playlist.cover_url} alt={playlist.title} className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center bg-[#333]">
|
|
<span className="text-2xl">🎵</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<h3 className="text-white font-bold text-sm truncate">{playlist.title}</h3>
|
|
<p className="text-[#a7a7a7] text-xs">Playlist • Made for you</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</>
|
|
)}
|
|
|
|
{/* Artists Content (Circular Images) */}
|
|
{showArtists && artists.map((artist) => (
|
|
<Link href={`/playlist?id=${artist.id}`} key={artist.id}>
|
|
<div className="bg-[#181818] p-3 rounded-md hover:bg-[#282828] transition aspect-[3/4] flex flex-col items-center text-center">
|
|
<div className="aspect-square w-full mb-3 overflow-hidden rounded-full bg-[#282828] shadow-lg relative">
|
|
{artist.cover_url ? (
|
|
<img
|
|
src={artist.cover_url}
|
|
alt={artist.title}
|
|
className="w-full h-full object-cover"
|
|
onError={(e) => {
|
|
e.currentTarget.onerror = null; // Prevent infinite loop
|
|
e.currentTarget.style.display = 'none';
|
|
e.currentTarget.parentElement?.classList.add('bg-[#333]');
|
|
}}
|
|
/>
|
|
) : null}
|
|
<div className="absolute inset-0 flex items-center justify-center bg-[#333] -z-10">
|
|
<span className="text-2xl">🎤</span>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-white font-bold text-sm truncate w-full">{artist.title}</h3>
|
|
<p className="text-[#a7a7a7] text-xs">Artist</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
|
|
{/* Albums Content */}
|
|
{showAlbums && albums.map((album) => (
|
|
<Link href={`/playlist?id=${album.id}`} key={album.id}>
|
|
<div className="bg-[#181818] p-3 rounded-md hover:bg-[#282828] transition aspect-[3/4] flex flex-col">
|
|
<div className="aspect-square w-full mb-3 overflow-hidden rounded-md bg-[#282828] shadow-lg relative">
|
|
{album.cover_url ? (
|
|
<img
|
|
src={album.cover_url}
|
|
alt={album.title}
|
|
className="w-full h-full object-cover"
|
|
onError={(e) => {
|
|
e.currentTarget.onerror = null; // Prevent infinite loop
|
|
e.currentTarget.style.display = 'none'; // Hide broken image
|
|
e.currentTarget.parentElement?.classList.add('bg-[#333]'); // add background
|
|
// Show fallback icon sibling if possible, distinct from React state
|
|
}}
|
|
/>
|
|
) : null}
|
|
{/* Fallback overlay (shown if image missing or hidden via CSS logic would need state, but simpler: just render icon behind it or use state) */}
|
|
<div className="absolute inset-0 flex items-center justify-center bg-[#333] -z-10">
|
|
<span className="text-2xl">💿</span>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-white font-bold text-sm truncate">{album.title}</h3>
|
|
<p className="text-[#a7a7a7] text-xs">Album • {album.creator || 'Spotify'}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<CreatePlaylistModal
|
|
isOpen={isCreateModalOpen}
|
|
onClose={() => setIsCreateModalOpen(false)}
|
|
onCreate={handleCreatePlaylist}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|