fix bug

Former-commit-id: 7fa431710fe0e9142a93abc504b5f41e98787a10

src/assets/locales/cn/translation.json

@@ -13,6 +13,7 @@
   "This action will clear and remove this shelf": "此操作会清空并删除此书架",
   "Scale": "页面缩放",
   "Delete this tag": "删除此标签",
+  "Don't show footer and header": "不显示页眉页脚",
   "This action will clear and remove this tag": "此操作会清空并删除此标签",
   "Dont't use mimical background": "不使用仿真背景",
   "Auto hide cursor when reading": "阅读时自动隐藏鼠标",

src/assets/locales/en/translation.json

@@ -98,6 +98,7 @@
   "Note": "Note",
   "Scale": "Page Scale",
   "Digest": "Digest",
+  "Don't show footer and header": "Don't show footer and header",
   "Book size is over 20M": "Book size is over 20M",
   "Current Font Size": "Current Font Size",
   "Current Chapter": "Current Chapter",

src/assets/locales/tw/translation.json

@@ -182,6 +182,7 @@
   "This action will clear and remove this tag": "此操作会清空并删除此标签",
   "Scale": "页面缩放",
   "Next Chapter": "下一章",
+  "Don't show footer and header": "不显示页眉页脚",
   "Prev Chapter": "上一章",
   "Current Reading Time": "本次阅读时间：{{count}}分钟",
   "Finish Reading Time": "读完本章需要：{{count}}分钟",

src/components/imageViewer/component.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import "./imageViewer.css";
 import { ImageViewerProps, ImageViewerStates } from "./interface";
 import ReaderConfig from "../../utils/readerConfig";
+import FileSaver from "file-saver";
 const isElectron = require("is-electron");
 
 declare var window: any;
@@ -13,7 +14,8 @@ class ImageViewer extends React.Component<ImageViewerProps, ImageViewerStates> {
     this.state = {
       isShowImage: false,
       imageRatio: "horizontal",
-      zoomIndex: 1,
+      zoomIndex: 0,
+      rotateIndex: 0,
     };
   }
 
@@ -26,26 +28,24 @@ class ImageViewer extends React.Component<ImageViewerProps, ImageViewerStates> {
         return;
       }
       ReaderConfig.addDefaultCss();
-      doc.addEventListener("click", this.showImage);
+      doc.addEventListener("click", this.showImage, true);
     });
   }
 
   showImage = (event: any) => {
-    console.log("click");
     if (this.props.isShow) {
       this.props.handleLeaveReader("left");
       this.props.handleLeaveReader("right");
       this.props.handleLeaveReader("top");
       this.props.handleLeaveReader("bottom");
     }
-    if (
-      isElectron() &&
-      event.target.parentNode.parentNode.tagName.toLowerCase() === "a"
-    ) {
+    let href =
+      event.target.href ||
+      event.target.parentNode.href ||
+      event.target.parentNode.parentNode.href;
+    if (isElectron() && href) {
       event.preventDefault();
-      window
-        .require("electron")
-        .shell.openExternal(event.target.parentNode.parentNode.href);
+      window.require("electron").shell.openExternal(href);
     }
     if (!event.target.src) {
       return;
@@ -79,67 +79,102 @@ class ImageViewer extends React.Component<ImageViewerProps, ImageViewerStates> {
     this.setState({ isShowImage: false });
   };
   handleZoomIn = () => {
-    this.setState({ zoomIndex: 1.1 * this.state.zoomIndex }, () => {
-      let image: any = document.querySelector(".image");
-      image!.setAttribute("style", `width`);
+    let image: any = document.querySelector(".image");
+    if (image.style.width === "100vw" || image.style.height === "100vh") return;
+    this.setState({ zoomIndex: this.state.zoomIndex + 1 }, () => {
+      if (this.state.imageRatio === "horizontal") {
+        image.style.width = `${60 + this.state.zoomIndex * 10}vw`;
+      } else {
+        image.style.height = `${90 + 10 * this.state.zoomIndex}vh`;
+      }
+    });
+  };
+  handleZoomOut = () => {
+    let image: any = document.querySelector(".image");
+    if (image.style.width === "50vw" || image.style.height === "50vh") return;
+    this.setState({ zoomIndex: this.state.zoomIndex - 1 }, () => {
+      if (this.state.imageRatio === "horizontal") {
+        image.style.width = `${60 + this.state.zoomIndex * 10}vw`;
+      } else {
+        image.style.height = `${90 + 10 * this.state.zoomIndex}vh`;
+      }
+    });
+  };
+  handleSave = async () => {
+    let image: any = document.querySelector(".image");
+    let blob = await fetch(image.src).then((r) => r.blob());
+    FileSaver.saveAs(blob, `${new Date().toLocaleDateString()}`);
+  };
+  handleClock = () => {
+    let image: any = document.querySelector(".image");
+    this.setState({ rotateIndex: this.state.rotateIndex + 1 }, () => {
+      image.style.transform = `rotate(${this.state.rotateIndex * 90}deg)`;
+    });
+  };
+  handleCounterClock = () => {
+    let image: any = document.querySelector(".image");
+    this.setState({ rotateIndex: this.state.rotateIndex - 1 }, () => {
+      image.style.transform = `rotate(${this.state.rotateIndex * 90}deg)`;
     });
   };
   render() {
     return (
       <div
         className="image-preview"
-        style={
-          this.state.isShowImage
-            ? { backgroundColor: "rgba(75,75,75,0.3)" }
-            : { display: "none" }
-        }
-        onClick={(event) => {
-          this.hideImage(event);
-        }}
+        style={this.state.isShowImage ? {} : { display: "none" }}
       >
-        <div>
-          <img
-            src=""
-            alt=""
-            className="image"
-            style={
-              this.state.imageRatio === "horizontal"
-                ? { width: "60vw" }
-                : { height: "90vh" }
-            }
-          />
-          <div className="image-operation">
-            <span
-              className="icon-zoom-in zoom-in-icon"
-              onClick={() => {
-                this.handleZoomIn();
-              }}
-            ></span>
-            <span
-              className="icon-zoom-out zoom-out-icon"
-              onClick={() => {
-                // this.handleZoomOut();
-              }}
-            ></span>
-            <span
-              className="icon-save save-icon"
-              onClick={() => {
-                // this.handleSave();
-              }}
-            ></span>
-            <span
-              className="icon-clockwise clockwise-icon"
-              onClick={() => {
-                // this.handleClock();
-              }}
-            ></span>
-            <span
-              className="icon-counterclockwise counterclockwise-icon"
-              onClick={() => {
-                // this.handleCounterClock();
-              }}
-            ></span>
-          </div>
+        <div
+          className="image-background"
+          style={
+            this.state.isShowImage
+              ? { backgroundColor: "rgba(75,75,75,0.3)" }
+              : {}
+          }
+          onClick={(event) => {
+            this.hideImage(event);
+          }}
+        ></div>
+        <img
+          src=""
+          alt=""
+          className="image"
+          style={
+            this.state.imageRatio === "horizontal"
+              ? { width: "60vw" }
+              : { height: "90vh" }
+          }
+        />
+        <div className="image-operation">
+          <span
+            className="icon-zoom-in zoom-in-icon"
+            onClick={() => {
+              this.handleZoomIn();
+            }}
+          ></span>
+          <span
+            className="icon-zoom-out zoom-out-icon"
+            onClick={() => {
+              this.handleZoomOut();
+            }}
+          ></span>
+          <span
+            className="icon-save save-icon"
+            onClick={() => {
+              this.handleSave();
+            }}
+          ></span>
+          <span
+            className="icon-clockwise clockwise-icon"
+            onClick={() => {
+              this.handleClock();
+            }}
+          ></span>
+          <span
+            className="icon-counterclockwise counterclockwise-icon"
+            onClick={() => {
+              this.handleCounterClock();
+            }}
+          ></span>
         </div>
       </div>
     );

src/components/imageViewer/imageViewer.css

@@ -19,6 +19,7 @@
   bottom: 30px;
   color: white;
   font-size: 30px;
+  z-index: 6;
 }
 .zoom-in-icon,
 .zoom-out-icon,
@@ -28,3 +29,10 @@
   margin: 20px;
   cursor: pointer;
 }
+.image-background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}

src/components/imageViewer/interface.tsx

@@ -8,4 +8,5 @@ export interface ImageViewerStates {
   isShowImage: boolean;
   imageRatio: string;
   zoomIndex: number;
+  rotateIndex: number;
 }

src/components/importLocal/component.tsx

@@ -112,7 +112,6 @@ class ImportLocal extends React.Component<ImportLocalProps, ImportLocalState> {
           const epub = window.ePub(e.target.result);
           epub.loaded.metadata
             .then((metadata: any) => {
-              console.log(metadata, "medata");
               if (!e.target) {
                 reject();
                 throw new Error();

src/components/settingDialog/component.tsx

@@ -20,6 +20,7 @@ class SettingDialog extends React.Component<
       isOpenBook: OtherUtil.getReaderConfig("isOpenBook") === "yes",
       isUseFont: OtherUtil.getReaderConfig("isUseFont") === "yes",
       isUseBackground: OtherUtil.getReaderConfig("isUseBackground") === "yes",
+      isShowFooter: OtherUtil.getReaderConfig("isShowFooter") !== "no",
     };
   }
   componentDidMount() {
@@ -80,7 +81,17 @@ class SettingDialog extends React.Component<
       : this.props.handleMessage("Turn On Successfully");
     this.props.handleMessageBox(true);
   };
-
+  handleFooterHeader = () => {
+    this.setState({ isShowFooter: !this.state.isShowFooter });
+    OtherUtil.setReaderConfig(
+      "isShowFooter",
+      this.state.isShowFooter ? "no" : "yes"
+    );
+    this.state.isShowFooter
+      ? this.props.handleMessage("Turn On Successfully")
+      : this.props.handleMessage("Turn Off Successfully");
+    this.props.handleMessageBox(true);
+  };
   render() {
     return (
       <div className="setting-dialog-container">
@@ -152,6 +163,21 @@ class SettingDialog extends React.Component<
               ></span>
             </span>
           </div>
+          <div className="setting-dialog-new-title">
+            <Trans>Don't show footer and header</Trans>
+            <span
+              className="single-control-switch"
+              onClick={() => {
+                this.handleFooterHeader();
+              }}
+              style={{ float: "right" }}
+            >
+              <span
+                className="single-control-button"
+                style={this.state.isShowFooter ? {} : { float: "right" }}
+              ></span>
+            </span>
+          </div>
           <div className="setting-dialog-new-title">
             <Trans>Dont't use mimical background</Trans>
             <span

src/components/settingDialog/interface.tsx

@@ -9,4 +9,5 @@ export interface SettingInfoState {
   isOpenBook: boolean;
   isUseFont: boolean;
   isUseBackground: boolean;
+  isShowFooter: boolean;
 }

src/containers/background/component.tsx

@@ -9,11 +9,14 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
   constructor(props: any) {
     super(props);
     this.state = {
-      isSingle: OtherUtil.getReaderConfig("readerMode") !== "double",
+      isSingle:
+        OtherUtil.getReaderConfig("readerMode") &&
+        OtherUtil.getReaderConfig("readerMode") !== "double",
       currentChapter: "",
       prevPage: 0,
       nextPage: 0,
-      scale: OtherUtil.getReaderConfig("scale"),
+      scale: OtherUtil.getReaderConfig("scale") || 1,
+      isShowFooter: OtherUtil.getReaderConfig("isShowFooter") !== "no",
     };
   }
   componentWillReceiveProps(nextProps: BackgroundProps) {
@@ -43,7 +46,7 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
     }
     return (
       <div className="background">
-        {this.state.currentChapter && (
+        {this.state.isShowFooter && this.state.currentChapter && (
           <p
             className="progress-chapter-name"
             style={
@@ -59,7 +62,7 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
           </p>
         )}
 
-        {!this.state.isSingle && (
+        {this.state.isShowFooter && !this.state.isSingle && (
           <p
             className="progress-book-name"
             style={
@@ -75,7 +78,7 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
           </p>
         )}
 
-        {this.state.prevPage > 0 && (
+        {this.state.isShowFooter && this.state.prevPage > 0 && (
           <p
             className="background-page-left"
             style={
@@ -90,9 +93,11 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
             第{this.state.prevPage}页
           </p>
         )}
-        {this.state.nextPage > 0 && !this.state.isSingle && (
-          <p className="background-page-right">第{this.state.nextPage}页</p>
-        )}
+        {this.state.isShowFooter &&
+          this.state.nextPage > 0 &&
+          !this.state.isSingle && (
+            <p className="background-page-right">第{this.state.nextPage}页</p>
+          )}
         <div
           className="background-box2"
           style={

src/containers/background/interface.tsx

@@ -8,6 +8,7 @@ export interface BackgroundProps {
 }
 export interface BackgroundState {
   isSingle: boolean;
+  isShowFooter: boolean;
   currentChapter: string;
   prevPage: number;
   nextPage: number;

src/containers/bookList/component.tsx

@@ -28,13 +28,7 @@ class BookList extends React.Component<BookListProps, BookListState> {
     this.handleOldVersion();
   }
   handleOldVersion = async () => {
-    console.log(this.props.books, "books");
     if (!this.props.books[0].cover) {
-      console.log(
-        this.props.books,
-        this.props.books[0],
-        !this.props.books[0].cover
-      );
       let bookArr: any = this.props.books;
       for (let i = 0; i < bookArr.length; i++) {
         await new Promise(async (resolve, reject) => {

src/containers/settingPanel/component.tsx

@@ -113,7 +113,7 @@ class SettingPanel extends React.Component<
               mode: "fontSize",
             }}
           />
-          {this.state.readerMode !== "double" ? (
+          {this.state.readerMode && this.state.readerMode !== "double" ? (
             <SliderList
               {...{
                 maxValue: 1.5,

src/containers/viewArea/component.tsx

@@ -123,7 +123,8 @@ class ViewArea extends React.Component<ViewAreaProps, ViewAreaStates> {
     };
     return (
       <div className="view-area">
-        {OtherUtil.getReaderConfig("readerMode") !== "double" &&
+        {OtherUtil.getReaderConfig("readerMode") &&
+          OtherUtil.getReaderConfig("readerMode") !== "double" &&
           this.props.locations && (
             <>
               <div

src/pages/reader/component.tsx

@@ -25,7 +25,7 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
       isOpenNavPanel: false,
       isMessage: false,
       rendition: null,
-      scale: OtherUtil.getReaderConfig("scale"),
+      scale: OtherUtil.getReaderConfig("scale") || 1,
       time: ReadingTime.getTime(this.props.currentBook.key),
       isTouch: OtherUtil.getReaderConfig("isTouch") === "yes",
       readerMode: OtherUtil.getReaderConfig("readerMode") || "double",

src/utils/readerConfig.tsx

@@ -44,24 +44,23 @@ export const themeList = [
 ];
 
 export const updateLog = {
-  date: "2020.9.13",
-  version: "1.1.5",
+  date: "2020.9.29",
+  version: "1.1.6",
   new: [
-    "新增听书功能",
-    "增加对触控屏的支持，请前往设置->开启触控模式，阅读时双击页面唤出菜单，再双击退出，上下左右滑动控制翻页",
-    "支持搜索笔记和书摘",
-    "支持给笔记和书摘添加标签",
-    "新增下划线标记功能",
-    "新增黑色阅读主题",
-    "支持收起多级目录",
-    "支持自动打开上次阅读的图书，请前往设置->自动打开上次阅读的图书",
-    "支持控制是否使用内嵌字体，请前往设置->使用内嵌字体",
-    "客户端新增启动动画",
+    "减少内存占用，提升首屏打开速度，优化多文件导入体验",
+    "滚动模式新增连续滚动和分章滚动",
+    "单页模式下支持调节页面的缩放比例",
+    "我的书架现在移动到全部图书的顶部",
+    "支持删除书架和标签",
+    "新增本次阅读时间，本章剩余时间",
+    "页眉，页脚现在会显示当前页数，书名和章节名，如不需要，请前往设置关闭",
+    "支持关闭图书的仿真背景，请前往设置关闭",
+    "支持缩放、旋转、保存书中的图片",
   ],
   fix: [
-    "修复滚动模式下的一些bug",
-    "修复备份恢复时的崩溃问题",
-    "客户端启动时的性能优化",
+    "解除之前的书籍大小和数量限制",
+    "修复书签页崩溃的问题",
+    "修复触控模式下的一些bug，点击边缘唤出菜单，再点击图书，退出菜单",
   ],
 };