avoid crashes when urlfield is undefined. prevent multiple views from setting thumbnail for same doc at same time. prevent unregistered views from creating thumbnails.

3 files changed, 54 insertions, 32 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2ad8b8af0..8847c0c6a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -239,7 +239,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         return this.props.NativeDimScaling?.() || 1;
     }
     @computed get thumb() {
-        return ImageCast(this.layoutDoc['thumb-frozen'], ImageCast(this.layoutDoc.thumb))?.url.href.replace('.png', '_m.png');
+        return ImageCast(this.layoutDoc['thumb-frozen'], ImageCast(this.layoutDoc.thumb))?.url?.href.replace('.png', '_m.png');
     }
     @computed get hidden() {
         return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Hidden);
@@ -1286,7 +1286,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     @observable _: string = '';
     @computed get renderDoc() {
         TraceMobx();
-        const thumb = ImageCast(this.layoutDoc['thumb-frozen'], ImageCast(this.layoutDoc.thumb))?.url.href.replace('.png', '_m.png');
+        const thumb = ImageCast(this.layoutDoc['thumb-frozen'], ImageCast(this.layoutDoc.thumb))?.url?.href.replace('.png', '_m.png');
         const isButton = this.props.Document.type === DocumentType.FONTICON;
         if (!(this.props.Document instanceof Doc) || GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate || (this.hidden && !this.props.treeViewDoc)) return null;
         return (
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index dd14822af..ca9f363c1 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -134,25 +134,30 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     };
 
-    lockout = false;
     updateThumb = async () => {
         const imageBitmap = ImageCast(this.layoutDoc['thumb-frozen'])?.url.href;
         const scrollTop = NumCast(this.layoutDoc._scrollTop);
         const nativeWidth = NumCast(this.layoutDoc.nativeWidth);
         const nativeHeight = (nativeWidth * this.props.PanelHeight()) / this.props.PanelWidth();
-        if (!this.lockout && this._iframe && !imageBitmap && (scrollTop !== this.layoutDoc.thumbScrollTop || nativeWidth !== this.layoutDoc.thumbNativeWidth || nativeHeight !== this.layoutDoc.thumbNativeHeight)) {
+        if (
+            !this.rootDoc.thumbLockout &&
+            !this.props.dontRegisterView &&
+            this._iframe &&
+            !imageBitmap &&
+            (scrollTop !== this.layoutDoc.thumbScrollTop || nativeWidth !== this.layoutDoc.thumbNativeWidth || nativeHeight !== this.layoutDoc.thumbNativeHeight)
+        ) {
             var htmlString = this._iframe.contentDocument && new XMLSerializer().serializeToString(this._iframe.contentDocument);
             if (!htmlString) {
                 htmlString = await (await fetch(Utils.CorsProxy(this.webField!.href))).text();
             }
             this.layoutDoc.thumb = undefined;
-            this.lockout = true; // lock to prevent multiple thumb updates.
+            this.rootDoc.thumbLockout = true; // lock to prevent multiple thumb updates.
             CreateImage(this._webUrl.endsWith('/') ? this._webUrl.substring(0, this._webUrl.length - 1) : this._webUrl, this._iframe.contentDocument?.styleSheets ?? [], htmlString, nativeWidth, nativeHeight, scrollTop)
                 .then((data_url: any) => {
                     VideoBox.convertDataUri(data_url, this.layoutDoc[Id] + '-icon' + new Date().getTime(), true, this.layoutDoc[Id] + '-icon').then(returnedfilename =>
                         setTimeout(
                             action(() => {
-                                this.lockout = false;
+                                this.rootDoc.thumbLockout = false;
                                 this.layoutDoc.thumb = new ImageField(returnedfilename);
                                 this.layoutDoc.thumbScrollTop = scrollTop;
                                 this.layoutDoc.thumbNativeWidth = nativeWidth;
diff --git a/src/fields/URLField.ts b/src/fields/URLField.ts
index 36dd56a1a..00c78e231 100644
--- a/src/fields/URLField.ts
+++ b/src/fields/URLField.ts
@@ -1,16 +1,14 @@
-import { Deserializable } from "../client/util/SerializationHelper";
-import { serializable, custom } from "serializr";
-import { ObjectField } from "./ObjectField";
-import { ToScriptString, ToString, Copy } from "./FieldSymbols";
-import { scriptingGlobal } from "../client/util/ScriptingGlobals";
-import { Utils } from "../Utils";
+import { Deserializable } from '../client/util/SerializationHelper';
+import { serializable, custom } from 'serializr';
+import { ObjectField } from './ObjectField';
+import { ToScriptString, ToString, Copy } from './FieldSymbols';
+import { scriptingGlobal } from '../client/util/ScriptingGlobals';
+import { Utils } from '../Utils';
 
 function url() {
     return custom(
         function (value: URL) {
-            return value.origin === window.location.origin ?
-                value.pathname :
-                value.href;
+            return value?.origin === window.location.origin ? value.pathname : value?.href;
         },
         function (jsonValue: string) {
             return new URL(jsonValue, window.location.origin);
@@ -26,23 +24,23 @@ export abstract class URLField extends ObjectField {
     constructor(url: URL);
     constructor(url: URL | string) {
         super();
-        if (typeof url === "string") {
-            url = url.startsWith("http") ? new URL(url) : new URL(url, window.location.origin);
+        if (typeof url === 'string') {
+            url = url.startsWith('http') ? new URL(url) : new URL(url, window.location.origin);
         }
         this.url = url;
     }
 
     [ToScriptString]() {
-        if (Utils.prepend(this.url.pathname) === this.url.href) {
+        if (Utils.prepend(this.url?.pathname) === this.url?.href) {
             return `new ${this.constructor.name}("${this.url.pathname}")`;
         }
         return `new ${this.constructor.name}("${this.url.href}")`;
     }
     [ToString]() {
-        if (Utils.prepend(this.url.pathname) === this.url.href) {
+        if (Utils.prepend(this.url?.pathname) === this.url?.href) {
             return this.url.pathname;
         }
-        return this.url.href;
+        return this.url?.href;
     }
 
     [Copy](): this {
@@ -50,16 +48,35 @@ export abstract class URLField extends ObjectField {
     }
 }
 
-export const nullAudio = "https://actions.google.com/sounds/v1/alarms/beep_short.ogg";
-
-@scriptingGlobal @Deserializable("audio") export class AudioField extends URLField { }
-@scriptingGlobal @Deserializable("recording") export class RecordingField extends URLField { }
-@scriptingGlobal @Deserializable("image") export class ImageField extends URLField { }
-@scriptingGlobal @Deserializable("video") export class VideoField extends URLField { }
-@scriptingGlobal @Deserializable("pdf") export class PdfField extends URLField { }
-@scriptingGlobal @Deserializable("web") export class WebField extends URLField { }
-@scriptingGlobal @Deserializable("map") export class MapField extends URLField { }
-@scriptingGlobal @Deserializable("csv") export class CsvField extends URLField { }
-@scriptingGlobal @Deserializable("youtube") export class YoutubeField extends URLField { }
-@scriptingGlobal @Deserializable("webcam") export class WebCamField extends URLField { }
+export const nullAudio = 'https://actions.google.com/sounds/v1/alarms/beep_short.ogg';
 
+@scriptingGlobal
+@Deserializable('audio')
+export class AudioField extends URLField {}
+@scriptingGlobal
+@Deserializable('recording')
+export class RecordingField extends URLField {}
+@scriptingGlobal
+@Deserializable('image')
+export class ImageField extends URLField {}
+@scriptingGlobal
+@Deserializable('video')
+export class VideoField extends URLField {}
+@scriptingGlobal
+@Deserializable('pdf')
+export class PdfField extends URLField {}
+@scriptingGlobal
+@Deserializable('web')
+export class WebField extends URLField {}
+@scriptingGlobal
+@Deserializable('map')
+export class MapField extends URLField {}
+@scriptingGlobal
+@Deserializable('csv')
+export class CsvField extends URLField {}
+@scriptingGlobal
+@Deserializable('youtube')
+export class YoutubeField extends URLField {}
+@scriptingGlobal
+@Deserializable('webcam')
+export class WebCamField extends URLField {}