From 99ce76f0f21b48d8186e6aba1a0e64c87b2c0649 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 14 Feb 2022 13:44:47 -0500
Subject: added an incremental load for freeform collections.  fixed updating
 of web page thumbs on deselection after the first thumb is generated.

---
 src/client/views/nodes/WebBox.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

(limited to 'src/client/views/nodes/WebBox.tsx')

diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 30f905738..f384f97cd 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -117,6 +117,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         reaction(() => this.props.isSelected(),
             async (selected) => {
                 if (selected) {
+                    this._webPageHasBeenRendered = true;
                     setTimeout(action(() => {
                         this._scrollHeight = Math.max(this.scrollHeight, this._iframe?.contentDocument?.body.scrollHeight || 0);
                         if (this._initialScroll !== undefined && this._outerRef.current) {
@@ -133,6 +134,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         if (!htmlString) {
                             htmlString = await (await fetch(Utils.CorsProxy(this.webField!.href))).text();
                         }
+                        this.layoutDoc.thumb = undefined;
                         const nativeWidth = NumCast(this.layoutDoc.nativeWidth);
                         CreateImage(
                             this._webUrl.endsWith("/") ? this._webUrl.substring(0, this._webUrl.length - 1) : this._webUrl,
@@ -142,10 +144,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             nativeWidth * this.props.PanelHeight() / this.props.PanelWidth(),
                             NumCast(this.layoutDoc._scrollTop)
                         ).then
-                            (action((dataUrl: any) => {
+                            ((dataUrl: any) => {
                                 VideoBox.convertDataUri(dataUrl, this.layoutDoc[Id] + "-thumb", true).then(
-                                    returnedfilename => this.layoutDoc.thumb = new ImageField(returnedfilename));
-                            }))
+                                    returnedfilename => setTimeout(action(() => this.layoutDoc.thumb = new ImageField(returnedfilename)), 500));
+                            })
                             .catch(function (error: any) {
                                 console.error('oops, something went wrong!', error);
                             });
@@ -550,8 +552,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     }
 
+    @observable _webPageHasBeenRendered = false;
+
     @computed get urlContent() {
-        if (this._hackHide) return (null);
+        if (this._hackHide || (this.webThumb && !this._webPageHasBeenRendered)) return (null);
         const field = this.dataDoc[this.props.fieldKey];
         let view;
         if (field instanceof HtmlField) {
@@ -569,6 +573,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 style={{ pointerEvents: this._scrollTimer ? "none" : undefined }} // if we allow pointer events when scrolling is on, then reversing direction does not work smoothly
                 ref={action((r: HTMLIFrameElement | null) => this._iframe = r)} src={"https://crossorigin.me/https://cs.brown.edu"} />;
         }
+        setTimeout(action(() => this._webPageHasBeenRendered = true));
         return view;
     }
 
@@ -703,9 +708,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 pointerEvents={this._isAnnotating || SnappingManager.GetIsDragging() ? "all" : "none"} />;
         return (
             <div className="webBox" ref={this._mainCont}
-                style={{ pointerEvents: this.pointerEvents(), display: !this.props.isSelected() && !this.isAnyChildContentActive() ? "none" : undefined }} >
-                <div hidden={!this.props.isSelected() && !this.isAnyChildContentActive() ? true : false}
-                    className={`webBox-container`} style={{ pointerEvents }} onContextMenu={this.specificContextMenu}>
+                style={{ pointerEvents: this.pointerEvents(), display: !this.props.isSelected() && !this.isAnyChildContentActive() && this.webThumb ? "none" : undefined }} >
+                <div className="webBox-container" style={{ pointerEvents }} onContextMenu={this.specificContextMenu}>
                     <div className={"webBox-outerContent"} ref={this._outerRef}
                         style={{
                             width: `calc(${100 / scale}% - ${this.sidebarWidth() / scale * (this._previewWidth ? scale : 1)}px)`,
-- 
cgit v1.2.3-70-g09d2