Merge branch 'presentmode-mfoiani' of https://github.com/brown-dash/Dash-Web into presentmode-mfoiani

3 files changed, 46 insertions, 27 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index a49cbbea5..d00f05759 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -1,7 +1,7 @@
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { AudioField, VideoField } from "../../../../fields/URLField";
+import { VideoField } from "../../../../fields/URLField";
 import { Upload } from "../../../../server/SharedMediaTypes";
 import { ViewBoxBaseComponent } from "../../DocComponent";
 import { FieldView } from "../FieldView";
@@ -9,6 +9,8 @@ import { VideoBox } from "../VideoBox";
 import { RecordingView } from './RecordingView';
 import { DocumentType } from "../../../documents/DocumentTypes";
 
+import { RecordingApi } from "../../../util/RecordingApi";
+
 
 @observer
 export class RecordingBox extends ViewBoxBaseComponent() {
@@ -31,18 +33,20 @@ export class RecordingBox extends ViewBoxBaseComponent() {
 
       @action
       setResult = (info: Upload.FileInformation) => {
-            console.log("Setting result to " + info)
+            // console.log("Setting result to " + info)
             this.result = info
-            console.log(this.result.accessPaths.agnostic.client)
+            // console.log(this.result.accessPaths.agnostic.client)
             this.dataDoc.type = DocumentType.VID;
-            console.log(this.videoDuration)
+            // console.log(this.videoDuration)
             this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
 
             // this.layoutDoc.layout = VideoBox.LayoutString(this.fieldKey);
             this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
             // this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = undefined;
             // this.layoutDoc._fitWidth = undefined;
-            this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client);
+          this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client);
+          // stringify the presenation and store it
+            this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(RecordingApi.Instance.clear());
       }
 
       render() {
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.scss b/src/client/views/nodes/RecordingBox/RecordingView.scss
index 0c153c9c8..c55af5952 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.scss
+++ b/src/client/views/nodes/RecordingBox/RecordingView.scss
@@ -1,9 +1,11 @@
 video {
-      flex: 100%;
+    // flex: 100%;
       width: 100%;
       // min-height: 400px;
-      height: auto;
-      display: block;
+      //height: auto;
+      height: 100%;
+      //display: block;
+      object-fit: cover;
       background-color: black;
 }
 
@@ -14,18 +16,20 @@ button {
 .recording-container {
       height: 100%;
       width: 100%;
-      display: flex;
+      // display: flex;
       pointer-events: all;
+      background-color: grey;
 }
 
 .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;
 }
 
 .video-wrapper:hover .controls {
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index b4febfc01..efacf7735 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -8,6 +8,8 @@ import { IconContext } from "react-icons";
 import { Networking } from '../../../Network';
 import { Upload } from '../../../../server/SharedMediaTypes';
 
+import { RecordingApi } from '../../../util/RecordingApi';
+
 
 enum RecordingStatus {
       Recording,
@@ -43,18 +45,23 @@ export function RecordingView(props: IRecordingViewProps) {
       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 DEFAULT_MEDIA_CONSTRAINTS = {
-            video: true,
-            audio: true,
-            // audio: {
-            //       echoCancellation: true,
-            //       noiseSuppression: true,
-            //       sampleRate: 44100
-            // }
+            // video: true,
+            // audio: true
+            video: {
+                  width: 1280,
+                  height: 720,
+            },
+            // audio: true,
+            audio: {
+                  echoCancellation: true,
+                  noiseSuppression: true,
+                  sampleRate: 44100
+            }
       }
 
       useEffect(() => {
@@ -150,7 +157,9 @@ export function RecordingView(props: IRecordingViewProps) {
             // }
 
             videoRecorder.current.onstart = (event: any) => {
-                  setRecording(true);
+                setRecording(true);
+                // RecordingApi.Instance.clear();
+                RecordingApi.Instance.start();
             }
 
             videoRecorder.current.onstop = () => {
@@ -163,7 +172,8 @@ export function RecordingView(props: IRecordingViewProps) {
                   // reset the temporary chunks
                   videoChunks = []
                   setRecording(false);
-                  setFinished(true);
+                setFinished(true);
+                RecordingApi.Instance.pause();
             }
 
             // recording paused
@@ -173,12 +183,14 @@ export function RecordingView(props: IRecordingViewProps) {
 
                   // reset the temporary chunks
                   videoChunks = []
-                  setRecording(false);
+                setRecording(false);
+                RecordingApi.Instance.pause();
             }
 
             videoRecorder.current.onresume = async (event: any) => {
                   await startShowingStream();
-                  setRecording(true);
+                setRecording(true);
+                RecordingApi.Instance.resume();
             }
 
             videoRecorder.current.start(200)
@@ -244,7 +256,7 @@ export function RecordingView(props: IRecordingViewProps) {
             return toTwoDigit(minutes) + " : " + toTwoDigit(seconds);
       }
 
-      return (
+    return (
             <div className="recording-container">
                   <div className="video-wrapper">
                         <video id="video"
@@ -293,8 +305,7 @@ export function RecordingView(props: IRecordingViewProps) {
                                                 <i className="bx bxs-volume-mute"></i>
                                           )}
                                     </button>  */}
-                        </div>
-
+                  </div>
                   </div>
             </div>)
 }
\ No newline at end of file