118 lines
4.1 KiB
TypeScript
118 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { ScrollArea, ScrollBar } from '../components/ui/scroll-area';
|
|
import { Separator } from '../components/ui/separator';
|
|
import { Tabs, TabsContent } from '../components/ui/tabs';
|
|
import { AlbumArtwork } from './components/album-artwork';
|
|
import { useNavidrome } from './components/NavidromeContext';
|
|
import { useEffect, useState } from 'react';
|
|
import { Album } from '@/lib/navidrome';
|
|
|
|
export default function MusicPage() {
|
|
const { albums, isLoading, error } = useNavidrome();
|
|
const [recentAlbums, setRecentAlbums] = useState<Album[]>([]);
|
|
const [newestAlbums, setNewestAlbums] = useState<Album[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (albums.length > 0) {
|
|
// Split albums into recent and newest for display
|
|
const recent = albums.slice(0, Math.ceil(albums.length / 2));
|
|
const newest = albums.slice(Math.ceil(albums.length / 2));
|
|
setRecentAlbums(recent);
|
|
setNewestAlbums(newest);
|
|
}
|
|
}, [albums]);
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="h-full px-4 py-6 lg:px-8 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<p className="text-xl font-semibold text-destructive mb-2">Connection Error</p>
|
|
<p className="text-muted-foreground">{error}</p>
|
|
<p className="text-sm text-muted-foreground mt-2">
|
|
Please check your Navidrome server configuration.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full px-4 py-6 lg:px-8">
|
|
<>
|
|
<Tabs defaultValue="music" className="h-full space-y-6">
|
|
<TabsContent value="music" className="border-none p-0 outline-none">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<p className="text-2xl font-semibold tracking-tight">
|
|
Recently Added
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Latest additions to your music library.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Separator className="my-4" />
|
|
<div className="relative">
|
|
<ScrollArea>
|
|
<div className="flex space-x-4 pb-4">
|
|
{isLoading ? (
|
|
// Loading skeletons
|
|
Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="w-[300px] h-[300px] bg-muted animate-pulse rounded-md" />
|
|
))
|
|
) : (
|
|
recentAlbums.map((album) => (
|
|
<AlbumArtwork
|
|
key={album.id}
|
|
album={album}
|
|
className="w-[300px]"
|
|
aspectRatio="square"
|
|
width={300}
|
|
height={300}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
<ScrollBar orientation="horizontal" />
|
|
</ScrollArea>
|
|
</div>
|
|
<div className="mt-6 space-y-1">
|
|
<p className="text-2xl font-semibold tracking-tight">
|
|
Your Library
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Albums from your music collection.
|
|
</p>
|
|
</div>
|
|
<Separator className="my-4" />
|
|
<div className="relative">
|
|
<ScrollArea>
|
|
<div className="flex space-x-4 pb-4">
|
|
{isLoading ? (
|
|
// Loading skeletons
|
|
Array.from({ length: 10 }).map((_, i) => (
|
|
<div key={i} className="w-[150px] h-[150px] bg-muted animate-pulse rounded-md" />
|
|
))
|
|
) : (
|
|
newestAlbums.map((album) => (
|
|
<AlbumArtwork
|
|
key={album.id}
|
|
album={album}
|
|
className="w-[150px]"
|
|
aspectRatio="square"
|
|
width={150}
|
|
height={150}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
<ScrollBar orientation="horizontal" />
|
|
</ScrollArea>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</>
|
|
</div>
|
|
);
|
|
} |