feat: v1.20.0 — FLAC Seek Fix, Genres, Genre Filter, Chinese, W10 Theme

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-22 06:25:41 +00:00 · 2026-03-29 18:04:01 +02:00
parent b35539d3cf
commit e1d27798eb
26 changed files with 2020 additions and 406 deletions
@@ -0,0 +1,86 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ArrowLeft, Disc3 } from 'lucide-react';
+import { getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
+import AlbumCard from '../components/AlbumCard';
+
+const PAGE_SIZE = 50;
+
+export default function GenreDetail() {
+  const { name } = useParams<{ name: string }>();
+  const genre = decodeURIComponent(name ?? '');
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    setAlbums([]);
+    setOffset(0);
+    setHasMore(true);
+    setLoading(true);
+    getAlbumsByGenre(genre, PAGE_SIZE, 0)
+      .then(data => {
+        setAlbums(data);
+        setHasMore(data.length === PAGE_SIZE);
+        setOffset(PAGE_SIZE);
+      })
+      .finally(() => setLoading(false));
+  }, [genre]);
+
+  const loadMore = useCallback(() => {
+    if (loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    getAlbumsByGenre(genre, PAGE_SIZE, offset)
+      .then(data => {
+        setAlbums(prev => [...prev, ...data]);
+        setHasMore(data.length === PAGE_SIZE);
+        setOffset(prev => prev + PAGE_SIZE);
+      })
+      .finally(() => setLoadingMore(false));
+  }, [genre, offset, loadingMore, hasMore]);
+
+  return (
+    <div className="content-body animate-fade-in">
+      <button
+        className="btn btn-ghost"
+        onClick={() => navigate(-1)}
+        style={{ marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+      >
+        <ArrowLeft size={16} />
+        <span>{t('genres.back')}</span>
+      </button>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{genre}</h1>
+        {!loading && albums.length > 0 && (
+          <span style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', color: 'var(--text-secondary)', fontSize: '0.9rem', fontWeight: 500 }}>
+            <Disc3 size={14} style={{ color: 'var(--accent)' }} />
+            {t('genres.albumCount', { count: albums.length })}{hasMore ? '+' : ''}
+          </span>
+        )}
+      </div>
+
+      {loading && <p className="loading-text">{t('genres.albumsLoading')}</p>}
+      {!loading && albums.length === 0 && <p className="loading-text">{t('genres.albumsEmpty')}</p>}
+
+      {albums.length > 0 && (
+        <div className="album-grid-wrap">
+          {albums.map(album => <AlbumCard key={album.id} album={album} />)}
+        </div>
+      )}
+
+      {hasMore && !loading && (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 0' }}>
+          <button className="btn btn-surface" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore ? t('common.loadingMore') : t('genres.loadMore')}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}