diff --git a/app/mission-control/pdf-viewer/page.tsx b/app/mission-control/pdf-viewer/page.tsx index 30baf0b..b002b32 100644 --- a/app/mission-control/pdf-viewer/page.tsx +++ b/app/mission-control/pdf-viewer/page.tsx @@ -1,33 +1,18 @@ "use client"; import BackToMC from "@/components/mission-control/BackToMC"; -import dynamic from "next/dynamic"; - -// Dynamically import PDFViewer with SSR disabled -const PDFViewer = dynamic(() => import("@/components/mission-control/PDFViewerClient"), { - ssr: false, - loading: () => ( -
-
-
-

Loading PDF viewer...

-
-
- ), -}); +import PDFViewerClient from "@/components/mission-control/PDFViewerClient"; export default function PdfViewerPage() { return (
- {/* Header */}

📄 PDF Viewer

View and analyze PDF documents

- {/* Content */}
- +
); diff --git a/components/mission-control/PDFViewerClient.tsx b/components/mission-control/PDFViewerClient.tsx index 4c80405..22f2a37 100644 --- a/components/mission-control/PDFViewerClient.tsx +++ b/components/mission-control/PDFViewerClient.tsx @@ -1,10 +1,12 @@ "use client"; import { useState, useRef, useEffect } from "react"; -import * as pdfjsLib from "pdfjs-dist"; -// Set worker source - use CDN -pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`; +declare global { + interface Window { + pdfjsLib: any; + } +} export default function PDFViewerClient() { const [pdfData, setPdfData] = useState(null); @@ -14,11 +16,27 @@ export default function PDFViewerClient() { const [numPages, setNumPages] = useState(0); const [currentPage, setCurrentPage] = useState(1); const [scale, setScale] = useState(1.5); + const [pdfjsLoaded, setPdfjsLoaded] = useState(false); const canvasRef = useRef(null); const pdfDocRef = useRef(null); + useEffect(() => { + // Load PDF.js from CDN + const script = document.createElement("script"); + script.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"; + script.async = true; + script.onload = () => { + window.pdfjsLib = window.pdfjsLib; + setPdfjsLoaded(true); + }; + script.onerror = () => { + setError("Failed to load PDF.js library"); + }; + document.body.appendChild(script); + }, []); + const renderPage = async (pageNum: number) => { - if (!pdfDocRef.current || !canvasRef.current) return; + if (!pdfDocRef.current || !canvasRef.current || !window.pdfjsLib) return; try { const page = await pdfDocRef.current.getPage(pageNum); @@ -39,14 +57,14 @@ export default function PDFViewerClient() { }; useEffect(() => { - if (pdfDocRef.current && currentPage) { + if (pdfDocRef.current && currentPage && pdfjsLoaded) { renderPage(currentPage); } - }, [currentPage, scale]); + }, [currentPage, scale, pdfjsLoaded]); const handleFileUpload = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; - if (!file) return; + if (!file || !window.pdfjsLib) return; if (file.type !== "application/pdf") { setError("Please select a PDF file"); @@ -60,7 +78,7 @@ export default function PDFViewerClient() { try { const arrayBuffer = await file.arrayBuffer(); - const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise; + const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise; pdfDocRef.current = pdf; setNumPages(pdf.numPages); setPdfData("local"); @@ -74,7 +92,7 @@ export default function PDFViewerClient() { const handleUrlSubmit = async () => { const input = prompt("Enter PDF URL:"); - if (!input) return; + if (!input || !window.pdfjsLib) return; setLoading(true); setError(null); @@ -86,7 +104,7 @@ export default function PDFViewerClient() { const response = await fetch(input); const arrayBuffer = await response.arrayBuffer(); - const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise; + const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise; pdfDocRef.current = pdf; setNumPages(pdf.numPages); setPdfData("url"); @@ -125,21 +143,26 @@ export default function PDFViewerClient() { accept="application/pdf" onChange={handleFileUpload} className="hidden" + disabled={!pdfjsLoaded} /> + {!pdfjsLoaded && ( + Loading PDF.js... + )} + {pdfData && ( <>
- {/* Page navigation */}