fix bug

.gitignore

@@ -13,6 +13,7 @@
 
 /dist
 /build
+/.vscode
 
 # misc
 .DS_Store

public/assets/styles/default.css

@@ -163,7 +163,7 @@ textarea::-ms-input-placeholder,
 .progress-panel,
 .setting-panel-parent {
   background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
 }
 .book-item-cover,
 .book-cover,

public/index.html

@@ -31,6 +31,7 @@
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=UA-149740367-3"
+      id="analytic"
     ></script>
     <script>
       if (

src/components/background/component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import "./background.css";
 import { BackgroundProps, BackgroundState } from "./interface";
-import StorageUtil from "../../utils/storageUtil";
+import StorageUtil from "../../utils/serviceUtils/storageUtil";
 
 class Background extends React.Component<BackgroundProps, BackgroundState> {
   isFirst: Boolean;

src/components/bookCardItem/bookCardItem.css

@@ -136,6 +136,15 @@
   cursor: pointer;
   z-index: 2;
 }
+.book-deselect-icon {
+  position: absolute;
+  bottom: 44px;
+  right: 19px;
+  font-size: 20px;
+  color: #eee;
+  cursor: pointer;
+  z-index: 2;
+}
 .action-dialog-parent {
   position: fixed;
   top: 0px;

src/components/bookCardItem/component.tsx

@@ -4,7 +4,7 @@ import "./bookCardItem.css";
 import { BookCardProps, BookCardState } from "./interface";
 import AddFavorite from "../../utils/readUtils/addFavorite";
 import ActionDialog from "../dialogs/actionDialog";
-import StorageUtil from "../../utils/storageUtil";
+import StorageUtil from "../../utils/serviceUtils/storageUtil";
 import { withRouter } from "react-router-dom";
 import RecordLocation from "../../utils/readUtils/recordLocation";
 import { isElectron } from "react-device-detect";
@@ -174,6 +174,8 @@ class BookCardItem extends React.Component<BookCardProps, BookCardState> {
           ) : null}
           {this.props.isSelectBook && this.props.isSelected ? (
             <span className="icon-message book-selected-icon"></span>
+          ) : this.props.isSelectBook ? (
+            <span className="icon-message book-deselect-icon"></span>
           ) : null}
 
           {this.state.isOpenConfig && !this.props.isSelectBook ? (

src/components/bookCoverItem/component.tsx

@@ -4,7 +4,7 @@ import "./bookCoverItem.css";
 import { BookCoverProps, BookCoverState } from "./interface";
 import AddFavorite from "../../utils/readUtils/addFavorite";
 import ActionDialog from "../dialogs/actionDialog";
-import StorageUtil from "../../utils/storageUtil";
+import StorageUtil from "../../utils/serviceUtils/storageUtil";
 import { withRouter } from "react-router-dom";
 import RecordLocation from "../../utils/readUtils/recordLocation";
 import { isElectron } from "react-device-detect";

src/components/bookListItem/component.tsx

@@ -6,7 +6,7 @@ import { Trans } from "react-i18next";
 import AddFavorite from "../../utils/readUtils/addFavorite";
 import { withRouter } from "react-router-dom";
 import RecentBooks from "../../utils/readUtils/recordRecent";
-import StorageUtil from "../../utils/storageUtil";
+import StorageUtil from "../../utils/serviceUtils/storageUtil";
 import AddTrash from "../../utils/readUtils/addTrash";
 import EmptyCover from "../emptyCover";
 import BookUtil from "../../utils/fileUtils/bookUtil";

src/components/colorOption/component.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import StorageUtil from "../../utils/storageUtil";
+import StorageUtil from "../../utils/serviceUtils/storageUtil";
 import "./colorOption.css";
 import { ColorProps, ColorStates } from "./interface";
 

src/components/dialogs/aboutDialog/component.tsx

@@ -27,10 +27,10 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
         }}
         style={
           this.props.isNewWarning
-            ? { left: "510px", height: "280px", width: "150px" }
+            ? { left: "510px", width: "150px" }
             : {
                 left: "510px",
-                height: "250px",
+
                 width: "150px",
               }
         }
@@ -70,14 +70,6 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
           >
             <Trans>Feedback</Trans>
           </li>
-          <li
-            className="sort-by-category-list"
-            onClick={() => {
-              this.handleJump("https://forms.office.com/r/tgD1ZizHB2");
-            }}
-          >
-            <Trans>Survey</Trans>
-          </li>
           <li
             className="sort-by-category-list"
             onClick={() => {
@@ -102,14 +94,6 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
           >
             <Trans>Our Website</Trans>
           </li>
-          <li
-            className="sort-by-category-list"
-            onClick={() => {
-              this.handleJump("https://960960.xyz");
-            }}
-          >
-            <Trans>About developer</Trans>
-          </li>
           <li
             className="sort-by-category-list"
             onClick={() => {

src/components/dialogs/backupDialog/component.tsx

@@ -8,7 +8,7 @@ import DropboxUtil from "../../../utils/syncUtils/dropbox";
 import WebdavUtil from "../../../utils/syncUtils/webdav";
 import { BackupDialogProps, BackupDialogState } from "./interface";
 import TokenDialog from "../tokenDialog";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 import Lottie from "react-lottie";
 import animationSuccess from "../../../assets/lotties/success.json";
 import FileSaver from "file-saver";

src/components/dialogs/settingDialog/component.tsx

@@ -4,7 +4,7 @@ import { SettingInfoProps, SettingInfoState } from "./interface";
 import { Trans } from "react-i18next";
 import i18n from "../../../i18n";
 import { version } from "../../../../package.json";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 import { changePath } from "../../../utils/syncUtils/common";
 import { isElectron } from "react-device-detect";
 import { dropdownList } from "../../../constants/dropdownList";
@@ -161,6 +161,14 @@ class SettingDialog extends React.Component<
       "isDisplayDark",
       this.state.isDisplayDark ? "no" : "yes"
     );
+    if (StorageUtil.getReaderConfig("isDisplayDark") === "yes") {
+      StorageUtil.setReaderConfig("backgroundColor", "rgba(44,47,49,1)");
+      StorageUtil.setReaderConfig("textColor", "rgba(255,255,255,1)");
+    } else {
+      StorageUtil.setReaderConfig("backgroundColor", "rgba(255,255,255,1)");
+      StorageUtil.setReaderConfig("textColor", "rgba(0,0,0,1)");
+    }
+
     if (isElectron) {
       toast(this.props.t("Try refresh or restart"));
     } else {

src/components/dialogs/sortDialog/sortDialog.css

@@ -1,9 +1,9 @@
 .sort-dialog-container {
   width: 180px;
-  height: 263px;
   opacity: 1;
   position: absolute;
   left: 425px;
+  padding-bottom: 5px;
   top: 65px;
   z-index: 5;
   border-radius: 5px;

src/components/dialogs/tokenDialog/component.tsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import "./tokenDialog.css";
 import { Trans } from "react-i18next";
 import { TokenDialogProps, TokenDialogState } from "./interface";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 import toast from "react-hot-toast";
 import { isElectron } from "react-device-detect";
 class TokenDialog extends Component<TokenDialogProps, TokenDialogState> {

src/components/dialogs/updateInfo/component.tsx

@@ -7,7 +7,7 @@ import axios from "axios";
 import Lottie from "react-lottie";
 import animationNew from "../../../assets/lotties/new.json";
 import animationSuccess from "../../../assets/lotties/success.json";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 import { isElectron } from "react-device-detect";
 const newOptions = {
   loop: false,

src/components/imageViewer/component.tsx

@@ -4,6 +4,7 @@ import { ImageViewerProps, ImageViewerStates } from "./interface";
 import StyleUtil from "../../utils/readUtils/styleUtil";
 import FileSaver from "file-saver";
 import { handleLinkJump } from "../../utils/readUtils/linkUtil";
+import { getIframeDoc } from "../../utils/serviceUtils/docUtil";
 
 class ImageViewer extends React.Component<ImageViewerProps, ImageViewerStates> {
   constructor(props: ImageViewerProps) {
@@ -18,16 +19,8 @@ class ImageViewer extends React.Component<ImageViewerProps, ImageViewerStates> {
 
   componentDidMount() {
     this.props.rendition.on("rendered", () => {
-      let pageArea = document.getElementById("page-area");
-      if (!pageArea) return;
-      let iframe = pageArea.getElementsByTagName("iframe")[0];
-
-      if (!iframe) return;
-      let doc = iframe.contentDocument;
-      if (!doc) {
-        return;
-      }
-
+      let doc = getIframeDoc();
+      if (!doc) return;
       StyleUtil.addDefaultCss();
       doc.addEventListener("click", this.showImage, false);
     });

src/components/importLocal/component.tsx

@@ -17,7 +17,7 @@ import {
   fetchMD5FromPath,
 } from "../../utils/fileUtils/fileUtil";
 import toast from "react-hot-toast";
-import StorageUtil from "../../utils/storageUtil";
+import StorageUtil from "../../utils/serviceUtils/storageUtil";
 declare var window: any;
 let clickFilePath = "";
 

src/components/popups/popupMenu/component.tsx

@@ -4,7 +4,11 @@ import PopupNote from "../popupNote";
 import PopupOption from "../popupOption";
 import PopupTrans from "../popupTrans";
 import { PopupMenuProps, PopupMenuStates } from "./interface";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
+import {
+  getIframeDoc,
+  getPDFIframeDoc,
+} from "../../../utils/serviceUtils/docUtil";
 let colors = ["#fac106", "#ebe702", "#0be603", "#0493e6"];
 let lines = ["#FF0000", "#000080", "#0000FF", "#2EFF2E"];
 
@@ -38,12 +42,7 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
       }).then(() => {
         this.renderHighlighters();
       });
-      let pageArea = document.getElementById("page-area");
-      if (!pageArea) return;
-      let iframe = pageArea.getElementsByTagName("iframe")[0];
-
-      if (!iframe) return;
-      let doc = iframe.contentDocument;
+      let doc = getIframeDoc();
       if (!doc) return;
       doc.addEventListener("mousedown", this.openMenu);
       if (this.props.currentBook.format === "PDF") {
@@ -73,12 +72,7 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
   getHighlighter = () => {
     // 注意点一
     // 为了每次切换章节时都有与当前文档相关联的 pen
-    let pageArea = document.getElementById("page-area");
-    if (!pageArea) return;
-    let iframe = pageArea.getElementsByTagName("iframe")[0];
-
-    if (!iframe) return;
-    let doc: any = iframe.contentDocument;
+    let doc = getIframeDoc();
     if (!doc) return;
     this.highlighter = window.rangy.createHighlighter(doc);
     let classes = [
@@ -110,11 +104,7 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
     });
   };
   handleNoteClick = (event: any) => {
-    let pageArea = document.getElementById("page-area");
-    if (!pageArea) return;
-    let iframe = pageArea.getElementsByTagName("iframe")[0];
-    if (!iframe) return;
-    let doc = iframe.contentDocument;
+    let doc = getIframeDoc();
     if (!doc) return;
     this.props.handleMenuMode("note");
     let sel = doc.getSelection();
@@ -138,11 +128,8 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
   };
 
   showHighlight = (selected: any, colorCode: string, noteKey: string) => {
-    let pageArea = document.getElementById("page-area");
-    if (!pageArea) return;
-    let iframe = pageArea.getElementsByTagName("iframe")[0];
-    if (!iframe) return;
-    let iWin: any = iframe.contentWindow || iframe.contentDocument?.defaultView;
+    let iWin = getPDFIframeDoc();
+    if (!iWin) return;
     var pageIndex = selected.page;
     if (!iWin.PDFViewerApplication.pdfViewer) return;
     var page = iWin.PDFViewerApplication.pdfViewer.getPageView(pageIndex);

src/components/popups/popupOption/component.tsx

@@ -7,12 +7,13 @@ import ColorOption from "../../colorOption";
 import RecordLocation from "../../../utils/readUtils/recordLocation";
 import { Tooltip } from "react-tippy";
 import { popupList } from "../../../constants/popupList";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 import { isElectron } from "react-device-detect";
 import toast from "react-hot-toast";
-import { getSelection } from "../../../utils/mouseEvent";
+import { getSelection } from "../../../utils/serviceUtils/mouseEvent";
 import copy from "copy-text-to-clipboard";
 import { getHightlightCoords } from "../../../utils/fileUtils/pdfUtil";
+import { getIframeDoc } from "../../../utils/serviceUtils/docUtil";
 
 declare var window: any;
 
@@ -40,14 +41,12 @@ class PopupOption extends React.Component<PopupOptionProps> {
     }
   };
   handleCopy = () => {
-    let pageArea = document.getElementById("page-area");
-    if (!pageArea) return;
-    let iframe = pageArea.getElementsByTagName("iframe")[0];
-    if (!iframe) return;
-    let doc = iframe.contentDocument;
-    if (!doc) return;
-    copy(getSelection());
+    let text = getSelection();
+    if (!text) return;
+    copy(text);
     this.props.handleOpenMenu(false);
+    let doc = getIframeDoc();
+    if (!doc) return;
     doc.getSelection()?.empty();
     toast.success(this.props.t("Copy Successfully"));
   };

src/components/popups/popupTrans/component.tsx

@@ -4,7 +4,7 @@ import { PopupTransProps, PopupTransState } from "./interface";
 import md5 from "md5";
 import { Trans } from "react-i18next";
 import { translationList } from "../../../constants/translationList";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 
 class PopupTrans extends React.Component<PopupTransProps, PopupTransState> {
   constructor(props: PopupTransProps) {

src/components/readerSettings/dropdownList/component.tsx

@@ -4,7 +4,7 @@ import { dropdownList } from "../../../constants/dropdownList";
 import "./dropdownList.css";
 import { Trans } from "react-i18next";
 import { DropdownListProps, DropdownListState } from "./interface";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 import { isElectron } from "react-device-detect";
 class DropdownList extends React.Component<
   DropdownListProps,

src/components/readerSettings/modeControl/component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import "./modeControl.css";
 import { ModeControlProps, ModeControlState } from "./interface";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 import { Trans } from "react-i18next";
 import { Tooltip } from "react-tippy";
 import { isElectron } from "react-device-detect";

src/components/readerSettings/settingSwitch/component.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { SettingSwitchProps, SettingSwitchState } from "./interface";
 import { Trans } from "react-i18next";
 import TextToSpeech from "../../textToSpeech";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 import { readerSettingList } from "../../../constants/settingList";
 import { isElectron } from "react-device-detect";
 import toast from "react-hot-toast";

src/components/readerSettings/sliderList/component.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Trans } from "react-i18next";
 import { SliderListProps, SliderListState } from "./interface";
 import "./sliderList.css";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 import { isElectron } from "react-device-detect";
 import toast from "react-hot-toast";
 class SliderList extends React.Component<SliderListProps, SliderListState> {

src/components/readerSettings/themeList/component.tsx

@@ -4,7 +4,7 @@ import StyleUtil from "../../../utils/readUtils/styleUtil";
 import "./themeList.css";
 import { Trans } from "react-i18next";
 import { ThemeListProps, ThemeListState } from "./interface";
-import StorageUtil from "../../../utils/storageUtil";
+import StorageUtil from "../../../utils/serviceUtils/storageUtil";
 import { Panel as ColorPickerPanel } from "rc-color-picker";
 import "rc-color-picker/assets/index.css";
 import ThemeUtil from "../../../utils/readUtils/themeUtil";