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/RecordingView.tsx     | 28 +++++++++++++++++-----
 1 file changed, 22 insertions(+), 6 deletions(-)

(limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')

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


From ddcab916cf125817bb532b7c34617e50bcc3840d Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Tue, 26 Apr 2022 01:39:51 -0400
Subject: feat: uploading works

---
 src/client/Network.ts                              |   3 -
 .../views/nodes/RecordingBox/RecordingBox.tsx      |   9 +-
 .../views/nodes/RecordingBox/RecordingView.tsx     |  27 +-
 src/client/views/nodes/ScreenshotBox.tsx           | 429 +++++++++++----------
 4 files changed, 240 insertions(+), 228 deletions(-)

(limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')

diff --git a/src/client/Network.ts b/src/client/Network.ts
index 58f356c90..3597e7b2b 100644
--- a/src/client/Network.ts
+++ b/src/client/Network.ts
@@ -19,7 +19,6 @@ 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) {
@@ -34,8 +33,6 @@ export namespace Networking {
                   body: formData
             };
             const response = await fetch("/uploadFormData", parameters);
-            console.log(response)
-            // console.log(response.json())
             return response.json();
       }
 
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
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index dbb567d3a..0c7d7dc31 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -26,7 +26,7 @@ import { FormattedTextBox } from "./formattedText/FormattedTextBox";
 import "./ScreenshotBox.scss";
 import { VideoBox } from "./VideoBox";
 declare class MediaRecorder {
-    constructor(e: any, options?: any);  // whatever MediaRecorder has
+      constructor(e: any, options?: any);  // whatever MediaRecorder has
 }
 
 // interface VideoTileProps {
@@ -107,225 +107,226 @@ declare class MediaRecorder {
 
 @observer
 export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() {
-    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ScreenshotBox, fieldKey); }
-    private _audioRec: any;
-    private _videoRec: any;
-    @observable private _videoRef: HTMLVideoElement | null = null;
-    @observable _screenCapture = false;
-    @computed get recordingStart() { return Cast(this.dataDoc[this.props.fieldKey + "-recordingStart"], DateField)?.date.getTime(); }
+      public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ScreenshotBox, fieldKey); }
+      private _audioRec: any;
+      private _videoRec: any;
+      @observable private _videoRef: HTMLVideoElement | null = null;
+      @observable _screenCapture = false;
+      @computed get recordingStart() { return Cast(this.dataDoc[this.props.fieldKey + "-recordingStart"], DateField)?.date.getTime(); }
 
-    constructor(props: any) {
-        super(props);
-        if (this.rootDoc.videoWall) {
-            this.rootDoc.nativeWidth = undefined;
-            this.rootDoc.nativeHeight = undefined;
-            this.layoutDoc.popOff = 0;
-            this.layoutDoc.popOut = 1;
-        } else {
-            this.setupDictation();
-        }
-    }
-    getAnchor = () => {
-        const startTime = Cast(this.layoutDoc._currentTimecode, "number", null) || (this._videoRec ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined);
-        return CollectionStackedTimeline.createAnchor(this.rootDoc, this.dataDoc, this.annotationKey, "_timecodeToShow", "_timecodeToHide",
-            startTime, startTime === undefined ? undefined : startTime + 3)
-            || this.rootDoc;
-    }
+      constructor(props: any) {
+            super(props);
+            if (this.rootDoc.videoWall) {
+                  this.rootDoc.nativeWidth = undefined;
+                  this.rootDoc.nativeHeight = undefined;
+                  this.layoutDoc.popOff = 0;
+                  this.layoutDoc.popOut = 1;
+            } else {
+                  this.setupDictation();
+            }
+      }
+      getAnchor = () => {
+            const startTime = Cast(this.layoutDoc._currentTimecode, "number", null) || (this._videoRec ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined);
+            return CollectionStackedTimeline.createAnchor(this.rootDoc, this.dataDoc, this.annotationKey, "_timecodeToShow", "_timecodeToHide",
+                  startTime, startTime === undefined ? undefined : startTime + 3)
+                  || this.rootDoc;
+      }
 
-    videoLoad = () => {
-        const aspect = this._videoRef!.videoWidth / this._videoRef!.videoHeight;
-        const nativeWidth = Doc.NativeWidth(this.layoutDoc);
-        const nativeHeight = Doc.NativeHeight(this.layoutDoc);
-        if (!nativeWidth || !nativeHeight) {
-            if (!nativeWidth) Doc.SetNativeWidth(this.dataDoc, 1200);
-            Doc.SetNativeHeight(this.dataDoc, (nativeWidth || 1200) / aspect);
-            this.layoutDoc._height = (this.layoutDoc[WidthSym]() || 0) / aspect;
-        }
-    }
+      videoLoad = () => {
+            const aspect = this._videoRef!.videoWidth / this._videoRef!.videoHeight;
+            const nativeWidth = Doc.NativeWidth(this.layoutDoc);
+            const nativeHeight = Doc.NativeHeight(this.layoutDoc);
+            if (!nativeWidth || !nativeHeight) {
+                  if (!nativeWidth) Doc.SetNativeWidth(this.dataDoc, 1200);
+                  Doc.SetNativeHeight(this.dataDoc, (nativeWidth || 1200) / aspect);
+                  this.layoutDoc._height = (this.layoutDoc[WidthSym]() || 0) / aspect;
+            }
+      }
 
-    componentDidMount() {
-        this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = 0;
-        this.props.setContentView?.(this); // this tells the DocumentView that this ScreenshotBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
-        // this.rootDoc.videoWall && reaction(() => ({ width: this.props.PanelWidth(), height: this.props.PanelHeight() }),
-        //     ({ width, height }) => {
-        //         if (this._camera) {
-        //             const angle = -Math.abs(1 - width / height);
-        //             const xz = [0, (this._numScreens - 2) / Math.abs(1 + angle)];
-        //             this._camera.position.set(this._numScreens / 2 + xz[1] * Math.sin(angle), this._numScreens / 2, xz[1] * Math.cos(angle));
-        //             this._camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0);
-        //             (this._camera as any).updateProjectionMatrix();
-        //         }
-        //     });
-    }
-    componentWillUnmount() {
-        const ind = DocUtils.ActiveRecordings.indexOf(this);
-        ind !== -1 && (DocUtils.ActiveRecordings.splice(ind, 1));
-    }
+      componentDidMount() {
+            this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = 0;
+            this.props.setContentView?.(this); // this tells the DocumentView that this ScreenshotBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
+            // this.rootDoc.videoWall && reaction(() => ({ width: this.props.PanelWidth(), height: this.props.PanelHeight() }),
+            //     ({ width, height }) => {
+            //         if (this._camera) {
+            //             const angle = -Math.abs(1 - width / height);
+            //             const xz = [0, (this._numScreens - 2) / Math.abs(1 + angle)];
+            //             this._camera.position.set(this._numScreens / 2 + xz[1] * Math.sin(angle), this._numScreens / 2, xz[1] * Math.cos(angle));
+            //             this._camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0);
+            //             (this._camera as any).updateProjectionMatrix();
+            //         }
+            //     });
+      }
+      componentWillUnmount() {
+            const ind = DocUtils.ActiveRecordings.indexOf(this);
+            ind !== -1 && (DocUtils.ActiveRecordings.splice(ind, 1));
+      }
 
-    specificContextMenu = (e: React.MouseEvent): void => {
-        const subitems = [{ description: "Screen Capture", event: this.toggleRecording, icon: "expand-arrows-alt" as any }];
-        ContextMenu.Instance.addItem({ description: "Options...", subitems, icon: "video" });
-    }
+      specificContextMenu = (e: React.MouseEvent): void => {
+            const subitems = [{ description: "Screen Capture", event: this.toggleRecording, icon: "expand-arrows-alt" as any }];
+            ContextMenu.Instance.addItem({ description: "Options...", subitems, icon: "video" });
+      }
 
-    @computed get content() {
-        if (this.rootDoc.videoWall) return (null);
-        return <video className={"videoBox-content"} key="video"
-            ref={r => {
-                this._videoRef = r;
-                setTimeout(() => {
-                    if (this.rootDoc.mediaState === "pendingRecording" && this._videoRef) {
-                        this.toggleRecording();
-                    }
-                }, 100);
-            }}
-            autoPlay={this._screenCapture}
-            style={{ width: this._screenCapture ? "100%" : undefined, height: this._screenCapture ? "100%" : undefined }}
-            onCanPlay={this.videoLoad}
-            controls={true}
-            onClick={e => e.preventDefault()}>
-            <source type="video/mp4" />
-            Not supported.
-        </video>;
-    }
+      @computed get content() {
+            if (this.rootDoc.videoWall) return (null);
+            return <video className={"videoBox-content"} key="video"
+                  ref={r => {
+                        this._videoRef = r;
+                        setTimeout(() => {
+                              if (this.rootDoc.mediaState === "pendingRecording" && this._videoRef) {
+                                    this.toggleRecording();
+                              }
+                        }, 100);
+                  }}
+                  autoPlay={this._screenCapture}
+                  style={{ width: this._screenCapture ? "100%" : undefined, height: this._screenCapture ? "100%" : undefined }}
+                  onCanPlay={this.videoLoad}
+                  controls={true}
+                  onClick={e => e.preventDefault()}>
+                  <source type="video/mp4" />
+                  Not supported.
+            </video>;
+      }
 
-    // _numScreens = 5;
-    // _camera: Camera | undefined;
-    // @observable _raised = [] as { coord: Vector2, off: Vector3 }[];
-    // @action setRaised = (r: { coord: Vector2, off: Vector3 }[]) => this._raised = r;
-    @computed get threed() {
-        // if (this.rootDoc.videoWall) {
-        //     const screens: any[] = [];
-        //     const colors = ["yellow", "red", "orange", "brown", "maroon", "gray"];
-        //     let count = 0;
-        //     numberRange(this._numScreens).forEach(x => numberRange(this._numScreens).forEach(y => screens.push(
-        //         <VideoTile rootDoc={this.rootDoc} color={colors[count++ % colors.length]} x={x} y={y} raised={this._raised} setRaised={this.setRaised} />)));
-        //     return <Canvas key="canvas" id="CANCAN" style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }} gl={{ antialias: false }} colorManagement={false} onCreated={props => {
-        //         this._camera = props.camera;
-        //         props.camera.position.set(this._numScreens / 2, this._numScreens / 2, this._numScreens - 2);
-        //         props.camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0);
-        //     }}>
-        //         {/* <ambientLight />*/}
-        //         <pointLight position={[10, 10, 10]} intensity={1} />
-        //         {screens}
-        //     </ Canvas>;
-        // }
-        return (null);
-    }
-    toggleRecording = async () => {
-        if (!this._screenCapture) {
-            this._audioRec = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true }));
-            const aud_chunks: any = [];
-            this._audioRec.ondataavailable = (e: any) => aud_chunks.push(e.data);
-            this._audioRec.onstop = async (e: any) => {
-                const [{ result }] = await Networking.UploadFilesToServer(aud_chunks);
-                if (!(result instanceof Error)) {
-                    this.dataDoc[this.props.fieldKey + "-audio"] = new AudioField(result.accessPaths.agnostic.client);
-                }
-            };
-            this._videoRef!.srcObject = await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
-            this._videoRec = new MediaRecorder(this._videoRef!.srcObject);
-            const vid_chunks: any = [];
-            this._videoRec.onstart = () => this.dataDoc[this.props.fieldKey + "-recordingStart"] = new DateField(new Date());
-            this._videoRec.ondataavailable = (e: any) => vid_chunks.push(e.data);
-            this._videoRec.onstop = async (e: any) => {
-                const file = new File(vid_chunks, `${this.rootDoc[Id]}.mkv`, { type: vid_chunks[0].type, lastModified: Date.now() });
-                const [{ result }] = await Networking.UploadFilesToServer(file);
-                this.dataDoc[this.fieldKey + "-duration"] = (new Date().getTime() - this.recordingStart!) / 1000;
-                if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
-                    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(result.accessPaths.agnostic.client);
-                } else alert("video conversion failed");
-            };
-            this._audioRec.start();
-            this._videoRec.start();
-            runInAction(() => {
-                this._screenCapture = true;
-                this.dataDoc.mediaState = "recording";
-            });
-            DocUtils.ActiveRecordings.push(this);
-        } else {
-            this._audioRec?.stop();
-            this._videoRec?.stop();
-            runInAction(() => {
-                this._screenCapture = false;
-                this.dataDoc.mediaState = "paused";
-            });
-            const ind = DocUtils.ActiveRecordings.indexOf(this);
-            ind !== -1 && (DocUtils.ActiveRecordings.splice(ind, 1));
+      // _numScreens = 5;
+      // _camera: Camera | undefined;
+      // @observable _raised = [] as { coord: Vector2, off: Vector3 }[];
+      // @action setRaised = (r: { coord: Vector2, off: Vector3 }[]) => this._raised = r;
+      @computed get threed() {
+            // if (this.rootDoc.videoWall) {
+            //     const screens: any[] = [];
+            //     const colors = ["yellow", "red", "orange", "brown", "maroon", "gray"];
+            //     let count = 0;
+            //     numberRange(this._numScreens).forEach(x => numberRange(this._numScreens).forEach(y => screens.push(
+            //         <VideoTile rootDoc={this.rootDoc} color={colors[count++ % colors.length]} x={x} y={y} raised={this._raised} setRaised={this.setRaised} />)));
+            //     return <Canvas key="canvas" id="CANCAN" style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }} gl={{ antialias: false }} colorManagement={false} onCreated={props => {
+            //         this._camera = props.camera;
+            //         props.camera.position.set(this._numScreens / 2, this._numScreens / 2, this._numScreens - 2);
+            //         props.camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0);
+            //     }}>
+            //         {/* <ambientLight />*/}
+            //         <pointLight position={[10, 10, 10]} intensity={1} />
+            //         {screens}
+            //     </ Canvas>;
+            // }
+            return (null);
+      }
+      toggleRecording = async () => {
+            if (!this._screenCapture) {
+                  this._audioRec = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true }));
+                  const aud_chunks: any = [];
+                  this._audioRec.ondataavailable = (e: any) => aud_chunks.push(e.data);
+                  this._audioRec.onstop = async (e: any) => {
+                        const [{ result }] = await Networking.UploadFilesToServer(aud_chunks);
+                        if (!(result instanceof Error)) {
+                              this.dataDoc[this.props.fieldKey + "-audio"] = new AudioField(result.accessPaths.agnostic.client);
+                        }
+                  };
+                  this._videoRef!.srcObject = await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
+                  this._videoRec = new MediaRecorder(this._videoRef!.srcObject);
+                  const vid_chunks: any = [];
+                  this._videoRec.onstart = () => this.dataDoc[this.props.fieldKey + "-recordingStart"] = new DateField(new Date());
+                  this._videoRec.ondataavailable = (e: any) => vid_chunks.push(e.data);
+                  this._videoRec.onstop = async (e: any) => {
+                        console.log("screenshotbox: upload")
+                        const file = new File(vid_chunks, `${this.rootDoc[Id]}.mkv`, { type: vid_chunks[0].type, lastModified: Date.now() });
+                        const [{ result }] = await Networking.UploadFilesToServer(file);
+                        this.dataDoc[this.fieldKey + "-duration"] = (new Date().getTime() - this.recordingStart!) / 1000;
+                        if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
+                              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(result.accessPaths.agnostic.client);
+                        } else alert("video conversion failed");
+                  };
+                  this._audioRec.start();
+                  this._videoRec.start();
+                  runInAction(() => {
+                        this._screenCapture = true;
+                        this.dataDoc.mediaState = "recording";
+                  });
+                  DocUtils.ActiveRecordings.push(this);
+            } else {
+                  this._audioRec?.stop();
+                  this._videoRec?.stop();
+                  runInAction(() => {
+                        this._screenCapture = false;
+                        this.dataDoc.mediaState = "paused";
+                  });
+                  const ind = DocUtils.ActiveRecordings.indexOf(this);
+                  ind !== -1 && (DocUtils.ActiveRecordings.splice(ind, 1));
 
-            CaptureManager.Instance.open(this.rootDoc);
-        }
-    }
+                  CaptureManager.Instance.open(this.rootDoc);
+            }
+      }
 
-    setupDictation = () => {
-        if (this.dataDoc[this.fieldKey + "-dictation"]) return;
-        const dictationText = CurrentUserUtils.GetNewTextDoc("dictation",
-            NumCast(this.rootDoc.x), NumCast(this.rootDoc.y) + NumCast(this.layoutDoc._height) + 10,
-            NumCast(this.layoutDoc._width), 2 * NumCast(this.layoutDoc._height));
-        dictationText._autoHeight = false;
-        const dictationTextProto = Doc.GetProto(dictationText);
-        dictationTextProto.recordingSource = this.dataDoc;
-        dictationTextProto.recordingStart = ComputedField.MakeFunction(`self.recordingSource["${this.props.fieldKey}-recordingStart"]`);
-        dictationTextProto.mediaState = ComputedField.MakeFunction("self.recordingSource.mediaState");
-        this.dataDoc[this.fieldKey + "-dictation"] = dictationText;
-    }
-    contentFunc = () => [this.threed, this.content];
-    videoPanelHeight = () => NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"], this.layoutDoc[HeightSym]()) / NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"], this.layoutDoc[WidthSym]()) * this.props.PanelWidth();
-    formattedPanelHeight = () => Math.max(0, this.props.PanelHeight() - this.videoPanelHeight());
-    render() {
-        TraceMobx();
-        return <div className="videoBox" onContextMenu={this.specificContextMenu} style={{ width: "100%", height: "100%" }} >
-            <div className="videoBox-viewer" >
-                <div style={{ position: "relative", height: this.videoPanelHeight() }}>
-                    <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
-                        PanelHeight={this.videoPanelHeight}
-                        PanelWidth={this.props.PanelWidth}
-                        focus={this.props.focus}
-                        isSelected={this.props.isSelected}
-                        isAnnotationOverlay={true}
-                        select={emptyFunction}
-                        isContentActive={returnFalse}
-                        scaling={returnOne}
-                        whenChildContentsActiveChanged={emptyFunction}
-                        removeDocument={returnFalse}
-                        moveDocument={returnFalse}
-                        addDocument={returnFalse}
-                        CollectionView={undefined}
-                        ScreenToLocalTransform={this.props.ScreenToLocalTransform}
-                        renderDepth={this.props.renderDepth + 1}
-                        ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
-                        {this.contentFunc}
-                    </CollectionFreeFormView></div>
-                <div style={{ position: "relative", height: this.formattedPanelHeight() }}>
-                    {!(this.dataDoc[this.fieldKey + "-dictation"] instanceof Doc) ? (null) :
-                        <FormattedTextBox {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
-                            Document={this.dataDoc[this.fieldKey + "-dictation"]}
-                            fieldKey={"text"}
-                            PanelHeight={this.formattedPanelHeight}
-                            isAnnotationOverlay={true}
-                            select={emptyFunction}
-                            isContentActive={emptyFunction}
-                            scaling={returnOne}
-                            xPadding={25}
-                            yPadding={10}
-                            whenChildContentsActiveChanged={emptyFunction}
-                            removeDocument={returnFalse}
-                            moveDocument={returnFalse}
-                            addDocument={returnFalse}
-                            CollectionView={undefined}
-                            renderDepth={this.props.renderDepth + 1}
-                            ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
-                        </FormattedTextBox>}
-                </div>
-            </div>
-            {!this.props.isSelected() ? (null) : <div className="screenshotBox-uiButtons">
-                <div className="screenshotBox-recorder" key="snap" onPointerDown={this.toggleRecording} >
-                    <FontAwesomeIcon icon="file" size="lg" />
-                </div>
-            </div>}
-        </div >;
-    }
+      setupDictation = () => {
+            if (this.dataDoc[this.fieldKey + "-dictation"]) return;
+            const dictationText = CurrentUserUtils.GetNewTextDoc("dictation",
+                  NumCast(this.rootDoc.x), NumCast(this.rootDoc.y) + NumCast(this.layoutDoc._height) + 10,
+                  NumCast(this.layoutDoc._width), 2 * NumCast(this.layoutDoc._height));
+            dictationText._autoHeight = false;
+            const dictationTextProto = Doc.GetProto(dictationText);
+            dictationTextProto.recordingSource = this.dataDoc;
+            dictationTextProto.recordingStart = ComputedField.MakeFunction(`self.recordingSource["${this.props.fieldKey}-recordingStart"]`);
+            dictationTextProto.mediaState = ComputedField.MakeFunction("self.recordingSource.mediaState");
+            this.dataDoc[this.fieldKey + "-dictation"] = dictationText;
+      }
+      contentFunc = () => [this.threed, this.content];
+      videoPanelHeight = () => NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"], this.layoutDoc[HeightSym]()) / NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"], this.layoutDoc[WidthSym]()) * this.props.PanelWidth();
+      formattedPanelHeight = () => Math.max(0, this.props.PanelHeight() - this.videoPanelHeight());
+      render() {
+            TraceMobx();
+            return <div className="videoBox" onContextMenu={this.specificContextMenu} style={{ width: "100%", height: "100%" }} >
+                  <div className="videoBox-viewer" >
+                        <div style={{ position: "relative", height: this.videoPanelHeight() }}>
+                              <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+                                    PanelHeight={this.videoPanelHeight}
+                                    PanelWidth={this.props.PanelWidth}
+                                    focus={this.props.focus}
+                                    isSelected={this.props.isSelected}
+                                    isAnnotationOverlay={true}
+                                    select={emptyFunction}
+                                    isContentActive={returnFalse}
+                                    scaling={returnOne}
+                                    whenChildContentsActiveChanged={emptyFunction}
+                                    removeDocument={returnFalse}
+                                    moveDocument={returnFalse}
+                                    addDocument={returnFalse}
+                                    CollectionView={undefined}
+                                    ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                                    renderDepth={this.props.renderDepth + 1}
+                                    ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
+                                    {this.contentFunc}
+                              </CollectionFreeFormView></div>
+                        <div style={{ position: "relative", height: this.formattedPanelHeight() }}>
+                              {!(this.dataDoc[this.fieldKey + "-dictation"] instanceof Doc) ? (null) :
+                                    <FormattedTextBox {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+                                          Document={this.dataDoc[this.fieldKey + "-dictation"]}
+                                          fieldKey={"text"}
+                                          PanelHeight={this.formattedPanelHeight}
+                                          isAnnotationOverlay={true}
+                                          select={emptyFunction}
+                                          isContentActive={emptyFunction}
+                                          scaling={returnOne}
+                                          xPadding={25}
+                                          yPadding={10}
+                                          whenChildContentsActiveChanged={emptyFunction}
+                                          removeDocument={returnFalse}
+                                          moveDocument={returnFalse}
+                                          addDocument={returnFalse}
+                                          CollectionView={undefined}
+                                          renderDepth={this.props.renderDepth + 1}
+                                          ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
+                                    </FormattedTextBox>}
+                        </div>
+                  </div>
+                  {!this.props.isSelected() ? (null) : <div className="screenshotBox-uiButtons">
+                        <div className="screenshotBox-recorder" key="snap" onPointerDown={this.toggleRecording} >
+                              <FontAwesomeIcon icon="file" size="lg" />
+                        </div>
+                  </div>}
+            </div >;
+      }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 73ed47a8fbc6c4827c5d553e385396661d940787 Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Wed, 27 Apr 2022 15:05:44 -0400
Subject: recording only has 0 second

---
 .../views/nodes/RecordingBox/RecordingView.tsx     | 99 ++++++++++------------
 1 file changed, 47 insertions(+), 52 deletions(-)

(limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 3a79f790f..16f750e14 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -15,8 +15,8 @@ enum RecordingStatus {
       Paused
 }
 
-interface VideoSegment {
-      chunks: any[],
+interface MediaSegment {
+      videoChunks: any[],
       endTime: number
 }
 
@@ -36,10 +36,10 @@ export function RecordingView(props: IRecordingViewProps) {
       const [speed, setSpeed] = useState(1);
       const [muted, setMuted] = useState(false);
 
-      const [videos, setVideos] = useState<VideoSegment[]>([]);
-      // const [videos, setVideos] = useState<string[]>([]);
+      const [videos, setVideos] = useState<MediaSegment[]>([]);
       const [currentVid, setCurrentVid] = useState<number>(0);
-      const recorder = useRef<MediaRecorder | null>(null);
+      const videoRecorder = useRef<MediaRecorder | null>(null);
+      const audioRecorder = useRef<MediaRecorder | null>(null);
       const videoElementRef = useRef<HTMLVideoElement | null>(null);
 
       const [finished, setFinished] = useState<Boolean>(false)
@@ -47,10 +47,13 @@ export function RecordingView(props: IRecordingViewProps) {
 
 
       const DEFAULT_MEDIA_CONSTRAINTS = {
-            video: {
-                  width: 1280,
-                  height: 720,
-            },
+            video: true,
+            // audio: true
+            // video: {
+            //       width: 1280,
+            //       height: 720,
+            // },
+            // audio: true,
             // audio: {
             //       echoCancellation: true,
             //       noiseSuppression: true,
@@ -64,8 +67,8 @@ export function RecordingView(props: IRecordingViewProps) {
                   let allVideoChunks: any = []
                   console.log(videos)
                   videos.forEach((vid) => {
-                        console.log(vid.chunks)
-                        allVideoChunks = allVideoChunks.concat(vid.chunks)
+                        console.log(vid.videoChunks)
+                        allVideoChunks = allVideoChunks.concat(vid.videoChunks)
                   })
 
                   console.log(allVideoChunks)
@@ -119,21 +122,9 @@ export function RecordingView(props: IRecordingViewProps) {
 
       useEffect(() => {
             // get access to the video element on every render
-            // videoElement = document.getElementById('video') as HTMLVideoElement;
             videoElementRef.current = document.getElementById('video') as HTMLVideoElement;
       })
 
-      // useEffect(() => {
-      //       if (playing) {
-      //             videoElement!.srcObject = null
-      //             // videoElement!.src = videos[currentVid].url
-      //             videoElement!.muted = false
-      //             videoElement!.play()
-      //       } else {
-      //             videoElement!.pause();
-      //       }
-      // }, [playing, videoElement]);
-
       useEffect(() => {
             let interval: any = null;
             if (recording) {
@@ -157,8 +148,6 @@ 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
@@ -169,80 +158,86 @@ export function RecordingView(props: IRecordingViewProps) {
 
       const record = async () => {
             const stream = await startShowingStream();
-            recorder.current = new MediaRecorder(stream)
+            videoRecorder.current = new MediaRecorder(stream)
+            // audioRecorder.current = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true }));
 
             // temporary chunks of video
-            let chunks: any = []
-            recorder.current.ondataavailable = (event: any) => {
-                  // store the video chunks as it is recording
-                  console.log("data available")
+            let videoChunks: any = []
+            // let audioChunks: any = []
+
+            videoRecorder.current.ondataavailable = (event: any) => {
                   if (event.data.size > 0) {
-                        chunks.push(event.data)
+                        videoChunks.push(event.data)
                   }
             }
 
-            recorder.current.onstart = (event: any) => {
-                  console.log("on start")
+            // audioRecorder.current.ondataavailable = (event: any) => {
+            //       if (event.data.size > 0) {
+            //             audioChunks.push(event.data)
+            //       }
+            // }
+
+            videoRecorder.current.onstart = (event: any) => {
                   setRecording(true);
             }
 
-            recorder.current.onstop = () => {
+            videoRecorder.current.onstop = () => {
                   // if we have a last portion
-                  if (chunks.length > 1) {
+                  if (videoChunks.length > 1) {
                         // append the current portion to the video pieces
-                        setVideos(videos => [...videos, { chunks: chunks, endTime: recordingTimerRef.current }])
+                        setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
                   }
 
                   // reset the temporary chunks
-                  chunks = []
+                  videoChunks = []
                   setRecording(false);
                   setFinished(true);
             }
 
             // recording paused
-            recorder.current.onpause = (event: any) => {
+            videoRecorder.current.onpause = (event: any) => {
                   // append the current portion to the video pieces
-                  console.log(chunks)
-                  setVideos(videos => [...videos, { chunks: chunks, endTime: recordingTimerRef.current }])
+                  console.log(videoChunks)
+                  setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
 
                   // reset the temporary chunks
-                  chunks = []
+                  videoChunks = []
                   setRecording(false);
             }
 
-            recorder.current.onresume = async (event: any) => {
+            videoRecorder.current.onresume = async (event: any) => {
                   console.log(event)
                   await startShowingStream();
                   setRecording(true);
             }
 
-            recorder.current.start(200)
+            videoRecorder.current.start(200)
       }
 
 
       const stop = () => {
-            if (recorder.current) {
-                  if (recorder.current.state !== "inactive") {
-                        recorder.current.stop();
+            if (videoRecorder.current) {
+                  if (videoRecorder.current.state !== "inactive") {
+                        videoRecorder.current.stop();
                         // recorder.current.stream.getTracks().forEach((track: any) => track.stop())
                   }
             }
       }
 
       const pause = () => {
-            if (recorder.current) {
-                  if (recorder.current.state === "recording") {
-                        recorder.current.pause();
+            if (videoRecorder.current) {
+                  if (videoRecorder.current.state === "recording") {
+                        videoRecorder.current.pause();
                   }
             }
       }
 
       const startOrResume = () => {
             console.log('[RecordingView.tsx] startOrResume')
-            if (!recorder.current || recorder.current.state === "inactive") {
+            if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
                   record();
-            } else if (recorder.current.state === "paused") {
-                  recorder.current.resume();
+            } else if (videoRecorder.current.state === "paused") {
+                  videoRecorder.current.resume();
             }
       }
 
-- 
cgit v1.2.3-70-g09d2


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

---
 package-lock.json                                  | 45 ++++++++++++++++++++--
 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 +
 5 files changed, 65 insertions(+), 20 deletions(-)

(limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')

diff --git a/package-lock.json b/package-lock.json
index 0f045c546..684caa92e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -768,9 +768,9 @@
             "integrity": "sha512-BJJH2OXdUreVNdfTCuuO2oHoqBmXSnXtIQvbRYj3LwZ27nnzfY87D/KEUPXnCXj/56kEeVlBbvAbcKKeMRmkSw==",
             "dependencies": {
                 "@typescript/lib-dom": {
-                    "version": "npm:@types/web@0.0.61",
-                    "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.61.tgz",
-                    "integrity": "sha512-lQ4M3OSh8eFj55fz1RJsLhCubET/7duOXoKcxVaUXYXyxikD9BA+WWrqAn5CjJxrc82b7zFY4OCVIeVdkPLaGg=="
+                    "version": "npm:@types/web@0.0.62",
+                    "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.62.tgz",
+                    "integrity": "sha512-NI9oDqfsnKHY/VI+4Uomw976LzopMphE2cCAv8cNNdd3LyA2aUolkipIDR5idnyX6Amq5oo2Lbdtj826h7gFjA=="
                 }
             }
         },
@@ -4775,6 +4775,16 @@
             "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
             "dev": true
         },
+        "d": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+            "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+            "dev": true,
+            "requires": {
+                "es5-ext": "^0.10.50",
+                "type": "^1.0.1"
+            }
+        },
         "d3-array": {
             "version": "2.12.1",
             "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
@@ -5882,6 +5892,28 @@
                 "is-symbol": "^1.0.2"
             }
         },
+        "es5-ext": {
+            "version": "0.10.61",
+            "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.61.tgz",
+            "integrity": "sha512-yFhIqQAzu2Ca2I4SE2Au3rxVfmohU9Y7wqGR+s7+H7krk26NXhIRAZDgqd6xqjCEFUomDEA3/Bo/7fKmIkW1kA==",
+            "dev": true,
+            "requires": {
+                "es6-iterator": "^2.0.3",
+                "es6-symbol": "^3.1.3",
+                "next-tick": "^1.1.0"
+            }
+        },
+        "es6-iterator": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+            "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+            "dev": true,
+            "requires": {
+                "d": "1",
+                "es5-ext": "^0.10.35",
+                "es6-symbol": "^3.1.1"
+            }
+        },
         "es6-promise": {
             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz",
@@ -5893,6 +5925,7 @@
             "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
             "dev": true,
             "requires": {
+                "d": "^1.0.1",
                 "ext": "^1.1.2"
             }
         },
@@ -18441,6 +18474,12 @@
             "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
             "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
         },
+        "type": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+            "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
+            "dev": true
+        },
         "type-check": {
             "version": "0.3.2",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
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

