248 lines
8.4 KiB
TypeScript
248 lines
8.4 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useRef, useEffect } from "react";
|
||
|
||
declare global {
|
||
interface Window {
|
||
pdfjsLib: any;
|
||
}
|
||
}
|
||
|
||
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 [pdfjsLoaded, setPdfjsLoaded] = useState(false);
|
||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||
const pdfDocRef = useRef<any>(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 = () => {
|
||
try {
|
||
window.pdfjsLib = window.pdfjsLib;
|
||
// Disable worker to avoid CSP issues
|
||
window.pdfjsLib.GlobalWorkerOptions.workerSrc = "";
|
||
window.pdfjsLib.GlobalWorkerOptions.workerPort = null;
|
||
setPdfjsLoaded(true);
|
||
} catch (e) {
|
||
setError("Failed to initialize PDF.js");
|
||
}
|
||
};
|
||
script.onerror = () => {
|
||
setError("Failed to load PDF.js library");
|
||
};
|
||
document.body.appendChild(script);
|
||
}, []);
|
||
|
||
const renderPage = async (pageNum: number) => {
|
||
if (!pdfDocRef.current || !canvasRef.current || !window.pdfjsLib) 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;
|
||
|
||
// Use synchronous rendering to avoid worker
|
||
const renderContext = {
|
||
canvasContext: context,
|
||
viewport: viewport,
|
||
};
|
||
|
||
// For older pdf.js without worker, use direct render
|
||
await page.render(renderContext).promise;
|
||
} catch (err) {
|
||
console.error("Error rendering page:", err);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (pdfDocRef.current && currentPage && pdfjsLoaded) {
|
||
renderPage(currentPage);
|
||
}
|
||
}, [currentPage, scale, pdfjsLoaded]);
|
||
|
||
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file || !window.pdfjsLib) 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();
|
||
// Disable worker for this load
|
||
const loadingTask = window.pdfjsLib.getDocument({
|
||
data: arrayBuffer,
|
||
disableWorker: true,
|
||
verbosity: 0
|
||
});
|
||
const pdf = await loadingTask.promise;
|
||
pdfDocRef.current = pdf;
|
||
setNumPages(pdf.numPages);
|
||
setPdfData("local");
|
||
await renderPage(1);
|
||
} catch (err) {
|
||
setError("Failed to load PDF. Try using 'Load from URL' instead.");
|
||
console.error(err);
|
||
}
|
||
setLoading(false);
|
||
};
|
||
|
||
const handleUrlSubmit = async () => {
|
||
const input = prompt("Enter PDF URL:");
|
||
if (!input || !window.pdfjsLib) return;
|
||
|
||
setLoading(true);
|
||
setError(null);
|
||
setCurrentPage(1);
|
||
|
||
try {
|
||
new URL(input);
|
||
setPdfName(input.split("/").pop() || "document.pdf");
|
||
|
||
// Use Google Docs viewer for external URLs
|
||
setPdfData(`https://docs.google.com/gview?url=${encodeURIComponent(input)}&embedded=true`);
|
||
setNumPages(1); // We don't know the page count for external URLs
|
||
} catch (err) {
|
||
setError("Failed to load PDF from URL.");
|
||
console.error(err);
|
||
}
|
||
setLoading(false);
|
||
};
|
||
|
||
const goToPrevPage = () => {
|
||
if (currentPage > 1) setCurrentPage(currentPage - 1);
|
||
};
|
||
|
||
const goToNextPage = () => {
|
||
if (currentPage < numPages) setCurrentPage(currentPage + 1);
|
||
};
|
||
|
||
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"
|
||
disabled={!pdfjsLoaded}
|
||
/>
|
||
</label>
|
||
|
||
<button
|
||
onClick={handleUrlSubmit}
|
||
disabled={!pdfjsLoaded}
|
||
className="bg-slate-700 hover:bg-slate-600 disabled:opacity-50 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
|
||
>
|
||
🔗 Load from URL
|
||
</button>
|
||
|
||
{!pdfjsLoaded && (
|
||
<span className="text-yellow-400 text-sm animate-pulse">Loading PDF.js...</span>
|
||
)}
|
||
|
||
{pdfData && (
|
||
<>
|
||
<div className="h-6 w-px bg-slate-600 mx-2" />
|
||
<button onClick={goToPrevPage} disabled={currentPage <= 1}
|
||
className="bg-slate-700 hover:bg-slate-600 disabled:opacity-50 text-white px-3 py-2 rounded-lg text-sm">
|
||
◀ 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 text-white px-3 py-2 rounded-lg text-sm">
|
||
Next ▶
|
||
</button>
|
||
<div className="h-6 w-px bg-slate-600 mx-2" />
|
||
<button onClick={() => setScale(Math.max(0.5, scale - 0.25))}
|
||
className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-lg text-sm">➖</button>
|
||
<span className="text-slate-300 text-sm w-16 text-center">{Math.round(scale * 100)}%</span>
|
||
<button onClick={() => setScale(scale + 0.25)}
|
||
className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-lg text-sm">➕</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Error */}
|
||
{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 text-sm">{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>
|
||
)}
|
||
|
||
{/* Content */}
|
||
<div className="flex-1 overflow-auto bg-slate-800 p-4">
|
||
{!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</p>
|
||
<p className="text-slate-500 text-sm">💡 Tip: For best results, use "Load from URL" with a public PDF link</p>
|
||
</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">
|
||
{pdfData.startsWith("https://docs.google.com") ? (
|
||
// Google Docs viewer for external URLs
|
||
<iframe
|
||
src={pdfData}
|
||
className="w-full h-full min-h-[700px] bg-white rounded shadow-2xl"
|
||
title="PDF Viewer"
|
||
/>
|
||
) : (
|
||
// Canvas for uploaded files
|
||
<canvas
|
||
ref={canvasRef}
|
||
className="shadow-2xl rounded bg-white"
|
||
style={{ maxWidth: "100%", height: "auto" }}
|
||
/>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|