feat: v1.10.0 — new streaming themes, favourite toggle fix, home page improvements

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-22 07:15:47 +00:00 · 2026-03-21 22:58:05 +01:00
parent 57b70e6154
commit e550340565
25 changed files with 509 additions and 114 deletions
@@ -86,6 +86,7 @@ export default function AlbumTrackList({
    albumId: song.albumId, artistId: song.artistId, duration: song.duration,
    coverArt: song.coverArt, track: song.track, year: song.year,
    bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
+    starred: song.starred,
  });

  return (
@@ -3,45 +3,25 @@ import { SubsonicArtist } from '../api/subsonic';
 import ArtistCardLocal from './ArtistCardLocal';
 import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';

 interface Props {
  title: string;
  artists: SubsonicArtist[];
  moreLink?: string;
  moreText?: string;
-  onLoadMore?: () => Promise<void>;
 }

-export default function ArtistRow({ title, artists, moreLink, moreText, onLoadMore }: Props) {
-  const { t } = useTranslation();
+export default function ArtistRow({ title, artists, moreLink, moreText }: Props) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  const [showLeft, setShowLeft] = useState(false);
  const [showRight, setShowRight] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-
-  const loadingRef = useRef(false);

  const handleScroll = () => {
    if (!scrollRef.current) return;
    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
    setShowLeft(scrollLeft > 0);
    setShowRight(scrollLeft < scrollWidth - clientWidth - 5);
-
-    // Auto-load trigger
-    if (onLoadMore && !loadingRef.current && scrollLeft > 0 && scrollLeft + clientWidth >= scrollWidth - 300) {
-      triggerLoadMore();
-    }
-  };
-
-  const triggerLoadMore = async () => {
-    if (!onLoadMore || loadingRef.current) return;
-    loadingRef.current = true;
-    setLoadingMore(true);
-    await onLoadMore();
-    setLoadingMore(false);
-    loadingRef.current = false;
  };

  useEffect(() => {
@@ -63,35 +43,19 @@ export default function ArtistRow({ title, artists, moreLink, moreText, onLoadMo
      <div className="album-row-header">
        <h2 className="section-title" style={{ marginBottom: 0 }}>{title}</h2>
        <div className="album-row-nav">
-          <button 
-            className={`nav-btn ${!showLeft ? 'disabled' : ''}`} 
-            onClick={() => scroll('left')}
-            disabled={!showLeft}
-          >
+          <button className={`nav-btn ${!showLeft ? 'disabled' : ''}`} onClick={() => scroll('left')} disabled={!showLeft}>
            <ChevronLeft size={20} />
          </button>
-          <button 
-            className={`nav-btn ${!showRight ? 'disabled' : ''}`} 
-            onClick={() => scroll('right')}
-            disabled={!showRight}
-          >
+          <button className={`nav-btn ${!showRight ? 'disabled' : ''}`} onClick={() => scroll('right')} disabled={!showRight}>
            <ChevronRight size={20} />
          </button>
        </div>
      </div>
-      
+
      <div className="album-grid-wrapper">
        <div className="album-grid" ref={scrollRef} onScroll={handleScroll}>
          {artists.map(a => <ArtistCardLocal key={a.id} artist={a} />)}
-          {loadingMore && (
-            <div className="album-card-more" style={{ cursor: 'default' }}>
-              <div style={{ padding: '1rem', background: 'var(--bg-app)', borderRadius: '50%' }}>
-                <div className="spinner" style={{ width: 24, height: 24 }} />
-              </div>
-              <span style={{ fontSize: 13, fontWeight: 500 }}>{t('common.loadingMore')}</span>
-            </div>
-          )}
-          {!loadingMore && moreLink && (
+          {moreLink && (
            <div className="album-card-more" onClick={() => navigate(moreLink)}>
              <div style={{ padding: '1rem', background: 'var(--bg-app)', borderRadius: '50%' }}>
                <ArrowRight size={24} />
@@ -21,7 +21,7 @@ function sanitizeFilename(name: string): string {

 export default function ContextMenu() {
  const { t } = useTranslation();
-  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong } = usePlayerStore();
+  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong, starredOverrides, setStarredOverride } = usePlayerStore();
  const auth = useAuthStore();
  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
  const navigate = useNavigate();
@@ -53,6 +53,9 @@ export default function ContextMenu() {

  const { type, item, queueIndex } = contextMenu;

+  const isStarred = (id: string, itemStarred?: string) =>
+    id in starredOverrides ? starredOverrides[id] : !!itemStarred;
+
  const handleAction = async (action: () => void | Promise<void>) => {
    closeContextMenu();
    await action();
@@ -148,8 +151,13 @@ export default function ContextMenu() {
              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
                <Radio size={14} /> {t('contextMenu.startRadio')}
              </div>
-              <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
-                <Star size={14} /> {t('contextMenu.favorite')}
+              <div className="context-menu-item" onClick={() => handleAction(() => {
+                const starred = isStarred(song.id, song.starred);
+                setStarredOverride(song.id, !starred);
+                return starred ? unstar(song.id, 'song') : star(song.id, 'song');
+              })}>
+                <Star size={14} fill={isStarred(song.id, song.starred) ? 'currentColor' : 'none'} />
+                {isStarred(song.id, song.starred) ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
              </div>
              {auth.lastfmSessionKey && (() => {
                const loveKey = `${song.title}::${song.artist}`;
@@ -181,8 +189,13 @@ export default function ContextMenu() {
              <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/artist/${album.artistId}`))}>
                <User size={14} /> {t('contextMenu.goToArtist')}
              </div>
-              <div className="context-menu-item" onClick={() => handleAction(() => star(album.id, 'album'))}>
-                <Star size={14} /> {t('contextMenu.favoriteAlbum')}
+              <div className="context-menu-item" onClick={() => handleAction(() => {
+                const starred = isStarred(album.id, album.starred);
+                setStarredOverride(album.id, !starred);
+                return starred ? unstar(album.id, 'album') : star(album.id, 'album');
+              })}>
+                <Star size={14} fill={isStarred(album.id, album.starred) ? 'currentColor' : 'none'} />
+                {isStarred(album.id, album.starred) ? t('contextMenu.unfavoriteAlbum') : t('contextMenu.favoriteAlbum')}
              </div>
              <div className="context-menu-item" onClick={() => handleAction(() => downloadAlbum(album.name, album.id))}>
                <Download size={14} /> {t('contextMenu.download')}
@@ -199,8 +212,13 @@ export default function ContextMenu() {
                <Radio size={14} /> {t('contextMenu.startRadio')}
              </div>
              <div className="context-menu-divider" />
-              <div className="context-menu-item" onClick={() => handleAction(() => star(artist.id, 'artist'))}>
-                <Star size={14} /> {t('contextMenu.favoriteArtist')}
+              <div className="context-menu-item" onClick={() => handleAction(() => {
+                const starred = isStarred(artist.id, artist.starred);
+                setStarredOverride(artist.id, !starred);
+                return starred ? unstar(artist.id, 'artist') : star(artist.id, 'artist');
+              })}>
+                <Star size={14} fill={isStarred(artist.id, artist.starred) ? 'currentColor' : 'none'} />
+                {isStarred(artist.id, artist.starred) ? t('contextMenu.unfavoriteArtist') : t('contextMenu.favoriteArtist')}
              </div>
            </>
          );
@@ -224,8 +242,13 @@ export default function ContextMenu() {
                  <Disc3 size={14} /> {t('contextMenu.openAlbum')}
                </div>
              )}
-              <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
-                <Star size={14} /> {t('contextMenu.favorite')}
+              <div className="context-menu-item" onClick={() => handleAction(() => {
+                const starred = isStarred(song.id, song.starred);
+                setStarredOverride(song.id, !starred);
+                return starred ? unstar(song.id, 'song') : star(song.id, 'song');
+              })}>
+                <Star size={14} fill={isStarred(song.id, song.starred) ? 'currentColor' : 'none'} />
+                {isStarred(song.id, song.starred) ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
              </div>
              {auth.lastfmSessionKey && (() => {
                const loveKey = `${song.title}::${song.artist}`;
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';

 interface Props {
@@ -14,7 +15,7 @@ export default function CoverLightbox({ src, alt, onClose }: Props) {
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

-  return (
+  return createPortal(
    <div className="cover-lightbox-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label={alt}>
      <button className="cover-lightbox-close" onClick={onClose} aria-label="Close"><X size={20} /></button>
      <img
@@ -23,6 +24,7 @@ export default function CoverLightbox({ src, alt, onClose }: Props) {
        alt={alt}
        onClick={e => e.stopPropagation()}
      />
-    </div>
+    </div>,
+    document.body
  );
 }
@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
  Square, Repeat, Repeat1, Maximize2, SlidersHorizontal, X, Heart
@@ -175,8 +176,8 @@ export default function PlayerBar() {
        />
      </div>

-      {/* EQ Popup */}
-      {eqOpen && (
+      {/* EQ Popup — rendered via portal to avoid backdrop-filter containing-block issue */}
+      {eqOpen && createPortal(
        <>
          <div className="eq-popup-backdrop" onClick={() => setEqOpen(false)} />
          <div className="eq-popup">
@@ -188,7 +189,8 @@ export default function PlayerBar() {
            </div>
            <Equalizer />
          </div>
-        </>
+        </>,
+        document.body
      )}

    </footer>
@@ -26,6 +26,9 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
      { id: 'navy-jukebox',  label: 'Navy Jukebox', bg: '#d4d8db', card: '#001358', accent: '#0070a0' },
      { id: 'cobalt-media',  label: 'Cobalt Media', bg: '#3a62a5', card: '#000000', accent: '#45ff00' },
      { id: 'onyx-cinema',   label: 'Onyx Cinema',  bg: '#141414', card: '#000000', accent: '#00aaff' },
+      { id: 'spotless',        label: 'Spotless',        bg: '#121212', card: '#181818', accent: '#1ED760' },
+      { id: 'dzr0',            label: 'DZR',             bg: '#FFFFFF', card: '#F5F5F7', accent: '#A238FF' },
+      { id: 'cupertino-beats', label: 'Cupertino Beats', bg: '#1c1c1e', card: '#2c2c2e', accent: '#fa243c' },
    ],
  },
  {