Consolidate preview components

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

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

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

@@ -4,52 +4,84 @@ 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 render object if use native PDF viewer', () => {
+  it('should guess if file is pdf by file name', () => {
-    component.useNativePdfViewer = true
+    expect(component.isPdf).toBeTruthy()
-    component.previewURL = 'sample.pdf'
+    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 not use native PDF viewer', () => {
+  it('should render pngx viewer if native PDF viewer disabled', () => {
-    component.useNativePdfViewer = false
+    settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
-    component.previewURL = 'sample.pdf'
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('object'))).toBeNull()
     expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
   })
 
-  it('should render plain text if needed', () => {
-    component.renderAsPlainText = true
-    component.previewText = 'Hello world'
-    fixture.detectChanges()
-    expect(fixture.debugElement.query(By.css('object'))).toBeNull()
-    expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).toBeNull()
-    expect(fixture.debugElement.nativeElement.textContent).toContain(
-      'Hello world'
-    )
-  })
-
   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()

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

@@ -1,4 +1,8 @@
 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',
@@ -7,21 +11,38 @@ import { Component, Input } from '@angular/core'
 })
 export class PreviewPopupComponent {
   @Input()
-  renderAsPlainText: boolean = false
+  document: PaperlessDocument
-
-  @Input()
-  previewText: string
-
-  @Input()
-  previewURL: string
-
-  @Input()
-  useNativePdfViewer: boolean = false
 
   error = false
+
   requiresPassword: boolean = false
 
-  onError(event) {
+  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 {

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -36,12 +36,7 @@
               </svg>
             </a>
             <ng-template #previewContent>
-              <pngx-preview-popup
+              <pngx-preview-popup [document]="doc"></pngx-preview-popup>
-                [previewURL]="getPreviewUrl(doc)"
-                [useNativePdfViewer]="useNativePdfViewer"
-                [previewText]="doc.content"
-                [renderAsPlainText]="!isPdf(doc)">
-              </pngx-preview-popup>
             </ng-template>
             <a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
               <svg class="buttonicon-xs" fill="currentColor">

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -22,8 +22,6 @@ import { DocumentListViewService } from 'src/app/services/document-list-view.ser
 import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
-import { SettingsService } from 'src/app/services/settings.service'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 
 @Component({
   selector: 'pngx-saved-view-widget',
@@ -42,8 +40,7 @@ export class SavedViewWidgetComponent
     private list: DocumentListViewService,
     private consumerStatusService: ConsumerStatusService,
     public openDocumentsService: OpenDocumentsService,
-    public documentListViewService: DocumentListViewService,
+    public documentListViewService: DocumentListViewService
-    private settingsService: SettingsService
   ) {
     super()
   }
@@ -113,10 +110,6 @@ export class SavedViewWidgetComponent
     ])
   }
 
-  get useNativePdfViewer(): boolean {
-    return this.settingsService.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
-  }
-
   getPreviewUrl(document: PaperlessDocument): string {
     return this.documentService.getPreviewUrl(document.id)
   }
@@ -125,13 +118,6 @@ export class SavedViewWidgetComponent
     return this.documentService.getDownloadUrl(document.id)
   }
 
-  isPdf(document: PaperlessDocument) {
-    return (
-      document.original_file_name?.endsWith('.pdf') ||
-      document.archived_file_name?.endsWith('.pdf')
-    )
-  }
-
   mouseEnterPreview(doc: PaperlessDocument) {
     this.popover = this.popovers.get(this.documents.indexOf(doc))
     this.mouseOnPreview = true
@@ -155,6 +141,8 @@ export class SavedViewWidgetComponent
   }
 
   mouseLeaveCard() {
+    console.log('leave card')
+
     this.popover?.close()
   }
 

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -56,12 +56,7 @@
               </svg>&nbsp;<span class="d-none d-md-inline" i18n>View</span>
             </a>
             <ng-template #previewContent>
-              <pngx-preview-popup
+              <pngx-preview-popup [document]="document"></pngx-preview-popup>
-                [previewURL]="previewUrl"
-                [useNativePdfViewer]="useNativePdfViewer"
-                [previewText]="document.content"
-                [renderAsPlainText]="!isPdf">
-              </pngx-preview-popup>
             </ng-template>
             <a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
               <svg class="sidebaricon" fill="currentColor" class="sidebaricon">

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts

@@ -19,9 +19,7 @@ import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
 import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
 import { DocumentCardLargeComponent } from './document-card-large.component'
 import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
-import { SettingsService } from 'src/app/services/settings.service'
 import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 
 const doc = {
   id: 10,
@@ -43,7 +41,6 @@ const doc = {
 describe('DocumentCardLargeComponent', () => {
   let component: DocumentCardLargeComponent
   let fixture: ComponentFixture<DocumentCardLargeComponent>
-  let settingsService: SettingsService
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -67,7 +64,6 @@ describe('DocumentCardLargeComponent', () => {
     }).compileComponents()
 
     fixture = TestBed.createComponent(DocumentCardLargeComponent)
-    settingsService = TestBed.inject(SettingsService)
     component = fixture.componentInstance
     component.document = doc
     fixture.detectChanges()
@@ -93,23 +89,6 @@ describe('DocumentCardLargeComponent', () => {
     expect(component.popover.isOpen()).toBeFalsy()
   }))
 
-  it('should guess if file is pdf by file name', () => {
-    component.document.original_file_name = 'sample.pdf'
-    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()
-  })
-
-  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 trim content', () => {
     expect(component.contentTrimmed).toHaveLength(503) // includes ...
   })

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -103,17 +103,6 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions {
     return this.documentService.getPreviewUrl(this.document.id)
   }
 
-  get useNativePdfViewer(): boolean {
-    return this.settingsService.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
-  }
-
-  get isPdf(): boolean {
-    return (
-      this.document?.original_file_name?.endsWith('.pdf') ||
-      this.document?.archived_file_name?.endsWith('.pdf')
-    )
-  }
-
   mouseEnterPreview() {
     this.mouseOnPreview = true
     if (!this.popover.isOpen()) {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -94,12 +94,7 @@
             </svg>
           </a>
           <ng-template #previewContent>
-            <pngx-preview-popup
+            <pngx-preview-popup [document]="document"></pngx-preview-popup>
-              [previewURL]="previewUrl"
-              [useNativePdfViewer]="useNativePdfViewer"
-              [previewText]="document.content"
-              [renderAsPlainText]="!isPdf">
-            </pngx-preview-popup>
           </ng-template>
           <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" i18n-title (click)="$event.stopPropagation()">
             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts

@@ -22,8 +22,6 @@ import { By } from '@angular/platform-browser'
 import { TagComponent } from '../../common/tag/tag.component'
 import { PaperlessTag } from 'src/app/data/paperless-tag'
 import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
-import { SettingsService } from 'src/app/services/settings.service'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
 
 const doc = {
@@ -56,7 +54,6 @@ const doc = {
 describe('DocumentCardSmallComponent', () => {
   let component: DocumentCardSmallComponent
   let fixture: ComponentFixture<DocumentCardSmallComponent>
-  let settingsService: SettingsService
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -81,7 +78,6 @@ describe('DocumentCardSmallComponent', () => {
     }).compileComponents()
 
     fixture = TestBed.createComponent(DocumentCardSmallComponent)
-    settingsService = TestBed.inject(SettingsService)
     component = fixture.componentInstance
     component.document = Object.assign({}, doc)
     fixture.detectChanges()
@@ -111,23 +107,6 @@ describe('DocumentCardSmallComponent', () => {
     ).toHaveLength(6)
   })
 
-  it('should guess if file is pdf by file name', () => {
-    component.document.original_file_name = 'sample.pdf'
-    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()
-  })
-
-  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 show preview on mouseover after delay to preload content', fakeAsync(() => {
     component.mouseEnterPreview()
     expect(component.popover.isOpen()).toBeTruthy()

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -77,17 +77,6 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
     return $localize`Private`
   }
 
-  get useNativePdfViewer(): boolean {
-    return this.settingsService.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
-  }
-
-  get isPdf(): boolean {
-    return (
-      this.document?.original_file_name?.endsWith('.pdf') ||
-      this.document?.archived_file_name?.endsWith('.pdf')
-    )
-  }
-
   getTagsLimited$() {
     const limit = this.document.notes.length > 0 ? 6 : 7
     return this.document.tags$.pipe(