merge: integrate origin/main into feat/lucky-mix-flow

src/components/Hero.tsx

@@ -7,6 +7,7 @@ import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
 import { playAlbum } from '../utils/playAlbum';
 import { useIsMobile } from '../hooks/useIsMobile';
+import { useWindowVisibility } from '../hooks/useWindowVisibility';
 import { useAuthStore } from '../store/authStore';
 import { useThemeStore } from '../store/themeStore';
 import { filterAlbumsByMixRatings, getMixMinRatingsConfigFromAuth } from '../utils/mixRatingFilter';
@@ -65,6 +66,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
   const [activeIdx, setActiveIdx] = useState(0);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const windowHidden = useWindowVisibility();
 
   useEffect(() => {
     if (albumsProp?.length) { setAlbums(albumsProp); return; }
@@ -87,18 +89,23 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
     mixMinRatingArtist,
   ]);
 
-  // Start / restart auto-advance timer
+  // Start / restart auto-advance timer (paused while the Tauri window is hidden).
   const startTimer = useCallback((len: number) => {
     if (timerRef.current) clearInterval(timerRef.current);
-    if (len <= 1) return;
+    timerRef.current = null;
+    if (len <= 1 || windowHidden) return;
     timerRef.current = setInterval(() => {
+      if (document.hidden || window.__psyHidden) return;
       setActiveIdx(prev => (prev + 1) % len);
     }, INTERVAL_MS);
-  }, []);
+  }, [windowHidden]);
 
   useEffect(() => {
     startTimer(albums.length);
-    return () => { if (timerRef.current) clearInterval(timerRef.current); };
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+      timerRef.current = null;
+    };
   }, [albums.length, startTimer]);
 
   const goTo = useCallback((idx: number) => {

src/components/MiniPlayer.tsx

@@ -9,6 +9,7 @@ import { usePlayerStore } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
 import { useKeybindingsStore, matchInAppBinding } from '../store/keybindingsStore';
 import { useDragDrop } from '../contexts/DragDropContext';
+import { useWindowVisibility } from '../hooks/useWindowVisibility';
 import { IS_LINUX } from '../utils/platform';
 import MiniContextMenu from './MiniContextMenu';
 import OverlayScrollArea from './OverlayScrollArea';
@@ -114,6 +115,9 @@ export default function MiniPlayer() {
   const ticker = useRef<number | null>(null);
   const queueScrollRef = useRef<HTMLDivElement>(null);
   const volumeWrapRef = useRef<HTMLDivElement>(null);
+  const hiddenRef = useRef(false);
+  const isHidden = useWindowVisibility();
+  useEffect(() => { hiddenRef.current = isHidden; }, [isHidden]);
 
   // ── PsyDnD reorder ──
   // Mirrors QueuePanel's pattern: mousedown threshold → startDrag, mousemove
@@ -235,6 +239,7 @@ export default function MiniPlayer() {
       if (typeof e.payload.volume === 'number') setVolumeState(e.payload.volume);
     });
     const unProgress = listen<ProgressPayload>('audio:progress', (e) => {
+      if (hiddenRef.current || window.__psyHidden) return;
       setCurrentTime(e.payload.current_time);
       if (e.payload.duration > 0) setDuration(e.payload.duration);
     });

src/components/PlaybackScheduleBadge.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { usePlayerStore } from '../store/playerStore';
 import { useShallow } from 'zustand/react/shallow';
 import { formatPlaybackScheduleRemaining } from '../utils/playbackScheduleFormat';
+import { useWindowVisibility } from '../hooks/useWindowVisibility';
 
 export interface PlaybackScheduleBadgeProps {
   /** Anchor element (usually the play/pause button wrapper) — the ring centres on it. */
@@ -46,15 +47,19 @@ export default function PlaybackScheduleBadge({ layoutAnchorRef, className }: Pl
 
   const [nowMs, setNowMs] = useState(() => Date.now());
   const [anchorRect, setAnchorRect] = useState<{ left: number; top: number; size: number } | null>(null);
+  const windowHidden = useWindowVisibility();
 
   useEffect(() => {
-    if (deadlineMs == null) return;
-    const id = window.setInterval(() => setNowMs(Date.now()), 500);
+    if (deadlineMs == null || windowHidden) return;
+    const id = window.setInterval(() => {
+      if (document.hidden || window.__psyHidden) return;
+      setNowMs(Date.now());
+    }, 500);
     return () => window.clearInterval(id);
-  }, [deadlineMs]);
+  }, [deadlineMs, windowHidden]);
 
   useLayoutEffect(() => {
-    if (deadlineMs == null) return;
+    if (deadlineMs == null || windowHidden) return;
     const el = layoutAnchorRef.current;
     if (!el) return;
     const sync = () => {
@@ -74,7 +79,7 @@ export default function PlaybackScheduleBadge({ layoutAnchorRef, className }: Pl
       window.removeEventListener('scroll', sync, true);
       window.clearInterval(iv);
     };
-  }, [deadlineMs, layoutAnchorRef]);
+  }, [deadlineMs, layoutAnchorRef, windowHidden]);
 
   if (deadlineMs == null || startMs == null || !anchorRect) return null;
 

src/components/WaveformSeek.tsx

@@ -727,7 +727,6 @@ export function SeekbarPreview({
   onClick: () => void;
 }) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const rafRef    = useRef<number | null>(null);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -738,16 +737,35 @@ export function SeekbarPreview({
     }
     const animState = makeAnimState();
     let t = 0;
+    let rafId: number | null = null;
+    let pollId: number | null = null;
+    const stop = () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      if (pollId !== null) {
+        window.clearTimeout(pollId);
+        pollId = null;
+      }
+    };
     const tick = () => {
+      if (document.hidden || window.__psyHidden) {
+        pollId = window.setTimeout(() => {
+          pollId = null;
+          tick();
+        }, 400);
+        return;
+      }
       t += 0.016;
       animState.time = t;
       const progress = 0.15 + 0.65 * (0.5 + 0.5 * Math.sin(t));
       const buffered  = Math.min(1, progress + 0.18);
       drawSeekbar(canvas, style, heights, progress, buffered, animState);
-      rafRef.current = requestAnimationFrame(tick);
+      rafId = requestAnimationFrame(tick);
     };
-    rafRef.current = requestAnimationFrame(tick);
-    return () => { if (rafRef.current !== null) cancelAnimationFrame(rafRef.current); };
+    tick();
+    return () => stop();
   }, [style]);
 
   return (
@@ -869,14 +887,32 @@ export default function WaveformSeek({ trackId }: Props) {
     const canvas = canvasRef.current;
     if (!canvas) return;
     animStateRef.current = makeAnimState();
-    let rafId: number;
+    let rafId: number | null = null;
+    let pollId: number | null = null;
+    const stop = () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      if (pollId !== null) {
+        window.clearTimeout(pollId);
+        pollId = null;
+      }
+    };
     const tick = () => {
+      if (document.hidden || window.__psyHidden) {
+        pollId = window.setTimeout(() => {
+          pollId = null;
+          tick();
+        }, 400);
+        return;
+      }
       animStateRef.current.time += 0.016;
       drawSeekbar(canvas, seekbarStyle, heightsRef.current, progressRef.current, bufferedRef.current, animStateRef.current);
       rafId = requestAnimationFrame(tick);
     };
-    rafId = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafId);
+    tick();
+    return () => stop();
   }, [seekbarStyle]);
 
   // Resize observer.