Merge branch 'master' into presentation_v1

5 files changed, 65 insertions, 33 deletions

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 1dbafbd61..cf94a93d3 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -551,7 +551,7 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     }
     @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
     @computed get isText() {
-        return this.selectedDoc?.type === DocumentType.RTF || (RichTextMenu.Instance?.view as any)?.focused ? true : false;
+        return this.selectedDoc?.type === DocumentType.RTF || (RichTextMenu.Instance?.view as any) ? true : false;
     }
 
     @undoBatch
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index fdcfb00d8..58a9c4974 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -169,14 +169,23 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                 if (newBox.activeFrame !== undefined) {
                     const x = newBox.x;
                     const y = newBox.y;
+                    const w = newBox._width;
+                    const h = newBox._height;
                     delete newBox["x-indexed"];
                     delete newBox["y-indexed"];
+                    delete newBox["w-indexed"];
+                    delete newBox["h-indexed"];
                     delete newBox["opacity-indexed"];
+                    delete newBox._width;
+                    delete newBox._height;
                     delete newBox.x;
                     delete newBox.y;
+                    delete newBox.opacity;
                     delete newBox.activeFrame;
                     newBox.x = x;
                     newBox.y = y;
+                    newBox._width = w;
+                    newBox._height = h;
                 }
             }
             if (this.Document._currentFrame !== undefined && !this.props.isAnnotationOverlay) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a4da00578..5fb2a8db9 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1144,15 +1144,16 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             style={{
                 transformOrigin: this._animateScalingTo ? "center center" : undefined,
                 transform: this._animateScalingTo ? `scale(${this._animateScalingTo})` : undefined,
-                transition: !this._animateScalingTo ? StrCast(this.Document.dataTransition) : this._animateScalingTo < 1 ? "transform 0.5s ease-in" : "transform 0.5s ease-out",
+                transition: !this._animateScalingTo ? StrCast(this.Document.dataTransition) : `transform 0.5s ease-${this._animateScalingTo < 1 ? "in" : "out"}`,
                 pointerEvents: this.ignorePointerEvents ? "none" : undefined,
                 color: StrCast(this.layoutDoc.color, "inherit"),
                 outline: highlighting && !borderRounding ? `${highlightColors[fullDegree]} ${highlightStyles[fullDegree]} ${localScale}px` : "solid 0px",
-                border: highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined,
-                boxShadow: this.Document.isLinkButton && !this.props.dontRegisterView && this.props.forcedBackgroundColor?.(this.Document) !== "transparent" ?
-                    StrCast(this.props.Document._linkButtonShadow, "lightblue 0em 0em 1em") :
-                    this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" :
-                        undefined,
+                border: highlighting && borderRounding && highlightStyles[fullDegree] === "dashed" ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined,
+                boxShadow: highlighting && borderRounding && highlightStyles[fullDegree] !== "dashed" ? `0 0 0 ${localScale}px ${highlightColors[fullDegree]}` :
+                    this.Document.isLinkButton && !this.props.dontRegisterView && this.props.forcedBackgroundColor?.(this.Document) !== "transparent" ?
+                        StrCast(this.layoutDoc._linkButtonShadow, "lightblue 0em 0em 1em") :
+                        this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" :
+                            undefined,
                 background: finalColor,
                 opacity: finalOpacity,
                 fontFamily: StrCast(this.Document._fontFamily, "inherit"),
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 190193351..bc69a3954 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -55,28 +55,40 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         Doc.SetNativeWidth(this.dataDoc, this.player!.videoWidth);
         Doc.SetNativeHeight(this.dataDoc, this.player!.videoHeight);
         this.layoutDoc._height = (this.layoutDoc._width || 0) / aspect;
-        this.dataDoc[this.fieldKey + "-" + "duration"] = this.player!.duration;
+        this.dataDoc[this.fieldKey + "-duration"] = this.player!.duration;
     }
 
     @action public Play = (update: boolean = true) => {
         this._playing = true;
-        update && this.player?.play();
-        update && this._youtubePlayer?.playVideo();
-        this._youtubePlayer && !this._playTimer && (this._playTimer = setInterval(this.updateTimecode, 5));
+        try {
+            update && this.player?.play();
+            update && this._youtubePlayer?.playVideo();
+            this._youtubePlayer && !this._playTimer && (this._playTimer = setInterval(this.updateTimecode, 5));
+        } catch (e) {
+            console.log("Video Play Exception:", e);
+        }
         this.updateTimecode();
     }
 
     @action public Seek(time: number) {
-        this._youtubePlayer?.seekTo(Math.round(time), true);
+        try {
+            this._youtubePlayer?.seekTo(Math.round(time), true);
+        } catch (e) {
+            console.log("Video Seek Exception:", e);
+        }
         this.player && (this.player.currentTime = time);
     }
 
     @action public Pause = (update: boolean = true) => {
         this._playing = false;
-        update && this.player?.pause();
-        update && this._youtubePlayer?.pauseVideo();
-        this._youtubePlayer && this._playTimer && clearInterval(this._playTimer);
-        this._youtubePlayer?.seekTo(this._youtubePlayer?.getCurrentTime(), true);
+        try {
+            update && this.player?.pause();
+            update && this._youtubePlayer?.pauseVideo();
+            this._youtubePlayer && this._playTimer && clearInterval(this._playTimer);
+            this._youtubePlayer?.seekTo(this._youtubePlayer?.getCurrentTime(), true);
+        } catch (e) {
+            console.log("Video Pause Exception:", e);
+        }
         this._youtubePlayer && SelectionManager.DeselectAll(); // if we don't deselect the player, then we get an annoying YouTube spinner I guess telling us we're paused.
         this._playTimer = undefined;
         this.updateTimecode();
@@ -85,7 +97,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
     @action public FullScreen() {
         this._fullScreen = true;
         this.player && this.player.requestFullscreen();
-        this._youtubePlayer && this.props.addDocTab(this.rootDoc, "add");
+        try {
+            this._youtubePlayer && this.props.addDocTab(this.rootDoc, "add");
+        } catch (e) {
+            console.log("Video FullScreen Exception:", e);
+        }
     }
 
     choosePath(url: string) {
@@ -132,11 +148,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
             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: string) => {
-                if (returnedFilename) {
-                    this.createRealSummaryLink(returnedFilename);
-                }
-            });
+            VideoBox.convertDataUri(dataUrl, filename).then((returnedFilename: string) =>
+                returnedFilename && this.createRealSummaryLink(returnedFilename));
         }
     }
 
@@ -159,7 +172,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
     @action
     updateTimecode = () => {
         this.player && (this.layoutDoc._currentTimecode = this.player.currentTime);
-        this._youtubePlayer && (this.layoutDoc._currentTimecode = this._youtubePlayer.getCurrentTime?.());
+        try {
+            this._youtubePlayer && (this.layoutDoc._currentTimecode = this._youtubePlayer.getCurrentTime?.());
+        } catch (e) {
+            console.log("Video Timecode Exception:", e);
+        }
     }
 
     componentDidMount() {
@@ -261,7 +278,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         }
         else this._youtubeContentCreated = false;
 
-        const iframe = e.target;
+        this.loadYouTube(e.target);
+    }
+    private loadYouTube = (iframe: any) => {
         let started = true;
         const onYoutubePlayerStateChange = (event: any) => runInAction(() => {
             if (started && event.data === YT.PlayerState.PLAYING) {
@@ -281,14 +300,17 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
                 () => !this.props.Document.isAnnotating && Doc.GetSelectedTool() === InkTool.None && this.props.isSelected(true) && !SnappingManager.GetIsDragging() && !DocumentDecorations.Instance.Interacting,
                 (interactive) => iframe.style.pointerEvents = interactive ? "all" : "none", { fireImmediately: true });
         };
-        (YT as any)?.ready(() => {
-            this._youtubePlayer = new YT.Player(`${this.youtubeVideoId + this._youtubeIframeId}-player`, {
-                events: {
-                    'onReady': this.props.dontRegisterView ? undefined : onYoutubePlayerReady,
-                    'onStateChange': this.props.dontRegisterView ? undefined : onYoutubePlayerStateChange,
-                }
-            })
-        });
+        if (typeof (YT) === undefined) setTimeout(() => this.loadYouTube(iframe), 100);
+        else {
+            (YT as any)?.ready(() => {
+                this._youtubePlayer = new YT.Player(`${this.youtubeVideoId + this._youtubeIframeId}-player`, {
+                    events: {
+                        'onReady': this.props.dontRegisterView ? undefined : onYoutubePlayerReady,
+                        'onStateChange': this.props.dontRegisterView ? undefined : onYoutubePlayerStateChange,
+                    }
+                });
+            });
+        }
     }
     private get uIButtons() {
         const curTime = (this.layoutDoc._currentTimecode || 0);
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 8a8f46963..1e5e8133d 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -158,7 +158,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                     this._forceSmoothScrollUpdate = false;
                     this.layoutDoc._scrollLeft = scrollLeft;
                 }
-            }))
+            }));
         }
     }
     iframeScroll = (e: any) => {