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

feat: update album loading to support alphabetical order and adjust layout for better responsiveness

Browse Source
This commit is contained in:
angel
2025-06-19 22:58:49 +00:00
committed by GitHub
parent ddd3986f0d
commit 98b348bb34
4 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/browse/page.tsx
View File

@@ -26,7 +26,9 @@ export default function BrowsePage() {
try {
setIsLoadingAlbums(true);
const offset = page * albumsPerPage;
const newAlbums = await api.getAlbums('newest', albumsPerPage, offset);
// Use alphabeticalByName to get all albums in alphabetical order
const newAlbums = await api.getAlbums('alphabeticalByName', albumsPerPage, offset);
if (append) {
setAlbums(prev => [...prev, ...newAlbums]);
@@ -126,7 +128,7 @@ export default function BrowsePage() {
<div className="relative flex-grow">
<ScrollArea className="h-full">
<div className="h-full overflow-y-auto">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 p-4">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 p-4 pb-8">
{albums.map((album) => (
<AlbumArtwork
key={album.id}
@@ -139,7 +141,7 @@ export default function BrowsePage() {
))}
</div>
{hasMoreAlbums && (
<div className="flex justify-center p-4">
<div className="flex justify-center p-4 pb-24">
<Button
onClick={loadMore}
disabled={isLoadingAlbums}
@@ -150,7 +152,7 @@ export default function BrowsePage() {
</div>
)}
{!hasMoreAlbums && albums.length > 0 && (
<div className="flex justify-center p-4">
<div className="flex justify-center p-4 pb-24">
<p className="text-sm text-muted-foreground">
All albums loaded ({albums.length} total)
</p>

2
app/components/album-artwork.tsx
View File

@@ -75,7 +75,7 @@ export function AlbumArtwork({
height={height}
className={cn(
"h-auto w-auto object-cover transition-all hover:scale-105",
"w-full h-full object-cover transition-all hover:scale-105",
aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-square"
)}
/>

8
app/page.tsx
View File

@@ -59,14 +59,14 @@ export default function MusicPage() {
{isLoading ? (
// Loading skeletons
Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="w-[300px] h-[300px] bg-muted animate-pulse rounded-md" />
<div key={i} className="w-[300px] h-[300px] bg-muted animate-pulse rounded-md flex-shrink-0" />
))
) : (
recentAlbums.map((album) => (
<AlbumArtwork
key={album.id}
album={album}
className="w-[300px]"
className="w-[300px] flex-shrink-0"
aspectRatio="square"
width={300}
height={300}
@@ -92,14 +92,14 @@ export default function MusicPage() {
{isLoading ? (
// Loading skeletons
Array.from({ length: 10 }).map((_, i) => (
<div key={i} className="w-[150px] h-[150px] bg-muted animate-pulse rounded-md" />
<div key={i} className="w-[150px] h-[150px] bg-muted animate-pulse rounded-md flex-shrink-0" />
))
) : (
newestAlbums.map((album) => (
<AlbumArtwork
key={album.id}
album={album}
className="w-[150px]"
className="w-[150px] flex-shrink-0"
aspectRatio="square"
width={150}
height={150}

4
lib/navidrome.ts
View File

@@ -106,7 +106,7 @@ class NavidromeAPI {
return crypto.createHash('md5').update(password + salt).digest('hex');
}
private async makeRequest(endpoint: string, params: Record<string, string | number> = {}): Promise<Record<string, unknown>> {
async makeRequest(endpoint: string, params: Record<string, string | number> = {}): Promise<Record<string, unknown>> {
const salt = this.generateSalt();
const token = this.generateToken(this.config.password, salt);
@@ -175,7 +175,7 @@ class NavidromeAPI {
};
}
async getAlbums(type?: 'newest' | 'recent' | 'frequent' | 'random', size: number = 50, offset: number = 0): Promise<Album[]> {
async getAlbums(type?: 'newest' | 'recent' | 'frequent' | 'random' | 'alphabeticalByName' | 'alphabeticalByArtist' | 'starred' | 'highest', size: number = 500, offset: number = 0): Promise<Album[]> {
const response = await this.makeRequest('getAlbumList2', {
type: type || 'newest',
size,