From 53e75b9ddd2ecf1a503caa3b7d771504ee3959d4 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 7 Jun 2024 15:05:08 +0300
Subject: [PATCH] Update react-pdf and improve PDFViewer

---
 rsconcept/frontend/package-lock.json          | 37 +++++++++----------
 rsconcept/frontend/package.json               |  2 +-
 .../frontend/src/app/GlobalProviders.tsx      |  2 +-
 .../src/components/ui/PDFViewer/PDFViewer.tsx | 14 ++++---
 .../components/ui/PDFViewer/PageControls.tsx  |  8 ++--
 .../src/pages/ManualsPage/TopicPage.tsx       | 18 ++++++++-
 .../src/pages/ManualsPage/ViewTopic.tsx       |  2 +-
 .../pages/ManualsPage/items/HelpPrivacy.tsx   |  9 ++++-
 8 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/rsconcept/frontend/package-lock.json b/rsconcept/frontend/package-lock.json
index 5e19fafa..3ea66d90 100644
--- a/rsconcept/frontend/package-lock.json
+++ b/rsconcept/frontend/package-lock.json
@@ -22,7 +22,7 @@
         "react-icons": "^4.12.0",
         "react-intl": "^6.6.8",
         "react-loader-spinner": "^5.4.5",
-        "react-pdf": "^7.7.3",
+        "react-pdf": "^9.0.0",
         "react-router-dom": "^6.23.1",
         "react-select": "^5.8.0",
         "react-tabs": "^6.0.2",
@@ -8972,27 +8972,27 @@
         "node": ">=8"
       }
     },
-    "node_modules/path2d-polyfill": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
-      "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==",
+    "node_modules/path2d": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.0.tgz",
+      "integrity": "sha512-KdPAykQX6kmLSOO6Jpu2KNcCED7CKjmaBNGGNuctOsG0hgYO1OdYQaan6cYXJiG0WmXOwZZPILPBimu5QAIw3A==",
       "license": "MIT",
       "optional": true,
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
       }
     },
     "node_modules/pdfjs-dist": {
-      "version": "3.11.174",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",
-      "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==",
+      "version": "4.3.136",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.3.136.tgz",
+      "integrity": "sha512-gzfnt1qc4yA+U46golPGYtU4WM2ssqP2MvFjKga8GEKOrEnzRPrA/9jogLLPYHiA3sGBPJ+p7BdAq+ytmw3jEg==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=18"
       },
       "optionalDependencies": {
         "canvas": "^2.11.2",
-        "path2d-polyfill": "^2.0.1"
+        "path2d": "^0.2.0"
       }
     },
     "node_modules/picocolors": {
@@ -9517,18 +9517,17 @@
       }
     },
     "node_modules/react-pdf": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-7.7.3.tgz",
-      "integrity": "sha512-a2VfDl8hiGjugpqezBTUzJHYLNB7IS7a2t7GD52xMI9xHg8LdVaTMsnM9ZlNmKadnStT/tvX5IfV0yLn+JvYmw==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-9.0.0.tgz",
+      "integrity": "sha512-J+pza8R2p9oNEOJOHIQJI4o5rFK7ji7bBl2IvsHvz1OOyphvuzVDo5tOJwWAFAbxYauCH3Kt8jOvcMJUOpxYZQ==",
       "license": "MIT",
       "dependencies": {
         "clsx": "^2.0.0",
         "dequal": "^2.0.3",
         "make-cancellable-promise": "^1.3.1",
         "make-event-props": "^1.6.0",
-        "merge-refs": "^1.2.1",
-        "pdfjs-dist": "3.11.174",
-        "prop-types": "^15.6.2",
+        "merge-refs": "^1.3.0",
+        "pdfjs-dist": "4.3.136",
         "tiny-invariant": "^1.0.0",
         "warning": "^4.0.0"
       },
@@ -9536,9 +9535,9 @@
         "url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
       },
       "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
diff --git a/rsconcept/frontend/package.json b/rsconcept/frontend/package.json
index 36453a14..26bfd922 100644
--- a/rsconcept/frontend/package.json
+++ b/rsconcept/frontend/package.json
@@ -26,7 +26,7 @@
     "react-icons": "^4.12.0",
     "react-intl": "^6.6.8",
     "react-loader-spinner": "^5.4.5",
-    "react-pdf": "^7.7.3",
+    "react-pdf": "^9.0.0",
     "react-router-dom": "^6.23.1",
     "react-select": "^5.8.0",
     "react-tabs": "^6.0.2",
diff --git a/rsconcept/frontend/src/app/GlobalProviders.tsx b/rsconcept/frontend/src/app/GlobalProviders.tsx
index 1ede839e..d62c99d5 100644
--- a/rsconcept/frontend/src/app/GlobalProviders.tsx
+++ b/rsconcept/frontend/src/app/GlobalProviders.tsx
@@ -11,7 +11,7 @@ import { UsersState } from '@/context/UsersContext';
 
 import ErrorFallback from './ErrorFallback';
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString();
+pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
 
 const resetState = () => {
   console.log('Resetting state after error fallback');
diff --git a/rsconcept/frontend/src/components/ui/PDFViewer/PDFViewer.tsx b/rsconcept/frontend/src/components/ui/PDFViewer/PDFViewer.tsx
index cdf54c9e..112c9447 100644
--- a/rsconcept/frontend/src/components/ui/PDFViewer/PDFViewer.tsx
+++ b/rsconcept/frontend/src/components/ui/PDFViewer/PDFViewer.tsx
@@ -11,21 +11,23 @@ import Overlay from '../Overlay';
 import PageControls from './PageControls';
 
 const MAXIMUM_WIDTH = 1000;
-const MINIMUM_WIDTH = 320;
+const MINIMUM_WIDTH = 300;
 
 interface PDFViewerProps {
   file?: string | ArrayBuffer | Blob;
+  offsetXpx?: number;
+  minWidth?: number;
 }
 
-function PDFViewer({ file }: PDFViewerProps) {
+function PDFViewer({ file, offsetXpx, minWidth = MINIMUM_WIDTH }: PDFViewerProps) {
   const windowSize = useWindowSize();
 
   const [pageCount, setPageCount] = useState(0);
   const [pageNumber, setPageNumber] = useState(1);
 
   const pageWidth = useMemo(() => {
-    return Math.max(MINIMUM_WIDTH, Math.min((windowSize?.width ?? 0) - 10, MAXIMUM_WIDTH));
-  }, [windowSize]);
+    return Math.max(minWidth, Math.min((windowSize?.width ?? 0) - (offsetXpx ?? 0) - 10, MAXIMUM_WIDTH));
+  }, [windowSize, offsetXpx, minWidth]);
 
   function onDocumentLoadSuccess({ numPages }: PDFDocumentProxy) {
     setPageCount(numPages);
@@ -42,14 +44,14 @@ function PDFViewer({ file }: PDFViewerProps) {
         <PageControls pageCount={pageCount} pageNumber={pageNumber} setPageNumber={setPageNumber} />
       </Overlay>
       <Page
-        className='pointer-events-none select-none sm:translate-x-0'
+        className='overflow-hidden pointer-events-none select-none'
         renderTextLayer={false}
         renderAnnotationLayer={false}
         pageNumber={pageNumber}
         width={pageWidth}
         canvasBackground={graphLightT.canvas.background}
       />
-      <Overlay position='bottom-6 left-1/2 -translate-x-1/2' className='flex select-none'>
+      <Overlay position='bottom-3 left-1/2 -translate-x-1/2' className='flex select-none'>
         <PageControls pageCount={pageCount} pageNumber={pageNumber} setPageNumber={setPageNumber} />
       </Overlay>
     </Document>
diff --git a/rsconcept/frontend/src/components/ui/PDFViewer/PageControls.tsx b/rsconcept/frontend/src/components/ui/PDFViewer/PageControls.tsx
index c3bf841d..511288e4 100644
--- a/rsconcept/frontend/src/components/ui/PDFViewer/PageControls.tsx
+++ b/rsconcept/frontend/src/components/ui/PDFViewer/PageControls.tsx
@@ -8,7 +8,7 @@ interface PageControlsProps {
 
 function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProps) {
   return (
-    <>
+    <div className='flex items-center'>
       <button
         type='button'
         className='clr-hover clr-text-controls'
@@ -25,9 +25,9 @@ function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProp
       >
         <IconPageLeft size='1.5rem' />
       </button>
-      <p className='px-3 text-black text-nowrap'>
+      <div className='px-3 text-nowrap'>
         Страница {pageNumber} из {pageCount}
-      </p>
+      </div>
       <button
         type='button'
         className='clr-hover clr-text-controls'
@@ -44,7 +44,7 @@ function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProp
       >
         <IconPageLast size='1.5rem' />
       </button>
-    </>
+    </div>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx
index 230bdc4b..b15e55b0 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx
@@ -1,3 +1,4 @@
+import useWindowSize from '@/hooks/useWindowSize';
 import { HelpTopic } from '@/models/miscellaneous';
 
 import HelpAccess from './items/HelpAccess';
@@ -33,11 +34,20 @@ import HelpTermGraph from './items/HelpTermGraph';
 import HelpTerminologyControl from './items/HelpTerminologyControl';
 import HelpVersions from './items/HelpVersions';
 
+// PDF Viewer setup
+const OFFSET_X_SMALL = 32;
+const OFFSET_X_LARGE = 280;
+
+const MIN_SIZE_SMALL = 300;
+const MIN_SIZE_LARGE = 600;
+
 interface TopicPageProps {
   topic: HelpTopic;
 }
 
 function TopicPage({ topic }: TopicPageProps) {
+  const size = useWindowSize();
+
   if (topic === HelpTopic.MAIN) return <HelpPortal />;
 
   if (topic === HelpTopic.INTERFACE) return <HelpInterface />;
@@ -72,7 +82,13 @@ function TopicPage({ topic }: TopicPageProps) {
   if (topic === HelpTopic.INFO) return <HelpInfo />;
   if (topic === HelpTopic.INFO_RULES) return <HelpRules />;
   if (topic === HelpTopic.INFO_CONTRIB) return <HelpContributors />;
-  if (topic === HelpTopic.INFO_PRIVACY) return <HelpPrivacy />;
+  if (topic === HelpTopic.INFO_PRIVACY)
+    return (
+      <HelpPrivacy
+        offsetXpx={size.isSmall ? OFFSET_X_SMALL : OFFSET_X_LARGE}
+        minWidth={size.isSmall ? MIN_SIZE_SMALL : MIN_SIZE_LARGE}
+      />
+    );
   if (topic === HelpTopic.INFO_API) return <HelpAPI />;
 
   if (topic === HelpTopic.EXTEOR) return <HelpExteor />;
diff --git a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
index 130e86ce..caeb3f33 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
@@ -8,7 +8,7 @@ interface ViewTopicProps {
 
 function ViewTopic({ topic }: ViewTopicProps) {
   return (
-    <AnimateFade key={topic} className='py-2 pl-6 pr-3 mx-auto'>
+    <AnimateFade key={topic} className='px-3 py-2 mx-auto'>
       <TopicPage topic={topic} />
     </AnimateFade>
   );
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/HelpPrivacy.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/HelpPrivacy.tsx
index ee699df8..d4166947 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/items/HelpPrivacy.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/HelpPrivacy.tsx
@@ -1,10 +1,15 @@
 import PDFViewer from '@/components/ui/PDFViewer';
 import { resources } from '@/utils/constants';
 
-function HelpPrivacy() {
+interface HelpPrivacyProps {
+  offsetXpx: number;
+  minWidth: number;
+}
+
+function HelpPrivacy({ offsetXpx, minWidth }: HelpPrivacyProps) {
   return (
     <div>
-      <PDFViewer file={resources.privacy_policy} />
+      <PDFViewer file={resources.privacy_policy} offsetXpx={offsetXpx} minWidth={minWidth} />
     </div>
   );
 }