From 9dfca50488241998fa1a99f660b12f43ad803d38 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 17 Aug 2023 22:31:42 -0400
Subject: Added the beginning of an A/V recording button

---
 .../views/nodes/RecordingBox/RecordingView.tsx     | 44 ++++++++++++++++------
 1 file changed, 32 insertions(+), 12 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 51eb774e2..0e386b093 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -21,6 +21,8 @@ interface IRecordingViewProps {
     setResult: (info: Upload.AccessPathInfo, presentation?: Presentation) => void;
     setDuration: (seconds: number) => void;
     id: string;
+    getControls: (record: () => void, pause: () => void, finish: () => void) => void;
+    forceTrackScreen: boolean;
 }
 
 const MAXTIME = 100000;
@@ -60,14 +62,14 @@ export function RecordingView(props: IRecordingViewProps) {
     useEffect(() => {
         if (finished) {
             // make the total presentation that'll match the concatted video
-            let concatPres = trackScreen && TrackMovements.Instance.concatPresentations(videos.map(v => v.presentation as Presentation));
+            let concatPres = (trackScreen || props.forceTrackScreen) && TrackMovements.Instance.concatPresentations(videos.map(v => v.presentation as Presentation));
 
             // this async function uses the server to create the concatted video and then sets the result to it's accessPaths
             (async () => {
                 const videoFiles = videos.map((vid, i) => new File(vid.videoChunks, `segvideo${i}.mkv`, { type: vid.videoChunks[0].type, lastModified: Date.now() }));
 
                 // upload the segments to the server and get their server access paths
-                const serverPaths: string[] = (await Networking.UploadFilesToServer(videoFiles.map(file => ({file})))).map(res => (res.result instanceof Error ? '' : res.result.accessPaths.agnostic.server));
+                const serverPaths: string[] = (await Networking.UploadFilesToServer(videoFiles.map(file => ({ file })))).map(res => (res.result instanceof Error ? '' : res.result.accessPaths.agnostic.server));
 
                 // concat the segments together using post call
                 const result: Upload.AccessPathInfo | Error = await Networking.PostToServer('/concatVideos', serverPaths);
@@ -132,7 +134,7 @@ export function RecordingView(props: IRecordingViewProps) {
         videoRecorder.current.onstart = (event: any) => {
             setRecording(true);
             // start the recording api when the video recorder starts
-            trackScreen && TrackMovements.Instance.start();
+            (trackScreen || props.forceTrackScreen) && TrackMovements.Instance.start();
         };
 
         videoRecorder.current.onstop = () => {
@@ -147,7 +149,7 @@ export function RecordingView(props: IRecordingViewProps) {
 
                 // depending on if a presenation exists, add it to the video
                 const presentation = TrackMovements.Instance.yieldPresentation();
-                setVideos(videos => [...videos, presentation != null && trackScreen ? { ...nextVideo, presentation } : nextVideo]);
+                setVideos(videos => [...videos, presentation != null && (trackScreen || props.forceTrackScreen) ? { ...nextVideo, presentation } : nextVideo]);
             }
 
             // reset the temporary chunks
@@ -159,9 +161,7 @@ export function RecordingView(props: IRecordingViewProps) {
     };
 
     // if this is called, then we're done recording all the segments
-    const finish = (e: React.PointerEvent) => {
-        e.stopPropagation();
-
+    const finish = () => {
         // call stop on the video recorder if active
         videoRecorder.current?.state !== 'inactive' && videoRecorder.current?.stop();
 
@@ -176,8 +176,7 @@ export function RecordingView(props: IRecordingViewProps) {
         setFinished(true);
     };
 
-    const pause = (e: React.PointerEvent) => {
-        e.stopPropagation();
+    const pause = () => {
         // if recording, then this is just a new segment
         videoRecorder.current?.state === 'recording' && videoRecorder.current.stop();
     };
@@ -217,6 +216,10 @@ export function RecordingView(props: IRecordingViewProps) {
         return toTwoDigit(minutes) + ' : ' + toTwoDigit(seconds);
     };
 
+    useEffect(() => {
+        props.getControls(record, pause, finish);
+    }, []);
+
     return (
         <div className="recording-container">
             <div className="video-wrapper">
@@ -227,7 +230,19 @@ export function RecordingView(props: IRecordingViewProps) {
                 </div>
                 <div className="controls">
                     <div className="controls-inner-container">
-                        <div className="record-button-wrapper">{recording ? <button className="stop-button" onPointerDown={pause} /> : <button className="record-button" onPointerDown={start} />}</div>
+                        <div className="record-button-wrapper">
+                            {recording ? (
+                                <button
+                                    className="stop-button"
+                                    onPointerDown={e => {
+                                        e.stopPropagation();
+                                        pause();
+                                    }}
+                                />
+                            ) : (
+                                <button className="record-button" onPointerDown={start} />
+                            )}
+                        </div>
 
                         {!recording &&
                             (videos.length > 0 ? (
@@ -236,7 +251,12 @@ export function RecordingView(props: IRecordingViewProps) {
                                         <MdBackspace onPointerDown={undoPrevious} />
                                     </IconContext.Provider>
                                     <IconContext.Provider value={{ color: '#cc1c08', className: 'video-edit-buttons' }}>
-                                        <FaCheckCircle onPointerDown={finish} />
+                                        <FaCheckCircle
+                                            onPointerDown={e => {
+                                                e.stopPropagation();
+                                                finish();
+                                            }}
+                                        />
                                     </IconContext.Provider>
                                 </div>
                             ) : (
@@ -244,7 +264,7 @@ export function RecordingView(props: IRecordingViewProps) {
                                     <label className="track-screen">
                                         <input
                                             type="checkbox"
-                                            checked={trackScreen}
+                                            checked={trackScreen || props.forceTrackScreen}
                                             onChange={e => {
                                                 setTrackScreen(e.target.checked);
                                             }}
-- 
cgit v1.2.3-70-g09d2