From 1a339ce1f42898267659b0cfe4a409cad6de90fc Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 3 Feb 2025 17:06:30 +0100 Subject: [PATCH 1/5] Add isModernSafari helper function to detect Safari version 18 and above --- src/helpers.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/helpers.ts b/src/helpers.ts index 0249b61..9cc57ba 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -39,6 +39,13 @@ const isMobileSafari = (): boolean => { const isSafari = () => getBrowser() === 'safari' || isMobileSafari(); +const isModernSafari = (): boolean => { + const version = navigator.userAgent.match(/OS (\d+_\d+)/); + const iosVersion = version ? version[1].replace('_', '.') : ''; + + return parseFloat(iosVersion) >= 18; +}; + type ListRef = { tabIndex: number; }; @@ -60,4 +67,4 @@ const setListAttributes = (ref: ListRef | undefined) => { ref.tabIndex = -1; }; -export {getBrowser, isMobileSafari, isSafari, setListAttributes}; +export {getBrowser, isMobileSafari, isSafari, isModernSafari, setListAttributes}; From 6484a182935d9e1e50317b854563f3febb9c0b35 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 3 Feb 2025 17:06:34 +0100 Subject: [PATCH 2/5] Add type declarations for pdf.worker modules --- src/pdf.worker.d.ts | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 src/pdf.worker.d.ts diff --git a/src/pdf.worker.d.ts b/src/pdf.worker.d.ts new file mode 100644 index 0000000..ca34ffa --- /dev/null +++ b/src/pdf.worker.d.ts @@ -0,0 +1,2 @@ +declare module 'pdfjs-dist/build/pdf.worker.min.mjs'; +declare module 'pdfjs-dist/legacy/build/pdf.worker.mjs'; From 46c13753d7855fba1dbd442e8429dfbca2ba417b Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 3 Feb 2025 17:06:54 +0100 Subject: [PATCH 3/5] Add asset/source configuration for pdf.worker.min.mjs in webpack config --- example/webpack.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/example/webpack.config.js b/example/webpack.config.js index 62e956d..339bee8 100644 --- a/example/webpack.config.js +++ b/example/webpack.config.js @@ -44,6 +44,11 @@ module.exports = { }, // We are importing this worker as a string by using asset/source otherwise it will default to loading via an HTTPS request later. // This causes issues if we have gone offline before the pdfjs web worker is set up as we won't be able to load it from the server. + { + // eslint-disable-next-line prefer-regex-literals + test: new RegExp('node_modules/pdfjs-dist/build/pdf.worker.min.mjs'), + type: 'asset/source', + }, { // eslint-disable-next-line prefer-regex-literals test: new RegExp('node_modules/pdfjs-dist/legacy/build/pdf.worker.min.mjs'), From 4bdeb0631539a4989befb51b95c65aec1b1a07d4 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 3 Feb 2025 17:07:05 +0100 Subject: [PATCH 4/5] Refactor PDF worker source handling to support legacy worker for mobile Safari --- src/PDFPreviewer.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/PDFPreviewer.tsx b/src/PDFPreviewer.tsx index f5f44b1..4dc441c 100644 --- a/src/PDFPreviewer.tsx +++ b/src/PDFPreviewer.tsx @@ -1,6 +1,7 @@ -// @ts-expect-error - This line imports a module from 'pdfjs-dist' package which lacks TypeScript typings. // eslint-disable-next-line import/extensions -import pdfWorkerSource from 'pdfjs-dist/legacy/build/pdf.worker.mjs'; +import pdfWorkerSource from 'pdfjs-dist/build/pdf.worker.min.mjs'; +// eslint-disable-next-line import/extensions +import pdfWorkerLegacySource from 'pdfjs-dist/legacy/build/pdf.worker.mjs'; import React, {memo, useCallback, useLayoutEffect, useRef, useState} from 'react'; import type {CSSProperties, ReactNode} from 'react'; import times from 'lodash/times'; @@ -14,7 +15,7 @@ import {pdfPreviewerStyles as styles} from './styles'; import PDFPasswordForm, {type PDFPasswordFormProps} from './PDFPasswordForm'; import PageRenderer from './PageRenderer'; import {PAGE_BORDER, LARGE_SCREEN_SIDE_SPACING, DEFAULT_DOCUMENT_OPTIONS, DEFAULT_EXTERNAL_LINK_TARGET, PDF_PASSWORD_FORM_RESPONSES} from './constants'; -import {setListAttributes} from './helpers'; +import {isMobileSafari, isModernSafari, setListAttributes} from './helpers'; type Props = { file: string; @@ -34,7 +35,15 @@ type Props = { type OnPasswordCallback = (password: string | null) => void; -pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(new Blob([pdfWorkerSource], {type: 'text/javascript'})); +const shouldUseLegacyWorker = isMobileSafari() && !isModernSafari(); +const pdfWorker: unknown = shouldUseLegacyWorker ? pdfWorkerLegacySource : pdfWorkerSource; + +console.log('[dev] isMobileSafari', isMobileSafari()); +console.log('[dev] isModernSafari', isModernSafari()); +console.log('[dev] shouldUseLegacyWorker', shouldUseLegacyWorker); +console.log('[dev] pdfWorker', pdfWorker); + +pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(new Blob([pdfWorkerLegacySource], {type: 'text/javascript'})); const DefaultLoadingComponent =

Loading...

; const DefaultErrorComponent =

Failed to load the PDF file :(

; From 821dff789042197ba58b1d857e77dc9df9a12ac0 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 3 Feb 2025 17:30:10 +0100 Subject: [PATCH 5/5] Refactor PDF worker assignment to improve legacy worker handling and remove debug logs --- src/PDFPreviewer.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/PDFPreviewer.tsx b/src/PDFPreviewer.tsx index 4dc441c..a36ab93 100644 --- a/src/PDFPreviewer.tsx +++ b/src/PDFPreviewer.tsx @@ -36,14 +36,10 @@ type Props = { type OnPasswordCallback = (password: string | null) => void; const shouldUseLegacyWorker = isMobileSafari() && !isModernSafari(); -const pdfWorker: unknown = shouldUseLegacyWorker ? pdfWorkerLegacySource : pdfWorkerSource; +// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment +const pdfWorker = shouldUseLegacyWorker ? pdfWorkerLegacySource : pdfWorkerSource; -console.log('[dev] isMobileSafari', isMobileSafari()); -console.log('[dev] isModernSafari', isModernSafari()); -console.log('[dev] shouldUseLegacyWorker', shouldUseLegacyWorker); -console.log('[dev] pdfWorker', pdfWorker); - -pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(new Blob([pdfWorkerLegacySource], {type: 'text/javascript'})); +pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(new Blob([pdfWorker], {type: 'text/javascript'})); const DefaultLoadingComponent =

Loading...

; const DefaultErrorComponent =

Failed to load the PDF file :(

;