added video controls

2 files changed, 29 insertions, 6 deletions

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 35db64cf4..55f2fe7c5 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -1,8 +1,12 @@
-.videoBox-cont, .videoBox-cont-fullScreen{
+.videoBox-cont, .videoBox-cont-interactive, .videoBox-cont-fullScreen {
     width: 100%; 
     height: Auto; 
 }
 
+.videoBox-cont-interactive {
+    pointer-events: all;
+}
+
 .videoBox-cont-fullScreen {
     pointer-events: all;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 264d3c1f7..a5e145856 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -12,6 +12,9 @@ import { positionSchema } from "./DocumentView";
 import { FieldView, FieldViewProps } from './FieldView';
 import { pageSchema } from "./ImageBox";
 import "./VideoBox.scss";
+import { ContextMenu } from "../ContextMenu";
+import { ContextMenuProps } from "../ContextMenuItem";
+import { InkingControl } from "../InkingControl";
 
 type VideoDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>;
 const VideoDocument = makeInterface(positionSchema, pageSchema);
@@ -119,7 +122,17 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         });
     }
     onPointerDown = (e: React.PointerEvent) => {
-        e.stopPropagation();
+    }
+
+    @observable static _showControls: boolean = false;
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        let field = Cast(this.Document[this.props.fieldKey], VideoField);
+        if (field) {
+            let subitems: ContextMenuProps[] = [];
+            subitems.push({ description: "Toggle Show Controls", event: action(() => VideoBox._showControls = !VideoBox._showControls), icon: "expand-arrows-alt" });
+            ContextMenu.Instance.addItem({ description: "Video Funcs...", subitems: subitems });
+        }
     }
 
     render() {
@@ -132,11 +145,17 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         // });
         // //
 
-        let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : "");
+        let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
+        let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : interactive);
         return !field ? <div>Loading</div> :
-            <video className={`${style}`} ref={this.setVideoRef} onCanPlay={this.videoLoad} onPointerDown={this.onPointerDown}>
-                <source src={field.url.href} type="video/mp4" />
-                Not supported.
+            VideoBox._showControls ?
+                <video className={`${style}`} ref={this.setVideoRef} onCanPlay={this.videoLoad} onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu} controls>
+                    <source src={field.url.href} type="video/mp4" />
+                    Not supported.
+            </video> :
+                <video className={`${style}`} ref={this.setVideoRef} onCanPlay={this.videoLoad} onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu}>
+                    <source src={field.url.href} type="video/mp4" />
+                    Not supported.
             </video>;
     }
 }
\ No newline at end of file