feat: add song recommendations component with loading state and shuffle functionality
This commit is contained in:
GitHub
@@ -14,15 +14,19 @@ import Image from "next/image";
|
||||
|
||||
function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
|
||||
const { error } = useNavidrome();
|
||||
const [isClient, setIsClient] = React.useState(false);
|
||||
const [hasCompletedOnboarding, setHasCompletedOnboarding] = React.useState(true); // Default to true to prevent flash
|
||||
|
||||
// Check if this is a first-time user
|
||||
const hasCompletedOnboarding = typeof window !== 'undefined'
|
||||
? localStorage.getItem('onboarding-completed')
|
||||
: false;
|
||||
// Client-side hydration
|
||||
React.useEffect(() => {
|
||||
setIsClient(true);
|
||||
const onboardingStatus = localStorage.getItem('onboarding-completed');
|
||||
setHasCompletedOnboarding(!!onboardingStatus);
|
||||
}, []);
|
||||
|
||||
// Simple check: has config in localStorage or environment
|
||||
const hasAnyConfig = React.useMemo(() => {
|
||||
if (typeof window === 'undefined') return false;
|
||||
if (!isClient) return true; // Assume config exists during SSR to prevent flash
|
||||
|
||||
// Check localStorage config
|
||||
const savedConfig = localStorage.getItem('navidrome-config');
|
||||
@@ -45,7 +49,12 @@ function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
|
||||
}
|
||||
|
||||
return false;
|
||||
}, []);
|
||||
}, [isClient]);
|
||||
|
||||
// Don't show anything until client-side hydration is complete
|
||||
if (!isClient) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
// Show start screen ONLY if:
|
||||
// 1. First-time user (no onboarding completed), OR
|
||||
|
||||
213
app/components/SongRecommendations.tsx
Normal file
213
app/components/SongRecommendations.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Song } from '@/lib/navidrome';
|
||||
import { useNavidrome } from '@/app/components/NavidromeContext';
|
||||
import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Play, Heart, Music, Shuffle } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface SongRecommendationsProps {
|
||||
userName?: string;
|
||||
}
|
||||
|
||||
export function SongRecommendations({ userName }: SongRecommendationsProps) {
|
||||
const { api, isConnected } = useNavidrome();
|
||||
const { playTrack, shuffle, toggleShuffle } = useAudioPlayer();
|
||||
const [recommendedSongs, setRecommendedSongs] = useState<Song[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [songStates, setSongStates] = useState<Record<string, boolean>>({});
|
||||
|
||||
// Get greeting based on time of day
|
||||
const hour = new Date().getHours();
|
||||
const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
|
||||
|
||||
useEffect(() => {
|
||||
const loadRecommendations = async () => {
|
||||
if (!api || !isConnected) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
// Get random albums and extract songs from them
|
||||
const randomAlbums = await api.getAlbums('random', 10); // Get 10 random albums
|
||||
const allSongs: Song[] = [];
|
||||
|
||||
// Get songs from first few albums
|
||||
for (let i = 0; i < Math.min(3, randomAlbums.length); i++) {
|
||||
try {
|
||||
const albumSongs = await api.getAlbumSongs(randomAlbums[i].id);
|
||||
allSongs.push(...albumSongs);
|
||||
} catch (error) {
|
||||
console.error('Failed to get album songs:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Shuffle and limit to 6 songs
|
||||
const shuffled = allSongs.sort(() => Math.random() - 0.5);
|
||||
const recommendations = shuffled.slice(0, 6);
|
||||
setRecommendedSongs(recommendations);
|
||||
|
||||
// Initialize starred states
|
||||
const states: Record<string, boolean> = {};
|
||||
recommendations.forEach((song: Song) => {
|
||||
states[song.id] = !!song.starred;
|
||||
});
|
||||
setSongStates(states);
|
||||
} catch (error) {
|
||||
console.error('Failed to load song recommendations:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadRecommendations();
|
||||
}, [api, isConnected]);
|
||||
|
||||
const handlePlaySong = async (song: Song) => {
|
||||
if (!api) return;
|
||||
|
||||
try {
|
||||
const track = {
|
||||
id: song.id,
|
||||
name: song.title,
|
||||
url: api.getStreamUrl(song.id),
|
||||
artist: song.artist || 'Unknown Artist',
|
||||
artistId: song.artistId || '',
|
||||
album: song.album || 'Unknown Album',
|
||||
albumId: song.albumId || '',
|
||||
duration: song.duration || 0,
|
||||
coverArt: song.coverArt,
|
||||
starred: !!song.starred
|
||||
};
|
||||
await playTrack(track, true);
|
||||
} catch (error) {
|
||||
console.error('Failed to play song:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShuffleAll = async () => {
|
||||
if (recommendedSongs.length === 0) return;
|
||||
|
||||
// Enable shuffle if not already on
|
||||
if (!shuffle) {
|
||||
toggleShuffle();
|
||||
}
|
||||
|
||||
// Play a random song from recommendations
|
||||
const randomSong = recommendedSongs[Math.floor(Math.random() * recommendedSongs.length)];
|
||||
await handlePlaySong(randomSong);
|
||||
};
|
||||
|
||||
const formatDuration = (duration: number): string => {
|
||||
const minutes = Math.floor(duration / 60);
|
||||
const seconds = duration % 60;
|
||||
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="h-8 w-48 bg-muted animate-pulse rounded" />
|
||||
<div className="h-4 w-64 bg-muted animate-pulse rounded" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="h-16 bg-muted animate-pulse rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">
|
||||
{greeting}{userName ? `, ${userName}` : ''}!
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Here are some songs you might enjoy
|
||||
</p>
|
||||
</div>
|
||||
{recommendedSongs.length > 0 && (
|
||||
<Button onClick={handleShuffleAll} variant="outline" size="sm">
|
||||
<Shuffle className="w-4 h-4 mr-2" />
|
||||
Shuffle All
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{recommendedSongs.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{recommendedSongs.map((song) => (
|
||||
<Card
|
||||
key={song.id}
|
||||
className="group cursor-pointer hover:bg-accent/50 transition-colors py-2"
|
||||
onClick={() => handlePlaySong(song)}
|
||||
>
|
||||
<CardContent className="px-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative w-12 h-12 rounded overflow-hidden bg-muted flex-shrink-0">
|
||||
{song.coverArt && api ? (
|
||||
<Image
|
||||
src={api.getCoverArtUrl(song.coverArt, 100)}
|
||||
alt={song.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="48px"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<Music className="w-6 h-6 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<Play className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{song.title}</p>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Link
|
||||
href={`/artist/${song.artistId}`}
|
||||
className="hover:underline truncate"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{song.artist}
|
||||
</Link>
|
||||
{song.duration && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span>{formatDuration(song.duration)}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{songStates[song.id] && (
|
||||
<Heart className="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" />
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="p-6 text-center">
|
||||
<Music className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<p className="text-muted-foreground">
|
||||
No songs available for recommendations
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -46,6 +46,8 @@ export function AlbumArtwork({
|
||||
const router = useRouter();
|
||||
const { addAlbumToQueue, playTrack, addToQueue } = useAudioPlayer();
|
||||
const { playlists, starItem, unstarItem } = useNavidrome();
|
||||
const [imageLoading, setImageLoading] = useState(true);
|
||||
const [imageError, setImageError] = useState(false);
|
||||
|
||||
const handleClick = () => {
|
||||
router.push(`/album/${album.id}`);
|
||||
@@ -115,28 +117,54 @@ export function AlbumArtwork({
|
||||
<Card key={album.id} className="overflow-hidden cursor-pointer px-0 py-0 gap-0" onClick={() => handleClick()}>
|
||||
<div className="aspect-square relative group">
|
||||
{album.coverArt && api ? (
|
||||
<Image
|
||||
src={api.getCoverArtUrl(album.coverArt)}
|
||||
alt={album.name}
|
||||
fill
|
||||
className="w-full h-full object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 300px"
|
||||
/>
|
||||
<>
|
||||
{imageLoading && (
|
||||
<div className="absolute inset-0 bg-muted animate-pulse rounded flex items-center justify-center">
|
||||
<Disc className="w-12 h-12 text-muted-foreground animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<Image
|
||||
src={api.getCoverArtUrl(album.coverArt)}
|
||||
alt={album.name}
|
||||
fill
|
||||
className={`w-full h-full object-cover transition-opacity duration-300 ${
|
||||
imageLoading ? 'opacity-0' : 'opacity-100'
|
||||
}`}
|
||||
sizes="(max-width: 768px) 100vw, 300px"
|
||||
onLoad={() => setImageLoading(false)}
|
||||
onError={() => {
|
||||
setImageLoading(false);
|
||||
setImageError(true);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div className="w-full h-full bg-muted rounded flex items-center justify-center">
|
||||
<Disc className="w-12 h-12 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
|
||||
<Play className="w-6 h-6 mx-auto hidden group-hover:block" onClick={() => handlePlayAlbum(album)}/>
|
||||
</div>
|
||||
{!imageLoading && (
|
||||
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
|
||||
<Play className="w-6 h-6 mx-auto hidden group-hover:block" onClick={() => handlePlayAlbum(album)}/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<CardContent className="p-4">
|
||||
<h3 className="font-semibold truncate">{album.name}</h3>
|
||||
<p className="text-sm text-muted-foreground truncate " onClick={() => router.push(album.artistId)}>{album.artist}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{album.songCount} songs • {Math.floor(album.duration / 60)} min
|
||||
</p>
|
||||
{imageLoading ? (
|
||||
<>
|
||||
<div className="h-5 w-3/4 bg-muted animate-pulse rounded mb-2" />
|
||||
<div className="h-4 w-1/2 bg-muted animate-pulse rounded mb-1" />
|
||||
<div className="h-3 w-2/3 bg-muted animate-pulse rounded" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h3 className="font-semibold truncate">{album.name}</h3>
|
||||
<p className="text-sm text-muted-foreground truncate " onClick={() => router.push(album.artistId)}>{album.artist}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{album.songCount} songs • {Math.floor(album.duration / 60)} min
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* <div onClick={handleClick} className="overflow-hidden rounded-md">
|
||||
|
||||
Reference in New Issue
Block a user