feat: uploading works

2 files changed, 25 insertions, 11 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 1e17e2ddd..4c7fdd278 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -1,12 +1,13 @@
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { AudioField } from "../../../../fields/URLField";
+import { AudioField, VideoField } from "../../../../fields/URLField";
 import { Upload } from "../../../../server/SharedMediaTypes";
 import { ViewBoxBaseComponent } from "../../DocComponent";
 import { FieldView } from "../FieldView";
 import { VideoBox } from "../VideoBox";
 import { RecordingView } from './RecordingView';
+import { DocumentType } from "../../../documents/DocumentTypes";
 
 
 @observer
@@ -27,7 +28,11 @@ export class RecordingBox extends ViewBoxBaseComponent() {
             console.log("Setting result to " + info)
             this.result = info
             console.log(this.result.accessPaths.agnostic.client)
-            this.props.Document[this.fieldKey] = new AudioField(this.result.accessPaths.agnostic.client);
+            this.dataDoc.type = DocumentType.VID;
+            this.layoutDoc.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);
       }
 
       render() {
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 0d24f3c74..3a79f790f 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -27,7 +27,6 @@ interface IRecordingViewProps {
 const MAXTIME = 1000;
 
 export function RecordingView(props: IRecordingViewProps) {
-      const { setResult } = props
 
       const [recording, setRecording] = useState(false);
       const recordingTimerRef = useRef<number>(0);
@@ -52,11 +51,11 @@ export function RecordingView(props: IRecordingViewProps) {
                   width: 1280,
                   height: 720,
             },
-            audio: {
-                  echoCancellation: true,
-                  noiseSuppression: true,
-                  sampleRate: 44100
-            }
+            // audio: {
+            //       echoCancellation: true,
+            //       noiseSuppression: true,
+            //       sampleRate: 44100
+            // }
       }
 
       useEffect(() => {
@@ -75,7 +74,7 @@ export function RecordingView(props: IRecordingViewProps) {
                         type: 'video/webm'
                   })
                   const blobUrl = URL.createObjectURL(blob)
-                  const videoFile = new File([blob], "video", { lastModified: new Date().getDate() });
+                  const videoFile = new File(allVideoChunks, "video", { type: allVideoChunks[0].type, lastModified: Date.now() });
 
                   videoElementRef.current!.srcObject = null
                   videoElementRef.current!.src = blobUrl
@@ -89,12 +88,20 @@ export function RecordingView(props: IRecordingViewProps) {
                   //       }
                   // }
 
-                  Networking.UploadFilesToServer(allVideoChunks)
+                  Networking.UploadFilesToServer(videoFile)
                         .then((data) => {
-                              console.log(data)
+                              const result = data[0].result
+                              if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
+                                    props.setResult(result)
+                              } else {
+                                    alert("video conversion failed");
+                              }
                         })
                   // uploadVideo()
 
+                  //     this.dataDoc[this.fieldKey + "-duration"] = (new Date().getTime() - this.recordingStart!) / 1000;
+
+
 
                   // change to one recording box
             }
@@ -150,6 +157,8 @@ export function RecordingView(props: IRecordingViewProps) {
       }
       const startShowingStream = async (mediaConstraints = DEFAULT_MEDIA_CONSTRAINTS) => {
             const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints)
+            // const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+
 
             videoElementRef.current!.src = ""
             videoElementRef.current!.srcObject = stream