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