merge with jenny bug fixes and fix small ui

1 files changed, 35 insertions, 38 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 7cff54ff2..e8737dce2 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -7,7 +7,7 @@ import { FaCheckCircle } from 'react-icons/fa';
 import { IconContext } from "react-icons";
 import { Networking } from '../../../Network';
 import { Upload } from '../../../../server/SharedMediaTypes';
-
+import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
 import { RecordingApi } from '../../../util/RecordingApi';
 import { DashUploadUtils } from '../../../../server/DashUploadUtils';
 
@@ -170,28 +170,28 @@ 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, startTime: videos?.lastElement()?.endTime || 0 }])
-
-            // reset the temporary chunks
-            videoChunks = []
-            setRecording(false);
-            trackScreen && RecordingApi.Instance.pause();
-        }
-
-        videoRecorder.current.onresume = async (event: any) => {
-            await startShowingStream();
-            setRecording(true);
-            trackScreen && RecordingApi.Instance.resume();
-        }
+        // videoRecorder.current.onpause = (event: any) => {
+        //     // append the current portion to the video pieces
+        //     setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current, startTime: videos?.lastElement()?.endTime || 0 }])
+
+        //     // reset the temporary chunks
+        //     videoChunks = []
+        //     setRecording(false);
+        //     trackScreen && RecordingApi.Instance.pause();
+        // }
+
+        // videoRecorder.current.onresume = async (event: any) => {
+        //     await startShowingStream();
+        //     setRecording(true);
+        //     trackScreen && RecordingApi.Instance.resume();
+        // }
 
         videoRecorder.current.start(200)
     }
 
 
-    const stop = (e: React.MouseEvent) => {
-        e.stopPropagation()
+    const stop = (e: React.PointerEvent) => {
+        e.stopPropagation();
         if (videoRecorder.current) {
             setFinished(true);
             if (videoRecorder.current.state !== "inactive") {
@@ -201,7 +201,7 @@ export function RecordingView(props: IRecordingViewProps) {
         }
     }
 
-    const pause = (e: React.MouseEvent) => {
+    const pause = (e: React.PointerEvent) => {
         e.stopPropagation()
         if (videoRecorder.current) {
             if (videoRecorder.current.state === "recording") {
@@ -210,25 +210,24 @@ export function RecordingView(props: IRecordingViewProps) {
         }
     }
 
-    const startOrResume = (e: React.MouseEvent) => {
-        e.stopPropagation()
-        if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
-            record();
-        } else if (videoRecorder.current.state === "paused") {
-            videoRecorder.current.start();
-        }
+    const startOrResume = (e: React.PointerEvent) => {
+        // the code to start or resume does not get triggered if we start dragging the button
+        setupMoveUpEvents({}, e, returnTrue, returnFalse, e => {
+            if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
+                record();
+            } else if (videoRecorder.current.state === "paused") {
+                videoRecorder.current.start();
+            }
+            return true; // cancels propagation to documentView to avoid selecting it.
+        }, false, false);
     }
 
-    const undoPrevious = (e: React.MouseEvent) => {
+    const undoPrevious = (e: React.PointerEvent) => {
         e.stopPropagation();
         setDoUndo(prev => !prev);
     }
 
-    const handleOnTimeUpdate = () => {
-        if (playing) {
-            setVideoProgressHelper(videoElementRef.current!.currentTime)
-        }
-    };
+    const handleOnTimeUpdate = () => playing && setVideoProgressHelper(videoElementRef.current!.currentTime);
 
     const millisecondToMinuteSecond = (milliseconds: number) => {
         const toTwoDigit = (digit: number) => {
@@ -239,7 +238,6 @@ export function RecordingView(props: IRecordingViewProps) {
         return toTwoDigit(minutes) + " : " + toTwoDigit(seconds);
     }
 
-    // TODO: have the undo button only appear if there is something to undo
     return (
         <div className="recording-container">
             <div className="video-wrapper">
@@ -257,8 +255,8 @@ export function RecordingView(props: IRecordingViewProps) {
                     <div className="controls-inner-container">
                         <div className="record-button-wrapper">
                             {recording ?
-                                <button className="stop-button" onClick={pause} /> :
-                                <button className="record-button" onClick={startOrResume} />
+                                <button className="stop-button" onPointerDown={pause} /> :
+                                <button className="record-button" onPointerDown={startOrResume} />
                             }
                         </div>
 
@@ -266,10 +264,10 @@ export function RecordingView(props: IRecordingViewProps) {
 
                             <div className="options-wrapper video-edit-wrapper">
                                 <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons", style: {display: canUndo ? 'inherit' : 'none'} }}>
-                                    <MdBackspace onClick={undoPrevious} />
+                                    <MdBackspace onPointerDown={undoPrevious} />
                                 </IconContext.Provider>
                                 <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}>
-                                    <FaCheckCircle onClick={stop} />
+                                    <FaCheckCircle onPointerDown={stop} />
                                 </IconContext.Provider>
                             </div>
 
@@ -293,7 +291,6 @@ export function RecordingView(props: IRecordingViewProps) {
                     recording={recording}
                     doUndo={doUndo}
                     setCanUndo={setCanUndo}
-                // playSegment={playSegment}
                 />
             </div>
         </div>)