From a5da5e6246a6fd7500fed8b206fc3540be509eab Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Fri, 22 Apr 2022 19:53:44 -0400
Subject: uploading not working (cannot find ffmpeg)

---
 .../views/nodes/RecordingBox/RecordingBox.tsx      | 37 +++++++++++++++-------
 .../views/nodes/RecordingBox/RecordingView.scss    |  5 +--
 .../views/nodes/RecordingBox/RecordingView.tsx     | 28 ++++++++++++----
 3 files changed, 51 insertions(+), 19 deletions(-)

(limited to 'src/client/views/nodes/RecordingBox')

diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 6d444d324..1e17e2ddd 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -1,24 +1,39 @@
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
+import { AudioField } from "../../../../fields/URLField";
+import { Upload } from "../../../../server/SharedMediaTypes";
 import { ViewBoxBaseComponent } from "../../DocComponent";
 import { FieldView } from "../FieldView";
+import { VideoBox } from "../VideoBox";
 import { RecordingView } from './RecordingView';
 
 
 @observer
-export class RecordingBox extends ViewBoxBaseComponent(){
+export class RecordingBox extends ViewBoxBaseComponent() {
 
-    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(RecordingBox, fieldKey); }
+      public static LayoutString(fieldKey: string) { return FieldView.LayoutString(RecordingBox, fieldKey); }
 
-    private _ref: React.RefObject<HTMLDivElement> = React.createRef();
+      private _ref: React.RefObject<HTMLDivElement> = React.createRef();
 
-    constructor(props: any) {
-        super(props);
-    }
+      constructor(props: any) {
+            super(props);
+      }
 
-    render() {
-        return <div className="recordingBox" ref={this._ref}>
-            <RecordingView/>
-        </div>;
-    }
+      @observable result: Upload.FileInformation | undefined = undefined
+
+      @action
+      setResult = (info: Upload.FileInformation) => {
+            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);
+      }
+
+      render() {
+            return <div className="recordingBox" ref={this._ref}>
+                  {!this.result ? <RecordingView setResult={this.setResult} /> :
+                        <p>video box</p>}
+            </div>;
+      }
 }
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.scss b/src/client/views/nodes/RecordingBox/RecordingView.scss
index e4d971d51..1fea231b7 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.scss
+++ b/src/client/views/nodes/RecordingBox/RecordingView.scss
@@ -15,6 +15,7 @@ button {
       height: 100%;
       width: 100%;
       display: flex;
+      pointer-events: all;
 }
 
 .video-wrapper {
@@ -157,8 +158,8 @@ button {
             background-color: red;
             border: 0px;
             border-radius: 10%;
-            height: 80%;
-            width: 80%;
+            height: 70%;
+            width: 70%;
             align-self: center;
             margin: 0;
 
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 905f87a1a..0d24f3c74 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -5,6 +5,8 @@ import { ProgressBar } from "./ProgressBar"
 import { MdBackspace } from 'react-icons/md';
 import { FaCheckCircle } from 'react-icons/fa';
 import { IconContext } from "react-icons";
+import { Networking } from '../../../Network';
+import { Upload } from '../../../../server/SharedMediaTypes';
 
 
 enum RecordingStatus {
@@ -18,9 +20,14 @@ interface VideoSegment {
       endTime: number
 }
 
+interface IRecordingViewProps {
+      setResult: (info: Upload.FileInformation) => void
+}
+
 const MAXTIME = 1000;
 
-export function RecordingView() {
+export function RecordingView(props: IRecordingViewProps) {
+      const { setResult } = props
 
       const [recording, setRecording] = useState(false);
       const recordingTimerRef = useRef<number>(0);
@@ -68,18 +75,27 @@ export function RecordingView() {
                         type: 'video/webm'
                   })
                   const blobUrl = URL.createObjectURL(blob)
+                  const videoFile = new File([blob], "video", { lastModified: new Date().getDate() });
 
                   videoElementRef.current!.srcObject = null
                   videoElementRef.current!.src = blobUrl
                   videoElementRef.current!.muted = false
 
-                  // upload data
-                  //       const [{ result }] = await Networking.UploadFilesToServer(e.data);
-                  // console.log("Data result", result);
-                  // if (!(result instanceof Error)) {
-                  //     this.props.Document[this.fieldKey] = new AudioField(result.accessPaths.agnostic.client);
+                  // const uploadVideo = async () => {
+                  //       const [{ result }] = await Networking.UploadFilesToServer(videoFile);
+                  //       console.log("upload result", result);
+                  //       if (!(result instanceof Error)) {
+                  //             setResult(result)
+                  //       }
                   // }
 
+                  Networking.UploadFilesToServer(allVideoChunks)
+                        .then((data) => {
+                              console.log(data)
+                        })
+                  // uploadVideo()
+
+
                   // change to one recording box
             }
 
-- 
cgit v1.2.3-70-g09d2