diff options
Diffstat (limited to 'src/client/views/nodes/WebBox.tsx')
| -rw-r--r-- | src/client/views/nodes/WebBox.tsx | 18 |
1 files changed, 11 insertions, 7 deletions
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)`, |