feat: v1.28.0 — Infinite Queue, Start Radio, Single-click Play, Performance

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-22 06:25:41 +00:00 · 2026-04-02 17:40:39 +02:00
parent 53d5888ebf
commit 95283d792b
18 changed files with 272 additions and 113 deletions
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, search, SubsonicArtist, SubsonicAlbum, SubsonicSong, SubsonicArtistInfo, buildCoverArtUrl, coverArtCacheKey, star, unstar } from '../api/subsonic';
+import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, getAlbum, search, SubsonicArtist, SubsonicAlbum, SubsonicSong, SubsonicArtistInfo, buildCoverArtUrl, coverArtCacheKey, star, unstar } from '../api/subsonic';
 import AlbumCard from '../components/AlbumCard';
 import CachedImage from '../components/CachedImage';
 import CoverLightbox from '../components/CoverLightbox';
@@ -46,6 +46,7 @@ export default function ArtistDetail() {
  const [info, setInfo] = useState<SubsonicArtistInfo | null>(null);
  const [loading, setLoading] = useState(true);
  const [radioLoading, setRadioLoading] = useState(false);
+  const [playAllLoading, setPlayAllLoading] = useState(false);
  const [isStarred, setIsStarred] = useState(false);
  const [openedLink, setOpenedLink] = useState<string | null>(null);
  const [similarArtists, setSimilarArtists] = useState<SubsonicArtist[]>([]);
@@ -57,6 +58,8 @@ export default function ArtistDetail() {
  const enqueue = usePlayerStore(state => state.enqueue);
  const clearQueue = usePlayerStore(state => state.clearQueue);
  const openContextMenu = usePlayerStore(state => state.openContextMenu);
+  const currentTrack = usePlayerStore(state => state.currentTrack);
+  const isPlaying = usePlayerStore(state => state.isPlaying);

  useEffect(() => {
    if (!id) return;
@@ -160,18 +163,34 @@ export default function ArtistDetail() {
    }
  };

-  const handlePlayAll = () => {
-    if (topSongs.length > 0) {
-      clearQueue();
-      playTrack(topSongs[0], topSongs);
+  const fetchAllTracks = async () => {
+    const results = await Promise.all(albums.map(a => getAlbum(a.id)));
+    const sorted = [...results].sort((a, b) => (a.album.year ?? 0) - (b.album.year ?? 0));
+    return sorted.flatMap(r => [...r.songs].sort((a, b) => (a.track ?? 0) - (b.track ?? 0))).map(songToTrack);
+  };
+
+  const handlePlayAll = async () => {
+    if (albums.length === 0) return;
+    setPlayAllLoading(true);
+    try {
+      const tracks = await fetchAllTracks();
+      if (tracks.length > 0) playTrack(tracks[0], tracks);
+    } finally {
+      setPlayAllLoading(false);
    }
  };

-  const handleShuffle = () => {
-    if (topSongs.length > 0) {
-      const shuffled = [...topSongs].sort(() => Math.random() - 0.5);
-      clearQueue();
-      playTrack(shuffled[0], shuffled);
+  const handleShuffle = async () => {
+    if (albums.length === 0) return;
+    setPlayAllLoading(true);
+    try {
+      const tracks = await fetchAllTracks();
+      if (tracks.length > 0) {
+        const shuffled = [...tracks].sort(() => Math.random() - 0.5);
+        playTrack(shuffled[0], shuffled);
+      }
+    } finally {
+      setPlayAllLoading(false);
    }
  };

@@ -179,16 +198,33 @@ export default function ArtistDetail() {
    if (!artist) return;
    setRadioLoading(true);
    try {
-      const similar = await getSimilarSongs2(artist.id, 50);
-      if (similar.length > 0) {
-        clearQueue();
-        playTrack(similar[0], similar);
+      // Fire both fetches in parallel
+      const topPromise = getTopSongs(artist.name);
+      const similarPromise = getSimilarSongs2(artist.id, 50);
+
+      // Start playing as soon as top songs arrive
+      const top = await topPromise;
+      if (top.length > 0) {
+        const firstTrack = songToTrack(top[0]);
+        playTrack(firstTrack, [firstTrack]);
+        setRadioLoading(false);
+        // Enqueue remaining tracks when similar songs arrive
+        const similar = await similarPromise;
+        const remaining = [...top.slice(1), ...similar].map(songToTrack);
+        if (remaining.length > 0) enqueue(remaining);
      } else {
-        alert(t('artistDetail.noRadio'));
+        // No top songs — fall back to similar
+        const similar = await similarPromise;
+        if (similar.length > 0) {
+          const tracks = similar.map(songToTrack);
+          playTrack(tracks[0], tracks);
+        } else {
+          alert(t('artistDetail.noRadio'));
+        }
+        setRadioLoading(false);
      }
    } catch (e) {
      console.error('Radio start failed', e);
-    } finally {
      setRadioLoading(false);
    }
  };
@@ -289,13 +325,15 @@ export default function ArtistDetail() {
          </div>

          <div style={{ display: 'flex', gap: '8px', marginTop: '1.5rem', flexWrap: 'wrap' }}>
-            {topSongs.length > 0 && (
+            {albums.length > 0 && (
              <>
-                <button className="btn btn-primary" onClick={handlePlayAll}>
-                  <Play size={16} /> {t('artistDetail.playAll')}
+                <button className="btn btn-primary" onClick={handlePlayAll} disabled={playAllLoading}>
+                  {playAllLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Play size={16} />}
+                  {t('artistDetail.playAll')}
                </button>
-                <button className="btn btn-surface" onClick={handleShuffle}>
-                  <Shuffle size={16} /> {t('artistDetail.shuffle')}
+                <button className="btn btn-surface" onClick={handleShuffle} disabled={playAllLoading}>
+                  {playAllLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Shuffle size={16} />}
+                  {t('artistDetail.shuffle')}
                </button>
              </>
            )}
@@ -337,13 +375,22 @@ export default function ArtistDetail() {
                       key={song.id}
                       className="track-row"
                       style={{ gridTemplateColumns: '36px minmax(150px, 2fr) minmax(100px, 1fr) 60px' }}
-                       onDoubleClick={() => playTrack(track, topSongs.map(songToTrack))}
+                       onClick={e => {
+                         if ((e.target as HTMLElement).closest('button, a, input')) return;
+                         playTrack(track, topSongs.map(songToTrack));
+                       }}
                       onContextMenu={(e) => {
                         e.preventDefault();
                         openContextMenu(e.clientX, e.clientY, track, 'song');
                       }}
                     >
-                <div className="track-num" style={{ textAlign: 'center' }}>{idx + 1}</div>
+                <div className="track-num" style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, topSongs.map(songToTrack)); }}>
+                  <span style={{ color: currentTrack?.id === song.id ? 'var(--accent)' : 'var(--text-muted)' }}>
+                    {currentTrack?.id === song.id && isPlaying
+                      ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
+                      : <Play size={13} fill="currentColor" />}
+                  </span>
+                </div>
                <div className="track-info" style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                  {song.coverArt && (
                    <CachedImage
@@ -17,6 +17,8 @@ export default function Favorites() {
  const [loading, setLoading] = useState(true);

  const { playTrack, enqueue } = usePlayerStore();
+  const currentTrack = usePlayerStore(s => s.currentTrack);
+  const isPlaying = usePlayerStore(s => s.isPlaying);
  const psyDrag = useDragDrop();

  function removeSong(id: string) {
@@ -105,7 +107,10 @@ export default function Favorites() {
                      key={song.id}
                      className="track-row track-row-va"
                      style={{ gridTemplateColumns: '40px 1fr 1fr 60px 32px' }}
-                      onDoubleClick={() => playTrack(track, songs.map(songToTrack))}
+                      onClick={e => {
+                        if ((e.target as HTMLElement).closest('button, a, input')) return;
+                        playTrack(track, songs.map(songToTrack));
+                      }}
                      onContextMenu={e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, track, 'song'); }}
                      role="row"
                      onMouseDown={e => {
@@ -124,8 +129,12 @@ export default function Favorites() {
                        document.addEventListener('mouseup', onUp);
                      }}
                    >
-                      <div className="track-num col-center" onClick={() => playTrack(track, songs.map(songToTrack))} style={{ cursor: 'pointer' }}>
-                        {i + 1}
+                      <div className="track-num col-center" style={{ cursor: 'pointer' }}>
+                        <span style={{ color: currentTrack?.id === song.id ? 'var(--accent)' : 'var(--text-muted)' }}>
+                          {currentTrack?.id === song.id && isPlaying
+                            ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
+                            : <Play size={13} fill="currentColor" />}
+                        </span>
                      </div>
                      <div className="track-info">
                        <span className="track-title">{song.title}</span>
@@ -64,7 +64,6 @@ export default function PlaylistDetail() {
  const [saving, setSaving] = useState(false);
  const [ratings, setRatings] = useState<Record<string, number>>({});
  const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
-  const [hoveredSongId, setHoveredSongId] = useState<string | null>(null);
  const [hoveredSuggestionId, setHoveredSuggestionId] = useState<string | null>(null);
  const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
  const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
@@ -332,6 +331,10 @@ export default function PlaylistDetail() {
    document.addEventListener('mouseup', onUp);
  };

+  // ── Memoized derivations ──────────────────────────────────────
+  const existingIds = useMemo(() => new Set(songs.map(s => s.id)), [songs]);
+  const tracks = useMemo(() => songs.map(songToTrack), [songs]);
+
  // ── Drag-over visual feedback ─────────────────────────────────
  const handleRowMouseEnter = (idx: number, e: React.MouseEvent) => {
    if (!isDragging) return;
@@ -353,8 +356,6 @@ export default function PlaylistDetail() {
    return <div className="content-body"><div className="empty-state">{t('playlists.notFound')}</div></div>;
  }

-  const existingIds = new Set(songs.map(s => s.id));
-
  return (
    <div className="content-body animate-fade-in">

@@ -393,7 +394,6 @@ export default function PlaylistDetail() {
                  <button className="btn btn-primary" disabled={songs.length === 0} onClick={() => {
                    if (!songs.length) return;
                    touchPlaylist(id!);
-                    const tracks = songs.map(songToTrack);
                    playTrack(tracks[0], tracks);
                  }}>
                    <Play size={16} fill="currentColor" /> {t('playlists.playAll')}
@@ -401,7 +401,6 @@ export default function PlaylistDetail() {
                  <button className="btn btn-surface" disabled={songs.length === 0} onClick={() => {
                    if (!songs.length) return;
                    touchPlaylist(id!);
-                    const tracks = songs.map(songToTrack);
                    const shuffled = [...tracks];
                    for (let i = shuffled.length - 1; i > 0; i--) {
                      const j = Math.floor(Math.random() * (i + 1));
@@ -414,7 +413,7 @@ export default function PlaylistDetail() {
                  <button className="btn btn-surface" disabled={songs.length === 0} onClick={() => {
                    if (!songs.length) return;
                    touchPlaylist(id!);
-                    enqueue(songs.map(songToTrack));
+                    enqueue(tracks);
                  }}>
                    <ListPlus size={16} /> {t('playlists.addToQueue')}
                  </button>
@@ -453,20 +452,13 @@ export default function PlaylistDetail() {
            <div className="empty-state" style={{ padding: '0.5rem 0' }}>{t('playlists.noResults')}</div>
          )}
          {searchResults.map(song => (
-            <div key={song.id} className="playlist-search-row">
+            <div key={song.id} className="playlist-search-row" style={{ cursor: 'pointer' }} onClick={() => addSong(song)}>
              <CachedImage src={buildCoverArtUrl(song.coverArt ?? '', 40)} cacheKey={coverArtCacheKey(song.coverArt ?? '', 40)} alt="" className="playlist-search-thumb" />
              <div className="playlist-search-info">
                <span className="playlist-search-title">{song.title}</span>
                <span className="playlist-search-artist">{song.artist} · <span className="playlist-search-album">{song.album}</span></span>
              </div>
              <span className="playlist-search-duration">{formatDuration(song.duration ?? 0)}</span>
-              <button
-                className="playlist-search-add-btn"
-                data-tooltip={t('playlists.addSong')}
-                onClick={() => addSong(song)}
-              >
-                <Plus size={14} />
-              </button>
            </div>
          ))}
        </div>
@@ -532,7 +524,13 @@ export default function PlaylistDetail() {
        </div>

        {songs.length === 0 && (
-          <div className="empty-state" style={{ padding: '2rem 0' }}>{t('playlists.emptyPlaylist')}</div>
+          <div className="empty-state" style={{ padding: '2rem 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
+            <span>{t('playlists.emptyPlaylist')}</span>
+            <button className="btn btn-primary" onClick={() => setSearchOpen(true)}>
+              <Search size={15} />
+              {t('playlists.addFirstSong')}
+            </button>
+          </div>
        )}

        {songs.map((song, idx) => (
@@ -545,16 +543,14 @@ export default function PlaylistDetail() {
            <div
              data-track-idx={idx}
              className={`track-row track-row-va tracklist-playlist${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}${selectedIds.has(song.id) ? ' bulk-selected' : ''}`}
-              onMouseEnter={e => { setHoveredSongId(song.id); handleRowMouseEnter(idx, e); }}
-              onMouseLeave={() => setHoveredSongId(null)}
+              onMouseEnter={e => handleRowMouseEnter(idx, e)}
              onMouseDown={e => handleRowMouseDown(e, idx)}
-              onDoubleClick={() => {
-                const tracks = songs.map(songToTrack);
-                playTrack(tracks[idx], tracks);
-              }}
              onClick={e => {
-                if (selectedIds.size > 0 && !(e.target as HTMLElement).closest('button, input')) {
+                if ((e.target as HTMLElement).closest('button, a, input')) return;
+                if (selectedIds.size > 0) {
                  toggleSelect(song.id, idx, e.shiftKey);
+                } else {
+                  playTrack(tracks[idx], tracks);
                }
              }}
              onContextMenu={e => {
@@ -563,7 +559,7 @@ export default function PlaylistDetail() {
                openContextMenu(e.clientX, e.clientY, songToTrack(song), 'album-song');
              }}
            >
-              {/* # — checkbox in select mode, grip/play on hover otherwise */}
+              {/* # — checkbox in select mode, always-visible play button otherwise */}
              {(() => {
                const inSelectMode = selectedIds.size > 0;
                return (
@@ -572,26 +568,17 @@ export default function PlaylistDetail() {
                    style={{ cursor: 'pointer' }}
                    onClick={e => {
                      e.stopPropagation();
-                      if (inSelectMode || hoveredSongId === song.id) {
-                        toggleSelect(song.id, idx, e.shiftKey);
-                      } else {
-                        const tracks = songs.map(songToTrack);
-                        playTrack(tracks[idx], tracks);
-                      }
+                      playTrack(tracks[idx], tracks);
                    }}
                  >
                    <span
-                      className={`bulk-check${selectedIds.has(song.id) ? ' checked' : ''}${(inSelectMode || hoveredSongId === song.id) ? ' bulk-check-visible' : ''}`}
+                      className={`bulk-check${selectedIds.has(song.id) ? ' checked' : ''}${inSelectMode ? ' bulk-check-visible' : ''}`}
                      onClick={e => { e.stopPropagation(); toggleSelect(song.id, idx, e.shiftKey); }}
                    />
-                    <span style={{ color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : 'var(--text-muted)' }}>
-                      {hoveredSongId === song.id && currentTrack?.id !== song.id && !inSelectMode
-                        ? <GripVertical size={13} />
-                        : currentTrack?.id === song.id && isPlaying
-                          ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
-                          : currentTrack?.id === song.id
-                            ? <Play size={13} fill="currentColor" />
-                            : idx + 1}
+                    <span style={{ color: currentTrack?.id === song.id ? 'var(--accent)' : 'var(--text-muted)' }}>
+                      {currentTrack?.id === song.id && isPlaying
+                        ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
+                        : <Play size={13} fill="currentColor" />}
                    </span>
                  </div>
                );
@@ -696,7 +683,10 @@ export default function PlaylistDetail() {
                className={`track-row track-row-va tracklist-playlist${contextMenuSongId === song.id ? ' context-active' : ''}`}
                onMouseEnter={() => setHoveredSuggestionId(song.id)}
                onMouseLeave={() => setHoveredSuggestionId(null)}
-                onDoubleClick={() => addSong(song)}
+                onClick={e => {
+                  if ((e.target as HTMLElement).closest('button, a, input')) return;
+                  addSong(song);
+                }}
                onContextMenu={e => {
                  e.preventDefault();
                  setContextMenuSongId(song.id);
@@ -414,6 +414,25 @@ export default function Settings() {
                  <span className="toggle-track" />
                </label>
              </div>
+
+              <div className="divider" />
+
+              {/* Infinite Queue */}
+              <div className="settings-toggle-row">
+                <div>
+                  <div style={{ fontWeight: 500 }}>
+                    {t('settings.infiniteQueue')}
+                  </div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                    {t('settings.infiniteQueueDesc')}
+                  </div>
+                </div>
+                <label className="toggle-switch" aria-label={t('settings.infiniteQueue')}>
+                  <input type="checkbox" checked={auth.infiniteQueueEnabled}
+                    onChange={e => auth.setInfiniteQueueEnabled(e.target.checked)} id="infinite-queue-toggle" />
+                  <span className="toggle-track" />
+                </label>
+              </div>
            </div>
          </section>