added annotations for videos. added custom play controls for videos.

1 files changed, 72 insertions, 11 deletions

diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index a6471f53c..058325b21 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/KeyStore";
@@ -7,6 +7,8 @@ import { CollectionView, CollectionViewType } from "./CollectionView";
 import { CollectionViewProps } from "./CollectionViewBase";
 import React = require("react");
 import { FieldId } from "../../../fields/Field";
+import { ReplaceAroundStep } from "prosemirror-transform";
+import "./CollectionVideoView.scss"
 
 
 @observer
@@ -18,14 +20,10 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
                     isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
     }
 
-    public SelectedDocs: FieldId[] = []
-    @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0;
-    @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0;
-
-    @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 0); }
-    @computed private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); }
+    private _mainCont = React.createRef<HTMLDivElement>();
     // "inherited" CollectionView API starts here...
 
+    public SelectedDocs: FieldId[] = []
     public active: () => boolean = () => CollectionView.Active(this);
 
     addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); }
@@ -40,11 +38,74 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
     get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; }
     get subView(): any { return CollectionView.SubView(this); }
 
+    componentDidMount() {
+        this.repete();
+    }
+
+    player = (): HTMLVideoElement => {
+        return this._mainCont.current!.getElementsByTagName("video")[0];
+    }
+
+    @action
+    repete = () => {
+        if (this.player()) {
+            this.ctime = this.player().currentTime;
+            this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime));
+        }
+        setTimeout(() => this.repete(), 100)
+    }
+
+
+    @observable
+    ctime: number = 0
+    @observable
+    playing: boolean = false;
+
+    @action
+    onPlayDown = () => {
+        if (this.player()) {
+            if (this.player().paused) {
+                this.player().play();
+                this.playing = true;
+            } else {
+                this.player().pause();
+                this.playing = 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;
+        }
+
+    }
+
     render() {
-        return (<div className="collectionView-cont" onContextMenu={this.specificContextMenu}>
-            {/* <video controls className="videobox-cont"> */}
-            {this.subView}
-            {/* </video> */}
+        return (<div className="collectionVideoView-cont" ref={this._mainCont} onContextMenu={this.specificContextMenu}>
+            <div className="collectionVideoView-controls" >
+                {this.subView}
+                <div className="collectionVideoView-time" onPointerDown={this.onResetDown}>
+                    <span>{"" + Math.round(this.ctime)}</span>
+                    <span style={{ fontSize: 8 }}>{" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)}</span>
+                </div>
+                <div className="collectionVideoView-play" onPointerDown={this.onPlayDown}>
+                    {this.playing ? "\"" : ">"}
+                </div>
+                <div className="collectionVideoView-full" onPointerDown={this.onFullDown}>
+                    F
+                </div>
+            </div>
         </div>)
     }
 }
\ No newline at end of file