F: Use embed instead of react-pdf

Significantly decreases package size

README.md

@@ -37,7 +37,6 @@ This readme file is used mostly to document project dependencies and conventions
   - react-intl
   - react-select
   - react-error-boundary
-  - react-pdf
   - react-tooltip
   - react-zoom-pan-pinch
   - reactflow

rsconcept/frontend/package.json

@@ -27,7 +27,6 @@
     "react-icons": "^5.3.0",
     "react-intl": "^6.6.8",
     "react-loader-spinner": "^6.1.6",
-    "react-pdf": "^9.1.0",
     "react-router-dom": "^6.26.0",
     "react-select": "^5.8.0",
     "react-tabs": "^6.0.2",

rsconcept/frontend/src/app/GlobalProviders.tsx

@@ -2,7 +2,6 @@
 
 import { ErrorBoundary } from 'react-error-boundary';
 import { IntlProvider } from 'react-intl';
-import { pdfjs } from 'react-pdf';
 
 import { AuthState } from '@/context/AuthContext';
 import { OptionsState } from '@/context/ConceptOptionsContext';
@@ -12,8 +11,6 @@ import { UsersState } from '@/context/UsersContext';
 
 import ErrorFallback from './ErrorFallback';
 
-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');
 };

rsconcept/frontend/src/components/ui/PDFViewer/PDFViewer.tsx

@@ -1,61 +1,29 @@
 'use client';
 
-import type { PDFDocumentProxy } from 'pdfjs-dist';
+import { useMemo } from 'react';
-import { useMemo, useState } from 'react';
-import { Document, Page } from 'react-pdf';
 
+import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
-import { graphLightT } from '@/styling/color';
 
-import Overlay from '../Overlay';
+const MAXIMUM_WIDTH = 1600;
-import PageControls from './PageControls';
-
-const MAXIMUM_WIDTH = 1000;
 const MINIMUM_WIDTH = 300;
 
 interface PDFViewerProps {
-  file?: string | ArrayBuffer | Blob;
+  file?: string;
   offsetXpx?: number;
   minWidth?: number;
 }
 
 function PDFViewer({ file, offsetXpx, minWidth = MINIMUM_WIDTH }: PDFViewerProps) {
   const windowSize = useWindowSize();
-
+  const { calculateHeight } = useConceptOptions();
-  const [pageCount, setPageCount] = useState(0);
-  const [pageNumber, setPageNumber] = useState(1);
 
   const pageWidth = useMemo(() => {
     return Math.max(minWidth, Math.min((windowSize?.width ?? 0) - (offsetXpx ?? 0) - 10, MAXIMUM_WIDTH));
   }, [windowSize, offsetXpx, minWidth]);
+  const pageHeight = useMemo(() => calculateHeight('1rem'), [calculateHeight]);
 
-  function onDocumentLoadSuccess({ numPages }: PDFDocumentProxy) {
+  return <embed src={`${file}#toolbar=0`} className='p-3' style={{ width: pageWidth, height: pageHeight }} />;
-    setPageCount(numPages);
-  }
-
-  return (
-    <Document
-      file={file}
-      onLoadSuccess={onDocumentLoadSuccess}
-      loading='Загрузка PDF файла...'
-      error='Не удалось загрузить файл.'
-    >
-      <Overlay position='top-3 left-1/2 -translate-x-1/2' className='flex select-none'>
-        <PageControls pageCount={pageCount} pageNumber={pageNumber} setPageNumber={setPageNumber} />
-      </Overlay>
-      <Page
-        className='overflow-hidden pointer-events-none select-none'
-        renderTextLayer={false}
-        renderAnnotationLayer={false}
-        pageNumber={pageNumber}
-        width={pageWidth}
-        canvasBackground={graphLightT.canvas.background}
-      />
-      <Overlay position='bottom-3 left-1/2 -translate-x-1/2' className='flex select-none'>
-        <PageControls pageCount={pageCount} pageNumber={pageNumber} setPageNumber={setPageNumber} />
-      </Overlay>
-    </Document>
-  );
 }
 
 export default PDFViewer;

rsconcept/frontend/src/components/ui/PDFViewer/PageControls.tsx

@@ -1,51 +0,0 @@
-import { IconPageFirst, IconPageLast, IconPageLeft, IconPageRight } from '@/components/Icons';
-
-interface PageControlsProps {
-  pageNumber: number;
-  pageCount: number;
-  setPageNumber: React.Dispatch<React.SetStateAction<number>>;
-}
-
-function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProps) {
-  return (
-    <div className='flex items-center'>
-      <button
-        type='button'
-        className='clr-hover clr-text-controls'
-        onClick={() => setPageNumber(1)}
-        disabled={pageNumber < 2}
-      >
-        <IconPageFirst size='1.5rem' />
-      </button>
-      <button
-        type='button'
-        className='clr-hover clr-text-controls'
-        onClick={() => setPageNumber(prev => prev - 1)}
-        disabled={pageNumber < 2}
-      >
-        <IconPageLeft size='1.5rem' />
-      </button>
-      <div className='px-3 text-nowrap'>
-        Страница {pageNumber} из {pageCount}
-      </div>
-      <button
-        type='button'
-        className='clr-hover clr-text-controls'
-        onClick={() => setPageNumber(prev => prev + 1)}
-        disabled={pageNumber >= pageCount}
-      >
-        <IconPageRight size='1.5rem' />
-      </button>
-      <button
-        type='button'
-        className='clr-hover clr-text-controls'
-        onClick={() => setPageNumber(pageCount)}
-        disabled={pageNumber >= pageCount}
-      >
-        <IconPageLast size='1.5rem' />
-      </button>
-    </div>
-  );
-}
-
-export default PageControls;