feat: Ambient Stage, Queue DnD overhaul, and GStreamer fixes (v1.0.8)

src/components/FullscreenPlayer.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useState, useRef, memo } from 'react';
 import {
-  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX,
+  Play, Pause, SkipBack, SkipForward,
   ChevronDown, Repeat, Repeat1, Square, Music
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
-import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import { buildCoverArtUrl, coverArtCacheKey, getArtistInfo } from '../api/subsonic';
 import CachedImage, { useCachedUrl } from './CachedImage';
 import { useTranslation } from 'react-i18next';
 
@@ -15,9 +15,8 @@ function formatTime(seconds: number): string {
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
-// ─── Crossfading blurred background — two stacked divs for true crossfade ───
+// ─── Crossfading blurred background ───────────────────────────────────────────
 const FsBg = memo(function FsBg({ url }: { url: string }) {
-  // Each layer: {url, id, visible}
   const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
     url ? [{ url, id: 0, visible: true }] : []
   );
@@ -26,15 +25,10 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {
   useEffect(() => {
     if (!url) return;
     const id = counterRef.current++;
-    // Add the new layer (opacity 0)
     setLayers(prev => [...prev, { url, id, visible: false }]);
-    // One frame later: make new layer visible (0→1) and old ones invisible (1→0)
     const t1 = setTimeout(() => {
-      setLayers(prev =>
-        prev.map(l => ({ ...l, visible: l.id === id }))
-      );
+      setLayers(prev => prev.map(l => ({ ...l, visible: l.id === id })));
     }, 20);
-    // After transition: clean up old layers
     const t2 = setTimeout(() => {
       setLayers(prev => prev.filter(l => l.id === id));
     }, 800);
@@ -55,13 +49,16 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {
   );
 });
 
-// ─── Isolated progress sub-component (re-renders every tick, nothing else does) ───
+// ─── Progress bar (isolated — re-renders every tick) ──────────────────────────
 const FsProgress = memo(function FsProgress({ duration }: { duration: number }) {
   const progress    = usePlayerStore(s => s.progress);
   const currentTime = usePlayerStore(s => s.currentTime);
   const seek        = usePlayerStore(s => s.seek);
 
-  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => seek(parseFloat(e.target.value)), [seek]);
+  const handleSeek = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => seek(parseFloat(e.target.value)),
+    [seek]
+  );
 
   return (
     <div className="fs-progress-wrap">
@@ -80,9 +77,7 @@ const FsProgress = memo(function FsProgress({ duration }: { duration: number })
   );
 });
 
-
-
-// ─── Isolated play/pause button (subscribes to isPlaying only) ───
+// ─── Play/Pause button (isolated — subscribes to isPlaying only) ──────────────
 const FsPlayBtn = memo(function FsPlayBtn() {
   const { t } = useTranslation();
   const isPlaying  = usePlayerStore(s => s.isPlaying);
@@ -94,30 +89,41 @@ const FsPlayBtn = memo(function FsPlayBtn() {
   );
 });
 
+// ─── Main component ────────────────────────────────────────────────────────────
 interface FullscreenPlayerProps {
   onClose: () => void;
 }
 
 export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
   const { t } = useTranslation();
-  // Static/slow-changing state only — does NOT subscribe to progress or currentTime
   const currentTrack = usePlayerStore(s => s.currentTrack);
   const repeatMode   = usePlayerStore(s => s.repeatMode);
-  const queue        = usePlayerStore(s => s.queue);
-  const queueIndex   = usePlayerStore(s => s.queueIndex);
   const next         = usePlayerStore(s => s.next);
   const previous     = usePlayerStore(s => s.previous);
   const stop         = usePlayerStore(s => s.stop);
   const toggleRepeat = usePlayerStore(s => s.toggleRepeat);
-  const playTrack    = usePlayerStore(s => s.playTrack);
 
-  const duration    = currentTrack?.duration ?? 0;
-  const coverUrl    = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
-  const coverKey    = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
+  const duration = currentTrack?.duration ?? 0;
+  const coverUrl = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
+  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
+  // useCachedUrl must be called unconditionally (hook rules)
   const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey);
-  const upcoming    = queue.slice(queueIndex + 1, queueIndex + 15);
 
-  // Close on Escape
+  // Fetch artist image for background — fall back to cover art if unavailable
+  const [artistBgUrl, setArtistBgUrl] = useState<string>('');
+  useEffect(() => {
+    setArtistBgUrl('');
+    const artistId = currentTrack?.artistId;
+    if (!artistId) return;
+    let cancelled = false;
+    getArtistInfo(artistId).then(info => {
+      if (!cancelled && info.largeImageUrl) setArtistBgUrl(info.largeImageUrl);
+    }).catch(() => {});
+    return () => { cancelled = true; };
+  }, [currentTrack?.artistId]);
+
+  const bgUrl = artistBgUrl || resolvedCoverUrl;
+
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
     window.addEventListener('keydown', onKey);
@@ -126,88 +132,77 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
 
   return (
     <div className="fs-player" role="dialog" aria-modal="true" aria-label={t('player.fullscreen')}>
-      {/* Crossfading blurred background */}
-      <FsBg url={resolvedCoverUrl} />
+
+      {/* Layer 1 — blurred artist image (falls back to cover art) */}
+      <FsBg url={bgUrl} />
       <div className="fs-bg-overlay" aria-hidden="true" />
 
-      {/* Close button */}
-      <button className="fs-close" onClick={onClose} aria-label={t('player.closeFullscreen')} data-tooltip={t('player.closeTooltip')} data-tooltip-pos="bottom">
+      {/* Layer 2 — drifting color orbs */}
+      <div className="fs-orb fs-orb-1" aria-hidden="true" />
+      <div className="fs-orb fs-orb-2" aria-hidden="true" />
+      <div className="fs-orb fs-orb-3" aria-hidden="true" />
+
+      {/* Close */}
+      <button className="fs-close" onClick={onClose} aria-label={t('player.closeFullscreen')}>
         <ChevronDown size={28} />
       </button>
 
-      {/* Two-column layout: left = cover + info + controls, right = playlist */}
-      <div className="fs-layout">
+      {/* Center stage — everything vertically + horizontally centered */}
+      <div className="fs-stage">
 
-        {/* Left column */}
-        <div className="fs-left">
-          <div className="fs-cover-wrap">
-            {coverUrl ? (
-              <CachedImage src={coverUrl} cacheKey={coverKey} alt={`${currentTrack?.album} Cover`} className="fs-cover" />
-            ) : (
-              <div className="fs-cover fs-cover-placeholder"><Music size={72} /></div>
-            )}
-          </div>
+        <p className="fs-artist">{currentTrack?.artist ?? '—'}</p>
 
-          <div className="fs-track-info">
-            <h1 className="fs-title">{currentTrack?.title ?? '—'}</h1>
-            <p className="fs-artist">{currentTrack?.artist ?? '—'}</p>
-            <p className="fs-album">{currentTrack?.album ?? '—'}{currentTrack?.year ? ` · ${currentTrack.year}` : ''}</p>
-            {(currentTrack?.bitRate || currentTrack?.suffix) && (
-              <span className="fs-codec">
-                {[currentTrack.suffix?.toUpperCase(), currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : ''].filter(Boolean).join(' · ')}
-              </span>
-            )}
-          </div>
-
-          <FsProgress duration={duration} />
-
-          <div className="fs-controls">
-            <button className="fs-btn fs-btn-sm" onClick={stop} data-tooltip="Stop">
-              <Square size={14} fill="currentColor" />
-            </button>
-            <button className="fs-btn" onClick={previous} aria-label={t('player.prev')}>
-              <SkipBack size={20} />
-            </button>
-            <FsPlayBtn />
-            <button className="fs-btn" onClick={next} aria-label={t('player.next')}>
-              <SkipForward size={20} />
-            </button>
-            <button
-              className={`fs-btn fs-btn-sm ${repeatMode !== 'off' ? 'active' : ''}`}
-              onClick={toggleRepeat}
-              data-tooltip={`${t('player.repeat')}: ${repeatMode === 'off' ? t('player.repeatOff') : repeatMode === 'all' ? t('player.repeatAll') : t('player.repeatOne')}`}
-            >
-              {repeatMode === 'one' ? <Repeat1 size={14} /> : <Repeat size={14} />}
-            </button>
-          </div>
+        <div className="fs-cover-wrap">
+          {coverUrl ? (
+            <CachedImage
+              src={coverUrl}
+              cacheKey={coverKey}
+              alt={`${currentTrack?.album} Cover`}
+              className="fs-cover"
+            />
+          ) : (
+            <div className="fs-cover fs-cover-placeholder"><Music size={72} /></div>
+          )}
+        </div>
+
+        <div className="fs-track-info">
+          <h1 className="fs-title">{currentTrack?.title ?? '—'}</h1>
+          <p className="fs-album">
+            {currentTrack?.album ?? ''}
+            {currentTrack?.year ? ` · ${currentTrack.year}` : ''}
+          </p>
+          {(currentTrack?.bitRate || currentTrack?.suffix) && (
+            <span className="fs-codec">
+              {[
+                currentTrack.suffix?.toUpperCase(),
+                currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : ''
+              ].filter(Boolean).join(' · ')}
+            </span>
+          )}
+        </div>
+
+        <FsProgress duration={duration} />
+
+        <div className="fs-controls">
+          <button className="fs-btn fs-btn-sm" onClick={stop} aria-label="Stop">
+            <Square size={14} fill="currentColor" />
+          </button>
+          <button className="fs-btn" onClick={previous} aria-label={t('player.prev')}>
+            <SkipBack size={20} />
+          </button>
+          <FsPlayBtn />
+          <button className="fs-btn" onClick={next} aria-label={t('player.next')}>
+            <SkipForward size={20} />
+          </button>
+          <button
+            className={`fs-btn fs-btn-sm ${repeatMode !== 'off' ? 'active' : ''}`}
+            onClick={toggleRepeat}
+            aria-label={t('player.repeat')}
+          >
+            {repeatMode === 'one' ? <Repeat1 size={14} /> : <Repeat size={14} />}
+          </button>
         </div>
 
-        {/* Right column: upcoming tracks */}
-        {upcoming.length > 0 && (
-          <div className="fs-right">
-            <h2 className="fs-upcoming-title">{t('queue.nextTracks')}</h2>
-            <div className="fs-upcoming-list">
-              {upcoming.map((track, i) => (
-                <button
-                  key={`${track.id}-${queueIndex + 1 + i}`}
-                  className="fs-upcoming-item"
-                  onClick={() => playTrack(track, queue)}
-                >
-                  {track.coverArt ? (
-                    <CachedImage src={buildCoverArtUrl(track.coverArt, 80)} cacheKey={coverArtCacheKey(track.coverArt, 80)} alt="" className="fs-upcoming-art" />
-                  ) : (
-                    <div className="fs-upcoming-art fs-upcoming-placeholder"><Music size={14} /></div>
-                  )}
-                  <div className="fs-upcoming-info">
-                    <span className="fs-upcoming-name">{track.title}</span>
-                    <span className="fs-upcoming-artist">{track.artist}</span>
-                  </div>
-                  <span className="fs-upcoming-dur">{formatTime(track.duration)}</span>
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
       </div>
     </div>
   );