merged & fixed some interaction issues with comparisonBox

1 files changed, 38 insertions, 19 deletions

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index ccf1f5588..6b1e6ae18 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -22,6 +22,7 @@ import { InkingControl } from "../InkingControl";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./VideoBox.scss";
 import { documentSchema } from "../../../fields/documentSchemas";
+import { Networking } from "../../Network";
 const path = require('path');
 
 export const timeSchema = createSchema({
@@ -104,41 +105,59 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         canvas.height = 640 * (this.layoutDoc._nativeHeight || 0) / (this.layoutDoc._nativeWidth || 1);
         const ctx = canvas.getContext('2d');//draw image to canvas. scale to target dimensions
         if (ctx) {
-            ctx.rect(0, 0, canvas.width, canvas.height);
-            ctx.fillStyle = "blue";
-            ctx.fill();
+            // ctx.rect(0, 0, canvas.width, canvas.height);
+            // ctx.fillStyle = "blue";
+            // ctx.fill();
             this._videoRef && ctx.drawImage(this._videoRef, 0, 0, canvas.width, canvas.height);
         }
 
-        if (!this._videoRef) { // can't find a way to take snapshots of videos
-            const b = Docs.Create.ButtonDocument({
+        if (!this._videoRef) {
+            const b = Docs.Create.LabelDocument({
                 x: (this.layoutDoc.x || 0) + width, y: (this.layoutDoc.y || 1),
-                _width: 150, _height: 50, title: (this.layoutDoc.currentTimecode || 0).toString()
+                _width: 150, _height: 50, title: (this.layoutDoc.currentTimecode || 0).toString(),
+            });
+            b.isLinkButton = true;
+            this.props.addDocument?.(b);
+            DocUtils.MakeLink({ doc: b }, { doc: this.rootDoc }, "video snapshot");
+            Networking.PostToServer("/youtubeScreenshot", {
+                id: this.youtubeVideoId,
+                timecode: this.layoutDoc.currentTimecode
+            }).then(response => {
+                const resolved = response?.accessPaths?.agnostic?.client;
+                if (resolved) {
+                    this.props.removeDocument?.(b);
+                    this.createRealSummaryLink(resolved);
+                }
             });
-            b.onClick = ScriptField.MakeScript(`this.currentTimecode = ${(this.layoutDoc.currentTimecode || 0)}`);
         } else {
             //convert to desired file format
             const dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
             // if you want to preview the captured image,
             const filename = path.basename(encodeURIComponent("snapshot" + StrCast(this.rootDoc.title).replace(/\..*$/, "") + "_" + (this.layoutDoc.currentTimecode || 0).toString().replace(/\./, "_")));
-            VideoBox.convertDataUri(dataUrl, filename).then(returnedFilename => {
+            VideoBox.convertDataUri(dataUrl, filename).then((returnedFilename: string) => {
                 if (returnedFilename) {
-                    const url = this.choosePath(Utils.prepend(returnedFilename));
-                    const imageSummary = Docs.Create.ImageDocument(url, {
-                        _nativeWidth: this.layoutDoc._nativeWidth, _nativeHeight: this.layoutDoc._nativeHeight,
-                        x: (this.layoutDoc.x || 0) + width, y: (this.layoutDoc.y || 0),
-                        _width: 150, _height: height / width * 150, title: "--snapshot" + (this.layoutDoc.currentTimecode || 0) + " image-"
-                    });
-                    Doc.GetProto(imageSummary)["data-nativeWidth"] = this.layoutDoc._nativeWidth;
-                    Doc.GetProto(imageSummary)["data-nativeHeight"] = this.layoutDoc._nativeHeight;
-                    imageSummary.isLinkButton = true;
-                    this.props.addDocument && this.props.addDocument(imageSummary);
-                    DocUtils.MakeLink({ doc: imageSummary }, { doc: this.rootDoc }, "video snapshot");
+                    this.createRealSummaryLink(returnedFilename);
                 }
             });
         }
     }
 
+    private createRealSummaryLink = (relative: string) => {
+        const url = this.choosePath(Utils.prepend(relative));
+        const width = (this.layoutDoc._width || 0);
+        const height = (this.layoutDoc._height || 0);
+        const imageSummary = Docs.Create.ImageDocument(url, {
+            _nativeWidth: this.layoutDoc._nativeWidth, _nativeHeight: this.layoutDoc._nativeHeight,
+            x: (this.layoutDoc.x || 0) + width, y: (this.layoutDoc.y || 0),
+            _width: 150, _height: height / width * 150, title: "--snapshot" + (this.layoutDoc.currentTimecode || 0) + " image-"
+        });
+        Doc.GetProto(imageSummary)["data-nativeWidth"] = this.layoutDoc._nativeWidth;
+        Doc.GetProto(imageSummary)["data-nativeHeight"] = this.layoutDoc._nativeHeight;
+        imageSummary.isLinkButton = true;
+        this.props.addDocument?.(imageSummary);
+        DocUtils.MakeLink({ doc: imageSummary }, { doc: this.rootDoc }, "video snapshot");
+    }
+
     @action
     updateTimecode = () => {
         this.player && (this.layoutDoc.currentTimecode = this.player.currentTime);