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

2026-07-22 07:15:47 +00:00 · 2026-04-14 21:47:48 +02:00
parent d34de09673 38e59d7a5e
commit 9f4c7382aa
16 changed files with 178 additions and 50 deletions
@@ -6,6 +6,7 @@ import CachedImage from './CachedImage';
 import CoverLightbox from './CoverLightbox';
 import { useTranslation } from 'react-i18next';
 import { useIsMobile } from '../hooks/useIsMobile';
+import { useThemeStore } from '../store/themeStore';
 import StarRating from './StarRating';
 import type { EntityRatingSupportLevel } from '../api/subsonic';

@@ -125,6 +126,7 @@ export default function AlbumHeader({
  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
  const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);
  const formatLabel = [...new Set(songs.map(s => s.suffix).filter((f): f is string => !!f))].map(f => f.toUpperCase()).join(' / ');
+  const enableCoverArtBackground = useThemeStore(s => s.enableCoverArtBackground);

  return (
    <>
@@ -138,14 +140,16 @@ export default function AlbumHeader({
      )}

      <div className="album-detail-header">
-        {resolvedCoverUrl && (
-          <div
-            className="album-detail-bg"
-            style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
-            aria-hidden="true"
-          />
+        {resolvedCoverUrl && enableCoverArtBackground && (
+          <>
+            <div
+              className="album-detail-bg"
+              style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
+              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(-1)}>
@@ -10,6 +10,7 @@ import { AddToPlaylistSubmenu } from './ContextMenu';
 import { useIsMobile } from '../hooks/useIsMobile';
 import StarRating from './StarRating';
 import { useSelectionStore } from '../store/selectionStore';
+import { useThemeStore } from '../store/themeStore';

 function formatDuration(seconds: number): string {
  const h = Math.floor(seconds / 3600);
@@ -19,11 +20,11 @@ function formatDuration(seconds: number): string {
  return `${m}:${s.toString().padStart(2, '0')}`;
 }

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

 // ── Column configuration ──────────────────────────────────────────────────────
@@ -108,6 +109,7 @@ const TrackRow = React.memo(function TrackRow({
 }: TrackRowProps) {
  const { t } = useTranslation();
  const navigate = useNavigate();
+  const showBitrate = useThemeStore(s => s.showBitrate);
  // Fine-grained: only re-renders when THIS row's selection boolean flips.
  const isSelected = useSelectionStore(s => s.selectedIds.has(song.id));
  const isActive = currentTrackId === song.id;
@@ -192,8 +194,8 @@ const TrackRow = React.memo(function TrackRow({
      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>
        );
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { playAlbum } from '../utils/playAlbum';
 import { useIsMobile } from '../hooks/useIsMobile';
 import { useAuthStore } from '../store/authStore';
+import { useThemeStore } from '../store/themeStore';
 import { filterAlbumsByMixRatings, getMixMinRatingsConfigFromAuth } from '../utils/mixRatingFilter';

 const INTERVAL_MS = 10000;
@@ -58,6 +59,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
  const isMobile = useIsMobile();
  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
  const mixMinRatingFilterEnabled = useAuthStore(s => s.mixMinRatingFilterEnabled);
+  const enableCoverArtBackground = useThemeStore(s => s.enableCoverArtBackground);
  const mixMinRatingAlbum = useAuthStore(s => s.mixMinRatingAlbum);
  const mixMinRatingArtist = useAuthStore(s => s.mixMinRatingArtist);
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
@@ -141,8 +143,8 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
      onClick={() => navigate(`/album/${album.id}`)}
      style={{ cursor: 'pointer' }}
    >
-      <HeroBg url={stableBgUrl.current} />
-      <div className="hero-overlay" aria-hidden="true" />
+      {enableCoverArtBackground && <HeroBg url={stableBgUrl.current} />}
+      {enableCoverArtBackground && <div className="hero-overlay" aria-hidden="true" />}

      {/* key causes re-mount → animate-fade-in triggers on each album change */}
      <div className="hero-content animate-fade-in" key={album.id}>
@@ -662,6 +662,13 @@ export const deTranslation = {
    themeSchedulerNightTheme: 'Nacht-Theme',
    themeSchedulerNightStart: 'Nacht beginnt um',
    themeSchedulerActiveHint: 'Theme-Zeitplan ist aktiv - Themes werden automatisch gewechselt.',
+    visualOptionsTitle: 'Visuelle Optionen',
+    coverArtBackground: 'Cover-Hintergrund',
+    coverArtBackgroundSub: 'Zeigt verschwommenes Cover als Hintergrund in Album/Playlist-Kopfzeilen',
+    playlistCoverPhoto: 'Playlist-Coverfoto',
+    playlistCoverPhotoSub: 'Zeigt Coverfoto-Raster in der Playlist-Detailansicht',
+    showBitrate: 'Bitrate anzeigen',
+    showBitrateSub: 'Audio-Bitrate in Track-Listen anzeigen',
    uiScaleTitle: 'Interface-Skalierung',
    uiScaleLabel: 'Zoom',
  },
@@ -664,6 +664,13 @@ export const enTranslation = {
    themeSchedulerNightTheme: 'Night Theme',
    themeSchedulerNightStart: 'Night Starts At',
    themeSchedulerActiveHint: 'Theme Scheduler is active - theme changes are managed automatically.',
+    visualOptionsTitle: 'Visual Options',
+    coverArtBackground: 'Cover Art Background',
+    coverArtBackgroundSub: 'Show blurred cover art as background in album/playlist headers',
+    playlistCoverPhoto: 'Playlist Cover Photo',
+    playlistCoverPhotoSub: 'Show cover photo grid in playlist detail view',
+    showBitrate: 'Show Bitrate',
+    showBitrateSub: 'Display audio bitrate in track listings',
    uiScaleTitle: 'Interface Scale',
    uiScaleLabel: 'Zoom',
  },
@@ -665,6 +665,13 @@ export const esTranslation = {
    themeSchedulerNightTheme: 'Tema de Noche',
    themeSchedulerNightStart: 'Comienza de Noche A las',
    themeSchedulerActiveHint: 'El Programador de Temas está activo — los cambios de tema se manejan automáticamente.',
+    visualOptionsTitle: 'Opciones Visuales',
+    coverArtBackground: 'Fondo de Portada',
+    coverArtBackgroundSub: 'Mostrar portada desenfocada como fondo en encabezados de álbumes y listas de reproducción',
+    playlistCoverPhoto: 'Foto de Portada de Playlist',
+    playlistCoverPhotoSub: 'Mostrar cuadrícula de fotos de portada en la vista detallada de playlists',
+    showBitrate: 'Mostrar Bitrate',
+    showBitrateSub: 'Mostrar bitrate de audio en las listas de pistas',
    uiScaleTitle: 'Escala de Interfaz',
    uiScaleLabel: 'Zoom',
  },
@@ -660,6 +660,13 @@ export const frTranslation = {
    themeSchedulerNightTheme: 'Thème de nuit',
    themeSchedulerNightStart: 'Début de la nuit',
    themeSchedulerActiveHint: 'Le planificateur de thème est actif - les thèmes changent automatiquement.',
+    visualOptionsTitle: 'Options Visuelles',
+    coverArtBackground: "Fond d'Art de Poche",
+    coverArtBackgroundSub: "Afficher la pochette floutée comme fond dans les en-têtes d'albums et de playlists",
+    playlistCoverPhoto: 'Photo de Couverture de Playlist',
+    playlistCoverPhotoSub: 'Afficher la grille de photos de couverture dans la vue détaillée des playlists',
+    showBitrate: 'Afficher le Débit',
+    showBitrateSub: 'Afficher le débit audio dans les listes de pistes',
    uiScaleTitle: "Mise à l'échelle de l'interface",
    uiScaleLabel: 'Zoom',
  },
@@ -659,6 +659,13 @@ export const nbTranslation = {
    themeSchedulerNightTheme: 'Natttema',
    themeSchedulerNightStart: 'Natt starter kl.',
    themeSchedulerActiveHint: 'Temaplanlegger er aktiv - temaer byttes automatisk.',
+    visualOptionsTitle: 'Visuelle Alternativer',
+    coverArtBackground: 'Cover-bakgrunn',
+    coverArtBackgroundSub: 'Vis uskarpt cover som bakgrunn i album/playlist-overskrifter',
+    playlistCoverPhoto: 'Playlist-coverfoto',
+    playlistCoverPhotoSub: 'Vis coverfoto-rutenett i playlist-detailedvisning',
+    showBitrate: 'Vis Bitrate',
+    showBitrateSub: 'Vis audio-bitrate i sporlister',
    uiScaleTitle: 'Grensesnittskala',
    uiScaleLabel: 'Zoom',
  },
@@ -659,6 +659,13 @@ export const nlTranslation = {
    themeSchedulerNightTheme: 'Nachtthema',
    themeSchedulerNightStart: 'Nacht begint om',
    themeSchedulerActiveHint: "Thema-planner is actief - thema's worden automatisch gewisseld.",
+    visualOptionsTitle: 'Visuele Opties',
+    coverArtBackground: 'Cover Achtergrond',
+    coverArtBackgroundSub: 'Toon vervaagde cover als achtergrond in album/playlist headers',
+    playlistCoverPhoto: 'Playlist Coverfoto',
+    playlistCoverPhotoSub: 'Toon coverfoto raster in playlist detailweergave',
+    showBitrate: 'Toon Bitrate',
+    showBitrateSub: 'Toon audio bitrate in tracklijsten',
    uiScaleTitle: 'Interface schaal',
    uiScaleLabel: 'Zoom',
  },
@@ -687,6 +687,13 @@ export const ruTranslation = {
    themeSchedulerNightTheme: 'Ночная тема',
    themeSchedulerNightStart: 'Ночь начинается в',
    themeSchedulerActiveHint: 'Расписание тем активно - темы переключаются автоматически.',
+    visualOptionsTitle: 'Визуальные Настройки',
+    coverArtBackground: 'Фон Обложки',
+    coverArtBackgroundSub: 'Показывать размытую обложку как фон в заголовках альбомов и плейлистов',
+    playlistCoverPhoto: 'Обложка Плейлиста',
+    playlistCoverPhotoSub: 'Показывать сетку обложек в детальном виде плейлиста',
+    showBitrate: 'Показывать Битрейт',
+    showBitrateSub: 'Отображать битрейт аудио в списках треков',
    uiScaleTitle: 'Масштаб интерфейса',
    uiScaleLabel: 'Масштаб',
  },
@@ -655,6 +655,13 @@ export const zhTranslation = {
    themeSchedulerNightTheme: '夜晚主题',
    themeSchedulerNightStart: '夜晚开始时间',
    themeSchedulerActiveHint: '主题定时器已启用 - 主题将自动切换。',
+    visualOptionsTitle: '视觉选项',
+    coverArtBackground: '封面背景',
+    coverArtBackgroundSub: '在专辑/播放列表标题中显示模糊的封面作为背景',
+    playlistCoverPhoto: '播放列表封面照片',
+    playlistCoverPhotoSub: '在播放列表详细视图中显示封面照片网格',
+    showBitrate: '显示比特率',
+    showBitrateSub: '在曲目列表中显示音频比特率',
    uiScaleTitle: '界面缩放',
    uiScaleLabel: '缩放',
  },
@@ -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} />
@@ -16,6 +16,12 @@ interface ThemeState {
  setTimeDayStart: (v: string) => void;
  timeNightStart: string;
  setTimeNightStart: (v: string) => void;
+  enableCoverArtBackground: boolean;
+  setEnableCoverArtBackground: (v: boolean) => void;
+  enablePlaylistCoverPhoto: boolean;
+  setEnablePlaylistCoverPhoto: (v: boolean) => void;
+  showBitrate: boolean;
+  setShowBitrate: (v: boolean) => void;
 }

 export function getScheduledTheme(state: Pick<ThemeState, 'enableThemeScheduler' | 'theme' | 'themeDay' | 'themeNight' | 'timeDayStart' | 'timeNightStart'>): string {
@@ -47,6 +53,12 @@ export const useThemeStore = create<ThemeState>()(
      setTimeDayStart: (v) => set({ timeDayStart: v }),
      timeNightStart: '19:00',
      setTimeNightStart: (v) => set({ timeNightStart: v }),
+      enableCoverArtBackground: true,
+      setEnableCoverArtBackground: (v) => set({ enableCoverArtBackground: v }),
+      enablePlaylistCoverPhoto: true,
+      setEnablePlaylistCoverPhoto: (v) => set({ enablePlaylistCoverPhoto: v }),
+      showBitrate: true,
+      setShowBitrate: (v) => set({ showBitrate: v }),
    }),
    {
      name: 'psysonic_theme',