refactor(mini-player): H6 — split MiniPlayer.tsx 820 → 218 LOC across 11 files (#669)

* refactor(mini-player): H6 — extract helpers + constants Pure code-move: window-size constants, localStorage keys + read helpers, toMini track shape, initialSnapshot, and fmt(seconds) → utils/miniPlayerHelpers.ts. MiniPlayer.tsx: 820 → 745 LOC. * refactor(mini-player): H6 — extract MiniTitlebar + MiniMeta + MiniControls Three small visual subcomponents move into components/miniPlayer/. MiniPlayer drops the now-unused Pin/PinOff/Maximize2/X/Play/Pause/ SkipBack/SkipForward lucide icons and the CachedImage import. MiniPlayer.tsx: 745 → 665 LOC. * refactor(mini-player): H6 — extract MiniToolbar + useMiniVolumePopover The whole toolbar (volume button + portaled popover, shuffle, gapless/ crossfade/infinite, queue toggle) moves into MiniToolbar.tsx. The volume popover open-state + ref/style positioning + outside-click/Escape close move into the useMiniVolumePopover hook. MiniPlayer.tsx: 665 → 492 LOC. * refactor(mini-player): H6 — extract MiniQueue + useMiniQueueDrag The OverlayScrollArea + queue.map block moves into MiniQueue.tsx. The PsyDnD wiring (drop-inside emits mini:reorder, drop-outside emits mini:remove, reorder math collapsing same-position + adjusting for shift) moves into the useMiniQueueDrag hook. MiniPlayer.tsx: 492 → 346 LOC. * refactor(mini-player): H6 — extract useMiniSync + useMiniWindowSetup + useMiniKeyboardShortcuts Three more hooks pull the remaining side-effect islands out of MiniPlayer: - useMiniSync owns mini:ready emit on mount + focus, plus the mini:sync / audio:progress / audio:ended listeners. The hidden-window visibility ref that gates progress now lives inside the hook. - useMiniWindowSetup bundles three small window-bound effects: Linux WebKitGTK smooth-scroll, the cold-start expanded-size restore when queueOpen=true, and always-on-top reapply on mount + focus. - useMiniKeyboardShortcuts moves the keyboard-shortcut bridge wiring. MiniPlayer.tsx: 346 → 218 LOC.
2026-07-22 06:25:41 +00:00 · 2026-05-13 23:07:45 +02:00
parent 463d3e0c5b
commit 383bbbd75f
12 changed files with 926 additions and 689 deletions
@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import { emit } from '@tauri-apps/api/event';
+import { useKeybindingsStore, matchInAppBinding } from '../store/keybindingsStore';
+
+/** Mini-window keyboard shortcuts. Space/Arrow{Left,Right} run the standard
+ *  play-pause/next/prev shortcut actions (source: 'mini-window' so the bridge
+ *  knows it didn't come from main). Ctrl+Z and Ctrl+Shift+Z emit
+ *  mini:undo-queue / mini:redo-queue. The user-configured 'open-mini-player'
+ *  chord is also honoured so the same shortcut that opens the mini from main
+ *  also closes it from here. All shortcuts ignore inputs/textareas/editable
+ *  content. */
+export function useMiniKeyboardShortcuts() {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const tgt = e.target as HTMLElement | null;
+      const tag = tgt?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tgt?.isContentEditable) return;
+
+      const openMiniBinding = useKeybindingsStore.getState().bindings['open-mini-player'];
+      if (matchInAppBinding(e, openMiniBinding)) {
+        e.preventDefault();
+        emit('shortcut:run-action', {
+          action: 'open-mini-player',
+          source: 'mini-window',
+        }).catch(() => {});
+        return;
+      }
+
+      if ((e.ctrlKey || e.metaKey) && (e.code === 'KeyZ' || e.key?.toLowerCase() === 'z')) {
+        e.preventDefault();
+        if (e.shiftKey) {
+          emit('mini:redo-queue', {}).catch(() => {});
+        } else {
+          emit('mini:undo-queue', {}).catch(() => {});
+        }
+        return;
+      }
+
+      if (e.key === ' ' || e.code === 'Space') {
+        e.preventDefault();
+        emit('shortcut:run-action', {
+          action: 'play-pause',
+          source: 'mini-window',
+        }).catch(() => {});
+      } else if (e.key === 'ArrowRight') {
+        emit('shortcut:run-action', {
+          action: 'next',
+          source: 'mini-window',
+        }).catch(() => {});
+      } else if (e.key === 'ArrowLeft') {
+        emit('shortcut:run-action', {
+          action: 'prev',
+          source: 'mini-window',
+        }).catch(() => {});
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+}