started working with the pointer events to drag - very laggy, may try something more simple for now

1 files changed, 67 insertions, 13 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index 82d5e1f04..3e71239ce 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -1,14 +1,26 @@
+import { isInteger } from 'lodash';
 import * as React from 'react';
-import { useEffect } from "react"
+import { useEffect, useState, useCallback, useRef } from "react"
 import "./ProgressBar.scss"
+import { MediaSegment } from './RecordingView';
 
 interface ProgressBarProps {
-      progress: number,
-      marks: number[],
+  videos: MediaSegment[],
 }
 
 export function ProgressBar(props: ProgressBarProps) {
 
+  const progressBarRef = useRef<HTMLDivElement | null>(null)
+
+  // array for the order of video segments
+  const [segments, setSegments] = useState([]);
+
+  // const totalTime = useMemo(() => props.videos.lastElement().endTime, [props.videos])
+
+  const totalTime = () => props.videos.lastElement().endTime
+
+
+
       // const handleClick = (e: React.MouseEvent) => {
       //       let progressbar = document.getElementById('progressbar')!
       //       let bounds = progressbar!.getBoundingClientRect();
@@ -26,20 +38,62 @@ export function ProgressBar(props: ProgressBarProps) {
       //             }
       //       }
       // }
+  
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) =>{
+    // e.persist()
+    // console.log('event', e)
+    // don't move the videobox element
+    e.stopPropagation()
+
+    const progressBar = progressBarRef.current
+    if (progressBar == null) return
+    console.log('progressbar', progressBar)
+
+    const updateSegmentOrder = (event: PointerEvent): void => {
+      // event.stopPropagation()
+
+      // const hoveredSegment = event.target as HTMLDivElement & EventTarget
+      // console.log('updateSegmentOrder called', hoveredSegment.id === clickedSegment.id)
+      // if (hoveredSegment.id === clickedSegment.id) return;
+
+      console.log('updateSegmentOrder : target', event.target.id)
+     }
+    
+    // progressBar.addEventListener('pointermove', updateSegmentOrder)
+
+
+    const clickedSegment = e.target as HTMLDivElement & EventTarget
+    console.log('segment', clickedSegment.getBoundingClientRect())
+
+    const rect = clickedSegment.getBoundingClientRect()
+
+    const dragSegment = (event: PointerEvent): void => {
+      // event.stopPropagation()
+      clickedSegment.style.position = 'absolute';
+      clickedSegment.style.zIndex = '999';
+      clickedSegment.style.width = `${rect.width}px`;
+      clickedSegment.style.height = `${rect.height}px`;
+      clickedSegment.style.left = `${event.offsetX - rect.width/2}px`;
+      clickedSegment.style.top = `${event.offsetY - rect.height/2}px`;
+     }
+
+    progressBar.setPointerCapture(e.pointerId)
+    progressBar.addEventListener('pointermove', dragSegment)
+    progressBar.addEventListener('pointerup', () => {
+      progressBar.removeEventListener('pointermove', dragSegment), { once: true }
+      clickedSegment.style.position = clickedSegment.style.zIndex = 'inherit';
+      // progressBar.removeEventListener('pointermove', updateSegmentOrder), { once: true }
+    })
+  }
 
       return (
-            <div className="progressbar" id="progressbar">
-                  <div
+        <div className="progressbar" id="progressbar" onPointerDown={onPointerDown} ref={progressBarRef}>
+                  {/* <div
                         className="progressbar done"
                         style={{ width: `${props.progress}%` }}
                   // onClick={handleClick}
-                  ></div>
-                  {props.marks.map((mark) => {
-                        return <div
-                              className="progressbar mark"
-                              style={{ width: `${mark}%` }}
-                        ></div>
-                  })}
-            </div>
+                  ></div> */}
+          {props.videos.map((vid, i) => <div id={`segment-${i.toString()}`} className='segment' style={{ width: `${((vid.endTime - vid.startTime) / totalTime()) * 100}%` }}></div>)}
+        </div>
       )
 }
\ No newline at end of file