Enhancement: Improved popup preview, respect embedded viewer, error handling (#4947)

src-ui/src/app/components/common/preview-popup/preview-popup.component.html

@@ -0,0 +1,22 @@
+<div class="preview-popup-container">
+    <div *ngIf="error; else noError" class="w-100 h-100 position-relative">
+        <p class="fst-italic position-absolute top-50 start-50 translate-middle" i18n>Error loading preview</p>
+    </div>
+    <ng-template #noError>
+        <object *ngIf="renderAsObject; else pngxViewer" [data]="previewURL | safeUrl" width="100%" class="bg-light" [class.p-2]="!isPdf"></object>
+        <ng-template #pngxViewer>
+            <div *ngIf="requiresPassword" class="w-100 h-100 position-relative">
+                <svg width="2em" height="2em" fill="currentColor" class="position-absolute top-50 start-50 translate-middle">
+                  <use xlink:href="assets/bootstrap-icons.svg#file-earmark-lock"/>
+                </svg>
+            </div>
+            <pngx-pdf-viewer *ngIf="!requiresPassword"
+                [src]="previewURL"
+                [original-size]="false"
+                [show-borders]="true"
+                [show-all]="true"
+                (error)="onError($event)">
+            </pngx-pdf-viewer>
+        </ng-template>
+    </ng-template>
+</div>

src-ui/src/app/components/common/preview-popup/preview-popup.component.scss

@@ -0,0 +1,9 @@
+.preview-popup-container > * {
+    width: 30rem !important;
+    height: 22rem !important;
+    overflow-y: scroll;
+}
+
+::ng-deep .popover.popover-preview {
+    max-width: 32rem;
+}

src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts

@@ -0,0 +1,92 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { PreviewPopupComponent } from './preview-popup.component'
+import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'
+import { By } from '@angular/platform-browser'
+import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
+import { SettingsService } from 'src/app/services/settings.service'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { DocumentService } from 'src/app/services/rest/document.service'
+
+const doc = {
+  id: 10,
+  title: 'Document 10',
+  content: 'Cupcake ipsum dolor sit amet ice cream.',
+  original_file_name: 'sample.pdf',
+}
+
+describe('PreviewPopupComponent', () => {
+  let component: PreviewPopupComponent
+  let fixture: ComponentFixture<PreviewPopupComponent>
+  let settingsService: SettingsService
+  let documentService: DocumentService
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PreviewPopupComponent, PdfViewerComponent, SafeUrlPipe],
+      imports: [HttpClientTestingModule],
+    })
+    settingsService = TestBed.inject(SettingsService)
+    documentService = TestBed.inject(DocumentService)
+    jest
+      .spyOn(documentService, 'getPreviewUrl')
+      .mockImplementation((id) => doc.original_file_name)
+    fixture = TestBed.createComponent(PreviewPopupComponent)
+    component = fixture.componentInstance
+    component.document = doc
+    fixture.detectChanges()
+  })
+
+  it('should guess if file is pdf by file name', () => {
+    expect(component.isPdf).toBeTruthy()
+    component.document.archived_file_name = 'sample.pdf'
+    expect(component.isPdf).toBeTruthy()
+    component.document.archived_file_name = undefined
+    component.document.original_file_name = 'sample.txt'
+    expect(component.isPdf).toBeFalsy()
+    component.document.original_file_name = 'sample.pdf'
+  })
+
+  it('should return settings for native PDF viewer', () => {
+    settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+    expect(component.useNativePdfViewer).toBeFalsy()
+    settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, true)
+    expect(component.useNativePdfViewer).toBeTruthy()
+  })
+
+  it('should render object if native PDF viewer enabled', () => {
+    settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, true)
+    fixture.detectChanges()
+    expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
+  })
+
+  it('should render pngx viewer if native PDF viewer disabled', () => {
+    settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+    fixture.detectChanges()
+    expect(fixture.debugElement.query(By.css('object'))).toBeNull()
+    expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
+  })
+
+  it('should show lock icon on password error', () => {
+    settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+    component.onError({ name: 'PasswordException' })
+    fixture.detectChanges()
+    expect(component.requiresPassword).toBeTruthy()
+    expect(fixture.debugElement.query(By.css('svg'))).not.toBeNull()
+  })
+
+  it('should fall back to object for non-pdf', () => {
+    component.document.original_file_name = 'sample.png'
+    fixture.detectChanges()
+    expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
+  })
+
+  it('should show message on error', () => {
+    component.onError({})
+    fixture.detectChanges()
+    expect(fixture.debugElement.nativeElement.textContent).toContain(
+      'Error loading preview'
+    )
+  })
+})

src-ui/src/app/components/common/preview-popup/preview-popup.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input } from '@angular/core'
+import { PaperlessDocument } from 'src/app/data/paperless-document'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { SettingsService } from 'src/app/services/settings.service'
+
+@Component({
+  selector: 'pngx-preview-popup',
+  templateUrl: './preview-popup.component.html',
+  styleUrls: ['./preview-popup.component.scss'],
+})
+export class PreviewPopupComponent {
+  @Input()
+  document: PaperlessDocument
+
+  error = false
+
+  requiresPassword: boolean = false
+
+  get renderAsObject(): boolean {
+    return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
+  }
+
+  get previewURL() {
+    return this.documentService.getPreviewUrl(this.document.id)
+  }
+
+  get useNativePdfViewer(): boolean {
+    return this.settingsService.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
+  }
+
+  get isPdf(): boolean {
+    // We dont have time to retrieve metadata, make a best guess by file name
+    return (
+      this.document?.original_file_name?.endsWith('.pdf') ||
+      this.document?.archived_file_name?.endsWith('.pdf')
+    )
+  }
+
+  constructor(
+    private settingsService: SettingsService,
+    private documentService: DocumentService
+  ) {}
+
+  onError(event: any) {
+    if (event.name == 'PasswordException') {
+      this.requiresPassword = true
+    } else {
+      this.error = true
+    }
+  }
+}