cleanup code from performance. stop streams after video is done.

2 files changed, 15 insertions, 35 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index dfe57db3f..493069394 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -68,7 +68,7 @@ export function ProgressBar(props: ProgressBarProps) {
         progressBarRef.current?.classList.toggle('progressbar-disabled', props.recording);
 
         if (props.recording)
-            setSegments(prevSegments => [...prevSegments, <div key='segment-expanding' id='segment-expanding' className='segment segment-expanding blink' style={{ width: '0px;' }}>{props.videos.length + 1}</div>]);
+            setSegments(prevSegments => [...prevSegments, <div key='segment-expanding' id='segment-expanding' className='segment segment-expanding blink' style={{ width: 'fit-content' }}>{props.videos.length + 1}</div>]);
     }, [props.recording])
 
 
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index e8737dce2..a8cc82ec0 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -91,23 +91,17 @@ export function RecordingView(props: IRecordingViewProps) {
 
     // this will call upon the progress bar to edit videos to be in the correct order
     useEffect(() => {
-        if (finished) setOrderVideos(true);
+        finished && setOrderVideos(true);
     }, [finished])
 
     useEffect(() => {
         // check if the browser supports media devices on first load
         if (!navigator.mediaDevices) {
-            console.log('This browser does not support getUserMedia.')
+            console.warn('This browser does not support getUserMedia.')
         }
-        // console.log('This device has the correct media devices.')
     }, [])
 
     useEffect(() => {
-        // get access to the video element on every render
-        videoElementRef.current = document.getElementById(`video-${props.id}`) as HTMLVideoElement;
-    });
-
-    useEffect(() => {
         let interval: any = null;
         if (recording) {
             interval = setInterval(() => {
@@ -128,6 +122,7 @@ export function RecordingView(props: IRecordingViewProps) {
         const newProgress = (progress / MAXTIME) * 100;
         setProgress(newProgress)
     }
+
     const startShowingStream = async (mediaConstraints = DEFAULT_MEDIA_CONSTRAINTS) => {
         const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints)
 
@@ -139,8 +134,8 @@ export function RecordingView(props: IRecordingViewProps) {
     }
 
     const record = async () => {
-        const stream = await startShowingStream();
-        videoRecorder.current = new MediaRecorder(stream)
+        // don't need to start a new stream every time we start recording a new segment
+        if (!videoRecorder.current) videoRecorder.current = new MediaRecorder(await startShowingStream())
 
         // temporary chunks of video
         let videoChunks: any = []
@@ -169,23 +164,6 @@ export function RecordingView(props: IRecordingViewProps) {
             trackScreen && RecordingApi.Instance.pause();
         }
 
-        // 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.start(200)
     }
 
@@ -193,11 +171,16 @@ export function RecordingView(props: IRecordingViewProps) {
     const stop = (e: React.PointerEvent) => {
         e.stopPropagation();
         if (videoRecorder.current) {
-            setFinished(true);
             if (videoRecorder.current.state !== "inactive") {
                 videoRecorder.current.stop();
-                // recorder.current.stream.getTracks().forEach((track: any) => track.stop())
             }
+
+            // this will call upon progessbar to update videos to be in the correct order
+            setFinished(true);
+
+            // end the streams (audio/video) to remove recording icon
+            const stream = videoElementRef.current!.srcObject;
+            stream instanceof MediaStream && stream.getTracks().forEach(track => track.stop());
         }
     }
 
@@ -213,11 +196,7 @@ export function RecordingView(props: IRecordingViewProps) {
     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();
-            }
+            (!videoRecorder.current || videoRecorder.current.state === "inactive") && record();
             return true; // cancels propagation to documentView to avoid selecting it.
         }, false, false);
     }
@@ -245,6 +224,7 @@ export function RecordingView(props: IRecordingViewProps) {
                     autoPlay
                     muted
                     onTimeUpdate={handleOnTimeUpdate}
+                    ref={videoElementRef}
                 />
                 <div className="recording-sign">
                     <span className="dot" />