Chore: revert to third party pdf viewer package

src-ui/angular.json

@@ -76,8 +76,7 @@
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
-              "pdfjs-dist",
-              "pdfjs-dist/web/pdf_viewer",
+              "ng2-pdf-viewer",
               "filesize",
               "file-saver"
             ],

src-ui/e2e/document-detail/document-detail.spec.ts

@@ -71,7 +71,7 @@ test('should show a mobile preview', async ({ page }) => {
   await page.setViewportSize({ width: 400, height: 1000 })
   await expect(page.getByRole('tab', { name: 'Preview' })).toBeVisible()
   await page.getByRole('tab', { name: 'Preview' }).click()
-  await page.waitForSelector('pngx-pdf-viewer')
+  await page.waitForSelector('pdf-viewer')
 })
 
 test('should show a list of notes', async ({ page }) => {

src-ui/jest.config.js

@@ -7,7 +7,6 @@ module.exports = {
     'abstract-name-filter-service',
     'abstract-paperless-service',
   ],
-  coveragePathIgnorePatterns: ['/src/app/components/common/pdf-viewer/*'],
   transformIgnorePatterns: [`<rootDir>/node_modules/(?!.*\\.mjs$|lodash-es)`],
   moduleNameMapper: {
     '^src/(.*)': '<rootDir>/src/$1',

src-ui/package.json

@@ -27,13 +27,13 @@
     "bootstrap": "^5.3.3",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
+    "ng2-pdf-viewer": "^10.2.1",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^9.0.0",
     "ngx-cookie-service": "^17.1.0",
     "ngx-file-drop": "^16.0.0",
     "ngx-filesize": "^3.0.3",
     "ngx-ui-tour-ng-bootstrap": "^14.0.2",
-    "pdfjs-dist": "^3.11.174",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "uuid": "^9.0.1",

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

@@ -105,7 +105,7 @@ import { CustomFieldsComponent } from './components/manage/custom-fields/custom-
 import { CustomFieldEditDialogComponent } from './components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { CustomFieldsDropdownComponent } from './components/common/custom-fields-dropdown/custom-fields-dropdown.component'
 import { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
-import { PdfViewerComponent } from './components/common/pdf-viewer/pdf-viewer.component'
+import { PdfViewerModule } from 'ng2-pdf-viewer'
 import { DocumentLinkComponent } from './components/common/input/document-link/document-link.component'
 import { PreviewPopupComponent } from './components/common/preview-popup/preview-popup.component'
 import { SwitchComponent } from './components/common/input/switch/switch.component'
@@ -475,7 +475,6 @@ function initializeApp(settings: SettingsService) {
     CustomFieldEditDialogComponent,
     CustomFieldsDropdownComponent,
     ProfileEditDialogComponent,
-    PdfViewerComponent,
     DocumentLinkComponent,
     PreviewPopupComponent,
     SwitchComponent,
@@ -500,6 +499,7 @@ function initializeApp(settings: SettingsService) {
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
+    PdfViewerModule,
     NgxFileDropModule,
     NgSelectModule,
     ColorSliderModule,

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.html

@@ -13,12 +13,12 @@ <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
                 <div class="input-group-text" i18n>of {{totalPages}}</div>
             </div>
             <div class="pdf-viewer-container w-100 mt-3">
-                <pngx-pdf-viewer [src]="pdfSrc" [(page)]="page"
+                <pdf-viewer [src]="pdfSrc" [(page)]="page"
                 [original-size]="false"
                 [zoom]="1"
                 zoom-scale="page-fit"
                 (after-load-complete)="pdfPreviewLoaded($event)">
-                </pngx-pdf-viewer>
+                </pdf-viewer>
             </div>
         </div>
         <div class="col-4">

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss

@@ -2,7 +2,7 @@
     background-color: gray;
     height: 350px;
 
-    pngx-pdf-viewer {
+    pdf-viewer {
       width: 100%;
       height: 100%;
     }

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts

@@ -6,7 +6,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { DocumentService } from 'src/app/services/rest/document.service'
-import { PdfViewerComponent } from '../../pdf-viewer/pdf-viewer.component'
+import { PdfViewerModule } from 'ng2-pdf-viewer'
 
 describe('SplitConfirmDialogComponent', () => {
   let component: SplitConfirmDialogComponent
@@ -15,13 +15,14 @@ describe('SplitConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SplitConfirmDialogComponent, PdfViewerComponent],
+      declarations: [SplitConfirmDialogComponent],
       providers: [NgbActiveModal],
       imports: [
         HttpClientTestingModule,
         NgxBootstrapIconsModule.pick(allIcons),
         ReactiveFormsModule,
         FormsModule,
+        PdfViewerModule,
       ],
     }).compileComponents()
 

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { DocumentService } from 'src/app/services/rest/document.service'
-import { PDFDocumentProxy } from '../../pdf-viewer/typings'
+import { PDFDocumentProxy } from 'ng2-pdf-viewer'
 
 @Component({
   selector: 'pngx-split-confirm-dialog',