configuration option for type of PDF viewer fixes #337

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -1,5 +1,5 @@
 <app-page-header [(title)]="title">
-    <div class="input-group input-group-sm mr-5 d-none d-md-flex" *ngIf="getContentType() == 'application/pdf'">
+    <div class="input-group input-group-sm mr-5 d-none d-md-flex" *ngIf="getContentType() == 'application/pdf' && !useNativePdfViewer">
       <div class="input-group-prepend">
         <div class="input-group-text" i18n>Page</div>
       </div>
@@ -134,8 +134,13 @@
     </div>
 
     <div class="col-md-6 col-xl-8 mb-3">
-      <div class="pdf-viewer-container" *ngIf="getContentType() == 'application/pdf'">
-        <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="true" [show-all]="true" [(page)]="previewCurrentPage" [render-text-mode]="2" (after-load-complete)="pdfPreviewLoaded($event)"></pdf-viewer>
-      </div>
+        <ng-container *ngIf="getContentType() == 'application/pdf'">
+            <div class="preview-sticky pdf-viewer-container" *ngIf="!useNativePdfViewer ; else nativePdfViewer">
+                <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="true" [show-all]="true" [(page)]="previewCurrentPage" [render-text-mode]="2" (after-load-complete)="pdfPreviewLoaded($event)"></pdf-viewer>
+            </div>
+            <ng-template #nativePdfViewer>
+                <object [data]="previewUrl | safe" type="application/pdf" class="preview-sticky" width="100%"></object>
+            </ng-template>
+        </ng-container>     
     </div>
 </div>

src-ui/src/app/components/document-detail/document-detail.component.scss

@@ -1,6 +1,9 @@
-.pdf-viewer-container {
+.preview-sticky {
   height: calc(100vh - 160px);
   top: 70px;
   position: sticky;
+}
+
+.pdf-viewer-container {
   background-color: gray;
 }

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -18,6 +18,7 @@ import { DocumentTypeEditDialogComponent } from '../manage/document-type-list/do
 import { PDFDocumentProxy } from 'ng2-pdf-viewer';
 import { ToastService } from 'src/app/services/toast.service';
 import { TextComponent } from '../common/input/text/text.component';
+import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service';
 
 @Component({
   selector: 'app-document-detail',
@@ -70,7 +71,12 @@ export class DocumentDetailComponent implements OnInit {
     private openDocumentService: OpenDocumentsService,
     private documentListViewService: DocumentListViewService,
     private documentTitlePipe: DocumentTitlePipe,
-    private toastService: ToastService) { }
+    private toastService: ToastService,
+    private settings: SettingsService) { }
+
+  get useNativePdfViewer(): boolean {
+    return this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
+  }
 
   getContentType() {
     return this.metadata?.has_archive_version ? 'application/pdf' : this.metadata?.original_mime_type

src-ui/src/app/components/manage/settings/settings.component.html

@@ -28,16 +28,24 @@
           </div>
         </div>
 
+        <div class="form-row form-group">
+          <div class="col-md-3 col-form-label">
+            <span i18n>Document editor</span>
+          </div>
+          <div class="col">
+
+            <app-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"></app-input-check>
+
+          </div>
+        </div>
+
         <div class="form-row form-group">
           <div class="col-md-3 col-form-label">
             <span i18n>Dark mode</span>
           </div>
           <div class="col">
-            <app-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem" (change)="toggleDarkModeSetting()"></app-input-check>
-            <div class="custom-control custom-switch" *ngIf="!settingsForm.value.darkModeUseSystem">
-              <input type="checkbox" class="custom-control-input" id="darkModeEnabled" formControlName="darkModeEnabled" [checked]="settingsForm.value.darkModeEnabled">
-              <label class="custom-control-label" for="darkModeEnabled" i18n>Enable dark mode</label>
-            </div>
+            <app-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem"></app-input-check>
+            <app-input-check [hidden]="settingsForm.value.darkModeUseSystem" i18n-title title="Enable dark mode" formControlName="darkModeEnabled"></app-input-check>
           </div>
         </div>
 

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -21,6 +21,7 @@ export class SettingsComponent implements OnInit {
     'documentListItemPerPage': new FormControl(this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)),
     'darkModeUseSystem': new FormControl(this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)),
     'darkModeEnabled': new FormControl(this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED)),
+    'useNativePdfViewer': new FormControl(this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)),
     'savedViews': this.savedViewGroup
   })
 
@@ -55,20 +56,13 @@ export class SettingsComponent implements OnInit {
     })
   }
 
-  toggleDarkModeSetting() {
-    if (this.settingsForm.value.darkModeUseSystem) {
-      (this.settingsForm.controls.darkModeEnabled as FormControl).disable()
-    } else {
-      (this.settingsForm.controls.darkModeEnabled as FormControl).enable()
-    }
-  }
-
   private saveLocalSettings() {
     this.settings.set(SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE, this.settingsForm.value.bulkEditApplyOnClose)
     this.settings.set(SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS, this.settingsForm.value.bulkEditConfirmationDialogs)
     this.settings.set(SETTINGS_KEYS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
     this.settings.set(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, this.settingsForm.value.darkModeUseSystem)
     this.settings.set(SETTINGS_KEYS.DARK_MODE_ENABLED, (this.settingsForm.value.darkModeEnabled == true).toString())
+    this.settings.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, this.settingsForm.value.useNativePdfViewer)
     this.documentListViewService.updatePageSize()
     this.settings.updateDarkModeSettings()
     this.toastService.showInfo($localize`Settings saved successfully.`)