NB
4 years ago
parent
2a0ca26c8c
commit
45d054571d
9 changed files with 21 additions and 624 deletions
@ -1,293 +0,0 @@ |
||||
import React, { useState, useEffect, useCallback, useRef } from 'react' |
||||
import { Book, Rendition } from "epubjs"; |
||||
// style
|
||||
import EpubViewerWrapper from 'modules/epubViewer/style' |
||||
// types
|
||||
import { EpubViewerProps, ViewerRef } from 'types' |
||||
import Toc from 'types/toc' |
||||
import Loc from 'types/loc' |
||||
|
||||
|
||||
/** |
||||
* EpubViewer Module |
||||
* @class |
||||
* @param props |
||||
* @param props.url Epub path |
||||
* @param props.epubFileOptions Epub file option |
||||
* @param props.epubOptions Epub viewer option |
||||
* @param props.style Epub Wrapper style |
||||
* @param props.location Epub CFI or href |
||||
* @param props.bookChanged Run when book changed |
||||
* @param props.rendtionChanged Run when rendition changed |
||||
* @param props.pageChanged Run when page changed |
||||
* @param props.tocChanged Run when toc changed |
||||
* @param props.selectionChanged Run when selected |
||||
* @param props.loadingView Loading Component |
||||
* @param ref Viewer ref |
||||
*/ |
||||
const EpubViewer = ({ |
||||
url,
|
||||
epubFileOptions,
|
||||
epubOptions, |
||||
style, |
||||
location, |
||||
bookChanged, |
||||
rendtionChanged, |
||||
pageChanged, |
||||
tocChanged, |
||||
selectionChanged, |
||||
loadingView, |
||||
}: EpubViewerProps, ref: React.RefObject<ViewerRef> | any) => { |
||||
// TODO Fix the ref type correctly instead 'any' type.
|
||||
const [isLoaded, setIsLoaded] = useState(false); |
||||
|
||||
const [book, setBook] = useState<Book | null>(null); |
||||
|
||||
const [rendition, setRendition] = useState<Rendition | null>(null); |
||||
|
||||
const [toc, setToc] = useState<Toc[]>([]); |
||||
|
||||
const currentCfi = useRef<string>(''); |
||||
|
||||
|
||||
|
||||
/** |
||||
* Init Book |
||||
* @method |
||||
* - Set book state |
||||
* - Set Epub path state |
||||
* - Set isLoaded state |
||||
* - Set toc state |
||||
*/ |
||||
const initBook = () => { |
||||
if (book) { |
||||
book.destroy(); |
||||
} |
||||
|
||||
const book_ = new Book(url, epubFileOptions); |
||||
setBook(book_); |
||||
|
||||
bookChanged && bookChanged(book_); |
||||
|
||||
book_.loaded.navigation.then(({ toc }) => { |
||||
const toc_: Toc[] = toc.map(t => ({
|
||||
label: t.label,
|
||||
href: t.href
|
||||
})); |
||||
|
||||
setIsLoaded(true); |
||||
setToc(toc_); |
||||
tocChanged && tocChanged(toc_); |
||||
initRendition(book_); |
||||
}); |
||||
|
||||
// Init Location & Pagination
|
||||
book_.ready.then(function() { |
||||
const stored = localStorage.getItem(book_.key() + '-locations'); |
||||
if (stored) { |
||||
return book_.locations.load(stored); |
||||
} else { |
||||
return book_.locations.generate(1024); |
||||
} |
||||
}).then(() => { |
||||
localStorage.setItem(book_.key() + '-locations', book_.locations.save()); |
||||
}); |
||||
}; |
||||
|
||||
/** |
||||
* Init Rendition |
||||
* @method |
||||
* - Init iframe tag on DOM element |
||||
* - Set rendition |
||||
* - Set start page |
||||
*/ |
||||
const initRendition = (book_: Book) => { |
||||
const node = ref.current; |
||||
if (!node || !book_) return; |
||||
|
||||
const rendition_ = book_.renderTo(node, { |
||||
width: "100%", |
||||
height: "100%", |
||||
...epubOptions |
||||
}); |
||||
setRendition(rendition_); |
||||
|
||||
rendtionChanged && rendtionChanged(rendition_); |
||||
|
||||
if(typeof location === "string") { |
||||
rendition_.display(location); |
||||
} else if(toc.length > 0 && toc[0].href) { |
||||
rendition_.display(toc[0].href); |
||||
} else { |
||||
rendition_.display(); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Move page |
||||
* @method |
||||
* @param type direction |
||||
*/ |
||||
const movePage = useCallback((type: "PREV" | "NEXT") => { |
||||
if (!rendition) return; |
||||
if (type === "PREV") rendition.prev(); |
||||
else rendition.next(); |
||||
}, [rendition]); |
||||
|
||||
/** |
||||
* Move page by arrow key |
||||
* @method |
||||
* @param props Keyboard Event |
||||
* @param props.key
|
||||
*/ |
||||
const handleKeyPress = useCallback(({ key }: any) => { |
||||
key && key === "ArrowLeft" && movePage("PREV"); |
||||
key && key === "ArrowRight" && movePage("NEXT"); |
||||
}, [movePage]); |
||||
|
||||
/** |
||||
* Run when location changed |
||||
* @method |
||||
* @param loc |
||||
* - Set location state |
||||
* - Run 'locationChanged()' through startCFI |
||||
*/ |
||||
const onLocationChange = useCallback((loc: Loc) => { |
||||
const startCfi = loc && loc.start; |
||||
const endCfi = loc && loc.end; |
||||
const base = loc && loc.start.slice(8).split('!')[0]; |
||||
|
||||
if (!book) return; |
||||
|
||||
const spineItem = book.spine.get(startCfi); |
||||
const navItem = book.navigation.get(spineItem.href); |
||||
const chapterName = navItem && navItem.label.trim(); |
||||
|
||||
const locations: any = book.locations; |
||||
const currentPage = locations.locationFromCfi(startCfi); |
||||
const totalPage = locations.total; |
||||
|
||||
pageChanged && pageChanged({ |
||||
chapterName,
|
||||
currentPage,
|
||||
totalPage,
|
||||
startCfi,
|
||||
endCfi, |
||||
base |
||||
}); |
||||
|
||||
currentCfi.current = startCfi; |
||||
}, [book, pageChanged]); |
||||
|
||||
/** |
||||
* Highlight function |
||||
* @param cfiRange Selecton CFIRange |
||||
* @param color Highlight color |
||||
* @param callback Highlight callback function when click it |
||||
*/ |
||||
const onHighlight = useCallback(( |
||||
cfiRange: string,
|
||||
callback: (e: any) => void, |
||||
color?: string |
||||
) => { |
||||
if (!rendition) return; |
||||
|
||||
rendition.annotations.remove(cfiRange, 'highlight'); |
||||
rendition.annotations.highlight( |
||||
cfiRange,
|
||||
{},
|
||||
callback,
|
||||
"epub-highlight", |
||||
{ 'fill': color || '#fdf183' } |
||||
); |
||||
}, [rendition]); |
||||
|
||||
/** |
||||
* Register viewer control function |
||||
* @method |
||||
* - REF.CURRENT.prevPage() : Move prev page |
||||
* - REF.CURRENT.nextPage() : Move next page |
||||
* - REF.CURRENT.getCurrentCfi() : Get current CFI |
||||
* - REF.CURRENT.onHighlight(): Set highlight |
||||
* - REF.CURRENT.offHighlight(): Remove specific highliht |
||||
* - REF.CURRENT.seLocation(): Move to specific cfi or href |
||||
*/ |
||||
const registerGlobalFunc = useCallback(() => { |
||||
if (!ref.current) return; |
||||
if (movePage) { |
||||
ref.current.prevPage = () => movePage("PREV"); |
||||
ref.current.nextPage = () => movePage("NEXT"); |
||||
} |
||||
ref.current.getCurrentCfi = () => currentCfi.current; |
||||
if (onHighlight) { |
||||
ref.current.onHighlight = onHighlight; |
||||
} |
||||
if (rendition) { |
||||
ref.current.offHighlight = (cfiRange: string) => rendition.annotations.remove(cfiRange, 'highlight'); |
||||
ref.current.setLocation = (location: string) => rendition.display(location); |
||||
} |
||||
}, [ref, rendition, movePage, onHighlight]); |
||||
|
||||
|
||||
|
||||
/** Ref checker */ |
||||
useEffect(() => { |
||||
if (!ref) { |
||||
throw new Error("[React-Epub-Viewer] Put a ref argument that has a ViewerRef type."); |
||||
} |
||||
}, [ref]); |
||||
|
||||
/** Epub Init */ |
||||
/* eslint-disable */ |
||||
useEffect(() => { |
||||
if (!url) return; |
||||
initBook(); |
||||
}, [url]); |
||||
/* eslint-enable */ |
||||
|
||||
/** |
||||
* Emit Viewer Event |
||||
* - Register move event |
||||
* - Register location changed event |
||||
* - Register selection event |
||||
*/ |
||||
/* eslint-disable */ |
||||
useEffect(() => { |
||||
if (!rendition) return; |
||||
|
||||
// Emit global control function
|
||||
registerGlobalFunc(); |
||||
|
||||
document.addEventListener('keyup', handleKeyPress, false); |
||||
rendition.on("keyup", handleKeyPress); |
||||
rendition.on("locationChanged", onLocationChange); |
||||
selectionChanged && rendition.on('selected', selectionChanged); |
||||
|
||||
return (() => { |
||||
document.removeEventListener('keyup', handleKeyPress, false); |
||||
rendition.off("keyup", handleKeyPress); |
||||
rendition.off("locationChanged", onLocationChange); |
||||
selectionChanged && rendition.off('selected', selectionChanged); |
||||
}); |
||||
}, [ |
||||
rendition, |
||||
registerGlobalFunc, |
||||
handleKeyPress |
||||
]); |
||||
/* eslint-enable */ |
||||
|
||||
/** Display page by changed location */ |
||||
useEffect(() => { |
||||
if (!location || !rendition) return; |
||||
|
||||
rendition.display(location); |
||||
}, [location, rendition]); |
||||
|
||||
|
||||
return (<> |
||||
{!isLoaded && loadingView} |
||||
<EpubViewerWrapper ref={ref} style={style} /> |
||||
</>); |
||||
} |
||||
|
||||
export default React.forwardRef(EpubViewer) |
||||
@ -1,15 +0,0 @@ |
||||
import styled from 'styled-components' |
||||
|
||||
const EpubViewerWrapper = styled.div` |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
margin: 0 auto; |
||||
|
||||
& > div { |
||||
&::-webkit-scrollbar { |
||||
display: none; |
||||
} |
||||
} |
||||
`;
|
||||
|
||||
export default EpubViewerWrapper |
||||
@ -1,4 +0,0 @@ |
||||
import ReactEpubViewer from 'modules/reactViewer/ReactViewer' |
||||
import EpubViewer from 'modules/epubViewer/EpubViewer'; |
||||
|
||||
export { EpubViewer, ReactEpubViewer }; |
||||
@ -1,292 +0,0 @@ |
||||
import React, { useState, useEffect, useRef, useCallback, useMemo } from "react" |
||||
import { Book, Rendition, Contents } from "epubjs" |
||||
// modules
|
||||
import EpubViewer from "modules/epubViewer/EpubViewer" |
||||
// components
|
||||
import LoadingView from 'LoadingView' |
||||
// utils
|
||||
import { debounce, timeFormatter } from 'lib/utils/commonUtil' |
||||
// styles
|
||||
import viewerDefaultStyles from 'modules/reactViewer/viewerStyle' |
||||
// types
|
||||
import { ReactViewerProps, ViewerRef } from 'types' |
||||
import BookType, { BookStyle, BookOption } from 'types/book' |
||||
|
||||
|
||||
/** |
||||
* Epub React Viewer Module |
||||
* @class |
||||
* @param props |
||||
* @param props.url Epub file path |
||||
* @param props.viewerLayout Viewer layout |
||||
* @param props.viewerStyle Viewer style |
||||
* @param props.viewerOption Viewer option |
||||
* @param props.onBookInfoChange Run when book information changed |
||||
* @param props.onPageChange Run when page changed |
||||
* @param props.onTocChange Run when toc changed |
||||
* @param props.onSelection Run when selected |
||||
* @param props.loadingView Loading component |
||||
* @param ref Viewer ref |
||||
*/ |
||||
const ReactViewer = ({
|
||||
url, |
||||
viewerLayout, |
||||
viewerStyle, |
||||
viewerOption, |
||||
onBookInfoChange, |
||||
onPageChange, |
||||
onTocChange, |
||||
onSelection, |
||||
loadingView |
||||
}: ReactViewerProps, ref: React.RefObject<ViewerRef> | any) => { |
||||
// TODO Fix the ref type correctly instead 'any' type.
|
||||
const [book, setBook] = useState<Book | null>(null); |
||||
|
||||
const [rendition, setRendition] = useState<Rendition | null>(null); |
||||
|
||||
const [layoutStyle, setLayoutStyle] = useState<Object>({}); |
||||
|
||||
const [bookStyle, setBookStyle] = useState<BookStyle>({ |
||||
fontFamily: 'Origin', |
||||
fontSize: 18, |
||||
lineHeight: 1.4, |
||||
marginHorizontal: 15, |
||||
marginVertical: 5 |
||||
}); |
||||
|
||||
const [bookOption, setBookOption] = useState<BookOption>({ |
||||
flow: "paginated", |
||||
resizeOnOrientationChange: true, |
||||
spread: "auto" |
||||
}); |
||||
|
||||
const currentSelection = useRef<{cfiRange:string, contents:Contents | null}>({ |
||||
cfiRange: '', |
||||
contents: null |
||||
}); |
||||
|
||||
|
||||
|
||||
/** |
||||
* Run book changed |
||||
* @method |
||||
* @param book Epub Book |
||||
*/ |
||||
const bookChanged = (book: Book) => setBook(book); |
||||
|
||||
/** |
||||
* Run rendition changed |
||||
* @method |
||||
* @param rendition Epub Rendition |
||||
*/ |
||||
const rendtionChanged = (rendition: Rendition) => setRendition(rendition); |
||||
|
||||
/** |
||||
* Run selection changed [Debounce] |
||||
* @method |
||||
* @param cfiRange CFIRange |
||||
* @param contents Selection Epub Contents |
||||
*/ |
||||
const selectionChanged = (cfiRange: string, contents: Contents) => { |
||||
currentSelection.current = { cfiRange, contents }; |
||||
} |
||||
|
||||
/** |
||||
* Viewer resizing function |
||||
* @method |
||||
*/ |
||||
const onResize = useMemo(() => debounce(250, () => { |
||||
if (!rendition) return; |
||||
|
||||
const viewerLayout_ = viewerLayout || { |
||||
MIN_VIEWER_WIDTH: 600, |
||||
MIN_VIEWER_HEIGHT: 300, |
||||
VIEWER_HEADER_HEIGHT: 0, |
||||
VIEWER_FOOTER_HEIGHT: 0, |
||||
VIEWER_SIDEMENU_WIDTH: 0 |
||||
}; |
||||
|
||||
const { innerWidth: win_w, innerHeight: win_h } = window; |
||||
const componentHeight = viewerLayout_.VIEWER_HEADER_HEIGHT + viewerLayout_.VIEWER_FOOTER_HEIGHT; |
||||
const w = win_w - ~~((win_w - viewerLayout_.MIN_VIEWER_WIDTH) / 100 * bookStyle.marginHorizontal); |
||||
const h = bookOption.flow === "scrolled-doc" |
||||
? win_h - componentHeight |
||||
: win_h - componentHeight - ~~((win_h - componentHeight - viewerLayout_.MIN_VIEWER_HEIGHT) / 100 * bookStyle.marginVertical); |
||||
const marginTop = bookOption.flow === "scrolled-doc" |
||||
? "" |
||||
: `${~~((win_h - componentHeight - viewerLayout_.MIN_VIEWER_HEIGHT) / 100 * bookStyle.marginVertical) / 2}px`; |
||||
|
||||
setLayoutStyle(l => ({ |
||||
...l, |
||||
width: w, |
||||
height: h, |
||||
marginTop |
||||
})); |
||||
|
||||
try { |
||||
rendition.resize(w, h); |
||||
} catch { } |
||||
}), [ |
||||
rendition, |
||||
viewerLayout, |
||||
bookStyle.marginHorizontal, |
||||
bookStyle.marginVertical, |
||||
bookOption.flow |
||||
]); |
||||
|
||||
/** |
||||
* Selection Event, run when run mouseup event |
||||
* @method <br/> |
||||
* - Fire after the Epubjs selected event. [about 300ms] |
||||
*/ |
||||
const onSelected = useCallback(async () => { |
||||
if (!ref.current) return; |
||||
|
||||
const iframe = ref.current.querySelector('iframe'); |
||||
if (!iframe) return; |
||||
|
||||
const iframeWin = iframe.contentWindow; |
||||
if (!iframeWin) return; |
||||
|
||||
const selection_ = iframeWin.getSelection(); |
||||
if (!selection_) return; |
||||
|
||||
const selectionText = selection_.toString(); |
||||
if (selectionText === "") return; |
||||
|
||||
const cfiRange: string = await new Promise(resolve =>
|
||||
setTimeout(() => resolve(currentSelection.current.cfiRange), 350) |
||||
); |
||||
if (!cfiRange) return; |
||||
|
||||
const contents = currentSelection.current.contents; |
||||
if (!contents) return; |
||||
|
||||
onSelection && onSelection(cfiRange, contents); |
||||
}, [ref, onSelection]); |
||||
|
||||
|
||||
|
||||
/** Ref checker */ |
||||
useEffect(() => { |
||||
if (!ref) { |
||||
throw new Error("[React-Epub-Viewer] Put a ref argument that has a ViewerRef type."); |
||||
} |
||||
}, [ref]); |
||||
|
||||
/** Epub parsing */ |
||||
// TODO Fix the infinite re-rendering issue, when inlcude `onBookInfoChange` to dependencies array.
|
||||
/* eslint-disable */ |
||||
useEffect(() => { |
||||
if (!book) return; |
||||
|
||||
Promise.all([ |
||||
book.loaded.metadata, |
||||
book.opened |
||||
]) |
||||
.then(([metaData, bookData]: any[]) => { |
||||
const newBookData: BookType = { |
||||
coverURL: bookData.archive.urlCache[bookData.cover], |
||||
title: metaData.title, |
||||
description: metaData.description, |
||||
published_date: timeFormatter(new Date(metaData.pubdate)), |
||||
modified_date: timeFormatter(new Date(metaData.modified_date)), |
||||
author: metaData.creator, |
||||
publisher: metaData.publisher, |
||||
language: metaData.language |
||||
} |
||||
|
||||
onBookInfoChange && onBookInfoChange(newBookData); |
||||
}) |
||||
.catch(error => { |
||||
throw `${error.stack} \n\n Message : Epub parsing failed.`; |
||||
}); |
||||
}, [book]); |
||||
/* eslint-enable */ |
||||
|
||||
/** Set viewer Styles/Options */ |
||||
useEffect(() => { |
||||
viewerStyle && setBookStyle(viewerStyle); |
||||
viewerOption && setBookOption(viewerOption); |
||||
}, [viewerStyle, viewerOption]); |
||||
|
||||
/** Apply viewer Styles/Options */ |
||||
useEffect(() => { |
||||
if (!rendition) return; |
||||
|
||||
onResize(); |
||||
|
||||
const newStyle = { |
||||
"body": { |
||||
"padding-top": "0px !important", |
||||
"padding-bottom": "0px !important" |
||||
}, |
||||
"p": { |
||||
"font-size": `${bookStyle.fontSize}px !important`, |
||||
"line-height": `${bookStyle.lineHeight} !important` |
||||
}, |
||||
}; |
||||
|
||||
rendition.flow(bookOption.flow); |
||||
rendition.spread(bookOption.spread); |
||||
|
||||
if (bookStyle.fontFamily !== "Origin") { |
||||
Object.assign(newStyle.body, { |
||||
"font-family": `${bookStyle.fontFamily} !important` |
||||
}); |
||||
} |
||||
|
||||
if (bookOption.flow === "scrolled-doc") { // Scroll type
|
||||
Object.assign(newStyle.body, { |
||||
"margin": "auto !important" |
||||
}); |
||||
} else if (bookOption.spread === "auto") { // View 2 pages
|
||||
Object.assign(newStyle.body, { }); |
||||
} else { // View 1 page
|
||||
Object.assign(newStyle.body, { }); |
||||
} |
||||
|
||||
rendition.themes.register("main", viewerDefaultStyles); |
||||
rendition.themes.register("default", newStyle); |
||||
|
||||
rendition.themes.select("main"); |
||||
}, [ |
||||
rendition,
|
||||
bookStyle.fontFamily, |
||||
bookStyle.fontSize, |
||||
bookStyle.lineHeight, |
||||
bookOption, |
||||
onResize |
||||
]); |
||||
|
||||
/** Emit screen resizing event */ |
||||
useEffect(() => { |
||||
window.addEventListener('resize', onResize); |
||||
return () => window.removeEventListener('resize', onResize); |
||||
}, [onResize]); |
||||
|
||||
/** Emit selection event */ |
||||
useEffect(() => { |
||||
if (!rendition) return; |
||||
rendition.on("mouseup", onSelected); |
||||
return () => rendition.off("mouseup", onSelected); |
||||
}, [rendition, onSelected]); |
||||
|
||||
|
||||
|
||||
return (<> |
||||
<EpubViewer
|
||||
url={url}
|
||||
style={layoutStyle} |
||||
bookChanged={bookChanged}
|
||||
rendtionChanged={rendtionChanged}
|
||||
tocChanged={onTocChange}
|
||||
pageChanged={onPageChange} |
||||
selectionChanged={selectionChanged} |
||||
loadingView={loadingView || <LoadingView />} |
||||
ref={ref} |
||||
/> |
||||
</>); |
||||
} |
||||
|
||||
export default React.forwardRef(ReactViewer) |
||||
@ -1,16 +0,0 @@ |
||||
const viewerStyle = { |
||||
"::selection": { |
||||
"background-color": "#d4e9ff" |
||||
}, |
||||
|
||||
"img": { |
||||
"-webkit-touch-callout": "none", |
||||
"-webkit-user-select": "none", |
||||
"-khtml-user-select": "none", |
||||
"-moz-user-select": "none", |
||||
"-ms-user-select": "none", |
||||
"user-select": "none" |
||||
} |
||||
} |
||||
|
||||
export default viewerStyle |
||||
Loading…
Reference in new issue