feat: added checkbox for optional screen tracking

4 files changed, 54 insertions, 75 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 807624394..e5b71c183 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -38,26 +38,23 @@ export class RecordingBox extends ViewBoxBaseComponent() {
       }
 
       @action
-      setResult = (info: Upload.FileInformation) => {
-            // console.log("Setting result to " + info)
+      setResult = (info: Upload.FileInformation, trackScreen: boolean) => {
             this.result = info
-            // console.log(this.result.accessPaths.agnostic.client)
             this.dataDoc.type = DocumentType.VID;
-            // console.log(this.videoDuration)
             this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
 
             this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
             this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client);
             this.dataDoc[this.fieldKey + "-recorded"] = true;
             // stringify the presenation and store it
-            this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(RecordingApi.Instance.clear());
+            if (trackScreen) {
+                  this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(RecordingApi.Instance.clear());
+            }
       }
 
       render() {
             return <div className="recordingBox" ref={this._ref}>
                   {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} />}
-                  {/* {!this.result ? <RecordingView setResult={this.setResult} /> :
-                        <p>video box</p>} */}
             </div>;
       }
 }
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.scss b/src/client/views/nodes/RecordingBox/RecordingView.scss
index c55af5952..9b2f6d070 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.scss
+++ b/src/client/views/nodes/RecordingBox/RecordingView.scss
@@ -1,5 +1,5 @@
 video {
-    // flex: 100%;
+      // flex: 100%;
       width: 100%;
       // min-height: 400px;
       //height: auto;
@@ -22,12 +22,12 @@ button {
 }
 
 .video-wrapper {
-    //   max-width: 600px;
-    //   max-width: 700px;
+      //   max-width: 600px;
+      //   max-width: 700px;
       position: relative;
       display: flex;
       justify-content: center;
-    //   overflow: hidden;
+      //   overflow: hidden;
       border-radius: 10px;
       margin: 0;
 }
@@ -176,7 +176,7 @@ button {
 
 }
 
-.video-edit-wrapper {
+.options-wrapper {
       height: 100%;
       display: flex;
       flex-direction: row;
@@ -184,10 +184,24 @@ button {
       position: absolute;
       top: 0;
       bottom: 0;
-      right: 50% - 15;
 
-      .video-edit-buttons {
-            margin: 0 5px;
+      &.video-edit-wrapper {
+
+            right: 50% - 15;
+
+            .track-screen {
+                  font-weight: 200;
+            }
+
       }
 
+      &.track-screen-wrapper {
+
+            right: 50% - 30;
+
+            .track-screen {
+                  font-weight: 200;
+            }
+
+      }
 }
\ 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 efacf7735..e9450a5dd 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -10,20 +10,13 @@ import { Upload } from '../../../../server/SharedMediaTypes';
 
 import { RecordingApi } from '../../../util/RecordingApi';
 
-
-enum RecordingStatus {
-      Recording,
-      Stopped,
-      Paused
-}
-
 interface MediaSegment {
       videoChunks: any[],
       endTime: number
 }
 
 interface IRecordingViewProps {
-      setResult: (info: Upload.FileInformation) => void
+      setResult: (info: Upload.FileInformation, trackScreen: boolean) => void
       setDuration: (seconds: number) => void
 }
 
@@ -36,27 +29,21 @@ export function RecordingView(props: IRecordingViewProps) {
       const [recordingTimer, setRecordingTimer] = useState(0); // unit is 0.01 second
       const [playing, setPlaying] = useState(false);
       const [progress, setProgress] = useState(0);
-      const [speed, setSpeed] = useState(1);
-      const [muted, setMuted] = useState(false);
 
       const [videos, setVideos] = useState<MediaSegment[]>([]);
-      const [currentVid, setCurrentVid] = useState<number>(0);
       const videoRecorder = useRef<MediaRecorder | null>(null);
-      const audioRecorder = useRef<MediaRecorder | null>(null);
       const videoElementRef = useRef<HTMLVideoElement | null>(null);
 
-    const [finished, setFinished] = useState<Boolean>(false)
+      const [finished, setFinished] = useState<boolean>(false)
+      const [trackScreen, setTrackScreen] = useState<boolean>(true)
 
 
 
       const DEFAULT_MEDIA_CONSTRAINTS = {
-            // video: true,
-            // audio: true
             video: {
                   width: 1280,
                   height: 720,
             },
-            // audio: true,
             audio: {
                   echoCancellation: true,
                   noiseSuppression: true,
@@ -80,7 +67,7 @@ export function RecordingView(props: IRecordingViewProps) {
                         .then((data) => {
                               const result = data[0].result
                               if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
-                                    props.setResult(result)
+                                    props.setResult(result, trackScreen)
                               } else {
                                     alert("video conversion failed");
                               }
@@ -138,11 +125,9 @@ export function RecordingView(props: IRecordingViewProps) {
       const record = async () => {
             const stream = await startShowingStream();
             videoRecorder.current = new MediaRecorder(stream)
-            // audioRecorder.current = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true }));
 
             // temporary chunks of video
             let videoChunks: any = []
-            // let audioChunks: any = []
 
             videoRecorder.current.ondataavailable = (event: any) => {
                   if (event.data.size > 0) {
@@ -150,16 +135,9 @@ export function RecordingView(props: IRecordingViewProps) {
                   }
             }
 
-            // audioRecorder.current.ondataavailable = (event: any) => {
-            //       if (event.data.size > 0) {
-            //             audioChunks.push(event.data)
-            //       }
-            // }
-
             videoRecorder.current.onstart = (event: any) => {
-                setRecording(true);
-                // RecordingApi.Instance.clear();
-                RecordingApi.Instance.start();
+                  setRecording(true);
+                  trackScreen && RecordingApi.Instance.start();
             }
 
             videoRecorder.current.onstop = () => {
@@ -172,8 +150,8 @@ export function RecordingView(props: IRecordingViewProps) {
                   // reset the temporary chunks
                   videoChunks = []
                   setRecording(false);
-                setFinished(true);
-                RecordingApi.Instance.pause();
+                  setFinished(true);
+                  trackScreen && RecordingApi.Instance.pause();
             }
 
             // recording paused
@@ -183,14 +161,14 @@ export function RecordingView(props: IRecordingViewProps) {
 
                   // reset the temporary chunks
                   videoChunks = []
-                setRecording(false);
-                RecordingApi.Instance.pause();
+                  setRecording(false);
+                  trackScreen && RecordingApi.Instance.pause();
             }
 
             videoRecorder.current.onresume = async (event: any) => {
                   await startShowingStream();
-                setRecording(true);
-                RecordingApi.Instance.resume();
+                  setRecording(true);
+                  trackScreen && RecordingApi.Instance.resume();
             }
 
             videoRecorder.current.start(200)
@@ -229,18 +207,6 @@ export function RecordingView(props: IRecordingViewProps) {
             setVideos(videos.filter((_, idx) => idx !== numVideos - 1));
       }
 
-      // const handleVideoProgress = (event: any) => {
-      //       const manualChange = Number(event.target.value);
-      //       videoElement!.currentTime = (videoElement!.duration / 100) * manualChange;
-      //       setProgress(manualChange)
-      // };
-
-      // const handleVideoSpeed = (event: any) => {
-      //       const newSpeed = Number(event.target.value);
-      //       videoElement!.playbackRate = speed;
-      //       setSpeed(newSpeed)
-      // };
-
       const handleOnTimeUpdate = () => {
             if (playing) {
                   setVideoProgressHelper(videoElementRef.current!.currentTime)
@@ -256,7 +222,7 @@ export function RecordingView(props: IRecordingViewProps) {
             return toTwoDigit(minutes) + " : " + toTwoDigit(seconds);
       }
 
-    return (
+      return (
             <div className="recording-container">
                   <div className="video-wrapper">
                         <video id="video"
@@ -277,9 +243,10 @@ export function RecordingView(props: IRecordingViewProps) {
                                                 <button className="record-button" onClick={startOrResume} />
                                           }
                                     </div>
-                                    {!recording && videos.length > 0 ?
 
-                                          <div className="video-edit-wrapper">
+                                    {!recording && (videos.length > 0 ?
+
+                                          <div className="options-wrapper video-edit-wrapper">
                                                 {/* <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons" }}>
                                                       <MdBackspace onClick={clearPrevious} />
                                                 </IconContext.Provider> */}
@@ -288,7 +255,13 @@ export function RecordingView(props: IRecordingViewProps) {
                                                 </IconContext.Provider>
                                           </div>
 
-                                          : <></>}
+                                          : <div className="options-wrapper track-screen-wrapper">
+                                                <label className="track-screen">
+                                                      <input type="checkbox" checked={trackScreen} onChange={(e) => { setTrackScreen(e.target.checked) }} />
+                                                      <span className="checkmark"></span>
+                                                      Track Screen
+                                                </label>
+                                          </div>)}
 
                               </div>
 
@@ -297,15 +270,7 @@ export function RecordingView(props: IRecordingViewProps) {
                                     marks={videos.map((elt) => elt.endTime / MAXTIME * 100)}
                               // playSegment={playSegment}
                               />
-
-                              {/* <button className="mute-btn" onClick={() => setMuted(!muted)}>
-                                          {!muted ? (
-                                                <i className="bx bxs-volume-full"></i>
-                                          ) : (
-                                                <i className="bx bxs-volume-mute"></i>
-                                          )}
-                                    </button>  */}
-                  </div>
+                        </div>
                   </div>
             </div>)
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 58e9f390c..902f19716 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -163,8 +163,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
             // if presentation isn't null, call followmovements on the recording api
             if (this.presentation) {
+                  console.log("presentation isn't null")
                   const err = RecordingApi.Instance.playMovements(this.presentation, this.player?.currentTime || 0, this);
                   err && console.log(err)
+            } else {
+                  console.log("presentation is null")
             }
 
             this._playing = true;
@@ -354,7 +357,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
       // sets video element ref
       @action
       setVideoRef = (vref: HTMLVideoElement | null) => {
-            console.log("SEt video ref " + vref)
+            console.log("Set video ref " + vref)
             this._videoRef = vref;
             if (vref) {
                   this._videoRef!.ontimeupdate = this.updateTimecode;