-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3cc499f
commit cefe7e2
Showing
4 changed files
with
104 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 18 additions & 24 deletions
42
libs/shared/src/features/pdf-viewer/pdf-viewer.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,46 @@ | ||
| import { CommonModule } from '@angular/common'; | ||
| import { Component, Input, ViewEncapsulation } from '@angular/core'; | ||
| import { AfterViewInit, Component, Input, signal, ViewEncapsulation } from '@angular/core'; | ||
| import { toSignal } from '@angular/core/rxjs-interop'; | ||
| import { MatButtonModule } from '@angular/material/button'; | ||
| import { App } from '@capacitor/app'; | ||
| import { Capacitor } from '@capacitor/core'; | ||
| import { pdfDefaultOptions, PDFScriptLoaderService } from 'ngx-extended-pdf-viewer'; | ||
| import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer'; | ||
| import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer'; | ||
|
|
||
| import { PicsaTranslateModule } from '../../modules'; | ||
| import { PicsaPDFViewerService } from './pdf-viewer.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'picsa-pdf-viewer', | ||
| templateUrl: './pdf-viewer.component.html', | ||
| styleUrls: ['./pdf-viewer.component.scss'], | ||
| encapsulation: ViewEncapsulation.None, | ||
| imports: [NgxExtendedPdfViewerModule, MatButtonModule, CommonModule], | ||
| imports: [NgxExtendedPdfViewerModule, MatButtonModule, CommonModule, PicsaTranslateModule], | ||
| }) | ||
| export class PdfViewerComponent { | ||
| legacyBrowser = true; | ||
| export class PdfViewerComponent implements AfterViewInit { | ||
| sidebarOpen = false; | ||
| // additional locales are currently excluded from main build | ||
| locale = 'en-GB'; | ||
| public isNative = Capacitor.isNativePlatform(); | ||
| @Input() page?: number; | ||
| @Input() src: string; | ||
| constructor() { | ||
|
|
||
| public serviceReady = toSignal(this.service.ready$, { initialValue: false }); | ||
| public isCompatible = signal(false); | ||
|
|
||
| constructor(public service: PicsaPDFViewerService) { | ||
| // name of folder pdf viewer assets copied to as declared in `angular.json` | ||
| pdfDefaultOptions.assetsFolder = 'assets/pdf-viewer'; | ||
| // force viewer to not use es5 fallback (not included in build) | ||
| // use comparable check below to share message if not available for legacy browser | ||
| this.runCompatibilityCheck(); | ||
| } | ||
|
|
||
| public restartApp() { | ||
| App.exitApp(); | ||
| async ngAfterViewInit() { | ||
| await this.service.ready(); | ||
| this.isCompatible.set(this.service.isCompatible); | ||
| } | ||
|
|
||
| private async runCompatibilityCheck() { | ||
| // use same check that ngx-extended-pdf calls when checking compatibility locally | ||
|
|
||
| // NOTE - as of v19 requires quite modern features available in native browser (pdfJS v4.1+), | ||
| // and cannot be polyfilled as required by worker/iframe. E.g. Promise.withResolvers | ||
| // https://github.com/stephanrauh/ngx-extended-pdf-viewer/issues/2500 | ||
| // https://github.com/mozilla/pdf.js/pull/17854 | ||
| // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers#browser_compatibility | ||
|
|
||
| // This is currently known to be resolved as of chrome 119 | ||
|
|
||
| // Use inline scripts. Note if Using CSP security should set to false and include | ||
| // `op-chaining-support.js` in list of assets copied to run compatibility checks from js file instead of inline | ||
| const useInlineScripts = true; | ||
| this.legacyBrowser = await new PDFScriptLoaderService(null as any, null as any)['needsES5'](useInlineScripts); | ||
| public restartApp() { | ||
| App.exitApp(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { Injectable, Injector, runInInjectionContext } from '@angular/core'; | ||
| import { PDFScriptLoaderService } from 'ngx-extended-pdf-viewer'; | ||
|
|
||
| import { PicsaAsyncService } from '../../services/asyncService.service'; | ||
| import { ErrorHandlerService } from '../../services/core/error-handler.service'; | ||
|
|
||
| @Injectable({ providedIn: 'root' }) | ||
| export class PicsaPDFViewerService extends PicsaAsyncService { | ||
| public isCompatible = false; | ||
|
|
||
| constructor(private injector: Injector, private errorService: ErrorHandlerService) { | ||
| super(); | ||
| } | ||
|
|
||
| public override async init() { | ||
| await this.runCompatibilityCheck(); | ||
| } | ||
|
|
||
| private async runCompatibilityCheck() { | ||
| // Use same check that ngx-extended-pdf calls when checking compatibility locally | ||
| // As es5 bundles not included will fallback to update prompt in UI if compatibility fails | ||
|
|
||
| // NOTE - as of v19 requires quite modern features available in native browser (pdfJS v4.1+), | ||
| // and cannot be polyfilled as required by worker/iframe. E.g. Promise.withResolvers | ||
| // https://github.com/stephanrauh/ngx-extended-pdf-viewer/issues/2500 | ||
| // https://github.com/mozilla/pdf.js/pull/17854 | ||
| // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers#browser_compatibility | ||
|
|
||
| // This is currently known to be resolved as of chrome 119 | ||
|
|
||
| // Use inline scripts. Note if Using CSP security should set to false and include | ||
| // `op-chaining-support.js` in list of assets copied to run compatibility checks from js file instead of inline | ||
| const useInlineScripts = true; | ||
| try { | ||
| // As ngx-extended viewer uses effect signal for it's own service use injection context to ensure availability | ||
| runInInjectionContext(this.injector, async () => { | ||
| const needsES5 = await new PDFScriptLoaderService(null as any, null as any)['needsES5'](useInlineScripts); | ||
| this.isCompatible = !needsES5; | ||
| }); | ||
| } catch (error) { | ||
| this.isCompatible = false; | ||
| this.errorService.handleError(error as any); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters