aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/VideoBox.tsx
diff options
context:
space:
mode:
authorMonika Hedman <monika_hedman@brown.edu>2019-04-29 19:55:28 -0400
committerMonika Hedman <monika_hedman@brown.edu>2019-04-29 19:55:28 -0400
commit53e183fbc116c406ca86889a9fb3e2de61520b60 (patch)
treeab979ebabffad7f63f23666aa80025d9bad90872 /src/client/views/nodes/VideoBox.tsx
parent39bb878a32821d2e14110f4158471890234f4769 (diff)
parent3da71792a339536118b7af7cfe0529201a45c64e (diff)
merge
Diffstat (limited to 'src/client/views/nodes/VideoBox.tsx')
-rw-r--r--src/client/views/nodes/VideoBox.tsx27
1 files changed, 13 insertions, 14 deletions
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 9d7c2bc56..b34f1dc08 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -1,18 +1,16 @@
import React = require("react");
+import { action, computed, IReactionDisposer, trace } from "mobx";
import { observer } from "mobx-react";
+import Measure from "react-measure";
import { FieldWaiting, Opt } from '../../../fields/Field';
+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, IReactionDisposer, computed, reaction } from "mobx";
-import { KeyStore } from "../../../fields/KeyStore";
-import { number } from "prop-types";
@observer
export class VideoBox extends React.Component<FieldViewProps> {
- private _reactionDisposer: Opt<IReactionDisposer>;
private _videoRef = React.createRef<HTMLVideoElement>();
public static LayoutString() { return FieldView.LayoutString(VideoBox); }
@@ -54,25 +52,26 @@ export class VideoBox extends React.Component<FieldViewProps> {
(vref as any).AHackBecauseSomethingResetsTheVideoToZero = this.curPage;
}
}
+ videoContent(path: string) {
+ return <video className="videobox-cont" ref={this.setVideoRef}>
+ <source src={path} type="video/mp4" />
+ Not supported.
+ </video>;
+ }
render() {
let field = this.props.Document.GetT(this.props.fieldKey, VideoField);
if (!field || field === FieldWaiting) {
return <div>Loading</div>;
}
- let path = field.Data.href;
- trace();
- return (
+ return (this.props.Document.GetNumber(KeyStore.NativeHeight, 0)) ?
+ this.videoContent(field.data.href) :
<Measure onResize={this.setScaling}>
{({ measureRef }) =>
<div style={{ width: "100%", height: "auto" }} ref={measureRef}>
- <video className="videobox-cont" ref={this.setVideoRef}>
- <source src={path} type="video/mp4" />
- Not supported.
- </video>
+ {this.videoContent(field.data.href)}
</div>
}
- </Measure>
- );
+ </Measure>;
}
} \ No newline at end of file