added prop when thumbnail is shown for a document so componentView can choose not to render. fixed pdf views to not generate gray box when first transitioning from thumb to live view.

5 files changed, 25 insertions, 7 deletions

diff --git a/src/.DS_Store b/src/.DS_Store
index 9ca6c8d2b..b0987293b 100644
--- a/src/.DS_Store
+++ b/src/.DS_Store
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 274ccb807..7092b335c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -109,6 +109,7 @@ export interface DocumentViewSharedProps {
     fitContentsToDoc?: () => boolean; // used by freeformview to fit its contents to its panel. corresponds to _fitToBox property on a Document
     ContainingCollectionView: Opt<CollectionView>;
     ContainingCollectionDoc: Opt<Doc>;
+    thumbShown?: () => boolean;
     setContentView?: (view: DocComponentView) => any;
     CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView;
     PanelWidth: () => number;
@@ -838,6 +839,9 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             this._componentView?.isAnyChildContentActive?.() ||
             this.props.isContentActive()) ? true : undefined;
     }
+    @observable _retryThumb = 1;
+    thumbShown = () => !this.props.isSelected() && LightboxView.LightboxDoc !== this.rootDoc && this.thumb &&
+        !this._componentView?.isAnyChildContentActive?.() ? true : false;
     @computed get contents() {
         TraceMobx();
         const audioView = !this.layoutDoc._showAudio ? (null) :
@@ -851,11 +855,17 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 pointerEvents: this.props.pointerEvents as any ? this.props.pointerEvents as any : (this.rootDoc.type !== DocumentType.INK && ((this.props.contentPointerEvents as any) || (this.isContentActive())) ? "all" : "none"),
                 height: this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
             }}>
-            {!this.thumb ? (null) :
+            {!this._retryThumb || !this.thumbShown() ? (null) :
                 <img style={{ background: "white", top: 0, position: "absolute" }} src={this.thumb} // + '?d=' + (new Date()).getTime()}
-                    width={this.props.PanelWidth()} height={this.props.PanelHeight()} />}
-            <DocumentContentsView key={1} {...this.props}
+                    width={this.props.PanelWidth()} height={this.props.PanelHeight()}
+                    onError={(e: any) => {
+                        setTimeout(action(() => this._retryThumb = 0), 0);
+                        setTimeout(action(() => this._retryThumb = 1), 150);
+                    }} />}
+            <DocumentContentsView key={1}
+                {...this.props}
                 docViewPath={this.props.viewPath}
+                thumbShown={this.thumbShown}
                 setContentView={this.setContentView}
                 scaling={this.contentScaling}
                 PanelHeight={this.panelHeight}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index cbbf46a59..a2a94daec 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import * as Pdfjs from "pdfjs-dist";
 import "pdfjs-dist/web/pdf_viewer.css";
 import { Doc, DocListCast, Opt, WidthSym } from "../../../fields/Doc";
-import { Cast, NumCast, StrCast } from '../../../fields/Types';
+import { Cast, NumCast, StrCast, ImageCast } from '../../../fields/Types';
 import { PdfField } from "../../../fields/URLField";
 import { TraceMobx } from '../../../fields/util';
 import { emptyFunction, returnOne, setupMoveUpEvents, Utils } from '../../../Utils';
@@ -21,6 +21,7 @@ import { SidebarAnnos } from '../SidebarAnnos';
 import { FieldView, FieldViewProps } from './FieldView';
 import "./PDFBox.scss";
 import React = require("react");
+import { LightboxView } from '../LightboxView';
 
 @observer
 export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() {
@@ -38,6 +39,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @observable private _pageControls = false;
 
     @computed get pdfUrl() { return Cast(this.dataDoc[this.props.fieldKey], PdfField); }
+    @computed get pdfThumb() { return ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc.thumb))?.url; }
 
     constructor(props: any) {
         super(props);
@@ -252,6 +254,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         const scale = previewScale * (this.props.scaling?.() || 1);
         return <div className={"pdfBox"} onContextMenu={this.specificContextMenu}
             style={{
+                display: this.props.thumbShown?.() ? "none" : undefined,
                 height: this.props.Document._scrollTop && !this.Document._fitWidth && (window.screen.width > 600) ?
                     NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined
             }}>
@@ -303,7 +306,12 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     static pdfpromise = new Map<string, Promise<Pdfjs.PDFDocumentProxy>>();
     render() {
         TraceMobx();
-        if (this._pdf) return this.renderPdfView;
+        if (this._pdf) {
+            if (!this.props.thumbShown?.()) {
+                return this.renderPdfView;
+            }
+            return null;
+        }
 
         const href = this.pdfUrl?.url.href;
         if (href) {
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 563cc462a..91f7d97d7 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -705,7 +705,7 @@ 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() && LightboxView.LightboxDoc !== this.rootDoc && this.webThumb ? "none" : undefined }} >
+                style={{ pointerEvents: this.pointerEvents(), display: this.props.thumbShown?.() ? "none" : undefined }} >
                 <div className="webBox-container" style={{ pointerEvents }} onContextMenu={this.specificContextMenu}>
                     <div className={"webBox-outerContent"} ref={this._outerRef}
                         style={{
diff --git a/src/server/server_Initialization.ts b/src/server/server_Initialization.ts
index a10cd4983..24cc3b796 100644
--- a/src/server/server_Initialization.ts
+++ b/src/server/server_Initialization.ts
@@ -100,7 +100,7 @@ function buildWithMiddleware(server: express.Express) {
         passport.session(),
         (req: express.Request, res: express.Response, next: express.NextFunction) => {
             res.locals.user = req.user;
-            if ((req.originalUrl.endsWith(".png") /*|| req.originalUrl.endsWith(".js")*/) && req.method === 'GET') {
+            if ((req.originalUrl.endsWith(".png") /*|| req.originalUrl.endsWith(".js")*/) && req.method === 'GET' && (res as any)._contentLength) {
                 const period = 30000;
                 res.set('Cache-control', `public, max-age=${period}`);
             } else {