Revert "Revert "Merge branch 'master' into temporalmedia-mehek""

This reverts commit 3415f672292bb349c7d9ec66564933a746ee3b25.

1 files changed, 61 insertions, 0 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
new file mode 100644
index 000000000..10393624b
--- /dev/null
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -0,0 +1,61 @@
+import { action, observable } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { 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";
+import { RecordingApi } from "../../../util/RecordingApi";
+import { Doc, FieldsSym } from "../../../../fields/Doc";
+import { Id } from "../../../../fields/FieldSymbols";
+
+
+@observer
+export class RecordingBox extends ViewBoxBaseComponent() {
+
+    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(RecordingBox, fieldKey); }
+
+    private _ref: React.RefObject<HTMLDivElement> = React.createRef();
+
+    constructor(props: any) {
+        super(props);
+    }
+
+    componentDidMount() {
+        console.log("set native width and height")
+        Doc.SetNativeWidth(this.dataDoc, 1280);
+        Doc.SetNativeHeight(this.dataDoc, 720);
+    }
+
+    @observable result: Upload.FileInformation | undefined = undefined
+    @observable videoDuration: number | undefined = undefined
+
+    @action
+    setVideoDuration = (duration: number) => {
+        this.videoDuration = duration
+    }
+
+    @action
+    setResult = (info: Upload.FileInformation, trackScreen: boolean) => {
+        this.result = info
+        this.dataDoc.type = DocumentType.VID;
+        this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
+
+        this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
+        this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client);
+        this.dataDoc[this.fieldKey + "-recorded"] = true;
+        // stringify the presenation and store it
+        if (trackScreen) {
+            this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(RecordingApi.Instance.clear());
+        }
+    }
+
+    render() {
+        return <div className="recordingBox" ref={this._ref}>
+            {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={Doc.GetProto(this.rootDoc)[Id]} />}
+        </div>;
+    }
+}