feat: v1.33.0 — Fullscreen Player redesign, Norwegian, configurable preload

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/FullscreenPlayer.tsx

@@ -1,11 +1,10 @@
 import React, { useCallback, useEffect, useState, useRef, memo, useMemo } from 'react';
 import {
   Play, Pause, SkipBack, SkipForward,
-  ChevronDown, Repeat, Repeat1, Square, Music, MicVocal
+  ChevronDown, Repeat, Repeat1, Square, Music, Heart
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
-import { useLyricsStore } from '../store/lyricsStore';
-import { buildCoverArtUrl, coverArtCacheKey, getArtistInfo } from '../api/subsonic';
+import { buildCoverArtUrl, coverArtCacheKey, getArtistInfo, star, unstar } from '../api/subsonic';
 import CachedImage, { useCachedUrl } from './CachedImage';
 import { useTranslation } from 'react-i18next';
 
@@ -16,45 +15,8 @@ function formatTime(seconds: number): string {
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
-function MarqueeTitle({ title }: { title: string }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const textRef = useRef<HTMLSpanElement>(null);
-  const [scrollAmount, setScrollAmount] = useState(0);
-
-  const measure = useCallback(() => {
-    const container = containerRef.current;
-    const text = textRef.current;
-    if (!container || !text) return;
-    // Temporarily make span inline-block to get its natural width
-    text.style.display = 'inline-block';
-    const textWidth = text.getBoundingClientRect().width;
-    text.style.display = '';
-    const overflow = textWidth - container.clientWidth;
-    setScrollAmount(overflow > 4 ? Math.ceil(overflow) : 0);
-  }, []);
-
-  useEffect(() => {
-    measure();
-    const ro = new ResizeObserver(measure);
-    if (containerRef.current) ro.observe(containerRef.current);
-    return () => ro.disconnect();
-  }, [title, measure]);
-
-  return (
-    <div ref={containerRef} className="fs-title-wrap">
-      <span
-        ref={textRef}
-        className={scrollAmount > 0 ? 'fs-title-marquee' : ''}
-        style={scrollAmount > 0 ? { '--scroll-amount': `-${scrollAmount}px` } as React.CSSProperties : {}}
-      >
-        {title}
-      </span>
-    </div>
-  );
-}
-
-// ─── Crossfading blurred background ───────────────────────────────────────────
-const FsBg = memo(function FsBg({ url }: { url: string }) {
+// ─── Artist portrait — right half, crossfades on track change ─────────────────
+const FsPortrait = memo(function FsPortrait({ url }: { url: string }) {
   const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
     url ? [{ url, id: 0, visible: true }] : []
   );
@@ -64,8 +26,6 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {
     if (!url) return;
     let cancelled = false;
     const id = counterRef.current++;
-    // Preload the image before starting the crossfade — prevents a blank flash
-    // between the old and new layer while the browser decodes the image.
     const img = new Image();
     img.onload = img.onerror = () => {
       if (cancelled) return;
@@ -75,29 +35,34 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {
         setLayers(prev => prev.map(l => ({ ...l, visible: l.id === id })));
         setTimeout(() => {
           if (!cancelled) setLayers(prev => prev.filter(l => l.id === id));
-        }, 800);
+        }, 1000);
       });
     };
     img.src = url;
     return () => { cancelled = true; };
   }, [url]);
 
+  if (layers.length === 0) return null;
+
   return (
-    <>
+    <div className="fs-portrait-wrap" aria-hidden="true">
       {layers.map(layer => (
-        <div
+        <img
           key={layer.id}
-          className="fs-bg"
-          style={{ backgroundImage: `url(${layer.url})`, opacity: layer.visible ? 1 : 0 }}
-          aria-hidden="true"
+          src={layer.url}
+          className="fs-portrait"
+          style={{ opacity: layer.visible ? 1 : 0 }}
+          decoding="async"
+          loading="eager"
+          alt=""
         />
       ))}
-    </>
+    </div>
   );
 });
 
-// ─── Progress bar (isolated — re-renders every tick) ──────────────────────────
-const FsProgress = memo(function FsProgress({ duration }: { duration: number }) {
+// ─── Full-width seekbar (isolated — re-renders every tick) ────────────────────
+const FsSeekbar = memo(function FsSeekbar({ duration }: { duration: number }) {
   const progress    = usePlayerStore(s => s.progress);
   const buffered    = usePlayerStore(s => s.buffered);
   const currentTime = usePlayerStore(s => s.currentTime);
@@ -112,21 +77,22 @@ const FsProgress = memo(function FsProgress({ duration }: { duration: number })
   const buf = Math.max(pct, buffered * 100);
 
   return (
-    <div className="fs-progress-wrap">
-      <span className="fs-time">{formatTime(currentTime)}</span>
-      <div className="fs-progress-bar">
+    <div className="fs-seekbar-wrap">
+      <div className="fs-seekbar-times">
+        <span>{formatTime(currentTime)}</span>
+        <span>{formatTime(duration)}</span>
+      </div>
+      <div className="fs-seekbar">
+        <div className="fs-seekbar-bg" />
+        <div className="fs-seekbar-buf" style={{ width: `${buf}%` }} />
+        <div className="fs-seekbar-played" style={{ width: `${pct}%` }} />
         <input
           type="range" min={0} max={1} step={0.001}
           value={progress}
           onChange={handleSeek}
-          style={{
-            '--pct': `${pct}%`,
-            '--buf': `${buf}%`,
-          } as React.CSSProperties}
-          aria-label="progress"
+          aria-label="seek"
         />
       </div>
-      <span className="fs-time">{formatTime(duration)}</span>
     </div>
   );
 });
@@ -150,28 +116,40 @@ interface FullscreenPlayerProps {
 
 export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
   const { t } = useTranslation();
-  const currentTrack = usePlayerStore(s => s.currentTrack);
-  const repeatMode   = usePlayerStore(s => s.repeatMode);
-  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 currentTrack       = usePlayerStore(s => s.currentTrack);
+  const repeatMode         = usePlayerStore(s => s.repeatMode);
+  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 starredOverrides   = usePlayerStore(s => s.starredOverrides);
+  const setStarredOverride = usePlayerStore(s => s.setStarredOverride);
 
-  const showLyrics      = useLyricsStore(s => s.showLyrics);
-  const activeTab       = useLyricsStore(s => s.activeTab);
-  const isQueueVisible  = usePlayerStore(s => s.isQueueVisible);
-  const toggleQueue     = usePlayerStore(s => s.toggleQueue);
+  const isStarred = currentTrack
+    ? (currentTrack.id in starredOverrides ? starredOverrides[currentTrack.id] : !!currentTrack.starred)
+    : false;
+
+  const toggleStar = useCallback(async () => {
+    if (!currentTrack) return;
+    const nextVal = !isStarred;
+    setStarredOverride(currentTrack.id, nextVal);
+    try {
+      if (nextVal) await star(currentTrack.id, 'song');
+      else await unstar(currentTrack.id, 'song');
+    } catch {
+      setStarredOverride(currentTrack.id, !nextVal);
+    }
+  }, [currentTrack, isStarred, setStarredOverride]);
 
   const duration = currentTrack?.duration ?? 0;
-  // buildCoverArtUrl generates a new salt on every call — must be memoized
-  // to prevent useCachedUrl from re-fetching on every progress re-render (100 ms).
-  const coverUrl = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '', [currentTrack?.coverArt]);
-  const coverKey = useMemo(() => currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '', [currentTrack?.coverArt]);
-  // No fetchUrl fallback for the background — we only want stable blob URLs
-  // to avoid a double crossfade (fetchUrl → blobUrl for the same image).
+
+  // buildCoverArtUrl generates a new salt on every call — must be memoized.
+  const coverUrl = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 500) : '', [currentTrack?.coverArt]);
+  const coverKey = useMemo(() => currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 500) : '', [currentTrack?.coverArt]);
+  // `false` = no fetchUrl fallback — prevents double crossfade (fetchUrl → blobUrl).
   const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey, false);
 
-  // Fetch artist image for background — fall back to cover art if unavailable
+  // Artist image → portrait on right. Falls back to cover art.
   const [artistBgUrl, setArtistBgUrl] = useState<string>('');
   useEffect(() => {
     setArtistBgUrl('');
@@ -184,7 +162,7 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
     return () => { cancelled = true; };
   }, [currentTrack?.artistId]);
 
-  const bgUrl = artistBgUrl || resolvedCoverUrl;
+  const portraitUrl = artistBgUrl || resolvedCoverUrl;
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
@@ -192,84 +170,105 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
     return () => window.removeEventListener('keydown', onKey);
   }, [onClose]);
 
+  const metaParts = [
+    currentTrack?.album,
+    currentTrack?.year?.toString(),
+    currentTrack?.suffix?.toUpperCase(),
+    currentTrack?.bitRate ? `${currentTrack.bitRate} kbps` : '',
+  ].filter(Boolean);
+
   return (
     <div className="fs-player" role="dialog" aria-modal="true" aria-label={t('player.fullscreen')}>
 
-      {/* Layer 1 — blurred artist image */}
-      <FsBg url={bgUrl} />
-      <div className="fs-bg-overlay" aria-hidden="true" />
+      {/* Layer 0 — animated dark mesh gradient (real divs = will-change possible) */}
+      <div className="fs-mesh-bg" aria-hidden="true">
+        <div className="fs-mesh-blob fs-mesh-blob-a" />
+        <div className="fs-mesh-blob fs-mesh-blob-b" />
+      </div>
+
+      {/* Layer 1 — artist portrait, right half, object-fit: contain */}
+      <FsPortrait url={portraitUrl} />
+
+      {/* Layer 2 — horizontal scrim: dark left → transparent right */}
+      <div className="fs-scrim" aria-hidden="true" />
 
       {/* Close */}
       <button className="fs-close" onClick={onClose} aria-label={t('player.closeFullscreen')}>
         <ChevronDown size={28} />
       </button>
 
+      {/* Layer 3 — info cluster, bottom-left */}
+      <div className="fs-cluster">
 
-      {/* Center stage — everything vertically + horizontally centered */}
-      <div className="fs-stage">
-
-        <p className="fs-artist">{currentTrack?.artist ?? '—'}</p>
-
-        <div className="fs-cover-wrap">
+        {/* Album art */}
+        <div className="fs-art-wrap">
           {coverUrl ? (
             <CachedImage
               src={coverUrl}
               cacheKey={coverKey}
               alt={`${currentTrack?.album} Cover`}
-              className="fs-cover"
+              className="fs-art"
             />
           ) : (
-            <div className="fs-cover fs-cover-placeholder"><Music size={72} /></div>
+            <div className="fs-art fs-art-placeholder"><Music size={40} /></div>
           )}
         </div>
 
-        <div className="fs-track-info">
-          <MarqueeTitle title={currentTrack?.title ?? '—'} />
-          <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>
+        {/* Artist — massive statement */}
+        <p className="fs-artist-name">{currentTrack?.artist ?? '—'}</p>
 
-        <FsProgress duration={duration} />
+        {/* Track title — accent, light weight */}
+        <p className="fs-track-title">{currentTrack?.title ?? '—'}</p>
 
+        {/* Metadata row */}
+        {metaParts.length > 0 && (
+          <div className="fs-meta">
+            {metaParts.map((part, i) => (
+              <React.Fragment key={i}>
+                {i > 0 && <span className="fs-meta-dot">·</span>}
+                <span>{part}</span>
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+
+        {/* Controls */}
         <div className="fs-controls">
-          <button className="fs-btn fs-btn-sm" onClick={stop} aria-label="Stop">
-            <Square size={14} fill="currentColor" />
+          <button className="fs-btn fs-btn-sm" onClick={stop} aria-label="Stop" data-tooltip={t('player.stop')}>
+            <Square size={13} fill="currentColor" />
           </button>
-          <button className="fs-btn" onClick={() => previous()} aria-label={t('player.prev')}>
-            <SkipBack size={20} />
+          <button className="fs-btn" onClick={() => previous()} aria-label={t('player.prev')} data-tooltip={t('player.prev')}>
+            <SkipBack size={19} />
           </button>
           <FsPlayBtn />
-          <button className="fs-btn" onClick={() => next()} aria-label={t('player.next')}>
-            <SkipForward size={20} />
+          <button className="fs-btn" onClick={() => next()} aria-label={t('player.next')} data-tooltip={t('player.next')}>
+            <SkipForward size={19} />
           </button>
           <button
-            className={`fs-btn fs-btn-sm ${repeatMode !== 'off' ? 'active' : ''}`}
+            className={`fs-btn fs-btn-sm${repeatMode !== 'off' ? ' active' : ''}`}
             onClick={toggleRepeat}
             aria-label={t('player.repeat')}
+            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>
-          <button
-            className={`fs-btn fs-btn-sm ${activeTab === 'lyrics' && isQueueVisible ? 'active' : ''}`}
-            onClick={() => { if (!isQueueVisible) toggleQueue(); showLyrics(); }}
-            aria-label={t('player.lyrics')}
-            data-tooltip={t('player.lyrics')}
-          >
-            <MicVocal size={14} />
-          </button>
+          {currentTrack && (
+            <button
+              className={`fs-btn fs-btn-sm fs-btn-heart${isStarred ? ' active' : ''}`}
+              onClick={toggleStar}
+              aria-label={isStarred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
+              data-tooltip={isStarred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
+            >
+              <Heart size={14} fill={isStarred ? 'currentColor' : 'none'} />
+            </button>
+          )}
         </div>
 
       </div>
+
+      {/* Layer 4 — full-width seekbar, bottom edge */}
+      <FsSeekbar duration={duration} />
+
     </div>
   );
 }