From 766b31ce20496ad39022dafa8fde3b6086ae4a18 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:29:47 -0700
Subject: [PATCH] Make it a setting

---
 .../admin/settings/settings.component.html    | 23 ++++++++++---------
 .../admin/settings/settings.component.spec.ts |  2 +-
 .../admin/settings/settings.component.ts      | 10 +++++++-
 .../document-detail.component.html            |  2 +-
 .../document-detail.component.ts              |  4 ++++
 src-ui/src/app/data/ui-settings.ts            |  7 ++++++
 6 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src-ui/src/app/components/admin/settings/settings.component.html b/src-ui/src/app/components/admin/settings/settings.component.html
index 5b554690e..93deac992 100644
--- a/src-ui/src/app/components/admin/settings/settings.component.html
+++ b/src-ui/src/app/components/admin/settings/settings.component.html
@@ -118,17 +118,6 @@
           </div>
         </div>
 
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Document editor</span>
-          </div>
-          <div class="col">
-
-            <pngx-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></pngx-input-check>
-
-          </div>
-        </div>
-
         <div class="row mb-3">
           <div class="col-md-3 col-form-label pt-0">
             <span i18n>Sidebar</span>
@@ -182,12 +171,24 @@
 
         <h4 class="mt-4" i18n>Document editing</h4>
 
+        <div class="row mb-3">
+          <div class="offset-md-3 col">
+            <pngx-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></pngx-input-check>
+          </div>
+        </div>
+
         <div class="row mb-3">
           <div class="offset-md-3 col">
             <pngx-input-check i18n-title title="Automatically remove inbox tag(s) on save" formControlName="documentEditingRemoveInboxTags"></pngx-input-check>
           </div>
         </div>
 
+        <div class="row mb-3">
+          <div class="offset-md-3 col">
+            <pngx-input-check i18n-title title="Show document thumbnail during loading" formControlName="documentEditingOverlayThumbnail"></pngx-input-check>
+          </div>
+        </div>
+
         <h4 class="mt-4" i18n>Bulk editing</h4>
 
         <div class="row mb-3">
diff --git a/src-ui/src/app/components/admin/settings/settings.component.spec.ts b/src-ui/src/app/components/admin/settings/settings.component.spec.ts
index 98d8e2d72..bd9fe5664 100644
--- a/src-ui/src/app/components/admin/settings/settings.component.spec.ts
+++ b/src-ui/src/app/components/admin/settings/settings.component.spec.ts
@@ -315,7 +315,7 @@ describe('SettingsComponent', () => {
     expect(toastErrorSpy).toHaveBeenCalled()
     expect(storeSpy).toHaveBeenCalled()
     expect(appearanceSettingsSpy).not.toHaveBeenCalled()
-    expect(setSpy).toHaveBeenCalledTimes(27)
+    expect(setSpy).toHaveBeenCalledTimes(28)
 
     // succeed
     storeSpy.mockReturnValueOnce(of(true))
diff --git a/src-ui/src/app/components/admin/settings/settings.component.ts b/src-ui/src/app/components/admin/settings/settings.component.ts
index fcb7d7c65..c08a869e2 100644
--- a/src-ui/src/app/components/admin/settings/settings.component.ts
+++ b/src-ui/src/app/components/admin/settings/settings.component.ts
@@ -88,7 +88,6 @@ export class SettingsComponent
     darkModeEnabled: new FormControl(null),
     darkModeInvertThumbs: new FormControl(null),
     themeColor: new FormControl(null),
-    useNativePdfViewer: new FormControl(null),
     displayLanguage: new FormControl(null),
     dateLocale: new FormControl(null),
     dateFormat: new FormControl(null),
@@ -99,7 +98,9 @@ export class SettingsComponent
     defaultPermsViewGroups: new FormControl(null),
     defaultPermsEditUsers: new FormControl(null),
     defaultPermsEditGroups: new FormControl(null),
+    useNativePdfViewer: new FormControl(null),
     documentEditingRemoveInboxTags: new FormControl(null),
+    documentEditingOverlayThumbnail: new FormControl(null),
     searchDbOnly: new FormControl(null),
     searchLink: new FormControl(null),
 
@@ -308,6 +309,9 @@ export class SettingsComponent
       documentEditingRemoveInboxTags: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS
       ),
+      documentEditingOverlayThumbnail: this.settings.get(
+        SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL
+      ),
       searchDbOnly: this.settings.get(SETTINGS_KEYS.SEARCH_DB_ONLY),
       searchLink: this.settings.get(SETTINGS_KEYS.SEARCH_FULL_TYPE),
       savedViews: {},
@@ -539,6 +543,10 @@ export class SettingsComponent
       SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS,
       this.settingsForm.value.documentEditingRemoveInboxTags
     )
+    this.settings.set(
+      SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL,
+      this.settingsForm.value.documentEditingOverlayThumbnail
+    )
     this.settings.set(
       SETTINGS_KEYS.SEARCH_DB_ONLY,
       this.settingsForm.value.searchDbOnly
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 0e52096fd..7e63457fe 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -351,7 +351,7 @@
 
 <ng-template #previewContent>
   <div class="thumb-preview position-absolute pe-none" [class.fade]="previewLoaded">
-    <img [src]="thumbUrl | safeUrl" class="" width="100%" height="auto" alt="Document loading..." i18n-alt />
+    <img *ngIf="showThumbnailOverlay" [src]="thumbUrl | safeUrl" class="" width="100%" height="auto" alt="Document loading..." i18n-alt />
     <div class="position-absolute top-0 start-0 m-2 p-2 d-flex align-items-center justify-content-center">
       <div>
         <div class="spinner-border spinner-border-sm me-2" role="status"></div>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 49c83cd57..3bd725c45 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -232,6 +232,10 @@ export class DocumentDetailComponent
     return this.getRenderType(this.document?.mime_type)
   }
 
+  get showThumbnailOverlay(): boolean {
+    return this.settings.get(SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL)
+  }
+
   private getRenderType(mimeType: string): ContentRenderType {
     if (!mimeType) return ContentRenderType.Unknown
     if (mimeType === 'application/pdf') {
diff --git a/src-ui/src/app/data/ui-settings.ts b/src-ui/src/app/data/ui-settings.ts
index d1e6bdcec..d7a6c284e 100644
--- a/src-ui/src/app/data/ui-settings.ts
+++ b/src-ui/src/app/data/ui-settings.ts
@@ -61,6 +61,8 @@ export const SETTINGS_KEYS = {
   DEFAULT_PERMS_EDIT_GROUPS: 'general-settings:permissions:default-edit-groups',
   DOCUMENT_EDITING_REMOVE_INBOX_TAGS:
     'general-settings:document-editing:remove-inbox-tags',
+  DOCUMENT_EDITING_OVERLAY_THUMBNAIL:
+    'general-settings:document-editing:overlay-thumbnail',
   SEARCH_DB_ONLY: 'general-settings:search:db-only',
   SEARCH_FULL_TYPE: 'general-settings:search:more-link',
   EMPTY_TRASH_DELAY: 'trash_delay',
@@ -229,6 +231,11 @@ export const SETTINGS: UiSetting[] = [
     type: 'boolean',
     default: false,
   },
+  {
+    key: SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL,
+    type: 'boolean',
+    default: true,
+  },
   {
     key: SETTINGS_KEYS.SEARCH_DB_ONLY,
     type: 'boolean',