Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix PdfViewer memory crash on large PDFs by implementing pagination
All checks were successful
Automated Container Build / build-and-push (push) Successful in 28s
Details

Browse source
This commit is contained in:
Elijah 2026-05-31 21:31:26 -07:00
parent 72b1de2937
commit 9b0e60109f
1 changed files with 23 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/components/PdfViewer.tsx
View file

@ -12,6 +12,7 @@ if (typeof window !== 'undefined') {
export default function PdfViewer({ url }: { url: string }) {
const [numPages, setNumPages] = useState<number>();
const [pageNumber, setPageNumber] = useState<number>(1);
const [scale, setScale] = useState<number>(1.2);
function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
@ -23,9 +24,25 @@ export default function PdfViewer({ url }: { url: string }) {
{/* PDF Toolbar */}
<div className="flex items-center justify-between p-2 border-b" style={{ borderColor: 'var(--color-border-subtle)', backgroundColor: 'var(--color-bg-elevated)' }}>
<div className="flex items-center gap-2">
<span className="text-sm font-medium w-32 px-2" style={{ color: 'var(--color-text-secondary)' }}>
{numPages ? `${numPages} Pages` : 'Loading...'}
<button
onClick={() => setPageNumber(p => Math.max(1, p - 1))}
disabled={pageNumber <= 1}
className="p-1 rounded hover:bg-white/10 disabled:opacity-50"
style={{ color: 'var(--color-text-primary)' }}
>
<ChevronLeft className="w-5 h-5" />
</button>
<span className="text-sm font-medium min-w-[80px] text-center" style={{ color: 'var(--color-text-secondary)' }}>
{numPages ? `${pageNumber} / ${numPages}` : 'Loading...'}
</span>
<button
onClick={() => setPageNumber(p => (numPages ? Math.min(numPages, p + 1) : p))}
disabled={pageNumber >= (numPages || 1)}
className="p-1 rounded hover:bg-white/10 disabled:opacity-50"
style={{ color: 'var(--color-text-primary)' }}
>
<ChevronRight className="w-5 h-5" />
</button>
</div>
<div className="flex items-center gap-2">
<button
@ -61,16 +78,16 @@ export default function PdfViewer({ url }: { url: string }) {
}
className="flex flex-col items-center gap-6"
>
{numPages && Array.from(new Array(numPages), (el, index) => (
{numPages && (
<Page
key={`page_${index + 1}`}
pageNumber={index + 1}
key={`page_${pageNumber}`}
pageNumber={pageNumber}
scale={scale}
renderTextLayer={true}
renderAnnotationLayer={true}
className="bg-white shadow-xl"
/>
))}
)}
</Document>
</div>
</div>