From 0a84982e2ea59d737f394bc79fa7f26a4bf29a80 Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Thu, 28 Apr 2022 16:01:49 -0400
Subject: feat: uploading works

---
 src/client/Network.ts                              |  1 +
 .../views/nodes/RecordingBox/RecordingBox.tsx      | 14 +++++++++++--
 .../views/nodes/RecordingBox/RecordingView.tsx     | 23 ++++++++--------------
 src/client/views/nodes/trails/PresElementBox.tsx   |  2 ++
 4 files changed, 23 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/client/Network.ts b/src/client/Network.ts
index 3597e7b2b..1255e5ce0 100644
--- a/src/client/Network.ts
+++ b/src/client/Network.ts
@@ -19,6 +19,7 @@ export namespace Networking {
       }
 
       export async function UploadFilesToServer<T extends Upload.FileInformation = Upload.FileInformation>(files: File | File[]): Promise<Upload.FileResponse<T>[]> {
+            console.log(files)
             const formData = new FormData();
             if (Array.isArray(files)) {
                   if (!files.length) {
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 4c7fdd278..6f9451925 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -22,6 +22,12 @@ export class RecordingBox extends ViewBoxBaseComponent() {
       }
 
       @observable result: Upload.FileInformation | undefined = undefined
+      @observable videoDuration: number | undefined = undefined
+
+      @action
+      setVideoDuration = (duration: number) => {
+            this.videoDuration = duration
+      }
 
       @action
       setResult = (info: Upload.FileInformation) => {
@@ -29,6 +35,9 @@ export class RecordingBox extends ViewBoxBaseComponent() {
             this.result = info
             console.log(this.result.accessPaths.agnostic.client)
             this.dataDoc.type = DocumentType.VID;
+            console.log(this.videoDuration)
+            this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
+
             this.layoutDoc.layout = VideoBox.LayoutString(this.fieldKey);
             this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = undefined;
             this.layoutDoc._fitWidth = undefined;
@@ -37,8 +46,9 @@ export class RecordingBox extends ViewBoxBaseComponent() {
 
       render() {
             return <div className="recordingBox" ref={this._ref}>
-                  {!this.result ? <RecordingView setResult={this.setResult} /> :
-                        <p>video box</p>}
+                  {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} />}
+                  {/* {!this.result ? <RecordingView setResult={this.setResult} /> :
+                        <p>video box</p>} */}
             </div>;
       }
 }
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 16f750e14..6aed07c60 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -22,6 +22,7 @@ interface MediaSegment {
 
 interface IRecordingViewProps {
       setResult: (info: Upload.FileInformation) => void
+      setDuration: (seconds: number) => void
 }
 
 const MAXTIME = 1000;
@@ -47,12 +48,12 @@ export function RecordingView(props: IRecordingViewProps) {
 
 
       const DEFAULT_MEDIA_CONSTRAINTS = {
-            video: true,
+            // video: true,
             // audio: true
-            // video: {
-            //       width: 1280,
-            //       height: 720,
-            // },
+            video: {
+                  width: 1280,
+                  height: 720,
+            },
             // audio: true,
             // audio: {
             //       echoCancellation: true,
@@ -64,6 +65,7 @@ export function RecordingView(props: IRecordingViewProps) {
       useEffect(() => {
 
             if (finished) {
+                  props.setDuration(recordingTimer * 100)
                   let allVideoChunks: any = []
                   console.log(videos)
                   videos.forEach((vid) => {
@@ -72,16 +74,7 @@ export function RecordingView(props: IRecordingViewProps) {
                   })
 
                   console.log(allVideoChunks)
-
-                  const blob = new Blob(allVideoChunks, {
-                        type: 'video/webm'
-                  })
-                  const blobUrl = URL.createObjectURL(blob)
-                  const videoFile = new File(allVideoChunks, "video", { type: allVideoChunks[0].type, lastModified: Date.now() });
-
-                  videoElementRef.current!.srcObject = null
-                  videoElementRef.current!.src = blobUrl
-                  videoElementRef.current!.muted = false
+                  const videoFile = new File(allVideoChunks, "video.mkv", { type: allVideoChunks[0].type, lastModified: Date.now() });
 
                   // const uploadVideo = async () => {
                   //       const [{ result }] = await Networking.UploadFilesToServer(videoFile);
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index aa7622736..92834fb07 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -290,6 +290,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                   console.log("x: ", pt[0], "y: ", pt[1]);
                   recording.x = pt[0];
                   recording.y = pt[1];
+                  console.log(Doc.UserDoc().myOverlayDocs)
+                  // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, this.rootDoc);
                   Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording);
             }
 
-- 
cgit v1.2.3-70-g09d2