angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5 from sillyangel/development

Browse Source 
feat: enhance SearchPage with improved no results message and replace…
This commit is contained in:
angel
2025-06-19 20:21:53 -05:00
committed by GitHub
parent 2ff51d0d3e 0d69b10be0
commit 2eb2b8b9e0
4 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
app/api/test-navidrome/route.ts
View File

2
app/browse/page.tsx
View File

@@ -50,6 +50,7 @@ export default function BrowsePage() {
useEffect(() => { useEffect(() => {
loadAlbums(0); loadAlbums(0);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
// Infinite scroll handler // Infinite scroll handler
@@ -71,6 +72,7 @@ export default function BrowsePage() {
scrollArea.addEventListener('scroll', handleScroll); scrollArea.addEventListener('scroll', handleScroll);
return () => scrollArea.removeEventListener('scroll', handleScroll); return () => scrollArea.removeEventListener('scroll', handleScroll);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoadingAlbums, hasMoreAlbums, currentPage]); }, [isLoadingAlbums, hasMoreAlbums, currentPage]);
const loadMore = () => { const loadMore = () => {

6
app/components/FullScreenPlayer.tsx
View File

@@ -110,7 +110,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
return () => clearTimeout(scrollTimeout); return () => clearTimeout(scrollTimeout);
} }
}, [currentLyricIndex, showLyrics]); }, [currentLyricIndex, showLyrics, lyrics.length]);
// Reset lyrics to top when song changes // Reset lyrics to top when song changes
useEffect(() => { useEffect(() => {
@@ -135,7 +135,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
return () => clearTimeout(resetTimeout); return () => clearTimeout(resetTimeout);
} }
}, [currentTrack?.id, showLyrics]); // Only reset when track ID changes }, [currentTrack?.id, showLyrics, currentTrack]); // Only reset when track ID changes
// Sync with main audio player (improved responsiveness) // Sync with main audio player (improved responsiveness)
useEffect(() => { useEffect(() => {
@@ -167,7 +167,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
const interval = setInterval(syncWithMainPlayer, 100); const interval = setInterval(syncWithMainPlayer, 100);
return () => clearInterval(interval); return () => clearInterval(interval);
} }
}, [isOpen, currentTrack?.id]); // React to track changes }, [isOpen, currentTrack]); // React to track changes
// Extract dominant color from cover art // Extract dominant color from cover art
useEffect(() => { useEffect(() => {

8
app/search/page.tsx
View File

@@ -1,6 +1,7 @@
'use client'; 'use client';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import Image from 'next/image';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'; import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator'; import { Separator } from '@/components/ui/separator';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -48,6 +49,7 @@ export default function SearchPage() {
}, 300); }, 300);
return () => clearTimeout(timeoutId); return () => clearTimeout(timeoutId);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchQuery]); }, [searchQuery]);
const handlePlaySong = (song: Song) => { const handlePlaySong = (song: Song) => {
@@ -118,7 +120,7 @@ export default function SearchPage() {
<div className="space-y-6"> <div className="space-y-6">
{searchResults.artists.length === 0 && searchResults.albums.length === 0 && searchResults.songs.length === 0 && !isSearching && ( {searchResults.artists.length === 0 && searchResults.albums.length === 0 && searchResults.songs.length === 0 && !isSearching && (
<div className="text-center py-12"> <div className="text-center py-12">
<p className="text-muted-foreground text-lg">No results found for "{searchQuery}"</p> <p className="text-muted-foreground text-lg">No results found for &quot;{searchQuery}&quot;</p>
<p className="text-muted-foreground text-sm mt-2">Try different keywords or check your spelling</p> <p className="text-muted-foreground text-sm mt-2">Try different keywords or check your spelling</p>
</div> </div>
)} )}
@@ -181,9 +183,11 @@ export default function SearchPage() {
{/* Song Cover */} {/* Song Cover */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<img <Image
src={song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : '/default-user.jpg'} src={song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : '/default-user.jpg'}
alt={song.album} alt={song.album}
width={48}
height={48}
className="w-12 h-12 rounded-md object-cover" className="w-12 h-12 rounded-md object-cover"
/> />
</div> </div>