refactor(player-bar): H7 — split PlayerBar.tsx 802 → 354 LOC across 10 files (#670)

* refactor(player-bar): H7 — extract PlaybackTime + RemainingTime + formatTime The two memoized clock components (which update the DOM imperatively from the playbackProgress store without re-rendering PlayerBar) move into components/playerBar/PlaybackClock.tsx. formatTime helper → utils/playerBarHelpers.ts. PlayerBar.tsx: 802 → 765 LOC. * refactor(player-bar): H7 — extract PlayerTrackInfo The cover-art wrap + title/artist marquees + star + last.fm love buttons move into their own component. The new file uses PlayerState['openContextMenu'] for prop typing so the union literal type carries through. PlayerBar.tsx: 765 → 674 LOC. * refactor(player-bar): H7 — extract PlayerTransportControls Stop/Prev/Play/Next/Repeat buttons (with the preview-ring + schedule-badge overlays around play/pause) move into PlayerTransportControls.tsx. The component uses ReturnType<...> on the source hooks to derive its playPauseBind + scheduleRemaining prop types so the new file stays in lockstep with usePlaybackDelayPress + usePlaybackScheduleRemaining. PlayerBar.tsx: 674 → 621 LOC. * refactor(player-bar): H7 — extract PlayerSeekbarSection The waveform / radio progress / time-label block moves into its own component. PlayerSeekbarSection branches on isRadio (AzuraCast progress bar with elapsed+duration when available; LIVE badge otherwise) vs. regular track (WaveformSeek or perf-flag fallback + duration ↔ remaining toggle). PlayerBar.tsx: 621 → 582 LOC. * refactor(player-bar): H7 — extract PlayerVolume + PlayerOverflowMenu + 2 hooks PlayerVolume.tsx is the reusable volume button + slider combo, used in three layouts (inline, full menu, volume-only menu) — `inputId` / `sectionModifier` / `wrapModifier` props handle the variants without class duplication. PlayerOverflowMenu.tsx is the portaled Ellipsis-button menu that hosts EQ / mini-player buttons + a PlayerVolume instance. useFloatingPlayerBar owns the docked/floating layout computation (ResizeObserver on sidebar + queue panel). useUtilityOverflowMenu owns the overflow detection, menu open/mode state, close-on-outside-click / Escape, position recompute on resize/scroll, and the wheel-menu timer. PlayerBar.tsx: 582 → 354 LOC.
2026-07-22 14:35:41 +00:00 · 2026-05-13 23:24:57 +02:00
parent 383bbbd75f
commit 988806e6b1
10 changed files with 826 additions and 556 deletions
@@ -0,0 +1,75 @@
+import { ArrowLeftRight } from 'lucide-react';
+import type { TFunction } from 'i18next';
+import type { RadioMetadata } from '../../hooks/useRadioMetadata';
+import { useThemeStore } from '../../store/themeStore';
+import { formatTime } from '../../utils/playerBarHelpers';
+import WaveformSeek from '../WaveformSeek';
+import { PlaybackTime, RemainingTime } from './PlaybackClock';
+
+interface Props {
+  isRadio: boolean;
+  radioMeta: RadioMetadata;
+  trackId: string | undefined;
+  duration: number;
+  localShowRemaining: boolean;
+  setLocalShowRemaining: (v: boolean) => void;
+  disableWaveformCanvas: boolean;
+  t: TFunction;
+}
+
+export function PlayerSeekbarSection({
+  isRadio, radioMeta, trackId, duration, localShowRemaining, setLocalShowRemaining,
+  disableWaveformCanvas, t,
+}: Props) {
+  return (
+    <div className="player-waveform-section">
+      {isRadio ? (
+        <>
+          {radioMeta.source === 'azuracast' && radioMeta.elapsed != null && radioMeta.duration != null && radioMeta.duration > 0 ? (
+            <>
+              <span className="player-time">{formatTime(radioMeta.elapsed)}</span>
+              <div className="player-waveform-wrap">
+                <div className="radio-progress-bar">
+                  <div
+                    className="radio-progress-fill"
+                    style={{ width: `${Math.min(100, (radioMeta.elapsed / radioMeta.duration) * 100)}%` }}
+                  />
+                </div>
+              </div>
+              <span className="player-time">{formatTime(radioMeta.duration)}</span>
+            </>
+          ) : (
+            <>
+              <PlaybackTime className="player-time" />
+              <div className="player-waveform-wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <span className="radio-live-badge">{t('radio.live')}</span>
+              </div>
+              <span className="player-time" style={{ opacity: 0 }}>0:00</span>
+            </>
+          )}
+        </>
+      ) : (
+        <>
+          <PlaybackTime className="player-time" />
+          <div className="player-waveform-wrap">
+            {disableWaveformCanvas
+              ? <div className="radio-progress-bar" aria-hidden />
+              : <WaveformSeek trackId={trackId} />}
+          </div>
+          <span
+            className="player-time player-time-toggle"
+            onClick={() => {
+              const newVal = !localShowRemaining;
+              setLocalShowRemaining(newVal);
+              useThemeStore.getState().setShowRemainingTime(newVal);
+            }}
+            data-tooltip={localShowRemaining ? t('player.showDuration') : t('player.showRemainingTime')}
+          >
+            {localShowRemaining ? <RemainingTime duration={duration} /> : formatTime(duration)}
+            <ArrowLeftRight size={10} style={{ marginLeft: 4, opacity: 0.6 }} />
+          </span>
+        </>
+      )}
+    </div>
+  );
+}