From 78a056a97971f6fc9b68224d266bb69a10bcdc33 Mon Sep 17 00:00:00 2001 From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com> Date: Tue, 14 Oct 2025 06:56:48 +0000 Subject: [PATCH] Update PDF viewer to display user-uploaded documents as slides Integrates the react-pdf library to render PDF documents page by page as slides, replacing the previous canvas-based rendering approach. Includes necessary setup for the PDF worker and static file serving. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/VGhYqEL --- .replit | 4 ++ client/src/pages/Report.tsx | 89 +++++++++++-------------------------- package-lock.json | 83 ++++++++++++++++++++++++++++++++++ package.json | 1 + public/pdf.worker.min.mjs | 28 ++++++++++++ server/index.ts | 3 ++ 6 files changed, 144 insertions(+), 64 deletions(-) create mode 100644 public/pdf.worker.min.mjs 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}