fix bug

Former-commit-id: 37c9c8fe91277b1091d7dd99c3317c8fe9139984

src/components/imageViewer/component.tsx

@@ -19,29 +19,19 @@ class ImageViewer extends React.Component<ImageViewerProps, ImageViewerStates> {
   }
 
   componentDidMount() {
-    if (this.props.currentBook.format === "EPUB") {
-      this.props.rendition.on("rendered", () => {
-        let iframe = document.getElementsByTagName("iframe")[0];
-        if (!iframe) return;
-        let doc = iframe.contentDocument;
-        if (!doc) {
-          return;
-        }
-
-        StyleUtil.addDefaultCss();
-        doc.addEventListener("click", this.showImage, false);
-      });
-    } else {
+    console.log("jhjfh", this.props.rendition);
+    this.props.rendition.on("rendered", () => {
+      console.log("asfasdgs");
       let iframe = document.getElementsByTagName("iframe")[0];
       if (!iframe) return;
       let doc = iframe.contentDocument;
       if (!doc) {
         return;
       }
-
+      console.log("45345");
       StyleUtil.addDefaultCss();
       doc.addEventListener("click", this.showImage, false);
-    }
+    });
   }
 
   showImage = (event: any) => {

src/containers/epubReader/component.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import EpubViewer from "../epubViewer";
-import Background from "../epubBackground";
+import PageWidget from "../pageWidget";
 import SettingPanel from "../panels/settingPanel";
 import NavigationPanel from "../panels/navigationPanel";
 import OperationPanel from "../panels/operationPanel";
@@ -9,6 +9,7 @@ import { ReaderProps, ReaderState } from "./interface";
 import { EpubMouseEvent } from "../../utils/mouseEvent";
 import StorageUtil from "../../utils/storageUtil";
 import ReadingTime from "../../utils/readUtils/readingTime";
+import Background from "../../components/background";
 let lock = false;
 class Reader extends React.Component<ReaderProps, ReaderState> {
   messageTimer!: NodeJS.Timeout;
@@ -33,6 +34,8 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
       isPreventTrigger:
         StorageUtil.getReaderConfig("isPreventTrigger") === "yes",
       readerMode: StorageUtil.getReaderConfig("readerMode") || "double",
+      isHideBackground:
+        StorageUtil.getReaderConfig("isHideBackground") === "yes",
     };
   }
   componentWillMount() {
@@ -402,8 +405,9 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
         >
           <span className="icon-grid reader-setting-icon"></span>
         </div>
+        {this.state.isHideBackground ? null : <Background />}
 
-        <Background {...{ time: this.state.time }} />
+        <PageWidget {...{ time: this.state.time }} />
       </div>
     );
   }

src/containers/epubReader/interface.tsx

@@ -24,4 +24,5 @@ export interface ReaderState {
   time: number;
   scale: string;
   margin: number;
+  isHideBackground: boolean;
 }

src/containers/epubViewer/component.tsx

@@ -96,18 +96,16 @@ class EpubViewer extends React.Component<ViewAreaProps, ViewAreaStates> {
       contents: this.state.contents,
       rect: this.state.rect,
     };
+    const imageViewerProps = {
+      isShow: this.props.isShow,
+      rendition: this.props.rendition,
+      handleEnterReader: this.props.handleEnterReader,
+      handleLeaveReader: this.props.handleLeaveReader,
+    };
     return (
       <div className="view-area">
-        {!this.state.loading && (
-          <ImageViewer
-            {...{
-              isShow: this.props.isShow,
-              rendition: this.props.rendition,
-              handleEnterReader: this.props.handleEnterReader,
-              handleLeaveReader: this.props.handleLeaveReader,
-            }}
-          />
-        )}
+        <ImageViewer {...imageViewerProps} />
+
         <PopupMenu {...popupMenuProps} />
         {this.state.loading ? (
           <div className="spinner">

src/containers/htmlViewer/component.tsx

@@ -11,7 +11,7 @@ import { xmlBookTagFilter, xmlBookToObj } from "../../utils/fileUtils/xmlUtil";
 import StorageUtil from "../../utils/storageUtil";
 import RecordLocation from "../../utils/readUtils/recordLocation";
 import { mimetype } from "../../constants/mimetype";
-import BackgroundWidget from "../../components/backgroundWidget";
+import BackgroundWidget from "../../components/background";
 import toast from "react-hot-toast";
 import StyleUtil from "../../utils/readUtils/styleUtil";
 import "./index.css";
@@ -316,6 +316,12 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
     reader.readAsText(blob, "UTF-8");
   };
   render() {
+    const imageViewerProps = {
+      isShow: this.props.isShow,
+      rendition: this.props.rendition,
+      handleEnterReader: this.props.handleEnterReader,
+      handleLeaveReader: this.props.handleLeaveReader,
+    };
     return (
       <>
         <div
@@ -355,16 +361,7 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
             .props.currentBook.key ? (
           <BackgroundWidget />
         ) : null}
-        {this.props.htmlBook && (
-          <ImageViewer
-            {...{
-              isShow: this.props.isShow,
-              rendition: this.props.htmlBook.rendition,
-              handleEnterReader: this.props.handleEnterReader,
-              handleLeaveReader: this.props.handleLeaveReader,
-            }}
-          />
-        )}
+        {this.props.htmlBook && <ImageViewer {...imageViewerProps} />}
       </>
     );
   }

src/containers/pageWidget/component.tsx

@@ -3,7 +3,6 @@ import "./background.css";
 import { BackgroundProps, BackgroundState } from "./interface";
 import StorageUtil from "../../utils/storageUtil";
 import { Trans } from "react-i18next";
-import BackgroundWidget from "../../components/backgroundWidget";
 class Background extends React.Component<BackgroundProps, BackgroundState> {
   isFirst: Boolean;
   constructor(props: any) {
@@ -18,8 +17,6 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
       scale: StorageUtil.getReaderConfig("scale") || 1,
       isHideFooter: StorageUtil.getReaderConfig("isHideFooter") === "yes",
       isHideHeader: StorageUtil.getReaderConfig("isHideHeader") === "yes",
-      isHideBackground:
-        StorageUtil.getReaderConfig("isHideBackground") === "yes",
     };
     this.isFirst = true;
   }
@@ -30,7 +27,8 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
       nextProps.currentEpub.rendition.location &&
       this.props.currentEpub.rendition
     ) {
-      const currentLocation = this.props.currentEpub.rendition.currentLocation();
+      const currentLocation =
+        this.props.currentEpub.rendition.currentLocation();
       if (!currentLocation.start) {
         return;
       }
@@ -126,7 +124,6 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
               </Trans>
             </p>
           )}
-        {this.state.isHideBackground ? null : <BackgroundWidget />}
       </div>
     );
   }

src/containers/pageWidget/interface.tsx

@@ -11,7 +11,6 @@ export interface BackgroundState {
   isSingle: boolean;
   isHideFooter: boolean;
   isHideHeader: boolean;
-  isHideBackground: boolean;
   currentChapter: string;
   prevPage: number;
   nextPage: number;