Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into editableSchema

1 files changed, 42 insertions, 22 deletions

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 22ff5c5ad..09ae95183 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -1,12 +1,13 @@
 import React = require("react")
-import { FieldViewProps, FieldView } from './FieldView';
+import { observer } from "mobx-react";
 import { FieldWaiting } from '../../../fields/Field';
-import { observer } from "mobx-react"
-import { VideoField } from '../../../fields/VideoField'; 
-import "./VideoBox.scss"
-import { ContextMenu } from "../../views/ContextMenu";
-import { observable, action } from 'mobx';
-import { KeyStore } from '../../../fields/KeyStore';
+import { VideoField } from '../../../fields/VideoField';
+import { FieldView, FieldViewProps } from './FieldView';
+import "./VideoBox.scss";
+import Measure from "react-measure";
+import { action, trace, observable } from "mobx";
+import { KeyStore } from "../../../fields/KeyStore";
+import { number } from "prop-types";
 
 @observer
 export class VideoBox extends React.Component<FieldViewProps> {
@@ -17,27 +18,46 @@ export class VideoBox extends React.Component<FieldViewProps> {
         super(props);
     }
 
-   
 
-    componentDidMount() {
-    }
+    _loaded: boolean = false;
 
-    componentWillUnmount() {
+    @action
+    setScaling = (r: any) => {
+        if (this._loaded) {
+            // bcz: the nativeHeight should really be set when the document is imported.
+            //      also, the native dimensions could be different for different pages of the PDF
+            //      so this design is flawed.
+            var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0);
+            var nativeHeight = this.props.doc.GetNumber(KeyStore.NativeHeight, 0);
+            var newNativeHeight = nativeWidth * r.entry.height / r.entry.width;
+            if (!nativeHeight && newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) {
+                this.props.doc.SetNumber(KeyStore.Height, newNativeHeight / nativeWidth * this.props.doc.GetNumber(KeyStore.Width, 0));
+                this.props.doc.SetNumber(KeyStore.NativeHeight, newNativeHeight);
+            }
+        } else {
+            this._loaded = true;
+        }
     }
 
-   
+
+
     render() {
-        let field = this.props.doc.Get(this.props.fieldKey)
-        let path = field == FieldWaiting ? "http://techslides.com/demos/sample-videos/small.mp4":
-            field instanceof VideoField ? field.Data.href : "http://techslides.com/demos/sample-videos/small.mp4";
-    
+        let field = this.props.doc.GetT(this.props.fieldKey, VideoField);
+        if (!field || field === FieldWaiting) {
+            return <div>Loading</div>
+        }
+        let path = field.Data.href;
+
+        //setTimeout(action(() => this._loaded = true), 500);
         return (
-            <div>
-                <video width = {200} height = {200} controls className = "videobox-cont">
-                    <source src = {path} type = "video/mp4"/>
-                    Not supported.
-                </video>
-            </div>
+            <Measure onResize={this.setScaling}>
+                {({ measureRef }) =>
+                    <video className="videobox-cont" onClick={() => { }} ref={measureRef}>
+                        <source src={path} type="video/mp4" />
+                        Not supported.
+                        </video>
+                }
+            </Measure>
         )
     }
 }
\ No newline at end of file