EM-5829: pdfjs-dist upgrade to 4 from 2 (#933)

* EM-5829: pdfjs-dist upgrade to 4 from 2 * yarn audit issues
hmcts · Feb 13, 2024 · 839fc20 · 839fc20
1 parent da57d4b
commit 839fc20
Show file tree

Hide file tree

Showing 10 changed files with 313 additions and 133 deletions.
diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
     "nodemon": "^1.19.0",
     "nunjucks": "^3.2.4",
     "otp": "^0.1.3",
-    "pdfjs-dist": "2.5.207",
+    "pdfjs-dist": "4.0.379",
     "protractor-screenshot-utils": "^1.0.5",
     "request-promise-native": "1.0.9",
     "require-directory": "2.1.1",

diff --git a/projects/media-viewer/src/lib/toolbar/highlight-toolbar/highlight-toolbar.component.ts b/projects/media-viewer/src/lib/toolbar/highlight-toolbar/highlight-toolbar.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { SearchMode, SearchType, ToolbarEventService } from '../toolbar-event.service';
 import { ToolbarButtonVisibilityService } from '../toolbar-button-visibility.service';
 import * as fromStore from '../../store/reducers/reducers';
@@ -11,7 +11,7 @@ import * as fromRedactSelectors from '../../store/selectors/redaction.selectors'
   templateUrl: './highlight-toolbar.component.html',
   styleUrls: ['./highlight-toolbar.component.scss']
 })
-export class HighlightToolbarComponent implements OnInit {
+export class HighlightToolbarComponent implements OnInit, OnDestroy {
 
   private subscriptions: Subscription[] = [];
   redactionAllInProgress: boolean;

diff --git a/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.provider.ts b/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.provider.ts
@@ -1,12 +1,12 @@
 import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
 import { ElementRef, Injectable } from '@angular/core';
-import {DocumentLoadProgress, PageEvent, PdfJsWrapper} from './pdf-js-wrapper';
+import { DocumentLoadProgress, PageEvent, PdfJsWrapper } from './pdf-js-wrapper';
 import { Subject } from 'rxjs';
 import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
 import { Outline } from '../side-bar/outline-item/outline.model';
 import { PdfPosition } from '../../../store/reducers/document.reducer';
 
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
 export class PdfJsWrapperFactory {
 
   private linkService: pdfjsViewer.PDFLinkService;
@@ -42,7 +42,7 @@ export class PdfJsWrapperFactory {
       new Subject<string>(),
       new Subject<DocumentLoadProgress>(),
       new Subject<any>(),
-      new Subject<Outline>(),
+      new Subject<Outline[]>(),
       new Subject(),
       new Subject<PageEvent[]>(),
       new Subject<{ location: PdfPosition }>()

diff --git a/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.spec.ts b/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.spec.ts
@@ -6,6 +6,7 @@ import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
 import { fakeAsync, tick } from '@angular/core/testing';
 import { Outline } from '../side-bar/outline-item/outline.model';
 import { PdfPosition } from '../../../store/reducers/document.reducer';
+import { RefProxy } from 'pdfjs-dist/types/src/display/api';
 
 
 describe('PdfJsWrapper', () => {
@@ -52,7 +53,7 @@ describe('PdfJsWrapper', () => {
       new Subject<string>(),
       new Subject<DocumentLoadProgress>(),
       new Subject<any>(),
-      new Subject<Outline>(),
+      new Subject<Outline[]>(),
       new Subject(),
       new Subject<PageEvent[]>(),
       new Subject<{ location: PdfPosition }>()
@@ -92,13 +93,26 @@ describe('PdfJsWrapper', () => {
     const outlineItem: Outline = <Outline>{};
     outlineItem.dest = [{ num: 254, gen: 0, }, { name: 'Fit', }];
     outlineItem.items = [];
-    const outline: Outline = <Outline>{};
+    const outline: Outline = {
+      bold: true,
+      color: new Uint8ClampedArray(2),
+      count: 1,
+      dest: [],
+      italic: true,
+      items: [],
+      newWindow: false,
+      pageNumber: 1,
+      title: 'Outline',
+      unsafeUrl: '',
+      url: ''
+    };
     outline.dest = [{ num: 254, gen: 0, }, { name: 'Fit', }];
     outline.items = [];
     outline.items.push(outlineItem);
     outlineArray.push(outline);
+    const ref: RefProxy = { num: 254, gen: 0, }
 
-    const mockDocument = { numPages: 10, getOutline: () => (outlineArray), getPageIndex: ({ }) => (0), getMetadata: () => ({ info: { Title: 'Title' } }) };
+    const mockDocument = { numPages: 10, getOutline: () => (outlineArray), getPageIndex: (ref) => (0), getMetadata: () => ({ info: { Title: 'Title' } }) };
 
     spyOn(wrapper, 'createLoadingTask')
       .and.returnValue({ promise: Promise.resolve(mockDocument) });

diff --git a/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.ts b/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.ts
@@ -1,10 +1,10 @@
+import { Outline } from './../side-bar/outline-item/outline.model';
 import { RedactionSearch } from './../../../toolbar/redaction-search-bar/redaction-search.model';
 import * as pdfjsLib from 'pdfjs-dist';
 import { DownloadManager, PDFViewer } from 'pdfjs-dist/web/pdf_viewer';
 import 'pdfjs-dist/build/pdf.worker';
 import { Subject } from 'rxjs';
 import { SearchOperation, SearchResultsCount, ToolbarEventService } from '../../../toolbar/toolbar-event.service';
-import { Outline } from '../side-bar/outline-item/outline.model';
 import { PdfPosition } from '../../../store/reducers/document.reducer';
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = '/assets/build/pdf.worker.min.js';
@@ -23,7 +23,7 @@ export class PdfJsWrapper {
 
   private zoomValue: number;
   private documentTitle: string;
-  private documentOutline: Outline;
+  private documentOutline: Outline[];
 
   constructor(
     private readonly pdfViewer: PDFViewer,
@@ -32,7 +32,7 @@ export class PdfJsWrapper {
     public readonly documentLoadInit: Subject<string>,
     public readonly documentLoadProgress: Subject<DocumentLoadProgress>,
     public readonly documentLoaded: Subject<any>,
-    public readonly outlineLoaded: Subject<Outline>,
+    public readonly outlineLoaded: Subject<Outline[]>,
     public readonly documentLoadFailed: Subject<Error>,
     public readonly pageRendered: Subject<PageEvent[]>,
     public readonly positionUpdated: Subject<{ location: PdfPosition }>
@@ -101,7 +101,23 @@ export class PdfJsWrapper {
       this.pdfViewer.setDocument(pdfDocument);
       this.pdfViewer.linkService.setDocument(pdfDocument, null);
 
-      const outline = await pdfDocument.getOutline();
+      const outlineNode = await pdfDocument.getOutline();
+      const outline = outlineNode.map(x => {
+        return {
+          bold: x.bold,
+          color: x.color,
+          count: x.count,
+          dest: x.dest,
+          italic: x.italic,
+          items: x.items,
+          newWindow: x.newWindow,
+          title: x.title,
+          unsafeUrl: x.unsafeUrl,
+          url: x.url
+        } as Outline
+      });
+
+
 
       if (outline) {
         await this.setOutlinePageNumbers(pdfDocument, outline);
@@ -110,7 +126,7 @@ export class PdfJsWrapper {
       this.documentOutline = outline;
       this.outlineLoaded.next(this.documentOutline);
       const pdfMetaData = await pdfDocument.getMetadata();
-      this.setCurrentPDFTitle(pdfMetaData.info.Title);
+      this.setCurrentPDFTitle((pdfMetaData.info as any)?.Title);
     } catch (e) {
       this.documentLoadFailed.next(e);
     }

diff --git a/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-viewer.component.ts b/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-viewer.component.ts
@@ -65,14 +65,14 @@ export class PdfViewerComponent implements AfterContentInit, OnChanges, OnDestro
   highlightMode: Observable<boolean>;
   drawMode: BehaviorSubject<boolean>;
 
-  documentOutline: Outline;
+  documentOutline: Outline[];
   loadingDocument = false;
   loadingDocumentProgress: number;
   errorMessage: string;
   hasDifferentPageSize = false;
 
-  @ViewChild('viewerContainer', {static: true}) viewerContainer: ElementRef<HTMLDivElement>;
-  @ViewChild('pdfViewer', {static: false}) pdfViewer: ElementRef<HTMLDivElement>;
+  @ViewChild('viewerContainer', { static: true }) viewerContainer: ElementRef<HTMLDivElement>;
+  @ViewChild('pdfViewer', { static: false }) pdfViewer: ElementRef<HTMLDivElement>;
 
   private pdfWrapper: PdfJsWrapper;
   private $subscription: Subscription;
@@ -120,8 +120,8 @@ export class PdfViewerComponent implements AfterContentInit, OnChanges, OnDestro
     );
     this.$subscription.add(this.toolbarEvents.grabNDrag.subscribe(grabNDrag => this.enableGrabNDrag = grabNDrag));
     this.$subscription.add(this.toolbarEvents.commentsPanelVisible.subscribe(toggle => {
-        this.showCommentsPanel = toggle;
-      })
+      this.showCommentsPanel = toggle;
+    })
     );
     this.$subscription.add(this.viewerEvents.navigationEvent.subscribe(dest => this.goToDestination(dest)));
     this.$subscription.add(

diff --git a/...ia-viewer/src/lib/viewers/pdf-viewer/side-bar/outline-item/outline-item.component.spec.ts b/...ia-viewer/src/lib/viewers/pdf-viewer/side-bar/outline-item/outline-item.component.spec.ts
@@ -8,12 +8,12 @@ describe('OutlineItemComponent', () => {
 
   const outline: Outline = {
     bold: true,
-    color: [],
+    color: new Uint8ClampedArray(2),
     count: 1,
     dest: [],
     italic: true,
     items: [],
-    newWindow: '',
+    newWindow: false,
     pageNumber: 0,
     title: 'Outline',
     unsafeUrl: '',
@@ -22,9 +22,9 @@ describe('OutlineItemComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ OutlineItemComponent ]
+      declarations: [OutlineItemComponent]
     })
-    .compileComponents();
+      .compileComponents();
     fixture = TestBed.createComponent(OutlineItemComponent);
     component = fixture.componentInstance;
     component.outline = outline;
@@ -76,7 +76,7 @@ describe('OutlineItemComponent', () => {
     component.currentPageNumber = 3;
     expect(component.isViewedItem(outline, undefined)).toBe(false);
 
-    const nextOutline = <Outline> {};
+    const nextOutline = <Outline>{};
     nextOutline.pageNumber = 2;
     component.currentPageNumber = 1;
     expect(component.isViewedItem(outline, nextOutline)).toBe(true);
@@ -87,7 +87,7 @@ describe('OutlineItemComponent', () => {
   it('should find the ending page number', () => {
     component.endPage = Math.floor(Math.random() * 1000);
     expect(component.findEndPage(undefined)).toBe(component.endPage);
-    const nextOutline = <Outline> {};
+    const nextOutline = <Outline>{};
     nextOutline.pageNumber = Math.floor(Math.random() * 10000);
     expect(component.findEndPage(nextOutline)).toBe(nextOutline.pageNumber);
   });

diff --git a/projects/media-viewer/src/lib/viewers/pdf-viewer/side-bar/outline-item/outline.model.ts b/projects/media-viewer/src/lib/viewers/pdf-viewer/side-bar/outline-item/outline.model.ts
@@ -1,13 +1,13 @@
 export interface Outline {
   bold: boolean;
-  color: string[];
-  count: number;
-  dest: {}[];
+  color: Uint8ClampedArray;
+  count: number | undefined;
+  dest: string | Array<any> | null;
   italic: boolean;
   items: Outline[];
-  newWindow: any;
-  pageNumber: number;
+  newWindow: boolean | undefined;
+  pageNumber?: number;
   title: string;
-  unsafeUrl: any;
-  url: any;
+  unsafeUrl: string | undefined;
+  url: string | null;
 }
diff --git a/yarn-audit-known-issues b/yarn-audit-known-issues