feat: add 3 visual toggles (cover art background, playlist cover photo, show bitrate)

2026-07-22 15:25:46 +00:00 · 2026-04-14 21:47:48 +02:00
parent d34de09673 38e59d7a5e
commit 9f4c7382aa
16 changed files with 178 additions and 50 deletions
@@ -14,6 +14,7 @@ import { usePlaylistStore } from '../store/playlistStore';
 import { useOfflineStore } from '../store/offlineStore';
 import { useOfflineJobStore } from '../store/offlineJobStore';
 import { useAuthStore } from '../store/authStore';
+import { useThemeStore } from '../store/themeStore';
 import { useDownloadModalStore } from '../store/downloadModalStore';
 import { invoke } from '@tauri-apps/api/core';
 import { join } from '@tauri-apps/api/path';
@@ -45,10 +46,10 @@ function totalDurationLabel(songs: SubsonicSong[]): string {
  return formatHumanHoursMinutes(total);
 }

-function codecLabel(song: SubsonicSong): string {
+function codecLabel(song: SubsonicSong, showBitrate: boolean): string {
  const parts: string[] = [];
  if (song.suffix) parts.push(song.suffix.toUpperCase());
-  if (song.bitRate) parts.push(`${song.bitRate} kbps`);
+  if (showBitrate && song.bitRate) parts.push(`${song.bitRate} kbps`);
  return parts.join(' · ');
 }

@@ -107,6 +108,10 @@ export default function PlaylistDetail() {
  const setDownloadFolder = useAuthStore(s => s.setDownloadFolder);
  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);

+  const enableCoverArtBackground = useThemeStore(s => s.enableCoverArtBackground);
+  const enablePlaylistCoverPhoto = useThemeStore(s => s.enablePlaylistCoverPhoto);
+  const showBitrate = useThemeStore(s => s.showBitrate);
+
  const [playlist, setPlaylist] = useState<SubsonicPlaylist | null>(null);
  const [songs, setSongs] = useState<SubsonicSong[]>([]);
  const [loading, setLoading] = useState(true);
@@ -540,10 +545,12 @@ export default function PlaylistDetail() {

      {/* ── Hero ── */}
      <div className="album-detail-header">
-        {resolvedBgUrl && (
-          <div className="album-detail-bg" style={{ backgroundImage: `url(${resolvedBgUrl})` }} aria-hidden="true" />
+        {resolvedBgUrl && enableCoverArtBackground && (
+          <>
+            <div className="album-detail-bg" style={{ backgroundImage: `url(${resolvedBgUrl})` }} aria-hidden="true" />
+            <div className="album-detail-overlay" aria-hidden="true" />
+          </>
        )}
-        <div className="album-detail-overlay" aria-hidden="true" />

        <div className="album-detail-content">
          <button className="btn btn-ghost album-detail-back" onClick={() => navigate('/playlists')}>
@@ -552,31 +559,33 @@ export default function PlaylistDetail() {

          <div className="album-detail-hero">
            {/* Cover — click to open edit modal */}
-            <div
-              className="playlist-hero-cover"
-              onClick={() => setEditingMeta(true)}
-            >
-              {customCoverId && customCoverFetchUrl && customCoverCacheKey ? (
-                <CachedImage
-                  src={customCoverFetchUrl}
-                  cacheKey={customCoverCacheKey}
-                  alt=""
-                  className="playlist-cover-grid"
-                  style={{ objectFit: 'cover', display: 'block' }}
-                />
-              ) : (
-                <div className="playlist-cover-grid">
-                  {coverQuadUrls.map((entry, i) =>
-                    entry
-                      ? <CachedImage key={i} className="playlist-cover-cell" src={entry.src} cacheKey={entry.cacheKey} alt="" />
-                      : <div key={i} className="playlist-cover-cell playlist-cover-cell--empty" />
-                  )}
+            {enablePlaylistCoverPhoto && (
+              <div
+                className="playlist-hero-cover"
+                onClick={() => setEditingMeta(true)}
+              >
+                {customCoverId && customCoverFetchUrl && customCoverCacheKey ? (
+                  <CachedImage
+                    src={customCoverFetchUrl}
+                    cacheKey={customCoverCacheKey}
+                    alt=""
+                    className="playlist-cover-grid"
+                    style={{ objectFit: 'cover', display: 'block' }}
+                  />
+                ) : (
+                  <div className="playlist-cover-grid">
+                    {coverQuadUrls.map((entry, i) =>
+                      entry
+                        ? <CachedImage key={i} className="playlist-cover-cell" src={entry.src} cacheKey={entry.cacheKey} alt="" />
+                        : <div key={i} className="playlist-cover-cell playlist-cover-cell--empty" />
+                    )}
+                  </div>
+                )}
+                <div className="playlist-hero-cover-overlay">
+                  <Camera size={28} />
                </div>
-              )}
-              <div className="playlist-hero-cover-overlay">
-                <Camera size={28} />
              </div>
-            </div>
+            )}

            <div className="album-detail-meta">
              <span className="badge album-detail-badge">{t('playlists.titleBadge')}</span>
@@ -1059,7 +1068,7 @@ export default function PlaylistDetail() {
                  case 'duration': return <div key="duration" className="track-duration">{formatDuration(song.duration ?? 0)}</div>;
                  case 'format': return (
                    <div key="format" className="track-meta">
-                      {(song.suffix || song.bitRate) && <span className="track-codec">{codecLabel(song)}</span>}
+                      {(song.suffix || (showBitrate && song.bitRate)) && <span className="track-codec">{codecLabel(song, showBitrate)}</span>}
                    </div>
                  );
                  case 'delete': return (
@@ -1148,7 +1157,7 @@ export default function PlaylistDetail() {
                    case 'duration': return <div key="duration" className="track-duration">{formatDuration(song.duration ?? 0)}</div>;
                    case 'format': return (
                      <div key="format" className="track-meta">
-                        {(song.suffix || song.bitRate) && <span className="track-codec">{codecLabel(song)}</span>}
+                        {(song.suffix || (showBitrate && song.bitRate)) && <span className="track-codec">{codecLabel(song, showBitrate)}</span>}
                      </div>
                    );
                    case 'delete': return (
@@ -8,6 +8,7 @@ import ArtistRow from '../components/ArtistRow';
 import { useTranslation } from 'react-i18next';
 import { useDragDrop } from '../contexts/DragDropContext';
 import { useAuthStore } from '../store/authStore';
+import { useThemeStore } from '../store/themeStore';

 function formatDuration(s: number) {
  return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
@@ -23,6 +24,7 @@ export default function SearchResults() {
  const currentTrack = usePlayerStore(s => s.currentTrack);
  const psyDrag = useDragDrop();
  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
+  const showBitrate = useThemeStore(s => s.showBitrate);

  useEffect(() => {
    if (!query.trim()) { setResults(null); return; }
@@ -116,7 +118,7 @@ export default function SearchResults() {
                    <div className="track-artist-cell"><span className="track-artist" title={song.artist}>{song.artist}</span></div>
                    <div className="track-artist-cell"><span className="track-artist" title={song.album}>{song.album}</span></div>
                    <span className="track-codec" style={{ alignSelf: 'center' }}>
-                      {[song.suffix?.toUpperCase(), song.bitRate ? `${song.bitRate} kbps` : ''].filter(Boolean).join(' · ')}
+                      {[song.suffix?.toUpperCase(), showBitrate && song.bitRate ? `${song.bitRate} kbps` : ''].filter(Boolean).join(' · ')}
                    </span>
                    <span className="track-duration" style={{ textAlign: 'right' }}>
                      {formatDuration(song.duration)}
@@ -1612,6 +1612,47 @@ export default function Settings() {
            </div>
          </section>

+          <section className="settings-section">
+            <div className="settings-section-header">
+              <Palette size={18} />
+              <h2>{t('settings.visualOptionsTitle')}</h2>
+            </div>
+            <div className="settings-card">
+              <div className="settings-toggle-row">
+                <div>
+                  <div style={{ fontWeight: 500 }}>{t('settings.coverArtBackground')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.coverArtBackgroundSub')}</div>
+                </div>
+                <label className="toggle-switch">
+                  <input type="checkbox" checked={theme.enableCoverArtBackground} onChange={e => theme.setEnableCoverArtBackground(e.target.checked)} />
+                  <span className="toggle-track" />
+                </label>
+              </div>
+              <div className="settings-section-divider" />
+              <div className="settings-toggle-row">
+                <div>
+                  <div style={{ fontWeight: 500 }}>{t('settings.playlistCoverPhoto')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.playlistCoverPhotoSub')}</div>
+                </div>
+                <label className="toggle-switch">
+                  <input type="checkbox" checked={theme.enablePlaylistCoverPhoto} onChange={e => theme.setEnablePlaylistCoverPhoto(e.target.checked)} />
+                  <span className="toggle-track" />
+                </label>
+              </div>
+              <div className="settings-section-divider" />
+              <div className="settings-toggle-row">
+                <div>
+                  <div style={{ fontWeight: 500 }}>{t('settings.showBitrate')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.showBitrateSub')}</div>
+                </div>
+                <label className="toggle-switch">
+                  <input type="checkbox" checked={theme.showBitrate} onChange={e => theme.setShowBitrate(e.target.checked)} />
+                  <span className="toggle-track" />
+                </label>
+              </div>
+            </div>
+          </section>
+
          <section className="settings-section">
            <div className="settings-section-header">
              <ZoomIn size={18} />