mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
6569f49a92
GitOrigin-RevId: 394d63571d83302b91b5719389adf49155218bc7
83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import { FC, useCallback } from 'react'
|
|
import useIsMounted from '@/shared/hooks/use-is-mounted'
|
|
import { useFileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
|
|
import { debugConsole } from '@/utils/debugging'
|
|
|
|
const FileViewPdf: FC<{
|
|
fileId: string
|
|
onLoad: () => void
|
|
onError: () => void
|
|
}> = ({ fileId, onLoad, onError }) => {
|
|
const mountedRef = useIsMounted()
|
|
|
|
const { previewByPath, pathInFolder } = useFileTreePathContext()
|
|
|
|
const handleContainer = useCallback(
|
|
async (element: HTMLDivElement | null) => {
|
|
if (element) {
|
|
const { PDFJS } = await import(
|
|
'../../pdf-preview/util/pdf-js-versions'
|
|
).then(m => m.default as any)
|
|
|
|
// bail out if loading PDF.js took too long
|
|
if (!mountedRef.current) {
|
|
onError()
|
|
return
|
|
}
|
|
|
|
const path = pathInFolder(fileId)
|
|
const preview = path ? previewByPath(path) : null
|
|
|
|
if (!preview) {
|
|
onError()
|
|
return
|
|
}
|
|
|
|
const pdf = await PDFJS.getDocument({
|
|
url: preview.url,
|
|
isEvalSupported: false,
|
|
}).promise
|
|
|
|
// bail out if loading the PDF took too long
|
|
if (!mountedRef.current) {
|
|
onError()
|
|
return
|
|
}
|
|
|
|
element.textContent = '' // ensure the element is empty
|
|
|
|
const scale = window.devicePixelRatio || 1
|
|
|
|
for (let i = 1; i <= pdf.numPages; i++) {
|
|
const page = await pdf.getPage(i)
|
|
const viewport = page.getViewport({ scale })
|
|
|
|
const canvas = document.createElement('canvas')
|
|
canvas.classList.add('pdf-page')
|
|
canvas.width = viewport.width
|
|
canvas.height = viewport.height
|
|
canvas.style.width = `${viewport.width / scale}px`
|
|
canvas.style.height = `${viewport.height / scale}px`
|
|
|
|
element.append(canvas)
|
|
page.render({
|
|
canvasContext: canvas.getContext('2d'),
|
|
viewport,
|
|
})
|
|
}
|
|
|
|
onLoad()
|
|
|
|
return () => {
|
|
pdf.cleanup().catch(debugConsole.error)
|
|
pdf.destroy()
|
|
}
|
|
}
|
|
},
|
|
[mountedRef, pathInFolder, fileId, previewByPath, onLoad, onError]
|
|
)
|
|
|
|
return <div className="file-view-pdf" ref={handleContainer} />
|
|
}
|
|
|
|
export default FileViewPdf
|