blob: 9c60d4348eb5a1b6d6d57c22b3211055c1fb6576 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import React = require("react")
import { observer } from "mobx-react";
import { FieldWaiting } from '../../../fields/Field';
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> {
public static LayoutString() { return FieldView.LayoutString(VideoBox) }
constructor(props: FieldViewProps) {
super(props);
}
_loaded: boolean = false;
@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 (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";
//setTimeout(action(() => this._loaded = true), 500);
return (
<div style={{ width: "100%", height: "Auto" }} >
<Measure onResize={this.setScaling}>
{({ measureRef }) =>
<video controls className="videobox-cont" ref={measureRef}>
<source src={path} type="video/mp4" />
Not supported.
</video>
}
</Measure>
</div>
)
}
}
|
