got basic ui for segmentation to work - W overall

3 files changed, 91 insertions, 25 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.scss b/src/client/views/nodes/RecordingBox/ProgressBar.scss
index 5d27c8a7d..67f96033a 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.scss
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.scss
@@ -8,7 +8,7 @@
       justify-content: flex-start;
       bottom: 10px;
       width: 80%;
-      height: 20px;
+      height: 30px;
       background-color: gray;
 
       &.done {
diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index 3e71239ce..b17d27d2e 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -1,3 +1,5 @@
+import { resolveTxt } from 'dns';
+import { videointelligence } from 'googleapis/build/src/apis/videointelligence';
 import { isInteger } from 'lodash';
 import * as React from 'react';
 import { useEffect, useState, useCallback, useRef } from "react"
@@ -6,6 +8,7 @@ import { MediaSegment } from './RecordingView';
 
 interface ProgressBarProps {
   videos: MediaSegment[],
+  setVideos,
 }
 
 export function ProgressBar(props: ProgressBarProps) {
@@ -13,12 +16,30 @@ export function ProgressBar(props: ProgressBarProps) {
   const progressBarRef = useRef<HTMLDivElement | null>(null)
 
   // array for the order of video segments
-  const [segments, setSegments] = useState([]);
+  const [segments, setSegments] = useState<JSX.Element[]>([]);
+  const [ordered, setOrdered] = useState<Object[]>([]);
+
+  const [clicked, setClicked] = useState<number>(-1);
 
   // const totalTime = useMemo(() => props.videos.lastElement().endTime, [props.videos])
 
   const totalTime = () => props.videos.lastElement().endTime
 
+  useEffect(() => {
+    const segmentsJSX = ordered.map((vid, i) =>
+      <div id={`segment-${i.toString()}`} className='segment' style={{ width: `${((vid.endTime - vid.startTime) / totalTime()) * 100}%`, backgroundColor: clicked === i ? 'inherit' : 'red', }}>{vid.order}</div>);
+      
+    setSegments(segmentsJSX)
+  }, [clicked, ordered])
+
+  useEffect(() => {
+    setOrdered(props.videos.map((vid, order) => {
+    //const { endTime, startTime } = vid
+      // TODO: not tranfer the blobs around
+      return { ...vid, order };
+    }))
+  }, [props.videos]);
+
 
 
       // const handleClick = (e: React.MouseEvent) => {
@@ -39,6 +60,19 @@ export function ProgressBar(props: ProgressBarProps) {
       //       }
       // }
   
+  const updateLastHover = (index) => {
+        // id for segment is like 'segment-1' or 'segment-10'
+    const segId = index
+    console.log(segId)
+    const rect = progressBarRef.current?.children[segId].getBoundingClientRect()
+    console.log(rect)
+    return {
+      index: segId,
+      minX: rect.x,
+      maxX: rect.x + rect.width,
+    }
+  }
+  
   const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) =>{
     // e.persist()
     // console.log('event', e)
@@ -48,41 +82,72 @@ export function ProgressBar(props: ProgressBarProps) {
     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()
-
+    setClicked(parseInt(clickedSegment.id.split('-')[1]))
+    let lastHover = {
+      index: parseInt(clickedSegment.id.split('-')[1]),
+      minX: rect.x,
+      maxX: rect.x + rect.width,
+    }
+
+    // clickedSegment.style.backgroundColor = `inherit`;
+    const dot = document.createElement("div")
+    dot.classList.add("segment")
+    dot.style.position = 'absolute';
+    dot.style.zIndex = '999';
+    dot.style.width = `${rect.width}px`;
+    dot.style.height = `${rect.height}px`;
+    document.body.append(dot)
     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`;
+      dot.style.left = `${event.clientX - rect.width/2}px`;
+      dot.style.top = `${event.clientY - rect.height/2}px`;
+     }
+
+    const updateSegmentOrder = (event: PointerEvent): void => {
+      event.stopPropagation();
+
+      dragSegment(event)
+
+      const oldIndex = lastHover.index
+      const swapSegments = (newIndex) => {
+        if (newIndex == null) return
+        setOrdered(prevOrdered => {
+          const cpy = [...prevOrdered]
+          cpy[oldIndex] = cpy[newIndex]
+          cpy[newIndex] = prevOrdered[oldIndex]
+          return cpy
+        })
+        setClicked(newIndex)
+      }
+
+      const curX = event.clientX;
+      if (curX < lastHover.minX && lastHover.index > 0) {
+        swapSegments(lastHover.index - 1)
+        lastHover = updateLastHover(lastHover.index - 1)
+      }
+      else if (curX > lastHover.maxX && lastHover.index < segments.length - 1) {
+        swapSegments(lastHover.index + 1)
+        lastHover = updateLastHover(lastHover.index + 1)
+      }
      }
 
     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.addEventListener('pointermove', updateSegmentOrder)
+    progressBar.addEventListener('pointerup', (event) => {
+      progressBar.removeEventListener('pointermove', updateSegmentOrder), { once: true }
+      // clickedSegment.style.position = clickedSegment.style.zIndex = 'inherit';
       // progressBar.removeEventListener('pointermove', updateSegmentOrder), { once: true }
+      // clickedSegment.style.backgroundColor = 'red';
+      setClicked(-1);
+      // updateSegmentOrder(event);
+      dot.remove();
     })
   }
 
@@ -93,7 +158,7 @@ export function ProgressBar(props: ProgressBarProps) {
                         style={{ width: `${props.progress}%` }}
                   // onClick={handleClick}
                   ></div> */}
-          {props.videos.map((vid, i) => <div id={`segment-${i.toString()}`} className='segment' style={{ width: `${((vid.endTime - vid.startTime) / totalTime()) * 100}%` }}></div>)}
+          {segments}
         </div>
       )
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 2420c126f..640e4f5f2 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -351,6 +351,7 @@ export function RecordingView(props: IRecordingViewProps) {
 
               <ProgressBar
                 videos={videos}
+                setVideos={setVideos}
                               // playSegment={playSegment}
                               />
                         </div>