Feature-parity migration to ngx-extended-pdf-viewer

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

@@ -1,4 +1,10 @@
-import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core'
 import { FormArray, FormControl, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
@@ -21,7 +27,6 @@ import { DocumentService } from 'src/app/services/rest/document.service'
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
 import { CorrespondentEditDialogComponent } from '../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
-import { PDFDocumentProxy } from 'ng2-pdf-viewer'
 import { ToastService } from 'src/app/services/toast.service'
 import { TextComponent } from '../common/input/text/text.component'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -69,6 +74,9 @@ import {
 } from 'src/app/data/paperless-custom-field'
 import { PaperlessCustomFieldInstance } from 'src/app/data/paperless-custom-field-instance'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { InvalidPDFException } from 'ngx-extended-pdf-viewer/lib/events/invalid-pdf-exception'
+import { PagesLoadedEvent } from 'ngx-extended-pdf-viewer/lib/events/pages-loaded-event'
+import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer'
 
 enum DocumentDetailNavIDs {
   Details = 1,
@@ -136,8 +144,7 @@ export class DocumentDetailComponent
   unsubscribeNotifier: Subject<any> = new Subject()
   docChangeNotifier: Subject<any> = new Subject()
 
-  requiresPassword: boolean = false
-  password: string
+  showPasswordField: boolean = false
 
   ogDate: Date
 
@@ -160,6 +167,8 @@ export class DocumentDetailComponent
   DocumentDetailNavIDs = DocumentDetailNavIDs
   activeNavID: number
 
+  setPasswordCallback: (password: string) => void
+
   constructor(
     private documentsService: DocumentService,
     private route: ActivatedRoute,
@@ -176,9 +185,23 @@ export class DocumentDetailComponent
     private permissionsService: PermissionsService,
     private userService: UserService,
     private customFieldsService: CustomFieldsService,
-    private http: HttpClient
+    private http: HttpClient,
+    private ref: ChangeDetectorRef
   ) {
     super()
+    pdfDefaultOptions.passwordPrompt = {
+      // ngx-extended-pdf-viewer PasswordPrompt
+      open: () => {
+        this.showPasswordField = true
+        ref.detectChanges() // manually trigger change detection
+      },
+      setUpdateCallback: (
+        updateCallback: (password: string) => void,
+        reason: 1 | 2
+      ) => {
+        this.setPasswordCallback = updateCallback
+      },
+    }
   }
 
   titleKeyUp(event) {
@@ -397,7 +420,6 @@ export class DocumentDetailComponent
 
   updateComponent(doc: PaperlessDocument) {
     this.document = doc
-    this.requiresPassword = false
     // this.customFields = doc.custom_fields.concat([])
     this.updateFormForCustomFields()
     this.documentsService
@@ -727,20 +749,21 @@ export class DocumentDetailComponent
       })
   }
 
-  pdfPreviewLoaded(pdf: PDFDocumentProxy) {
-    this.previewNumPages = pdf.numPages
-    if (this.password) this.requiresPassword = false
+  onPagesLoaded(event: PagesLoadedEvent) {
+    this.previewNumPages = event.pagesCount
   }
 
-  onError(event) {
-    if (event.name == 'PasswordException') {
-      this.requiresPassword = true
-    }
+  onPdfLoadingFailed(event: InvalidPDFException) {
+    this.toastService.showError($localize`Error loading PDF`, {
+      error: event.message,
+    })
+    this.ref.detectChanges() // manually trigger change detection
   }
 
   onPasswordKeyUp(event: KeyboardEvent) {
     if ('Enter' == event.key) {
-      this.password = (event.target as HTMLInputElement).value
+      this.showPasswordField = false
+      this.setPasswordCallback((event.target as HTMLInputElement).value)
     }
   }