From 19f0eca0f5f1b0d12ac369f149caf787f88dd9d6 Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Thu, 12 May 2022 01:39:26 -0400
Subject: feat: added checkbox for optional screen tracking

---
 .../views/nodes/RecordingBox/RecordingView.tsx     | 83 +++++++---------------
 1 file changed, 24 insertions(+), 59 deletions(-)

(limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')

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
-- 
cgit v1.2.3-70-g09d2