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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
import { action, observable, trace } from "mobx";
import { observer } from "mobx-react";
import { KeyStore } from "../../../fields/KeyStore";
import { ContextMenu } from "../ContextMenu";
import { CollectionViewType, CollectionBaseView, CollectionRenderProps } from "./CollectionBaseView";
import React = require("react");
import "./CollectionVideoView.scss";
import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView";
import { FieldView, FieldViewProps } from "../nodes/FieldView";
import { emptyFunction } from "../../../Utils";
@observer
export class CollectionVideoView extends React.Component<FieldViewProps> {
private _intervalTimer: any = undefined;
private _player: HTMLVideoElement | undefined = undefined;
@observable _currentTimecode: number = 0;
@observable _isPlaying: boolean = false;
public static LayoutString(fieldKey: string = "DataKey") {
return FieldView.LayoutString(CollectionVideoView, fieldKey);
}
private get uIButtons() {
let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().Scale);
return ([
<div className="collectionVideoView-time" key="time" onPointerDown={this.onResetDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
<span>{"" + Math.round(this._currentTimecode)}</span>
<span style={{ fontSize: 8 }}>{" " + Math.round((this._currentTimecode - Math.trunc(this._currentTimecode)) * 100)}</span>
</div>,
<div className="collectionVideoView-play" key="play" onPointerDown={this.onPlayDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
{this._isPlaying ? "\"" : ">"}
</div>,
<div className="collectionVideoView-full" key="full" onPointerDown={this.onFullDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
F
</div>
]);
}
@action
mainCont = (ele: HTMLDivElement | null) => {
if (ele) {
this._player = ele.getElementsByTagName("video")[0];
if (this.props.Document.GetNumber(KeyStore.CurPage, -1) >= 0) {
this._currentTimecode = this.props.Document.GetNumber(KeyStore.CurPage, -1);
}
}
}
componentDidMount() {
this._intervalTimer = setInterval(this.updateTimecode, 1000);
}
componentWillUnmount() {
clearInterval(this._intervalTimer);
}
@action
updateTimecode = () => {
if (this._player) {
if ((this._player as any).AHackBecauseSomethingResetsTheVideoToZero !== -1) {
this._player.currentTime = (this._player as any).AHackBecauseSomethingResetsTheVideoToZero;
(this._player as any).AHackBecauseSomethingResetsTheVideoToZero = -1;
} else {
this._currentTimecode = this._player.currentTime;
this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this._currentTimecode));
}
}
}
@action
onPlayDown = () => {
if (this._player) {
if (this._player.paused) {
this._player.play();
this._isPlaying = true;
} else {
this._player.pause();
this._isPlaying = false;
}
}
}
@action
onFullDown = (e: React.PointerEvent) => {
if (this._player) {
this._player.requestFullscreen();
e.stopPropagation();
e.preventDefault();
}
}
@action
onResetDown = () => {
if (this._player) {
this._player.pause();
this._player.currentTime = 0;
}
}
onContextMenu = (e: React.MouseEvent): void => {
if (!e.isPropagationStopped() && this.props.Document.Id !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
ContextMenu.Instance.addItem({ description: "VideoOptions", event: emptyFunction });
}
}
private subView = (_type: CollectionViewType, renderProps: CollectionRenderProps) => {
let props = { ...this.props, ...renderProps };
return (
<>
<CollectionFreeFormView {...props} CollectionView={this} />
{this.props.isSelected() ? this.uIButtons : (null)}
</>
);
}
render() {
trace();
return (
<CollectionBaseView {...this.props} className="collectionVideoView-cont" contentRef={this.mainCont} onContextMenu={this.onContextMenu}>
{this.subView}
</CollectionBaseView>);
}
}
|
