Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into script_documents

1 files changed, 29 insertions, 12 deletions

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index bcbd65258..a3abaedfa 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({
@@ -118,29 +119,45 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
             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);
+                }
+            });
         } 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?.(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);