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

6 files changed, 123 insertions, 95 deletions

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 421bf90c1..6949670d6 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -26,6 +26,7 @@ import { CollectionStackingViewFieldColumn } from "./CollectionStackingViewField
 import { CollectionSubView } from "./CollectionSubView";
 import { CollectionViewType } from "./CollectionView";
 import { SnappingManager } from "../../util/SnappingManager";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 const _global = (window /* browser */ || global /* node */) as any;
 
 type StackingDocument = makeInterface<[typeof collectionSchema, typeof documentSchema]>;
@@ -191,8 +192,8 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
     }
 
     getDisplayDoc(doc: Doc, dataDoc: Doc | undefined, dxf: () => Transform, width: () => number) {
-        const layoutDoc = Doc.Layout(doc, this.props.ChildLayoutTemplate?.());
         const height = () => this.getDocHeight(doc);
+        const opacity = () => this.Document.currentTimecode === undefined ? this.props.childOpacity?.() : CollectionFreeFormDocumentView.getValues(doc, this.Document.currentTimecode || 0)?.opacity;
         return <ContentFittingDocumentView
             Document={doc}
             DataDoc={dataDoc || (doc[DataSym] !== doc && doc[DataSym])}
@@ -213,7 +214,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
             onClick={this.onChildClickHandler}
             onDoubleClick={this.onChildDoubleClickHandler}
             ScreenToLocalTransform={dxf}
-            opacity={this.props.childOpacity}
+            opacity={opacity}
             focus={this.focusDocument}
             ContainingCollectionDoc={this.props.CollectionView?.props.Document}
             ContainingCollectionView={this.props.CollectionView}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index acb66acdb..ee4755355 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -72,7 +72,7 @@ export interface CollectionViewCustomProps {
     filterAddDocument: (doc: Doc | Doc[]) => boolean;  // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example)
     childLayoutTemplate?: () => Opt<Doc>;  // specify a layout Doc template to use for children of the collection
     childLayoutString?: string;  // specify a layout string to use for children of the collection
-    childOpacity?:() => number;
+    childOpacity?: () => number;
 }
 
 export interface CollectionRenderProps {
@@ -118,10 +118,8 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
 
     @action.bound
     addDocument = (doc: Doc | Doc[]): boolean => {
-        if (doc instanceof Doc) {
-            if (this.props.filterAddDocument?.(doc) === false) {
-                return false;
-            }
+        if (this.props.filterAddDocument?.(doc) === false) {
+            return false;
         }
         const docs = doc instanceof Doc ? [doc] : doc;
         const targetDataDoc = this.props.Document[DataSym];
@@ -495,7 +493,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
         return (<div className={"collectionView"}
             style={{
                 pointerEvents: this.props.Document.isBackground ? "none" : undefined,
-                boxShadow: this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined :
+                boxShadow: Doc.UserDoc().renderStyle === "comic" || this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined :
                     `${Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ? "rgb(30, 32, 31)" : "#9c9396"} ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`
             }}
             onContextMenu={this.onContextMenu}>
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 911a2bc3b..b2e6dad6b 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -20,7 +20,6 @@ import { CollectionView } from "../CollectionView";
 import MarqueeOptionsMenu from "./MarqueeOptionsMenu";
 import "./MarqueeView.scss";
 import React = require("react");
-import { InteractionUtils } from "../../../util/InteractionUtils";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -66,58 +65,69 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         //make textbox and add it to this collection
         // tslint:disable-next-line:prefer-const
         let [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY);
-        if (e.key === ":") {
-            DocUtils.addDocumentCreatorMenuItems(this.props.addLiveTextDocument, this.props.addDocument, x, y);
+        if (e.key === "?") {
+            ContextMenu.Instance.setDefaultItem("?", (str: string) => {
+                const textDoc = Docs.Create.WebDocument(`http://bing.com/search?q=${str}`, {
+                    _width: 200, x, y, _nativeHeight: 962, _nativeWidth: 800, isAnnotating: false,
+                    title: "bing"
+                });
+                this.props.addDocTab(textDoc, "onRight");
+            });
 
             ContextMenu.Instance.displayMenu(this._downX, this._downY);
-        } else if (e.key === "q" && e.ctrlKey) {
-            e.preventDefault();
-            (async () => {
-                const text: string = await navigator.clipboard.readText();
-                const ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== "");
-                for (let i = 0; i < ns.length - 1; i++) {
-                    while (!(ns[i].trim() === "" || ns[i].endsWith("-\r") || ns[i].endsWith("-") ||
-                        ns[i].endsWith(";\r") || ns[i].endsWith(";") ||
-                        ns[i].endsWith(".\r") || ns[i].endsWith(".") ||
-                        ns[i].endsWith(":\r") || ns[i].endsWith(":")) && i < ns.length - 1) {
-                        const sub = ns[i].endsWith("\r") ? 1 : 0;
-                        const br = ns[i + 1].trim() === "";
-                        ns.splice(i, 2, ns[i].substr(0, ns[i].length - sub) + ns[i + 1].trimLeft());
-                        if (br) break;
+        } else
+            if (e.key === ":") {
+                DocUtils.addDocumentCreatorMenuItems(this.props.addLiveTextDocument, this.props.addDocument, x, y);
+
+                ContextMenu.Instance.displayMenu(this._downX, this._downY);
+            } else if (e.key === "q" && e.ctrlKey) {
+                e.preventDefault();
+                (async () => {
+                    const text: string = await navigator.clipboard.readText();
+                    const ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== "");
+                    for (let i = 0; i < ns.length - 1; i++) {
+                        while (!(ns[i].trim() === "" || ns[i].endsWith("-\r") || ns[i].endsWith("-") ||
+                            ns[i].endsWith(";\r") || ns[i].endsWith(";") ||
+                            ns[i].endsWith(".\r") || ns[i].endsWith(".") ||
+                            ns[i].endsWith(":\r") || ns[i].endsWith(":")) && i < ns.length - 1) {
+                            const sub = ns[i].endsWith("\r") ? 1 : 0;
+                            const br = ns[i + 1].trim() === "";
+                            ns.splice(i, 2, ns[i].substr(0, ns[i].length - sub) + ns[i + 1].trimLeft());
+                            if (br) break;
+                        }
+                    }
+                    ns.map(line => {
+                        const indent = line.search(/\S|$/);
+                        const newBox = Docs.Create.TextDocument(line, { _width: 200, _height: 35, x: x + indent / 3 * 10, y: y, title: line });
+                        this.props.addDocument(newBox);
+                        y += 40 * this.props.getTransform().Scale;
+                    });
+                })();
+            } else if (e.key === "b" && e.ctrlKey) {
+                e.preventDefault();
+                navigator.clipboard.readText().then(text => {
+                    const ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== "");
+                    if (ns.length === 1 && text.startsWith("http")) {
+                        this.props.addDocument(Docs.Create.ImageDocument(text, { _nativeWidth: 300, _width: 300, x: x, y: y }));// paste an image from its URL in the paste buffer
+                    } else {
+                        this.pasteTable(ns, x, y);
                     }
-                }
-                ns.map(line => {
-                    const indent = line.search(/\S|$/);
-                    const newBox = Docs.Create.TextDocument(line, { _width: 200, _height: 35, x: x + indent / 3 * 10, y: y, title: line });
-                    this.props.addDocument(newBox);
-                    y += 40 * this.props.getTransform().Scale;
                 });
-            })();
-        } else if (e.key === "b" && e.ctrlKey) {
-            e.preventDefault();
-            navigator.clipboard.readText().then(text => {
-                const ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== "");
-                if (ns.length === 1 && text.startsWith("http")) {
-                    this.props.addDocument(Docs.Create.ImageDocument(text, { _nativeWidth: 300, _width: 300, x: x, y: y }));// paste an image from its URL in the paste buffer
-                } else {
-                    this.pasteTable(ns, x, y);
+            } else if (!e.ctrlKey) {
+                FormattedTextBox.SelectOnLoadChar = FormattedTextBox.DefaultLayout ? e.key : "";
+                const tbox = Docs.Create.TextDocument("", {
+                    _width: 200, _height: 100, x: x, y: y, _autoHeight: true, _fontSize: NumCast(Doc.UserDoc().fontSize),
+                    _fontFamily: StrCast(Doc.UserDoc().fontFamily), _backgroundColor: StrCast(Doc.UserDoc().backgroundColor),
+                    title: "-typed text-"
+                });
+                const template = FormattedTextBox.DefaultLayout;
+                if (template instanceof Doc) {
+                    tbox._width = NumCast(template._width);
+                    tbox.layoutKey = "layout_" + StrCast(template.title);
+                    Doc.GetProto(tbox)[StrCast(tbox.layoutKey)] = template;
                 }
-            });
-        } else if (!e.ctrlKey) {
-            FormattedTextBox.SelectOnLoadChar = FormattedTextBox.DefaultLayout ? e.key : "";
-            const tbox = Docs.Create.TextDocument("", {
-                _width: 200, _height: 100, x: x, y: y, _autoHeight: true, _fontSize: NumCast(Doc.UserDoc().fontSize),
-                _fontFamily: StrCast(Doc.UserDoc().fontFamily), _backgroundColor: StrCast(Doc.UserDoc().backgroundColor),
-                title: "-typed text-"
-            });
-            const template = FormattedTextBox.DefaultLayout;
-            if (template instanceof Doc) {
-                tbox._width = NumCast(template._width);
-                tbox.layoutKey = "layout_" + StrCast(template.title);
-                Doc.GetProto(tbox)[StrCast(tbox.layoutKey)] = template;
+                this.props.addLiveTextDocument(tbox);
             }
-            this.props.addLiveTextDocument(tbox);
-        }
         e.stopPropagation();
     }
     //heuristically converts pasted text into a table.
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b9d33da90..d0540e00f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -92,7 +92,7 @@ export interface DocumentViewProps {
     pinToPres: (document: Doc) => void;
     backgroundHalo?: () => boolean;
     backgroundColor?: (doc: Doc) => string | undefined;
-    opacity?: () => number;
+    opacity?: () => number | undefined;
     ChromeHeight?: () => number;
     dontRegisterView?: boolean;
     layoutKey?: string;
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);
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts
index 06c2e516d..60c52bcfc 100644
--- a/src/server/ApiManagers/UploadManager.ts
+++ b/src/server/ApiManagers/UploadManager.ts
@@ -68,34 +68,34 @@ export default class UploadManager extends ApiManager {
             method: Method.POST,
             subscription: new RouteSubscriber("youtubeScreenshot"),
             secureHandler: async ({ req, res }) => {
-                const { url, t } = req.query;
-                const parseUrl = (url: string) => {
-                    url = decodeURIComponent(url)
-                    if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
-                        url = 'http://' + url
-                    }
-                    return url;
-                }
-                let targetUrl: string;
-                if (!url || !t || !isWebUri(targetUrl = parseUrl(url as string))) {
-                    return res.send();
-                }
-                const buffer = await captureYoutubeScreenshot(targetUrl, t as string);
+                const { id, timecode } = req.body;
+                const convert = (raw: string) => {
+                    const number = Math.floor(Number(raw));
+                    const seconds = number % 60;
+                    const minutes = (number - seconds) / 60;
+                    return `${minutes}m${seconds}s`;
+                };
+                const suffix = timecode ? `&t=${convert(timecode)}` : ``;
+                const targetUrl = `https://www.youtube.com/watch?v=${id}${suffix}`;
+                const buffer = await captureYoutubeScreenshot(targetUrl);
                 if (!buffer) {
                     return res.send();
                 }
-                const resolvedName = `${targetUrl}@${t}.png`;
+                const resolvedName = `youtube_capture_${id}_${suffix}.png`;
                 const resolvedPath = serverPathToFile(Directory.images, resolvedName);
-                writeFile(resolvedPath, buffer, async error => {
-                    if (error) {
-                        return res.send();
-                    }
-                    await DashUploadUtils.outputResizedImages(() => createReadStream(resolvedPath), resolvedName, pathToDirectory(Directory.images));
-                    res.send({
-                        accessPaths: {
-                            agnostic: DashUploadUtils.getAccessPaths(Directory.images, resolvedName)
+                return new Promise<void>(resolve => {
+                    writeFile(resolvedPath, buffer, async error => {
+                        if (error) {
+                            return res.send();
                         }
-                    } as Upload.FileInformation);
+                        await DashUploadUtils.outputResizedImages(() => createReadStream(resolvedPath), resolvedName, pathToDirectory(Directory.images));
+                        res.send({
+                            accessPaths: {
+                                agnostic: DashUploadUtils.getAccessPaths(Directory.images, resolvedName)
+                            }
+                        } as Upload.FileInformation);
+                        resolve();
+                    });
                 });
             }
         });
@@ -284,17 +284,19 @@ export default class UploadManager extends ApiManager {
  * 
  * On failure, returns undefined.
  */
-async function captureYoutubeScreenshot(targetUrl: string, t: string): Promise<Opt<Buffer>> {
+async function captureYoutubeScreenshot(targetUrl: string): Promise<Opt<Buffer>> {
     const browser = await launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
     const page = await browser.newPage();
     await page.setViewport({ width: 1920, height: 1080 });
 
-    await page.goto(targetUrl + '&t=' + t, { waitUntil: 'networkidle0' });
+    await page.goto(targetUrl, { waitUntil: 'networkidle2' as any });
 
+    const videoPlayer = await page.$('.html5-video-player');
     // hide youtube player controls.
-    await page.evaluate(() => (document.querySelector('.ytp-chrome-bottom') as any).style.display = 'none');
+    await page.evaluate(() =>
+        (document.querySelector('.ytp-chrome-bottom') as any).style.display = 'none');
 
-    const buffer = await (await page.$('.html5-video-player'))?.screenshot({ encoding: "binary" });
+    const buffer = await videoPlayer?.screenshot({ encoding: "binary" });
     await browser.close();
 
     return buffer;