mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
Frank Stellmacher
8ff630cb5c
* refactor(queue-panel): H4 — extract helpers + Save/LoadPlaylistModal Pure code-move: formatTime, formatQueueReplayGainParts, renderStars and the DurationMode type → utils/queuePanelHelpers.tsx; the two playlist modals → own files under components/queuePanel/. QueuePanel.tsx: 1256 → 1104 LOC. * refactor(queue-panel): H4 — extract QueueHeader Pure code-move: the title/count/duration/collapse-button header → its own component file. No prop or behaviour changes. QueuePanel.tsx: 1104 → 1004 LOC. * refactor(queue-panel): H4 — extract QueueCurrentTrack + QueueLufsTargetMenu The currently-playing track block (cover, info, replay-gain / LUFS badge with its target-listbox portal) moves into two own files. Pure code-move via prop plumbing. setLoudnessTargetLufs is typed as LoudnessLufsPreset throughout the new components. QueuePanel.tsx: 1004 → 812 LOC. * refactor(queue-panel): H4 — extract useQueuePanelDrag hook Moves the psy-drag wiring (hit-test registration, drop-inside dispatch for song/songs/album/queue_reorder payloads, drop-outside removal) into its own hook. Drops the dead isRadioDrag variable since the parsedData.type === 'radio' guard inside onPsyDrop already handles that case. QueuePanel.tsx: 812 → 715 LOC. * refactor(queue-panel): H4 — extract useQueueLufsTgtPopover hook Pulls the LUFS-target popover open-state, button/menu refs, fixed-position recompute on open/resize/scroll, and auto-close-when-RG-collapses out of QueuePanel. QueuePanel.tsx: 715 → 662 LOC. * refactor(queue-panel): H4 — extract QueueToolbar The toolbar-button switch (shuffle/save/load/share/clear/gapless/crossfade/ infinite) and the crossfade popover (with its close-on-outside-click effect) move into one component. crossfadeBtnRef / crossfadePopoverRef and showCrossfadePopover state are now component-local — QueuePanel no longer sees them. QueuePanel.tsx: 662 → 541 LOC. * refactor(queue-panel): H4 — extract QueueList The OverlayScrollArea + queue.map block (with track rows, lucky-mix dice overlay, and radio/auto-added section dividers) moves into its own component. PlayerState['contextMenu'] + PlayerState['playTrack'] are re-used for prop typing, the local StartDrag alias matches the DragDropContext signature. QueuePanel.tsx: 541 → 434 LOC. * refactor(queue-panel): H4 — extract QueueTabBar + useQueueAutoScroll, final cleanup QueueTabBar is the bottom queue/lyrics/info tab switcher. useQueueAutoScroll groups the three list-scroll effects (publish scrollTop reader, restore pending snapshot, scroll next track into view on advance). Drops the dead toggleQueue and replayGainMode selectors plus the now-unused Play, Radio, MicVocal, ListMusic, Info imports and OverlayScrollArea. QueuePanel.tsx: 434 → 383 LOC. Every new file under 400.
52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import React, { useEffect, useLayoutEffect } from 'react';
|
|
import { registerQueueListScrollTopReader, consumePendingQueueListScrollTop } from '../store/queueUndo';
|
|
import type { Track } from '../store/playerStoreTypes';
|
|
|
|
interface Args {
|
|
queue: Track[];
|
|
queueIndex: number;
|
|
currentTrack: Track | null;
|
|
activeTab: string;
|
|
queueListRef: React.RefObject<HTMLDivElement | null>;
|
|
suppressNextAutoScrollRef: React.MutableRefObject<boolean>;
|
|
}
|
|
|
|
/** Queue auto-scroll: keeps the next track in view as playback progresses,
|
|
* publishes the list's scrollTop to the undo store, and restores any pending
|
|
* scrollTop snapshot (set when an undo restores a prior queue state). */
|
|
export function useQueueAutoScroll({
|
|
queue, queueIndex, currentTrack, activeTab, queueListRef, suppressNextAutoScrollRef,
|
|
}: Args) {
|
|
useLayoutEffect(() => {
|
|
registerQueueListScrollTopReader(() => queueListRef.current?.scrollTop);
|
|
return () => registerQueueListScrollTopReader(null);
|
|
}, [queueListRef]);
|
|
|
|
useLayoutEffect(() => {
|
|
const top = consumePendingQueueListScrollTop();
|
|
if (top === undefined) return;
|
|
const el = queueListRef.current;
|
|
if (!el) return;
|
|
suppressNextAutoScrollRef.current = true;
|
|
el.scrollTop = top;
|
|
el.dispatchEvent(new Event('scroll', { bubbles: false }));
|
|
}, [queue, queueIndex, currentTrack?.id, queueListRef, suppressNextAutoScrollRef]);
|
|
|
|
useEffect(function queueAutoScroll() {
|
|
if (suppressNextAutoScrollRef.current) {
|
|
suppressNextAutoScrollRef.current = false;
|
|
return;
|
|
}
|
|
if (!queueListRef.current || queueIndex < 0) return;
|
|
if (activeTab !== 'queue') return;
|
|
const songs = queueListRef.current!.querySelectorAll<HTMLElement>('[data-queue-idx]');
|
|
const nextSong = songs[queueIndex + 1];
|
|
if (!nextSong) return;
|
|
nextSong.scrollIntoView({ block: 'start', behavior: 'instant' });
|
|
requestAnimationFrame(() => {
|
|
queueListRef.current?.dispatchEvent(new Event('scroll', { bubbles: false }));
|
|
});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [currentTrack, activeTab]);
|
|
}
|