Fix doubleclick to play on playlists

martpie · Jan 7, 2025 · 460bd0b · 460bd0b
1 parent 4915a9f
commit 460bd0b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 32 deletions.
diff --git a/src/components/TrackRow.module.css b/src/components/TrackRow.module.css
@@ -32,4 +32,29 @@
       border-top-color: rgba(255 255 255 / 0.2);
     }
   }
+
+  &.isDragging {
+    opacity: 0.5;
+  }
+
+  &.isOver:not(.isDragging) {
+    &::after {
+      pointer-events: none;
+      position: absolute;
+      z-index: 1;
+      display: block;
+      width: 100%;
+      content: "";
+      height: 2px;
+      background-color: var(--main-color);
+    }
+  }
+
+  &.isAbove::after {
+    top: -1px;
+  }
+
+  &.isBelow::after {
+    bottom: -1px;
+  }
 }
diff --git a/src/components/TrackRow.tsx b/src/components/TrackRow.tsx
@@ -1,5 +1,4 @@
 import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
 import cx from 'classnames';
 import type React from 'react';
 
@@ -49,9 +48,10 @@ export default function TrackRow(props: Props) {
     attributes,
     listeners,
     setNodeRef,
-    transform,
-    transition,
     isDragging,
+    isOver,
+    activeIndex,
+    overIndex,
   } = useSortable({
     id: props.track.id,
     disabled: !draggable,
@@ -61,18 +61,13 @@ export default function TrackRow(props: Props) {
     },
   });
 
-  const style: React.CSSProperties | undefined = transform
-    ? {
-        transform: CSS.Translate.toString(transform),
-        transition,
-        zIndex: 2,
-        visibility: isDragging ? 'hidden' : 'visible',
-      }
-    : undefined;
-
   const trackClasses = cx(styles.track, {
     [styles.selected]: selected,
     [styles.even]: index % 2 === 0,
+    [styles.isDragging]: isDragging,
+    [styles.isOver]: isOver,
+    [styles.isAbove]: isOver && overIndex < activeIndex,
+    [styles.isBelow]: isOver && overIndex > activeIndex,
   });
 
   return (
@@ -93,7 +88,7 @@ export default function TrackRow(props: Props) {
       ref={setNodeRef}
       {...listeners}
       {...attributes}
-      style={{ ...style, ...props.style }} // memo that
+      style={props.style}
     >
       <div className={`${styles.cell} ${cellStyles.cellTrackPlaying}`}>
         {props.isPlaying ? <PlayingIndicator /> : null}

diff --git a/src/components/TracksList.tsx b/src/components/TracksList.tsx
@@ -3,6 +3,10 @@ import {
   type DragEndEvent,
   DragOverlay,
   type DragStartEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
 } from '@dnd-kit/core';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
@@ -220,16 +224,11 @@ export default function TracksList(props: Props) {
   /**
    * Playlist tracks re-order events handlers
    */
-  const [dragOverlay, setDragOverlay] = useState<Track | null>(null);
-
-  const onDragStart = useCallback(
-    (event: DragStartEvent) => {
-      const track = tracks[event.active.data.current?.index];
+  const pointerSensor = useSensor(PointerSensor, {
+    activationConstraint: { distance: 8 },
+  });
 
-      setDragOverlay(track);
-    },
-    [tracks],
-  );
+  const sensors = useSensors(pointerSensor, useSensor(KeyboardSensor));
 
   const onDragEnd = useCallback(
     (event: DragEndEvent) => {
@@ -472,10 +471,10 @@ export default function TracksList(props: Props) {
 
   return (
     <DndContext
-      onDragStart={onDragStart}
       onDragEnd={onDragEnd}
       id="dnd-playlist"
       modifiers={DND_MODIFIERS}
+      sensors={sensors}
     >
       <div className={styles.tracksList}>
         <Keybinding onKey={onKey} preventInputConflict />
@@ -526,15 +525,6 @@ export default function TracksList(props: Props) {
                   />
                 );
               })}
-              <DragOverlay dropAnimation={null}>
-                {dragOverlay ? (
-                  <TrackRow
-                    selected={selectedTracks.has(dragOverlay.id)}
-                    track={dragOverlay}
-                    index={-1}
-                  />
-                ) : null}
-              </DragOverlay>
             </SortableContext>
           </div>
         </div>