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

3 files changed, 116 insertions, 31 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.scss b/src/client/views/nodes/RecordingBox/ProgressBar.scss
index a493b0b89..5d27c8a7d 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.scss
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.scss
@@ -1,11 +1,14 @@
 
 .progressbar {
+  touch-action: none;
+
+
       position: absolute;
       display: flex;
       justify-content: flex-start;
       bottom: 10px;
       width: 80%;
-      height: 5px;
+      height: 20px;
       background-color: gray;
 
       &.done {
@@ -23,4 +26,30 @@
             z-index: 3;
             pointer-events: none; 
       }
-}
\ No newline at end of file
+}
+
+.segment {
+  border: 3px solid black;
+  background-color: red;
+  margin: 1px;
+  padding: 0;
+  cursor: pointer;
+  transition-duration: .25s;
+
+  text-align: center;
+}
+
+.segment:first-child {
+  margin-left: 2px;
+}
+.segment:last-child {
+  margin-right: 2px;
+}
+
+.segment:hover {
+  margin: 0px;
+  border: 4px solid red;
+  background-color: black;
+  min-width: 10px;
+  border-radius: 2px;
+}
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
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 3fd062483..2420c126f 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -11,9 +11,10 @@ import { Upload } from '../../../../server/SharedMediaTypes';
 import { RecordingApi } from '../../../util/RecordingApi';
 import { DashUploadUtils } from '../../../../server/DashUploadUtils';
 
-interface MediaSegment {
+export interface MediaSegment {
     videoChunks: any[],
-    endTime: number
+  endTime: number,
+  startTime: number
 }
 
 interface IRecordingViewProps {
@@ -70,6 +71,8 @@ export function RecordingView(props: IRecordingViewProps) {
                     inputPaths.push(name)
                   });
                 
+                console.log(videoFiles)
+                
                 
                 
                 // const inputListName = 'order.txt';
@@ -83,18 +86,18 @@ export function RecordingView(props: IRecordingViewProps) {
                 
                 // fs.unlinkSync(inputListName);
 
-                const combined = await DashUploadUtils.combineSegments(videoFiles, inputPaths)
-                console.log('combined', combined)
+                // const combined = await DashUploadUtils.combineSegments(videoFiles, inputPaths)
+                // console.log('combined', combined)
                 
                 // const outputFile = new File(['output.mp4'], 'output.mp4', { type: 'video/mp4', lastModified: Date.now() });
 
-                const data = await Networking.UploadFilesToServer(combined)
-                  const result = data[0].result
-                  if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
-                      props.setResult(result, trackScreen)
-                  } else {
-                      alert("video conversion failed");
-                  }
+                // const data = await Networking.UploadFilesToServer(combined)
+                //   const result = data[0].result
+                //   if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
+                //       props.setResult(result, trackScreen)
+                //   } else {
+                //       alert("video conversion failed");
+                //   }
                   
 
                 //   if (format.includes("x-matroska")) {
@@ -215,7 +218,7 @@ export function RecordingView(props: IRecordingViewProps) {
                   // if we have a last portion
                   if (videoChunks.length > 1) {
                         // append the current portion to the video pieces
-                        setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
+                        setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current, startTime: videos?.lastElement()?.endTime || 0 }])
                   }
 
                   // reset the temporary chunks
@@ -228,7 +231,7 @@ export function RecordingView(props: IRecordingViewProps) {
             // recording paused
             videoRecorder.current.onpause = (event: any) => {
                   // append the current portion to the video pieces
-                  setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
+                  setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current, startTime: videos?.lastElement()?.endTime || 0 }])
 
                   // reset the temporary chunks
                   videoChunks = []
@@ -346,9 +349,8 @@ export function RecordingView(props: IRecordingViewProps) {
 
                               </div>
 
-                              <ProgressBar
-                                    progress={progress}
-                                    marks={videos.map((elt) => elt.endTime / MAXTIME * 100)}
+              <ProgressBar
+                videos={videos}
                               // playSegment={playSegment}
                               />
                         </div>