diff --git a/src/components/QueueList.tsx b/src/components/QueueList.tsx index 7e685d42e..238319cf1 100644 --- a/src/components/QueueList.tsx +++ b/src/components/QueueList.tsx @@ -8,6 +8,7 @@ import { useCallback, useState } from 'react'; import Button from '../elements/Button'; import type { Track } from '../generated/typings'; +import useDndSensors from '../hooks/useDnDSensors'; import { getStatus } from '../lib/utils-library'; import { usePlayerAPI } from '../stores/usePlayerStore'; import QueueListItem from './QueueListItem'; @@ -34,6 +35,8 @@ export default function QueueList(props: Props) { const incomingQueue = queue.slice(queueCursor + 1); // Drag-and-Drop support for reordering the queue + const sensors = useDndSensors(); + const onDragEnd = useCallback( (event: DragEndEvent) => { const { @@ -60,7 +63,12 @@ export default function QueueList(props: Props) { ); return ( - +
{getStatus(incomingQueue)} diff --git a/src/components/TracksList.tsx b/src/components/TracksList.tsx index e2198ab01..77bcddad5 100644 --- a/src/components/TracksList.tsx +++ b/src/components/TracksList.tsx @@ -1,11 +1,4 @@ -import { - DndContext, - type DragEndEvent, - KeyboardSensor, - PointerSensor, - useSensor, - useSensors, -} from '@dnd-kit/core'; +import { DndContext, type DragEndEvent } from '@dnd-kit/core'; import { restrictToVerticalAxis } from '@dnd-kit/modifiers'; import { SortableContext, @@ -18,6 +11,7 @@ import { PredefinedMenuItem, Submenu, } from '@tauri-apps/api/menu'; +import { revealItemInDir } from '@tauri-apps/plugin-opener'; import type React from 'react'; import { useCallback, useEffect, useRef, useState } from 'react'; import Keybinding from 'react-keybinding-component'; @@ -32,7 +26,7 @@ import { usePlayerAPI } from '../stores/usePlayerStore'; import TrackRow from './TrackRow'; import TracksListHeader from './TracksListHeader'; -import { revealItemInDir } from '@tauri-apps/plugin-opener'; +import useDndSensors from '../hooks/useDnDSensors'; import useInvalidate from '../hooks/useInvalidate'; import { useScrollRestoration } from '../hooks/useScrollRestoration'; import { keyboardSelect } from '../lib/utils-list'; @@ -222,11 +216,7 @@ export default function TracksList(props: Props) { /** * Playlist tracks re-order events handlers */ - const pointerSensor = useSensor(PointerSensor, { - activationConstraint: { distance: 8 }, - }); - - const sensors = useSensors(pointerSensor, useSensor(KeyboardSensor)); + const sensors = useDndSensors(); const onDragEnd = useCallback( (event: DragEndEvent) => { diff --git a/src/hooks/useDnDSensors.ts b/src/hooks/useDnDSensors.ts new file mode 100644 index 000000000..8ed9b047c --- /dev/null +++ b/src/hooks/useDnDSensors.ts @@ -0,0 +1,14 @@ +import { + KeyboardSensor, + PointerSensor, + useSensor, + useSensors, +} from '@dnd-kit/core'; + +export default function useDndSensors() { + const pointerSensor = useSensor(PointerSensor, { + activationConstraint: { distance: 8 }, + }); + + return useSensors(pointerSensor, useSensor(KeyboardSensor)); +}