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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user