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

Refactor SongRecommendations and LibraryPage components for improved mobile responsiveness and code clarity

Browse Source
This commit is contained in:
angel
2025-07-25 04:52:46 +00:00
committed by GitHub
parent 940ed94579
commit fe40c0264c
2 changed files with 103 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/components/SongRecommendations.tsx
View File

@@ -196,7 +196,7 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
{isMobile ? 'Here are some albums you might enjoy' : 'Here are some songs you might enjoy'}
</p>
</div>
{(isMobile ? recommendedAlbums.length > 0 : recommendedSongs.length > 0) && (
{(isMobile ? recommendedAlbums.length > 0 : recommendedSongs.length > 0) && !isMobile && (
<Button onClick={handleShuffleAll} variant="outline" size="sm">
<Shuffle className="w-4 h-4 mr-2" />
Shuffle All
@@ -209,47 +209,45 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
recommendedAlbums.length > 0 ? (
<div className="grid grid-cols-3 gap-3">
{recommendedAlbums.map((album) => (
<Link
key={album.id}
href={`/album/${album.id}`}
className="group cursor-pointer"
>
<div className="space-y-2">
<div key={album.id} className="space-y-2">
<Link
href={`/album/${album.id}`}
className="group cursor-pointer block"
>
<div className="relative aspect-square rounded-lg overflow-hidden bg-muted">
{album.coverArt && api ? (
<>
<Image
src={api.getCoverArtUrl(album.coverArt, 200)}
alt={album.name}
fill
className="object-cover"
sizes="(max-width: 768px) 33vw, 200px"
onLoad={handleImageLoad}
onError={handleImageError}
loading="lazy"
/>
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<Play
className="w-8 h-8 text-white"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handlePlayAlbum(album);
}}
/>
</div>
</>
<Image
src={api.getCoverArtUrl(album.coverArt, 200)}
alt={album.name}
fill
className="object-cover"
sizes="(max-width: 768px) 33vw, 200px"
onLoad={handleImageLoad}
onError={handleImageError}
loading="lazy"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<Music className="w-8 h-8 text-muted-foreground" />
</div>
)}
</div>
<div className="space-y-1">
<p className="font-medium text-sm truncate">{album.name}</p>
</div>
</Link>
<div className="space-y-1">
<Link
href={`/album/${album.id}`}
className="font-medium text-sm truncate hover:underline block"
>
{album.name}
</Link>
<Link
href={`/artist/${album.artistId || album.artist}`}
className="text-xs text-muted-foreground truncate hover:underline block"
>
{album.artist}
</Link>
</div>
</Link>
</div>
))}
</div>
) : (