From 875ced6db4cb0570eedd9a9b334deaaa5a44eaad Mon Sep 17 00:00:00 2001 From: troyeguo <13820674+troyeguo@users.noreply.github.com> Date: Mon, 18 Oct 2021 20:16:00 +0800 Subject: [PATCH] fix bug Former-commit-id: de1e844903a2fa54910d9c48371af849985c445e --- src/containers/htmlViewer/component.tsx | 52 ++++++++++++------- src/containers/htmlViewer/interface.tsx | 1 + .../lists/contentList/component.tsx | 19 +++++-- src/containers/lists/contentList/index.tsx | 1 + .../lists/contentList/interface.tsx | 2 + .../panels/progressPanel/component.tsx | 11 +--- .../panels/progressPanel/interface.tsx | 1 - src/model/HtmlBook.ts | 4 +- src/store/actions/reader.tsx | 1 - src/store/index.tsx | 1 + src/store/reducers/reader.tsx | 7 +++ src/utils/fileUtils/bookUtil.tsx | 1 - src/utils/fileUtils/htmlParser.tsx | 10 ++-- 13 files changed, 70 insertions(+), 41 deletions(-) diff --git a/src/containers/htmlViewer/component.tsx b/src/containers/htmlViewer/component.tsx index f168508e..813f297d 100644 --- a/src/containers/htmlViewer/component.tsx +++ b/src/containers/htmlViewer/component.tsx @@ -25,7 +25,7 @@ import animationSiri from "../../assets/lotties/siri.json"; import _ from "underscore"; import BackgroundWidget from "../../components/backgroundWidget"; import toast from "react-hot-toast"; -let isFirst = true; + declare var window: any; const siriOptions = { loop: true, @@ -44,6 +44,7 @@ class Viewer extends React.Component { this.state = { key: "", isLoading: true, + isFirst: true, scale: OtherUtil.getReaderConfig("scale") || 1, chapterCount: RecordLocation.getScrollHeight(key).count || 0, }; @@ -86,6 +87,7 @@ class Viewer extends React.Component { document.title = book.name + " - Koodo Reader"; }); }); + this.props.handleRenderFunc(this.handleRenderHtml); window.frames[0].document.addEventListener("click", (event) => { @@ -176,8 +178,8 @@ class Viewer extends React.Component { let htmlParser = new HtmlParser( new DOMParser().parseFromString(docStr, "text/html") ); - this.props.handleHtmlBook({ + key: this.state.key, doc: htmlParser.getAnchoredDoc(), chapters: htmlParser.getContentList(), subitems: [], @@ -187,28 +189,37 @@ class Viewer extends React.Component { htmlParser.getContentList() ) || [], }); - this.handleRenderHtml(); }; - handleRenderHtml = () => { + handleRenderHtml = (id: string = "") => { window.frames[0].document.body.innerHTML = ""; + + id && + this.setState({ + chapterCount: + _.findIndex(this.props.htmlBook.chapters, { + id: id, + }) + 1, + }); window.frames[0].document.body.innerHTML = this.props.htmlBook.chapterDoc[ - 3 * this.state.chapterCount - ].concat( - this.props.htmlBook.chapterDoc[3 * this.state.chapterCount + 1] || "", - this.props.htmlBook.chapterDoc[3 * this.state.chapterCount + 2] || "" - ); + id + ? _.findIndex(this.props.htmlBook.chapters, { + id, + }) + 1 + : this.state.chapterCount + ]; + // this.props.handleCurrentChapter(""); this.setState({ isLoading: false }); styleUtil.addHtmlCss(); this.handleIframeHeight(); setTimeout(() => { - if (isFirst) { + if (this.state.isFirst) { document .getElementsByClassName("ebook-viewer")[0] .scrollTo(0, RecordLocation.getScrollHeight(this.state.key).scroll); - isFirst = true; + this.setState({ isFirst: false }); } else { document.getElementsByClassName("ebook-viewer")[0].scrollTo(0, 0); } @@ -248,11 +259,9 @@ class Viewer extends React.Component { element.scrollHeight - element.scrollTop - element.clientHeight ) < 10 ) { - console.log("scrolled"); - if ( - this.state.chapterCount >= - this.props.htmlBook.chapterDoc.length / 3 - 1 + this.state.chapterCount === + this.props.htmlBook.chapterDoc.length - 1 ) { return; } @@ -293,8 +302,11 @@ class Viewer extends React.Component { handleTxt = (result: ArrayBuffer) => { let text = iconv.decode( Buffer.from(result), - chardet.detect(Buffer.from(result)) as string + this.props.currentBook.size / 1024 / 1024 > 1 + ? "utf8" + : (chardet.detect(Buffer.from(result)) as string) ); + this.handleRest(txtToHtml(text)); }; handleMD = (result: ArrayBuffer) => { @@ -308,7 +320,9 @@ class Viewer extends React.Component { handleRtf = (result: ArrayBuffer) => { let text = iconv.decode( Buffer.from(result), - chardet.detect(Buffer.from(result)) as string + this.props.currentBook.size / 1024 / 1024 > 1 + ? "utf8" + : (chardet.detect(Buffer.from(result)) as string) ); rtfToHTML.fromString(text, (err: any, html: any) => { this.handleRest(html); @@ -322,7 +336,9 @@ class Viewer extends React.Component { handleFb2 = (result: ArrayBuffer) => { let fb2Str = iconv.decode( Buffer.from(result), - chardet.detect(Buffer.from(result)) as string + this.props.currentBook.size / 1024 / 1024 > 1 + ? "utf8" + : (chardet.detect(Buffer.from(result)) as string) ); let bookObj = xmlBookToObj(Buffer.from(result)); bookObj += xmlBookTagFilter(fb2Str); diff --git a/src/containers/htmlViewer/interface.tsx b/src/containers/htmlViewer/interface.tsx index 0b9fac11..038dee6e 100644 --- a/src/containers/htmlViewer/interface.tsx +++ b/src/containers/htmlViewer/interface.tsx @@ -17,5 +17,6 @@ export interface ViewerState { key: string; scale: string; isLoading: boolean; + isFirst: boolean; chapterCount: number; } diff --git a/src/containers/lists/contentList/component.tsx b/src/containers/lists/contentList/component.tsx index 9262f0a5..c91910eb 100644 --- a/src/containers/lists/contentList/component.tsx +++ b/src/containers/lists/contentList/component.tsx @@ -2,6 +2,8 @@ import React from "react"; import "./contentList.css"; import { ContentListProps, ContentListState } from "./interface"; import OtherUtil from "../../../utils/otherUtil"; +import RecordLocation from "../../../utils/readUtils/recordLocation"; +import _ from "underscore"; class ContentList extends React.Component { constructor(props: ContentListProps) { super(props); @@ -9,6 +11,7 @@ class ContentList extends React.Component { chapters: [], isCollapsed: true, currentIndex: -1, + currentChapter: "", isExpandContent: OtherUtil.getReaderConfig("isExpandContent") === "yes", }; this.handleJump = this.handleJump.bind(this); @@ -39,10 +42,18 @@ class ContentList extends React.Component { this.props.currentEpub.rendition.display(href); } else { let id = href.substr(1); - - var top = window.frames[0].document.getElementById(id)?.offsetTop; - if (!top) return; - document.getElementsByClassName("ebook-viewer")[0].scrollTo(0, top); + RecordLocation.recordScrollHeight( + this.props.htmlBook.key, + document.body.clientWidth, + document.body.clientHeight, + 0, + 1, + _.findIndex(this.state.chapters, { id }) + ); + this.props.renderFunc(id); + // var top = window.frames[0].document.getElementById(id)?.offsetTop; + // if (!top) return; + // document.getElementsByClassName("ebook-viewer")[0].scrollTo(0, top); } } UNSAFE_componentWillReceiveProps(nextProps: ContentListProps) { diff --git a/src/containers/lists/contentList/index.tsx b/src/containers/lists/contentList/index.tsx index 403a9855..ad0fdc21 100644 --- a/src/containers/lists/contentList/index.tsx +++ b/src/containers/lists/contentList/index.tsx @@ -6,6 +6,7 @@ const mapStateToProps = (state: stateType) => { currentEpub: state.book.currentEpub, chapters: state.reader.chapters, htmlBook: state.reader.htmlBook, + renderFunc: state.book.renderFunc, }; }; const actionCreator = {}; diff --git a/src/containers/lists/contentList/interface.tsx b/src/containers/lists/contentList/interface.tsx index 841034e4..fe3cc881 100644 --- a/src/containers/lists/contentList/interface.tsx +++ b/src/containers/lists/contentList/interface.tsx @@ -3,10 +3,12 @@ export interface ContentListProps { currentEpub: any; chapters: any; htmlBook: HtmlBookModel; + renderFunc: (id: string) => void; } export interface ContentListState { chapters: any; currentIndex: number; + currentChapter: string; isCollapsed: boolean; isExpandContent: boolean; } diff --git a/src/containers/panels/progressPanel/component.tsx b/src/containers/panels/progressPanel/component.tsx index d2f9acd4..36fe9192 100644 --- a/src/containers/panels/progressPanel/component.tsx +++ b/src/containers/panels/progressPanel/component.tsx @@ -22,7 +22,7 @@ class ProgressPanel extends React.Component< super(props); this.state = { displayPercentage: this.props.percentage ? this.props.percentage : 0, - currentChapter: "", + currentPage: 0, totalPage: 0, currentChapterIndex: 0, @@ -44,15 +44,6 @@ class ProgressPanel extends React.Component< totalPage: currentLocation.start.displayed.total, currentChapterIndex: currentLocation.start.index, }); - let chapterHref = currentLocation.start.href; - let chapter = "Unknown Chapter"; - let currentChapter = this.props.flattenChapters.filter( - (item: any) => item.href.split("#")[0] === chapterHref - )[0]; - if (currentChapter) { - chapter = currentChapter.label.trim(" "); - } - this.setState({ currentChapter: chapter }); } if (nextProps.currentBook.key) { this.props.handleFetchPercentage(this.props.currentBook); diff --git a/src/containers/panels/progressPanel/interface.tsx b/src/containers/panels/progressPanel/interface.tsx index a90a994a..dd0438f6 100644 --- a/src/containers/panels/progressPanel/interface.tsx +++ b/src/containers/panels/progressPanel/interface.tsx @@ -11,7 +11,6 @@ export interface ProgressPanelProps { } export interface ProgressPanelState { displayPercentage: number; - currentChapter: string; currentPage: number; totalPage: number; currentChapterIndex: number; diff --git a/src/model/HtmlBook.ts b/src/model/HtmlBook.ts index 6e321517..450175fc 100644 --- a/src/model/HtmlBook.ts +++ b/src/model/HtmlBook.ts @@ -1,15 +1,17 @@ class HtmlBook { - + key:string; doc:HTMLElement; chapters:{label:string,id:string,href:string}[]; subitems:any; chapterDoc:string[]; constructor( + key:string, doc:HTMLElement, chapters:{label:string,id:string,href:string}[], subitems:any, chapterDoc:string[], ) { + this.key=key, this.doc=doc, this.chapters=chapters, this.subitems=subitems, diff --git a/src/store/actions/reader.tsx b/src/store/actions/reader.tsx index 7b787ad1..10b7c1d0 100644 --- a/src/store/actions/reader.tsx +++ b/src/store/actions/reader.tsx @@ -72,7 +72,6 @@ export function flatChapter(chapters: any) { export function handleFetchChapters(epub: any) { return (dispatch: (arg0: { type: string; payload: any }) => void) => { - console.log(epub); epub.loaded.navigation .then((chapters: any) => { dispatch(handleChapters(chapters.toc)); diff --git a/src/store/index.tsx b/src/store/index.tsx index c025512c..c47f5360 100644 --- a/src/store/index.tsx +++ b/src/store/index.tsx @@ -78,6 +78,7 @@ export type stateType = { chapters: any[]; flattenChapters: any; noteKey: string; + currentChapter: string; originalText: string; htmlBook: HtmlBookModel; }; diff --git a/src/store/reducers/reader.tsx b/src/store/reducers/reader.tsx index 6173fad7..70afdc45 100644 --- a/src/store/reducers/reader.tsx +++ b/src/store/reducers/reader.tsx @@ -6,6 +6,7 @@ const initState = { chapters: null, currentChapter: "", flattenChapters: null, + color: parseInt(OtherUtil.getReaderConfig("highlightIndex")) ? parseInt(OtherUtil.getReaderConfig("highlightIndex")) : OtherUtil.getReaderConfig("isDisplayDark") === "yes" @@ -31,6 +32,11 @@ export function reader( ...state, notes: action.payload, }; + case "HANDLE_CURRENT_CHAPTER": + return { + ...state, + currentChapter: action.payload, + }; case "HANDLE_ORIGINAL_TEXT": return { ...state, @@ -46,6 +52,7 @@ export function reader( ...state, color: action.payload, }; + case "HANDLE_NOTE_KEY": return { ...state, diff --git a/src/utils/fileUtils/bookUtil.tsx b/src/utils/fileUtils/bookUtil.tsx index d40f82e9..24098396 100644 --- a/src/utils/fileUtils/bookUtil.tsx +++ b/src/utils/fileUtils/bookUtil.tsx @@ -125,7 +125,6 @@ class BookUtil { } } static getBookUrl(book: BookModel) { - console.log(book); let ref = book.description === "readonly" || book.description === "pdf" ? book.format.toLowerCase() diff --git a/src/utils/fileUtils/htmlParser.tsx b/src/utils/fileUtils/htmlParser.tsx index 2d747669..c5a5ad81 100644 --- a/src/utils/fileUtils/htmlParser.tsx +++ b/src/utils/fileUtils/htmlParser.tsx @@ -43,19 +43,19 @@ class HtmlParser { }); } getChapter(bookStr: string, contentList: any) { - // console.log(bookStr, contentList); + if (contentList.length === 0) return [bookStr]; let chapterDoc: string[] = []; let chapterStr = ""; - console.log(contentList); for (let i = 0; i < contentList.length; i++) { if (!bookStr) return; chapterStr = bookStr.split(contentList[i].id)[0]; - bookStr = - '