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 */}
- {/* Zoom controls */}