fix(pdf-viewer): use PDF.js with client-side rendering
- Created PDFViewerClient component with PDF.js - Uses dynamic import with ssr: false to avoid server-side issues - Full page navigation and zoom controls - Upload or load from URL
This commit is contained in:
@@ -1,69 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import BackToMC from "@/components/mission-control/BackToMC";
|
||||
import { useState } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
// Dynamically import PDFViewer with SSR disabled
|
||||
const PDFViewer = dynamic(() => import("@/components/mission-control/PDFViewerClient"), {
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin text-6xl mb-4">⏳</div>
|
||||
<p className="text-slate-400">Loading PDF viewer...</p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
|
||||
export default function PdfViewerPage() {
|
||||
const [pdfData, setPdfData] = useState<string | null>(null);
|
||||
const [pdfName, setPdfName] = useState<string>("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [viewMode, setViewMode] = useState<"embed" | "download">("embed");
|
||||
|
||||
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
if (file.type !== "application/pdf") {
|
||||
setError("Please select a PDF file");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setPdfName(file.name);
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const base64 = event.target?.result as string;
|
||||
setPdfData(base64);
|
||||
setLoading(false);
|
||||
};
|
||||
reader.onerror = () => {
|
||||
setError("Failed to read file");
|
||||
setLoading(false);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const handleUrlSubmit = async () => {
|
||||
const input = prompt("Enter PDF URL:");
|
||||
if (!input) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
new URL(input);
|
||||
// Use Google Docs viewer for external URLs
|
||||
const googleViewerUrl = `https://docs.google.com/gview?url=${encodeURIComponent(input)}&embedded=true`;
|
||||
setPdfData(googleViewerUrl);
|
||||
setPdfName(input.split("/").pop() || "document.pdf");
|
||||
setLoading(false);
|
||||
} catch {
|
||||
setError("Invalid URL");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
if (!pdfData) return;
|
||||
const link = document.createElement("a");
|
||||
link.href = pdfData;
|
||||
link.download = pdfName || "document.pdf";
|
||||
link.click();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-white flex flex-col">
|
||||
{/* Header */}
|
||||
@@ -72,131 +25,9 @@ export default function PdfViewerPage() {
|
||||
<p className="text-slate-400 text-sm">View and analyze PDF documents</p>
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="bg-slate-900/50 border-b border-slate-800 px-6 py-3 flex-shrink-0">
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<label className="cursor-pointer bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
|
||||
📁 Upload PDF
|
||||
<input
|
||||
type="file"
|
||||
accept="application/pdf"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button
|
||||
onClick={handleUrlSubmit}
|
||||
className="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
🔗 Load from URL
|
||||
</button>
|
||||
|
||||
{pdfData && (
|
||||
<>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
⬇️ Download
|
||||
</button>
|
||||
|
||||
{pdfData.startsWith("data:") && (
|
||||
<a
|
||||
href={pdfData}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
↗ Open in New Tab
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-hidden flex flex-col">
|
||||
{error && (
|
||||
<div className="bg-red-900/50 border border-red-700 rounded-lg p-4 m-4 max-w-md">
|
||||
<h3 className="text-red-400 font-bold mb-2">Error</h3>
|
||||
<p className="text-red-300">{error}</p>
|
||||
<button
|
||||
onClick={() => setError(null)}
|
||||
className="mt-2 bg-red-700 hover:bg-red-600 text-white px-4 py-1 rounded text-sm"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!pdfData && !loading && (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="text-8xl mb-6 opacity-50">📄</div>
|
||||
<h2 className="text-xl font-bold text-white mb-2">No PDF Loaded</h2>
|
||||
<p className="text-slate-400 mb-6">Upload a PDF or enter a URL to view it</p>
|
||||
<div className="text-slate-500 text-sm space-y-1">
|
||||
<p>• Upload your resume to let Horus analyze it</p>
|
||||
<p>• Supports PDF files up to 50MB</p>
|
||||
<p>• Or load from any public PDF URL</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin text-6xl mb-4">⏳</div>
|
||||
<p className="text-slate-400">Loading PDF...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pdfData && !loading && (
|
||||
<div className="flex-1 overflow-auto bg-slate-800 p-4">
|
||||
{pdfData.startsWith("data:") ? (
|
||||
// For uploaded files, show download prompt since browser PDF rendering in iframe is blocked
|
||||
<div className="flex flex-col items-center justify-center h-full">
|
||||
<div className="text-8xl mb-6">📄</div>
|
||||
<h2 className="text-xl font-bold text-white mb-2">{pdfName}</h2>
|
||||
<p className="text-slate-400 mb-6">PDF loaded successfully</p>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-lg font-medium"
|
||||
>
|
||||
⬇️ Download PDF
|
||||
</button>
|
||||
<a
|
||||
href={pdfData}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-slate-700 hover:bg-slate-600 text-white px-6 py-3 rounded-lg font-medium"
|
||||
>
|
||||
↗ Open in New Tab
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// For external URLs, use Google Docs viewer
|
||||
<iframe
|
||||
src={pdfData}
|
||||
className="w-full h-full min-h-[700px] bg-white shadow-2xl rounded"
|
||||
title="PDF Viewer"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="bg-slate-900/50 border-t border-slate-800 px-6 py-2 flex-shrink-0">
|
||||
<p className="text-slate-500 text-xs">
|
||||
💡 Tip: Upload your resume PDF and Horus can analyze the design to recreate it
|
||||
</p>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<PDFViewer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,241 @@
|
||||
"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`;
|
||||
|
||||
export default function PDFViewerClient() {
|
||||
const [pdfData, setPdfData] = useState<string | null>(null);
|
||||
const [pdfName, setPdfName] = useState<string>("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [numPages, setNumPages] = useState(0);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [scale, setScale] = useState(1.5);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const pdfDocRef = useRef<any>(null);
|
||||
|
||||
const renderPage = async (pageNum: number) => {
|
||||
if (!pdfDocRef.current || !canvasRef.current) return;
|
||||
|
||||
try {
|
||||
const page = await pdfDocRef.current.getPage(pageNum);
|
||||
const viewport = page.getViewport({ scale });
|
||||
const canvas = canvasRef.current;
|
||||
const context = canvas.getContext("2d");
|
||||
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
await page.render({
|
||||
canvasContext: context,
|
||||
viewport: viewport,
|
||||
}).promise;
|
||||
} catch (err) {
|
||||
console.error("Error rendering page:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (pdfDocRef.current && currentPage) {
|
||||
renderPage(currentPage);
|
||||
}
|
||||
}, [currentPage, scale]);
|
||||
|
||||
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
if (file.type !== "application/pdf") {
|
||||
setError("Please select a PDF file");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setPdfName(file.name);
|
||||
setCurrentPage(1);
|
||||
|
||||
try {
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
|
||||
pdfDocRef.current = pdf;
|
||||
setNumPages(pdf.numPages);
|
||||
setPdfData("local");
|
||||
await renderPage(1);
|
||||
} catch (err) {
|
||||
setError("Failed to load PDF");
|
||||
console.error(err);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleUrlSubmit = async () => {
|
||||
const input = prompt("Enter PDF URL:");
|
||||
if (!input) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setCurrentPage(1);
|
||||
|
||||
try {
|
||||
new URL(input);
|
||||
setPdfName(input.split("/").pop() || "document.pdf");
|
||||
|
||||
const response = await fetch(input);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
|
||||
pdfDocRef.current = pdf;
|
||||
setNumPages(pdf.numPages);
|
||||
setPdfData("url");
|
||||
await renderPage(1);
|
||||
} catch (err) {
|
||||
setError("Failed to load PDF from URL. Make sure the URL is publicly accessible.");
|
||||
console.error(err);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const goToPrevPage = () => {
|
||||
if (currentPage > 1) {
|
||||
setCurrentPage(currentPage - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const goToNextPage = () => {
|
||||
if (currentPage < numPages) {
|
||||
setCurrentPage(currentPage + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const zoomIn = () => setScale(scale + 0.25);
|
||||
const zoomOut = () => setScale(Math.max(0.5, scale - 0.25));
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Toolbar */}
|
||||
<div className="bg-slate-900/50 border-b border-slate-800 px-6 py-3 flex-shrink-0">
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<label className="cursor-pointer bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
|
||||
📁 Upload PDF
|
||||
<input
|
||||
type="file"
|
||||
accept="application/pdf"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button
|
||||
onClick={handleUrlSubmit}
|
||||
className="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
🔗 Load from URL
|
||||
</button>
|
||||
|
||||
{pdfData && (
|
||||
<>
|
||||
<div className="h-6 w-px bg-slate-600 mx-2" />
|
||||
|
||||
{/* Page navigation */}
|
||||
<button
|
||||
onClick={goToPrevPage}
|
||||
disabled={currentPage <= 1}
|
||||
className="bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
◀ Prev
|
||||
</button>
|
||||
<span className="text-slate-300 text-sm">
|
||||
Page {currentPage} of {numPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={goToNextPage}
|
||||
disabled={currentPage >= numPages}
|
||||
className="bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
Next ▶
|
||||
</button>
|
||||
|
||||
<div className="h-6 w-px bg-slate-600 mx-2" />
|
||||
|
||||
{/* Zoom controls */}
|
||||
<button
|
||||
onClick={zoomOut}
|
||||
className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
➖
|
||||
</button>
|
||||
<span className="text-slate-300 text-sm w-16 text-center">
|
||||
{Math.round(scale * 100)}%
|
||||
</span>
|
||||
<button
|
||||
onClick={zoomIn}
|
||||
className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
➕
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-auto bg-slate-800 p-4">
|
||||
{error && (
|
||||
<div className="bg-red-900/50 border border-red-700 rounded-lg p-4 mb-4 max-w-md">
|
||||
<h3 className="text-red-400 font-bold mb-2">Error</h3>
|
||||
<p className="text-red-300">{error}</p>
|
||||
<button
|
||||
onClick={() => setError(null)}
|
||||
className="mt-2 bg-red-700 hover:bg-red-600 text-white px-4 py-1 rounded text-sm"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!pdfData && !loading && (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<div className="text-8xl mb-6 opacity-50">📄</div>
|
||||
<h2 className="text-xl font-bold text-white mb-2">No PDF Loaded</h2>
|
||||
<p className="text-slate-400 mb-6">Upload a PDF or enter a URL to view it</p>
|
||||
<div className="text-slate-500 text-sm space-y-1">
|
||||
<p>• Upload your resume to let Horus analyze it</p>
|
||||
<p>• Supports PDF files up to 50MB</p>
|
||||
<p>• Or load from any public PDF URL</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin text-6xl mb-4">⏳</div>
|
||||
<p className="text-slate-400">Loading PDF...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pdfData && !loading && (
|
||||
<div className="flex justify-center">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="shadow-2xl rounded bg-white"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="bg-slate-900/50 border-t border-slate-800 px-6 py-2 flex-shrink-0">
|
||||
<p className="text-slate-500 text-xs">
|
||||
💡 Tip: Upload your resume PDF and Horus can analyze the design to recreate it
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,16 @@
|
||||
[
|
||||
{
|
||||
"id": "eod-1774296002482",
|
||||
"date": "2026-03-23",
|
||||
"completed": [
|
||||
"See Mission Control for details",
|
||||
"🛡️ SECURITY: 10 advisories found today! Check MC."
|
||||
],
|
||||
"progress": {},
|
||||
"council": {},
|
||||
"tomorrow": [],
|
||||
"created_at": "2026-03-23T20:00:02.482Z"
|
||||
},
|
||||
{
|
||||
"id": "eod-1774209602462",
|
||||
"date": "2026-03-22",
|
||||
|
||||
Generated
+26
-5
@@ -19,6 +19,7 @@
|
||||
"framer-motion": "^12.23.12",
|
||||
"lightweight-charts": "^5.1.0",
|
||||
"next": "^15.5.3",
|
||||
"pdfjs-dist": "^5.5.207",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-pdf": "^10.4.1",
|
||||
@@ -3484,6 +3485,13 @@
|
||||
"url": "https://opencollective.com/node-fetch"
|
||||
}
|
||||
},
|
||||
"node_modules/node-readable-to-web-readable-stream": {
|
||||
"version": "0.4.2",
|
||||
"resolved": "https://registry.npmjs.org/node-readable-to-web-readable-stream/-/node-readable-to-web-readable-stream-0.4.2.tgz",
|
||||
"integrity": "sha512-/cMZNI34v//jUTrI+UIo4ieHAB5EZRY/+7OmXZgBxaWBMcW2tGdceIw06RFxWxrKZ5Jp3sI2i5TsRo+CBhtVLQ==",
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/node-releases": {
|
||||
"version": "2.0.27",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
|
||||
@@ -3639,15 +3647,16 @@
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/pdfjs-dist": {
|
||||
"version": "5.4.296",
|
||||
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.4.296.tgz",
|
||||
"integrity": "sha512-DlOzet0HO7OEnmUmB6wWGJrrdvbyJKftI1bhMitK7O2N8W2gc757yyYBbINy9IDafXAV9wmKr9t7xsTaNKRG5Q==",
|
||||
"version": "5.5.207",
|
||||
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.5.207.tgz",
|
||||
"integrity": "sha512-WMqqw06w1vUt9ZfT0gOFhMf3wHsWhaCrxGrckGs5Cci6ybDW87IvPaOd2pnBwT6BJuP/CzXDZxjFgmSULLdsdw==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=20.16.0 || >=22.3.0"
|
||||
"node": ">=20.19.0 || >=22.13.0 || >=24"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@napi-rs/canvas": "^0.1.80"
|
||||
"@napi-rs/canvas": "^0.1.95",
|
||||
"node-readable-to-web-readable-stream": "^0.4.2"
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
@@ -3984,6 +3993,18 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-pdf/node_modules/pdfjs-dist": {
|
||||
"version": "5.4.296",
|
||||
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.4.296.tgz",
|
||||
"integrity": "sha512-DlOzet0HO7OEnmUmB6wWGJrrdvbyJKftI1bhMitK7O2N8W2gc757yyYBbINy9IDafXAV9wmKr9t7xsTaNKRG5Q==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=20.16.0 || >=22.3.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@napi-rs/canvas": "^0.1.80"
|
||||
}
|
||||
},
|
||||
"node_modules/react-use-measure": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
"framer-motion": "^12.23.12",
|
||||
"lightweight-charts": "^5.1.0",
|
||||
"next": "^15.5.3",
|
||||
"pdfjs-dist": "^5.5.207",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-pdf": "^10.4.1",
|
||||
|
||||
Reference in New Issue
Block a user