found a hacky way to stop the bug with the mouse. touch devices seems to be working in a weird way tho

1 files changed, 41 insertions, 27 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index fbb5e8a8b..3314da355 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -8,7 +8,7 @@ import { MediaSegment } from './RecordingView';
 
 interface ProgressBarProps {
   videos: MediaSegment[],
-  setVideos,
+  setVideos: React.Dispatch<React.SetStateAction<MediaSegment[]>>,
 }
 
 interface SegmentBox {
@@ -102,7 +102,8 @@ export function ProgressBar(props: ProgressBarProps) {
     // don't do anything if null
     const progressBar = progressBarRef.current
     if (progressBar == null || clickedSegment.id === progressBar.id) return
-    progressBar.setPointerCapture(e.pointerId)
+    const ptrId = e.pointerId;
+    progressBar.setPointerCapture(ptrId)
 
     const rect = clickedSegment.getBoundingClientRect()
     // id for segment is like 'segment-1' or 'segment-10', 
@@ -123,46 +124,58 @@ export function ProgressBar(props: ProgressBarProps) {
     const detchedSegment = document.createElement("div")
     initDeatchSegment(detchedSegment, rect);
 
-    function updateSegmentOrder(event: PointerEvent): void{
+    const updateSegmentOrder = (event: PointerEvent): void => {
       event.stopPropagation();
+      event.preventDefault();
 
-      followCursor(event, detchedSegment, rect)
-
-      const oldIndex = lastHover.index
-      const swapSegments = (newIndex: number) => {
-        if (newIndex == null) return
-        setOrdered(prevOrdered => {
-          const cpy = [...prevOrdered]
-          cpy[oldIndex] = cpy[newIndex]
-          cpy[newIndex] = prevOrdered[oldIndex]
-          return cpy
-        })
-        setDragged(newIndex)
+      // this fixes a bug where pointerup doesn't fire while cursor is upped while being dragged
+      console.log('update cursor', progressBar.hasPointerCapture(ptrId), ptrId)
+      if (!progressBar.hasPointerCapture(ptrId)) {
+        placeSegmentandCleanup();
+        return;
       }
 
+      followCursor(event, detchedSegment, rect)
+
       const curX = event.clientX;
       if (curX < lastHover.minX && lastHover.index > 0) {
-        swapSegments(lastHover.index - 1)
+        swapSegments(lastHover.index, lastHover.index - 1)
         lastHover = updateLastHover(lastHover.index - 1) ?? lastHover
       }
       else if (curX > lastHover.maxX && lastHover.index < segments.length - 1) {
-        swapSegments(lastHover.index + 1)
+        swapSegments(lastHover.index, lastHover.index + 1)
         lastHover = updateLastHover(lastHover.index + 1) ?? lastHover
       }
-     }
-
-    progressBar.addEventListener('pointermove', updateSegmentOrder)
-    progressBar.addEventListener('pointerup', () => {
-      progressBar.removeEventListener('pointermove', updateSegmentOrder), { once : true }
-      // clickedSegment.style.position = clickedSegment.style.zIndex = 'inherit';
-      // progressBar.removeEventListener('pointermove', updateSegmentOrder), { once: true }
-      // clickedSegment.style.backgroundColor = 'red';
-      console.log('removed dot')
+    }
+    
+    const placeSegmentandCleanup = (event?: PointerEvent): void => {
+      event?.stopPropagation();
+      event?.preventDefault();
+      // remove the update event listener for pointermove
+      progressBar.removeEventListener('pointermove', updateSegmentOrder), { once: true }
+      // remove the floating segment from the DOM
       detchedSegment.remove()
+      // dragged is -1 is equiv to nothing being dragged, so the normal state
+      // so this will place the segment in it's location and update the segment bar
       setDragged(-1);
-    }, { once: true })
+    }
+
+
+    progressBar.addEventListener('pointermove', updateSegmentOrder)
+    progressBar.addEventListener('pointerup', placeSegmentandCleanup, { once: true })
   }
 
+  const swapSegments = (oldIndex: number, newIndex: number) => {
+      if (newIndex == null) return
+      setOrdered(prevOrdered => {
+        const cpy = [...prevOrdered]
+        cpy[oldIndex] = cpy[newIndex]
+        cpy[newIndex] = prevOrdered[oldIndex]
+        return cpy
+      })
+      setDragged(newIndex)
+    }
+
 
   const initDeatchSegment = (dot: HTMLDivElement, rect: DOMRect) => {
     dot.classList.add("segment-selected")
@@ -173,6 +186,7 @@ export function ProgressBar(props: ProgressBarProps) {
     dot.style.height = `${rect.height}px`;
     dot.style.left = `${rect.x}px`;
     dot.style.top = `${rect.y}px`;
+    dot.draggable = false;
     document.body.append(dot)
   }
   const cleanupDetachSegment = (dot: HTMLDivElement) => {