3 | 4 | ################ 5 | # Write body 6 | 7 | ################ 8 | # Write footer or issue number 9 | 10 | ################ 11 | # feature : New feature 12 | # fix : Fix bug 13 | # docs : Fix docs 14 | # test : Mofiy test code 15 | # refactor : Refactoring code 16 | # style : Changes that don't affect code semantics 17 | # chore : Build parts or package manager modifications 18 | ################ -------------------------------------------------------------------------------- /src/types/selection.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @type Selection 타입 3 | * @param update Highlight 클릭 진입 여부 4 | * @param x Contextmenu X 좌표 5 | * @param y Contextmenu Y 좌표 6 | * @param height Selection 높이 7 | * @param cfiRange 선택된 cfi 범위 8 | * @param content 선택된 텍스트 9 | */ 10 | interface Selection { 11 | update: boolean; 12 | x: number; 13 | y: number; 14 | height: number; 15 | cfiRange: string; 16 | content: string; 17 | } 18 | 19 | export default Selection; 20 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 80, 4 | "useTabs": false, 5 | "tabWidth": 2, 6 | "semi": true, 7 | "quoteProps": "as-needed", 8 | "jsxSingleQuote": false, 9 | "trailingComma": "all", 10 | "arrowParens": "avoid", 11 | "endOfLine": "lf", 12 | "bracketSpacing": true, 13 | "jsxBracketSameLine": false, 14 | "requirePragma": false, 15 | "insertPragma": false, 16 | "proseWrap": "preserve", 17 | "vueIndentScriptAndStyle": false 18 | } 19 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset="UTF-8"> 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7

336 | 337 | ); 338 | }; 339 | 340 | export default React.forwardRef(EpubViewer); 341 | -------------------------------------------------------------------------------- /src/modules/reactViewer/ReactViewer.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | useState, 3 | useEffect, 4 | useRef, 5 | useCallback, 6 | useMemo, 7 | } from 'react'; 8 | import { Book, Rendition, Contents } from 'epubjs'; 9 | // modules 10 | import EpubViewer from 'modules/epubViewer/EpubViewer'; 11 | // components 12 | import LoadingView from 'LoadingView'; 13 | // utils 14 | import { debounce, timeFormatter } from 'lib/utils/commonUtil'; 15 | // styles 16 | import viewerDefaultStyles from 'modules/reactViewer/viewerStyle'; 17 | // types 18 | import { ReactViewerProps, ViewerRef } from 'types'; 19 | import BookType, { BookStyle, BookOption } from 'types/book'; 20 | 21 | /** 22 | * Epub React Viewer Module 23 | * @class 24 | * @param props 25 | * @param props.url Epub file path 26 | * @param props.viewerLayout Viewer layout 27 | * @param props.viewerStyle Viewer style 28 | * @param props.viewerStyleURL Viwer style - CSS URL 29 | * @param props.viewerOption Viewer option 30 | * @param props.onBookInfoChange Run when book information changed 31 | * @param props.onPageChange Run when page changed 32 | * @param props.onTocChange Run when toc changed 33 | * @param props.onSelection Run when selected 34 | * @param props.loadingView Loading component 35 | * @param ref Viewer ref 36 | */ 37 | const ReactViewer = ( 38 | { 39 | url, 40 | viewerLayout, 41 | viewerStyle, 42 | viewerStyleURL, 43 | viewerOption, 44 | onBookInfoChange, 45 | onPageChange, 46 | onTocChange, 47 | onSelection, 48 | loadingView, 49 | }: ReactViewerProps, 50 | ref: React.RefObject | any, 51 | ) => { 52 | // TODO Fix the ref type correctly instead 'any' type. 53 | const [book, setBook] = useState(null); 54 | 55 | const [rendition, setRendition] = useState(null); 56 | 57 | const [layoutStyle, setLayoutStyle] = useState<{ [key: string]: any }>({}); 58 | 59 | const [bookStyle, setBookStyle] = useState({ 60 | fontFamily: 'Origin', 61 | fontSize: 16, 62 | lineHeight: 1.4, 63 | marginHorizontal: 0, 64 | marginVertical: 0, 65 | }); 66 | 67 | const [bookOption, setBookOption] = useState({ 68 | flow: 'paginated', 69 | resizeOnOrientationChange: true, 70 | spread: 'auto', 71 | }); 72 | 73 | const currentSelection = useRef<{ 74 | cfiRange: string; 75 | contents: Contents | null; 76 | }>({ 77 | cfiRange: '', 78 | contents: null, 79 | }); 80 | 81 | /** 82 | * Run book changed 83 | * @method 84 | * @param book Epub Book 85 | */ 86 | const bookChanged = (book: Book) => setBook(book); 87 | 88 | /** 89 | * Run rendition changed 90 | * @method 91 | * @param rendition Epub Rendition 92 | */ 93 | const rendtionChanged = (rendition: Rendition) => setRendition(rendition); 94 | 95 | /** 96 | * Run selection changed [Debounce] 97 | * @method 98 | * @param cfiRange CFIRange 99 | * @param contents Selection Epub Contents 100 | */ 101 | const selectionChanged = (cfiRange: string, contents: Contents) => { 102 | currentSelection.current = { cfiRange, contents }; 103 | }; 104 | 105 | /** 106 | * Viewer resizing function 107 | * @method 108 | */ 109 | const onResize = useMemo( 110 | () => 111 | debounce(250, () => { 112 | if (!rendition) return; 113 | 114 | const viewerLayout_ = viewerLayout || { 115 | MIN_VIEWER_WIDTH: 600, 116 | MIN_VIEWER_HEIGHT: 300, 117 | VIEWER_HEADER_HEIGHT: 0, 118 | VIEWER_FOOTER_HEIGHT: 0, 119 | VIEWER_SIDEMENU_WIDTH: 0, 120 | }; 121 | 122 | const { innerWidth: win_w, innerHeight: win_h } = window; 123 | const componentHeight = 124 | viewerLayout_.VIEWER_HEADER_HEIGHT + 125 | viewerLayout_.VIEWER_FOOTER_HEIGHT; 126 | const w = 127 | win_w - 128 | ~~( 129 | ((win_w - viewerLayout_.MIN_VIEWER_WIDTH) / 100) * 130 | bookStyle.marginHorizontal 131 | ); 132 | const h = 133 | bookOption.flow === 'scrolled-doc' 134 | ? win_h - componentHeight 135 | : win_h - 136 | componentHeight - 137 | ~~( 138 | ((win_h - componentHeight - viewerLayout_.MIN_VIEWER_HEIGHT) / 139 | 100) * 140 | bookStyle.marginVertical 141 | ); 142 | const marginVertical = 143 | bookOption.flow === 'scrolled-doc' 144 | ? '' 145 | : `${ 146 | ~~( 147 | ((win_h - componentHeight - viewerLayout_.MIN_VIEWER_HEIGHT) / 148 | 100) * 149 | bookStyle.marginVertical 150 | ) / 2 151 | }px`; 152 | 153 | setLayoutStyle(layout => { 154 | if ( 155 | layout.width !== w || 156 | layout.height !== h || 157 | layout.marginTop !== marginVertical 158 | ) { 159 | return { 160 | ...layout, 161 | width: w, 162 | height: h, 163 | marginTop: marginVertical, 164 | marginBottom: marginVertical, 165 | }; 166 | } 167 | return layout; 168 | }); 169 | 170 | try { 171 | rendition.resize(w, h); 172 | } catch {} 173 | }), 174 | [ 175 | rendition, 176 | viewerLayout, 177 | bookStyle.marginHorizontal, 178 | bookStyle.marginVertical, 179 | bookOption.flow, 180 | ], 181 | ); 182 | 183 | /** 184 | * Selection Event, run when run mouseup event 185 | * @method
186 | * - Fire after the Epubjs selected event. [about 300ms] 187 | */ 188 | const onSelected = useCallback(async () => { 189 | if (!ref.current) return; 190 | 191 | const iframe = ref.current.querySelector('iframe'); 192 | if (!iframe) return; 193 | 194 | const iframeWin = iframe.contentWindow; 195 | if (!iframeWin) return; 196 | 197 | const selection_ = iframeWin.getSelection(); 198 | if (!selection_) return; 199 | 200 | const selectionText = selection_.toString(); 201 | if (selectionText === '') return; 202 | 203 | const cfiRange: string = await new Promise(resolve => 204 | setTimeout(() => resolve(currentSelection.current.cfiRange), 350), 205 | ); 206 | if (!cfiRange) return; 207 | 208 | const contents = currentSelection.current.contents; 209 | if (!contents) return; 210 | 211 | onSelection && onSelection(cfiRange, contents); 212 | }, [ref, onSelection]); 213 | 214 | /** Ref checker */ 215 | useEffect(() => { 216 | if (!ref) { 217 | throw new Error( 218 | '[React-Epub-Viewer] Put a ref argument that has a ViewerRef type.', 219 | ); 220 | } 221 | }, [ref]); 222 | 223 | /** Epub parsing */ 224 | // TODO Fix the infinite re-rendering issue, when inlcude `onBookInfoChange` to dependencies array. 225 | /* eslint-disable */ 226 | useEffect(() => { 227 | if (!book) return; 228 | 229 | Promise.all([book.loaded.metadata, book.opened]) 230 | .then(([metaData, bookData]: any[]) => { 231 | const newBookData: BookType = { 232 | coverURL: bookData.archive.urlCache[bookData.cover], 233 | title: metaData.title, 234 | description: metaData.description, 235 | published_date: timeFormatter(new Date(metaData.pubdate)), 236 | modified_date: timeFormatter(new Date(metaData.modified_date)), 237 | author: metaData.creator, 238 | publisher: metaData.publisher, 239 | language: metaData.language, 240 | }; 241 | 242 | onBookInfoChange && onBookInfoChange(newBookData); 243 | }) 244 | .catch(error => { 245 | throw `${error.stack} \n\n Message : Epub parsing failed.`; 246 | }); 247 | }, [book]); 248 | /* eslint-enable */ 249 | 250 | /** Set viewer Styles/Options */ 251 | useEffect(() => { 252 | viewerStyle && setBookStyle(v => ({ ...v, ...viewerStyle })); 253 | viewerOption && setBookOption(v => ({ ...v, ...viewerOption })); 254 | }, [viewerStyle, viewerOption]); 255 | 256 | /** Apply viewer Styles/Options */ 257 | useEffect(() => { 258 | if (!rendition) return; 259 | 260 | onResize(); 261 | 262 | const newStyle = { 263 | ...viewerDefaultStyles, 264 | body: { 265 | 'padding-top': '0px !important', 266 | 'padding-bottom': '0px !important', 267 | 'font-size': `${bookStyle.fontSize}px !important`, 268 | }, 269 | p: { 270 | 'font-size': `${bookStyle.fontSize}px !important`, 271 | 'line-height': `${bookStyle.lineHeight} !important`, 272 | }, 273 | }; 274 | 275 | rendition.flow(bookOption.flow); 276 | rendition.spread(bookOption.spread); 277 | 278 | if (bookStyle.fontFamily !== 'Origin') { 279 | Object.assign(newStyle.body, { 280 | 'font-family': `${bookStyle.fontFamily} !important`, 281 | }); 282 | } 283 | 284 | if (bookOption.flow === 'scrolled-doc') { 285 | // Scroll type 286 | Object.assign(newStyle.body, { 287 | margin: 'auto !important', 288 | }); 289 | } else if (bookOption.spread === 'auto') { 290 | // View 2 pages 291 | Object.assign(newStyle.body, {}); 292 | } else { 293 | // View 1 page 294 | Object.assign(newStyle.body, {}); 295 | } 296 | 297 | if (!!viewerStyleURL) { 298 | rendition.themes.registerUrl('main', viewerStyleURL); 299 | } 300 | 301 | rendition.themes.register('default', newStyle); 302 | 303 | rendition.themes.select('main'); 304 | }, [ 305 | rendition, 306 | bookStyle.fontFamily, 307 | bookStyle.fontSize, 308 | bookStyle.lineHeight, 309 | viewerStyleURL, 310 | bookOption, 311 | onResize, 312 | ]); 313 | 314 | /** Emit screen resizing event */ 315 | useEffect(() => { 316 | window.addEventListener('resize', onResize); 317 | return () => window.removeEventListener('resize', onResize); 318 | }, [onResize]); 319 | 320 | /** Emit selection event */ 321 | useEffect(() => { 322 | if (!rendition) return; 323 | rendition.on('mouseup', onSelected); 324 | return () => rendition.off('mouseup', onSelected); 325 | }, [rendition, onSelected]); 326 | 327 | return ( 328 | <> 329 | } 338 | ref={ref} 339 | /> 340 | 341 | ); 342 | }; 343 | 344 | export default React.forwardRef(ReactViewer); 345 | --------------------------------------------------------------------------------