From 3a4a7ba1f35eeba7d48c954f80a92c6904e5d065 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 12 Jul 2019 11:35:25 -0400
Subject: playing with videos

---
 src/client/documents/Documents.ts   |  2 +-
 src/client/views/nodes/VideoBox.tsx | 27 ++++++++++++++++++++++-----
 src/client/views/nodes/WebBox.tsx   | 35 ++++++++++++++++++++++++++++++++++-
 3 files changed, 57 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 30e4637b0..2a3827782 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -118,7 +118,7 @@ export namespace Docs {
                 options: { nativeWidth: 600, curPage: 0 }
             }],
             [DocumentType.WEB, {
-                layout: { view: WebBox },
+                layout: { view: WebBox, collectionView: [CollectionView, data, anno] as CollectionViewType },
                 options: { height: 300 }
             }],
             [DocumentType.COL, {
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index c65dfe0bd..895d9a422 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -70,6 +70,18 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
 
     componentDidMount() {
         if (this.props.setVideoBox) this.props.setVideoBox(this);
+
+        let field = Cast(this.Document[this.props.fieldKey], VideoField);
+        if (field && field.url.href.indexOf("youtube") !== -1) {
+            let youtubeaspect = 400 / 315;
+            var nativeWidth = FieldValue(this.Document.nativeWidth, 0);
+            var nativeHeight = FieldValue(this.Document.nativeHeight, 0);
+            if (!nativeWidth || !nativeHeight || Math.abs(nativeWidth / nativeHeight - youtubeaspect) > 0.05) {
+                if (!this.Document.nativeWidth) this.Document.nativeWidth = 600;
+                this.Document.nativeHeight = this.Document.nativeWidth / youtubeaspect;
+                this.Document.height = FieldValue(this.Document.width, 0) / youtubeaspect;
+            }
+        }
     }
     componentWillUnmount() {
         this.Pause();
@@ -145,12 +157,17 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         // });
         // //
 
-        let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
+        let interactive = InkingControl.Instance.selectedTool || !this.props.isSelected() ? "" : "-interactive";
         let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : interactive);
+        let videoid = field ? ((arr: string[]) => arr[arr.length - 1])(field.url.href.split("/")) : "";
         return !field ? <div>Loading</div> :
-            <video className={`${style}`} ref={this.setVideoRef} onCanPlay={this.videoLoad} onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu} controls={VideoBox._showControls}>
-                <source src={field.url.href} type="video/mp4" />
-                Not supported.
-            </video>;
+            field.url.href.indexOf("youtube") !== -1 ?
+                <embed className={`${style}`} onLoad={this.videoLoad} id="video" onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu}
+                    src={`https://www.youtube.com/v/${videoid}`} type="application/x-shockwave-flash" style={{ height: "100%" }} title="Adobe Flash Player">
+                </embed> :
+                <video className={`${style}`} ref={this.setVideoRef} onCanPlay={this.videoLoad} onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu} controls={VideoBox._showControls}>
+                    <source src={field.url.href} type="video/mp4" />
+                    Not supported.
+                </video>;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 98c57fc75..96b972a1c 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -6,12 +6,45 @@ import { InkingControl } from "../InkingControl";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./WebBox.scss";
 import React = require("react");
+import { InkTool } from "../../../new_fields/InkField";
+import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
 
+export function onYouTubeIframeAPIReady() {
+    console.log("player");
+    return;
+    let player = new YT.Player('player', {
+        events: {
+            'onReady': onPlayerReady
+        }
+    });
+}
+// must cast as any to set property on window
+const _global = (window /* browser */ || global /* node */) as any
+_global.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
+
+function onPlayerReady(event: any) {
+    event.target.playVideo();
+}
 @observer
 export class WebBox extends React.Component<FieldViewProps> {
 
     public static LayoutString() { return FieldView.LayoutString(WebBox); }
 
+    componentWillMount() {
+
+        let field = Cast(this.props.Document[this.props.fieldKey], WebField);
+        if (field && field.url.href.indexOf("youtube") !== -1) {
+            let youtubeaspect = 400 / 315;
+            var nativeWidth = NumCast(this.props.Document.nativeWidth, 0);
+            var nativeHeight = NumCast(this.props.Document.nativeHeight, 0);
+            if (!nativeWidth || !nativeHeight || Math.abs(nativeWidth / nativeHeight - youtubeaspect) > 0.05) {
+                if (!nativeWidth) this.props.Document.nativeWidth = 600;
+                this.props.Document.nativeHeight = NumCast(this.props.Document.nativeWidth) / youtubeaspect;
+                this.props.Document.height = NumCast(this.props.Document.width) / youtubeaspect;
+            }
+        }
+    }
+
     _ignore = 0;
     onPreWheel = (e: React.WheelEvent) => {
         this._ignore = e.timeStamp;
@@ -46,7 +79,7 @@ export class WebBox extends React.Component<FieldViewProps> {
 
         let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
 
-        let classname = "webBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !DocumentDecorations.Instance.Interacting ? "-interactive" : "");
+        let classname = "webBox-cont" + (this.props.isSelected() && InkingControl.Instance.selectedTool === InkTool.None && !DocumentDecorations.Instance.Interacting ? "-interactive" : "");
         return (
             <>
                 <div className={classname}  >
-- 
cgit v1.2.3-70-g09d2