mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
Frank Stellmacher
e260669537
Three-cut cluster pulling the last cluster of useEffect bodies + the
DnD-reorder visual feedback out of PlaylistDetail.tsx. 452 → 423 LOC
(−29).
usePlaylistRouteEffects — bundles two route-driven effects:
contextMenu reset (clears contextMenuSongId whenever playerStore's
context menu closes) and openEditMeta-from-route (consumes the
`openEditMeta` location.state flag, opens the meta modal, and
clears the flag with a navigate-replace so back-nav doesn't
re-trigger). Subscribes to playerStore directly.
useBulkPlPickerOutsideClick — the global mousedown listener that
closes the bulk-add-to-playlist picker when clicking outside the
picker wrapper. No-op when closed.
usePlaylistDnDReorder — owns dropTargetIdx state, the
container.addEventListener('psy-drop', …) wiring that calls
runPlaylistReorderDrop, and the handleRowMouseEnter
drag-over-visual helper. Subscribes to DragDropContext directly.
PlaylistDetail drops the direct runPlaylistReorderDrop import and
the contextMenuOpen store subscription — both now live in the hooks
that need them. Pure code move otherwise.
45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import type { SubsonicSong } from '../api/subsonicTypes';
|
|
import { useDragDrop } from '../contexts/DragDropContext';
|
|
import { runPlaylistReorderDrop } from '../utils/runPlaylistReorderDrop';
|
|
|
|
export interface PlaylistDnDReorderDeps {
|
|
tracklistRef: React.RefObject<HTMLDivElement | null>;
|
|
songs: SubsonicSong[];
|
|
savePlaylist: (updatedSongs: SubsonicSong[], prevCount?: number) => Promise<void>;
|
|
setSongs: React.Dispatch<React.SetStateAction<SubsonicSong[]>>;
|
|
}
|
|
|
|
export interface PlaylistDnDReorderResult {
|
|
dropTargetIdx: { idx: number; before: boolean } | null;
|
|
setDropTargetIdx: React.Dispatch<React.SetStateAction<{ idx: number; before: boolean } | null>>;
|
|
handleRowMouseEnter: (idx: number, e: React.MouseEvent) => void;
|
|
}
|
|
|
|
export function usePlaylistDnDReorder(deps: PlaylistDnDReorderDeps): PlaylistDnDReorderResult {
|
|
const { tracklistRef, songs, savePlaylist, setSongs } = deps;
|
|
const { isDragging } = useDragDrop();
|
|
const [dropTargetIdx, setDropTargetIdx] = useState<{ idx: number; before: boolean } | null>(null);
|
|
|
|
useEffect(() => {
|
|
const container = tracklistRef.current;
|
|
if (!container) return;
|
|
|
|
const onPsyDrop = (e: Event) => {
|
|
runPlaylistReorderDrop({ e, songs, savePlaylist, setDropTargetIdx, setSongs });
|
|
};
|
|
|
|
container.addEventListener('psy-drop', onPsyDrop);
|
|
return () => container.removeEventListener('psy-drop', onPsyDrop);
|
|
}, [songs, savePlaylist, tracklistRef, setSongs]);
|
|
|
|
const handleRowMouseEnter = (idx: number, e: React.MouseEvent) => {
|
|
if (!isDragging) return;
|
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
|
const before = e.clientY < rect.top + rect.height / 2;
|
|
setDropTargetIdx({ idx, before });
|
|
};
|
|
|
|
return { dropTargetIdx, setDropTargetIdx, handleRowMouseEnter };
|
|
}
|