diff --git a/.replit b/.replit index 25794b7..1fe2d4a 100644 --- a/.replit +++ b/.replit @@ -38,6 +38,10 @@ externalPort = 6000 localPort = 43349 externalPort = 3000 +[[ports]] +localPort = 43469 +externalPort = 5000 + [[ports]] localPort = 43777 externalPort = 4200 diff --git a/client/src/pages/Report.tsx b/client/src/pages/Report.tsx index 2b7b9e1..67999f2 100644 --- a/client/src/pages/Report.tsx +++ b/client/src/pages/Report.tsx @@ -11,9 +11,9 @@ import { useState, useEffect, useRef } from "react"; import type { MediaOutlet } from "@shared/schema"; import Footer from "@/components/Footer"; import SearchModal from "@/components/SearchModal"; -import * as pdfjsLib from 'pdfjs-dist'; +import { Document, Page, pdfjs } from 'react-pdf'; -pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`; +pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'; const reportContent: Record = { 'chayan-asli': { @@ -32,71 +32,32 @@ const reportContent: Record(null); - const [loading, setLoading] = useState(true); - const canvasRef = useRef(null); - useEffect(() => { - const loadPdf = async () => { - try { - const loadingTask = pdfjsLib.getDocument('/attached_assets/mohamed_salah_pdf_en_1760419721874.pdf'); - const pdf = await loadingTask.promise; - setPdfDoc(pdf); - setNumPages(pdf.numPages); - setLoading(false); - } catch (error) { - console.error('Error loading PDF:', error); - setLoading(false); - } - }; - loadPdf(); - }, []); - - useEffect(() => { - if (!pdfDoc || !canvasRef.current) return; - - const renderPage = async () => { - const page = await pdfDoc.getPage(currentSlide + 1); - const canvas = canvasRef.current!; - const context = canvas.getContext('2d')!; - - const containerWidth = canvas.parentElement?.clientWidth || 800; - const viewport = page.getViewport({ scale: 1 }); - const scale = containerWidth / viewport.width; - const scaledViewport = page.getViewport({ scale }); - - canvas.width = scaledViewport.width; - canvas.height = scaledViewport.height; - - await page.render({ - canvasContext: context, - viewport: scaledViewport - }).promise; - }; - - renderPage(); - }, [pdfDoc, currentSlide]); - - if (loading) { - return ( -
-

Loading slides...

-
- ); - } + const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { + setNumPages(numPages); + setCurrentSlide(1); // Reset to first slide after load + }; return (
- + Loading slides...

} + > + +
@@ -104,19 +65,19 @@ function MohamedSalahSlides() {
- Slide {currentSlide + 1} of {numPages} + Slide {currentSlide} of {numPages}