2022-02-02 08:41:30 +00:00
|
|
|
import type { OdFileObject } from '../../types'
|
2022-01-16 12:19:52 +00:00
|
|
|
|
2022-02-02 08:49:59 +00:00
|
|
|
import { FC, useEffect, useRef, useState } from 'react'
|
2021-10-05 21:28:40 +00:00
|
|
|
import { ReactReader } from 'react-reader'
|
2022-02-14 11:33:19 +00:00
|
|
|
import { useRouter } from 'next/router'
|
2022-02-06 12:34:03 +00:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2021-10-05 21:28:40 +00:00
|
|
|
|
|
|
|
import Loading from '../Loading'
|
2021-12-29 07:23:47 +00:00
|
|
|
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
2022-01-06 08:34:16 +00:00
|
|
|
import { DownloadBtnContainer } from './Containers'
|
2022-02-14 11:33:19 +00:00
|
|
|
import { getStoredToken } from '../../utils/protectedRouteHandler'
|
2021-10-05 21:28:40 +00:00
|
|
|
|
2022-02-02 08:49:59 +00:00
|
|
|
const EPUBPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
2022-02-14 11:33:19 +00:00
|
|
|
const { asPath } = useRouter()
|
|
|
|
const hashedToken = getStoredToken(asPath)
|
|
|
|
|
2021-10-05 21:28:40 +00:00
|
|
|
const [epubContainerWidth, setEpubContainerWidth] = useState(400)
|
|
|
|
const epubContainer = useRef<HTMLDivElement>(null)
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
setEpubContainerWidth(epubContainer.current ? epubContainer.current.offsetWidth : 400)
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
const [location, setLocation] = useState<string>()
|
|
|
|
const onLocationChange = (cfiStr: string) => setLocation(cfiStr)
|
|
|
|
|
2022-02-06 12:34:03 +00:00
|
|
|
const { t } = useTranslation()
|
|
|
|
|
2021-10-05 21:28:40 +00:00
|
|
|
// Fix for not valid epub files according to
|
|
|
|
// https://github.com/gerhardsletten/react-reader/issues/33#issuecomment-673964947
|
2022-02-02 08:49:59 +00:00
|
|
|
const fixEpub = rendition => {
|
2021-10-05 21:28:40 +00:00
|
|
|
const spineGet = rendition.book.spine.get.bind(rendition.book.spine)
|
2022-02-02 08:49:59 +00:00
|
|
|
rendition.book.spine.get = function (target: string) {
|
2021-10-05 21:28:40 +00:00
|
|
|
const targetStr = target as string
|
|
|
|
let t = spineGet(target)
|
|
|
|
while (t == null && targetStr.startsWith('../')) {
|
|
|
|
target = targetStr.substring(3)
|
|
|
|
t = spineGet(target)
|
|
|
|
}
|
|
|
|
return t
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2021-12-29 07:52:18 +00:00
|
|
|
<div>
|
2021-10-05 21:28:40 +00:00
|
|
|
<div
|
2022-02-04 08:05:28 +00:00
|
|
|
className="no-scrollbar flex w-full flex-col overflow-scroll rounded bg-white dark:bg-gray-900 md:p-3"
|
2021-10-05 21:28:40 +00:00
|
|
|
style={{ maxHeight: '90vh' }}
|
|
|
|
>
|
2022-02-04 08:05:28 +00:00
|
|
|
<div className="no-scrollbar w-full flex-1 overflow-scroll" ref={epubContainer} style={{ minHeight: '70vh' }}>
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
position: 'absolute',
|
|
|
|
width: epubContainerWidth,
|
|
|
|
height: '70vh',
|
|
|
|
}}
|
|
|
|
>
|
2021-10-05 21:28:40 +00:00
|
|
|
<ReactReader
|
2022-05-30 09:33:20 +00:00
|
|
|
url={`/api/raw/?path=${asPath}${hashedToken ? '&odpt=' + hashedToken : ''}`}
|
2022-01-06 08:34:16 +00:00
|
|
|
getRendition={rendition => fixEpub(rendition)}
|
2022-02-06 12:34:03 +00:00
|
|
|
loadingView={<Loading loadingText={t('Loading EPUB ...')} />}
|
2021-10-05 21:28:40 +00:00
|
|
|
location={location}
|
|
|
|
locationChanged={onLocationChange}
|
|
|
|
epubInitOptions={{ openAs: 'epub' }}
|
|
|
|
epubOptions={{ flow: 'scrolled' }}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-01-06 08:34:16 +00:00
|
|
|
<DownloadBtnContainer>
|
2022-02-14 11:33:19 +00:00
|
|
|
<DownloadButtonGroup />
|
2022-01-06 08:34:16 +00:00
|
|
|
</DownloadBtnContainer>
|
2021-12-29 07:52:18 +00:00
|
|
|
</div>
|
2021-10-05 21:28:40 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default EPUBPreview
|