configuration option for type of PDF viewer fixes #337

src-ui/src/app/app.module.ts

@@ -58,6 +58,7 @@ import { MetadataCollapseComponent } from './components/document-detail/metadata
 import { SelectDialogComponent } from './components/common/select-dialog/select-dialog.component';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { NumberComponent } from './components/common/input/number/number.component';
+import { SafePipe } from './pipes/safe.pipe';
 
 @NgModule({
   declarations: [
@@ -106,7 +107,8 @@ import { NumberComponent } from './components/common/input/number/number.compone
     DocumentTitlePipe,
     MetadataCollapseComponent,
     SelectDialogComponent,
-    NumberComponent
+    NumberComponent,
+    SafePipe
   ],
   imports: [
     BrowserModule,

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.`)

src-ui/src/app/pipes/safe.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SafePipe } from './safe.pipe';
+
+describe('SafePipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src-ui/src/app/pipes/safe.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+
+  constructor(private sanitizer: DomSanitizer) { }
+
+  transform(url) {
+    if (url == null) {
+      return this.sanitizer.bypassSecurityTrustResourceUrl("")
+    } else {
+      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+  }
+
+} 

src-ui/src/app/services/settings.service.ts

@@ -12,7 +12,8 @@ export const SETTINGS_KEYS = {
   BULK_EDIT_APPLY_ON_CLOSE: 'general-settings:bulk-edit:apply-on-close',
   DOCUMENT_LIST_SIZE: 'general-settings:documentListSize',
   DARK_MODE_USE_SYSTEM: 'general-settings:dark-mode:use-system',
-  DARK_MODE_ENABLED: 'general-settings:dark-mode:enabled'
+  DARK_MODE_ENABLED: 'general-settings:dark-mode:enabled',
+  USE_NATIVE_PDF_VIEWER: 'general-settings:document-details:native-pdf-viewer'
 }
 
 const SETTINGS: PaperlessSettings[] = [
@@ -20,7 +21,8 @@ const SETTINGS: PaperlessSettings[] = [
   {key: SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE, type: "boolean", default: false},
   {key: SETTINGS_KEYS.DOCUMENT_LIST_SIZE, type: "number", default: 50},
   {key: SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, type: "boolean", default: true},
-  {key: SETTINGS_KEYS.DARK_MODE_ENABLED, type: "boolean", default: false}
+  {key: SETTINGS_KEYS.DARK_MODE_ENABLED, type: "boolean", default: false},
+  {key: SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, type: "boolean", default: false}
 ]
 
 @Injectable({