Refactor background and viewer components to use props for scale and margin

- Updated Background component to receive scale and margin from props instead of state.
- Implemented UNSAFE_componentWillReceiveProps in Background and Viewer components to handle prop changes for scale, margin, and reader mode.
- Modified mapStateToProps in relevant components to include scale and margin from the Redux store.
- Adjusted SliderList component to handle scale and margin changes without reloading books.
- Updated ThemeList and NavigationPanel components to use backgroundColor from props.
- Enhanced reader settings to manage background color, scale, and margin through Redux actions.
- Refactored related interfaces and actions to accommodate new props and state management.

public/assets/styles/default.css

@@ -59,7 +59,7 @@ a {
 .token-dialog-link-text,
 .token-dialog-token-text,
 .nav-search-page-item {
-  border: 1.5px solid rgba(75, 75, 75, 1);
+  border: 2px solid rgba(75, 75, 75, 1);
 }
 .header-search-box,
 .header-search-box::placeholder,
@@ -261,5 +261,5 @@ a {
   border-bottom: 1px solid rgba(75, 75, 75, 0.1);
 }
 .card-list-item-card {
-  border: 1.5px solid rgba(75, 75, 75, 0.15);
+  border: 2px solid rgba(75, 75, 75, 0.15);
 }

src/components/background/component.tsx

@@ -9,8 +9,6 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
     super(props);
     this.state = {
       isSingle: this.props.readerMode !== "double",
-      scale: ConfigService.getReaderConfig("scale") || "1",
-      margin: parseInt(ConfigService.getReaderConfig("margin")) || 0,
       pageOffset: "",
       pageWidth: "",
     };
@@ -20,13 +18,35 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
     this.setState(
       getPageWidth(
         this.props.readerMode,
-        this.state.scale,
-        this.state.margin,
+        this.props.scale,
+        parseInt(this.props.margin),
         this.props.isNavLocked,
         this.props.isSettingLocked
       )
     );
   }
+  async UNSAFE_componentWillReceiveProps(nextProps: BackgroundProps) {
+    if (
+      nextProps.margin !== this.props.margin ||
+      nextProps.scale !== this.props.scale ||
+      nextProps.readerMode !== this.props.readerMode ||
+      nextProps.isNavLocked !== this.props.isNavLocked ||
+      nextProps.isSettingLocked !== this.props.isSettingLocked
+    ) {
+      this.setState(
+        getPageWidth(
+          nextProps.readerMode,
+          nextProps.scale,
+          parseInt(nextProps.margin),
+          nextProps.isNavLocked,
+          nextProps.isSettingLocked
+        )
+      );
+    }
+    if (nextProps.readerMode !== this.props.readerMode) {
+      this.setState({ isSingle: nextProps.readerMode !== "double" });
+    }
+  }
 
   render() {
     return (

src/components/background/index.tsx

@@ -8,6 +8,8 @@ const mapStateToProps = (state: stateType) => {
     readerMode: state.reader.readerMode,
     isNavLocked: state.reader.isNavLocked,
     isSettingLocked: state.reader.isSettingLocked,
+    scale: state.reader.scale,
+    margin: state.reader.margin,
   };
 };
 const actionCreator = {};

src/components/background/interface.tsx

@@ -2,13 +2,13 @@ import BookModel from "../../models/Book";
 export interface BackgroundProps {
   currentBook: BookModel;
   readerMode: string;
+  scale: string;
+  margin: string;
   isNavLocked: boolean;
   isSettingLocked: boolean;
 }
 export interface BackgroundState {
   isSingle: boolean;
-  scale: string;
-  margin: number;
   pageOffset: string;
   pageWidth: string;
 }

src/components/readerSettings/modeControl/component.tsx

@@ -23,7 +23,7 @@ class ModeControl extends React.Component<ModeControlProps, ModeControlState> {
     }
 
     this.props.handleReaderMode(mode);
-    BookUtil.reloadBooks();
+    this.props.renderBookFunc();
   };
   render() {
     return (

src/components/readerSettings/sliderList/component.tsx

@@ -20,10 +20,6 @@ class SliderList extends React.Component<SliderListProps, SliderListState> {
     };
   }
   handleRest = async (mode) => {
-    if (mode === "scale" || mode === "margin") {
-      BookUtil.reloadBooks();
-      return;
-    }
     this.props.renderBookFunc();
   };
   onValueChange = (event: any, mode: string) => {
@@ -34,6 +30,7 @@ class SliderList extends React.Component<SliderListProps, SliderListState> {
     } else if (mode === "scale") {
       const scale = event.target.value;
       this.setState({ [mode]: scale });
+      this.props.handleScale(scale);
       ConfigService.setReaderConfig("scale", scale);
     } else if (mode === "letterSpacing") {
       const letterSpacing = event.target.value;
@@ -53,6 +50,7 @@ class SliderList extends React.Component<SliderListProps, SliderListState> {
     } else {
       const margin = event.target.value;
       this.setState({ [mode]: margin } as any);
+      this.props.handleMargin(margin);
       ConfigService.setReaderConfig("margin", margin);
     }
   };

src/components/readerSettings/sliderList/index.tsx

@@ -2,14 +2,20 @@ import { connect } from "react-redux";
 import { withTranslation } from "react-i18next";
 import SliderList from "./component";
 import { stateType } from "../../../store";
+import { handleMargin, handleScale } from "../../../store/actions";
 
 const mapStateToProps = (state: stateType) => {
   return {
     currentBook: state.book.currentBook,
     renderBookFunc: state.book.renderBookFunc,
+    scale: state.reader.scale,
+    margin: state.reader.margin,
   };
 };
-const actionCreator = {};
+const actionCreator = {
+  handleMargin,
+  handleScale,
+};
 export default connect(
   mapStateToProps,
   actionCreator

src/components/readerSettings/sliderList/interface.tsx

@@ -4,15 +4,19 @@ export interface SliderListProps {
   item: any;
   renderBookFunc: () => void;
   t: (title: string) => string;
+  scale: string;
+  margin: number;
+  handleScale: (scale: string) => void;
+  handleMargin: (margin: string) => void;
 }
 export interface SliderListState {
   inputValue: string;
   isTyping: boolean;
   isEntered: boolean;
   fontSize: string;
-  scale: string;
   letterSpacing: string;
   paraSpacing: string;
   brightness: string;
+  scale: string;
   margin: string;
 }

src/components/readerSettings/themeList/component.tsx

@@ -37,6 +37,7 @@ class ThemeList extends React.Component<ThemeListProps, ThemeListState> {
   }
   handleChangeBgColor = (color: string, index: number = -1) => {
     ConfigService.setReaderConfig("backgroundColor", color);
+    this.props.handleBackgroundColor(color);
     this.setState({
       currentBackgroundIndex: index,
     });
@@ -48,11 +49,13 @@ class ThemeList extends React.Component<ThemeListProps, ThemeListState> {
     ) {
       ConfigService.setReaderConfig("textColor", "rgba(0,0,0,1)");
     }
-    BookUtil.reloadBooks();
+    this.props.renderBookFunc();
+    // BookUtil.reloadBooks();
   };
 
   handleChooseBgColor = (color) => {
     ConfigService.setReaderConfig("backgroundColor", color.color);
+    this.props.handleBackgroundColor(color.color);
     StyleUtil.addDefaultCss();
   };
   handleColorTextPicker = (isShowTextPicker: boolean) => {
@@ -182,6 +185,7 @@ class ThemeList extends React.Component<ThemeListProps, ThemeListState> {
             className="theme-color-clear-button"
             onClick={() => {
               ConfigService.setReaderConfig("backgroundColor", "");
+              this.props.handleBackgroundColor("");
               toast.success(this.props.t("Removal successful"));
               BookUtil.reloadBooks();
             }}

src/components/readerSettings/themeList/index.tsx

@@ -2,13 +2,14 @@ import { connect } from "react-redux";
 import { withTranslation } from "react-i18next";
 import ThemeList from "./component";
 import { stateType } from "../../../store";
+import { handleBackgroundColor } from "../../../store/actions";
 
 const mapStateToProps = (state: stateType) => {
   return {
     renderBookFunc: state.book.renderBookFunc,
   };
 };
-const actionCreator = {};
+const actionCreator = { handleBackgroundColor };
 export default connect(
   mapStateToProps,
   actionCreator

src/components/readerSettings/themeList/interface.tsx

@@ -1,6 +1,7 @@
 export interface ThemeListProps {
   t: (title: string) => string;
   renderBookFunc: () => void;
+  handleBackgroundColor: (color: string) => void;
 }
 
 export interface ThemeListState {

src/containers/header/component.tsx

@@ -128,6 +128,9 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     this.props.handleCloudSyncFunc(this.handleCloudSync);
     document.addEventListener("visibilitychange", async () => {
       if (document.visibilityState === "visible") {
+        this.props.handleFetchBooks();
+        this.props.handleFetchBookmarks();
+        this.props.handleFetchNotes();
         if (ConfigService.getItem("isFinshReading") === "yes") {
           ConfigService.setItem("isFinshReading", "no");
           if (

src/containers/pageWidget/component.tsx

@@ -77,16 +77,7 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
               : "calc(100% - 300px)",
           left: !this.props.isNavLocked ? "0" : "300px",
           right: !this.props.isSettingLocked ? "0" : "300px",
-          backgroundColor:
-            ConfigService.getReaderConfig("isMergeWord") === "yes"
-              ? "rgba(0,0,0,0)"
-              : ConfigService.getReaderConfig("backgroundColor")
-              ? ConfigService.getReaderConfig("backgroundColor")
-              : ConfigService.getReaderConfig("appSkin") === "night" ||
-                (ConfigService.getReaderConfig("appSkin") === "system" &&
-                  ConfigService.getReaderConfig("isOSNight") === "yes")
-              ? "rgba(44,47,49,1)"
-              : "rgba(255,255,255,1)",
+          backgroundColor: this.props.backgroundColor,
           filter: `brightness(${
             ConfigService.getReaderConfig("brightness") || 1
           }) invert(${

src/containers/pageWidget/index.tsx

@@ -13,6 +13,7 @@ const mapStateToProps = (state: stateType) => {
     readerMode: state.reader.readerMode,
     isNavLocked: state.reader.isNavLocked,
     isSettingLocked: state.reader.isSettingLocked,
+    backgroundColor: state.reader.backgroundColor,
     currentChapterIndex: state.reader.currentChapterIndex,
     htmlBook: state.reader.htmlBook,
     isShowBookmark: state.viewArea.isShowBookmark,

src/containers/pageWidget/interface.tsx

@@ -10,6 +10,7 @@ export interface BackgroundProps {
   isSettingLocked: boolean;
   htmlBook: HtmlBookModel;
   isShowBookmark: boolean;
+  backgroundColor: string;
   handleCurrentChapter: (currentChapter: string) => void;
   handleCurrentChapterIndex: (currentChapterIndex: number) => void;
 }

src/containers/panels/navigationPanel/component.tsx

@@ -72,7 +72,7 @@ class NavigationPanel extends React.Component<
       "isNavLocked",
       !this.props.isNavLocked ? "yes" : "no"
     );
-    BookUtil.reloadBooks();
+    this.props.renderBookFunc();
   };
   renderSearchList = () => {
     if (!this.state.searchList[0]) {
@@ -197,7 +197,7 @@ class NavigationPanel extends React.Component<
         className="navigation-panel"
         style={{
           backgroundColor: this.props.isNavLocked
-            ? ConfigService.getReaderConfig("backgroundColor")
+            ? this.props.backgroundColor
             : "",
           color: this.props.isNavLocked
             ? ConfigService.getReaderConfig("textColor")

src/containers/panels/navigationPanel/index.tsx

@@ -13,7 +13,9 @@ const mapStateToProps = (state: stateType) => {
     currentBook: state.book.currentBook,
     bookmarks: state.reader.bookmarks,
     htmlBook: state.reader.htmlBook,
+    backgroundColor: state.reader.backgroundColor,
     isNavLocked: state.reader.isNavLocked,
+    renderBookFunc: state.book.renderBookFunc,
   };
 };
 const actionCreator = { handleFetchBookmarks, handleSearch, handleNavLock };

src/containers/panels/navigationPanel/interface.tsx

@@ -7,11 +7,13 @@ export interface NavigationPanelProps {
   htmlBook: HtmlBookModel;
   bookmarks: BookmarkModel[];
   totalDuration: number;
+  backgroundColor: string;
   isNavLocked: boolean;
   handleFetchBookmarks: () => void;
   handleSearch: (isSearch: boolean) => void;
   handleNavLock: (isNavLocked: boolean) => void;
   t: (title: string) => string;
+  renderBookFunc: () => void;
 }
 
 export interface NavigationPanelState {

src/containers/panels/settingPanel/component.tsx

@@ -31,7 +31,7 @@ class SettingPanel extends React.Component<
       "isSettingLocked",
       !this.props.isSettingLocked ? "yes" : "no"
     );
-    BookUtil.reloadBooks();
+    this.props.renderBookFunc();
   };
 
   render() {
@@ -40,7 +40,7 @@ class SettingPanel extends React.Component<
         className="setting-panel-parent"
         style={{
           backgroundColor: this.props.isSettingLocked
-            ? ConfigService.getReaderConfig("backgroundColor")
+            ? this.props.backgroundColor
             : "",
           color: this.props.isSettingLocked
             ? ConfigService.getReaderConfig("textColor")

src/containers/panels/settingPanel/index.tsx

@@ -9,7 +9,9 @@ const mapStateToProps = (state: stateType) => {
     locations: state.progressPanel.locations,
     isReading: state.book.isReading,
     readerMode: state.reader.readerMode,
+    backgroundColor: state.reader.backgroundColor,
     isSettingLocked: state.reader.isSettingLocked,
+    renderBookFunc: state.book.renderBookFunc,
   };
 };
 const actionCreator = { handleSettingLock };

src/containers/panels/settingPanel/interface.tsx

@@ -3,9 +3,11 @@ export interface SettingPanelProps {
   currentBook: BookModel;
   locations: any;
   isReading: boolean;
+  backgroundColor: string;
   isSettingLocked: boolean;
   readerMode: string;
   t: (title: string) => string;
   handleSettingLock: (isSettingLocked: boolean) => void;
+  renderBookFunc: () => void;
 }
 export interface SettingPanelState {}

src/containers/viewer/component.tsx

@@ -40,7 +40,6 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
       rect: null,
       key: "",
       isFirst: true,
-      scale: ConfigService.getReaderConfig("scale") || "1",
       chapterTitle:
         ConfigService.getObjectConfig(
           this.props.currentBook.key,
@@ -49,7 +48,6 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
         ).chapterTitle || "",
       isDisablePopup: ConfigService.getReaderConfig("isDisablePopup") === "yes",
       isTouch: ConfigService.getReaderConfig("isTouch") === "yes",
-      margin: parseInt(ConfigService.getReaderConfig("margin")) || 0,
       chapterDocIndex: parseInt(
         ConfigService.getObjectConfig(
           this.props.currentBook.key,
@@ -77,8 +75,8 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
     this.setState(
       getPageWidth(
         this.props.readerMode,
-        this.state.scale,
-        this.state.margin,
+        this.props.scale,
+        parseInt(this.props.margin),
         this.props.isNavLocked,
         this.props.isSettingLocked
       )
@@ -89,7 +87,25 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
       BookUtil.reloadBooks();
     });
   }
-
+  async UNSAFE_componentWillReceiveProps(nextProps: ViewerProps) {
+    if (
+      nextProps.margin !== this.props.margin ||
+      nextProps.scale !== this.props.scale ||
+      nextProps.readerMode !== this.props.readerMode ||
+      nextProps.isNavLocked !== this.props.isNavLocked ||
+      nextProps.isSettingLocked !== this.props.isSettingLocked
+    ) {
+      this.setState(
+        getPageWidth(
+          nextProps.readerMode,
+          nextProps.scale,
+          parseInt(nextProps.margin),
+          nextProps.isNavLocked,
+          nextProps.isSettingLocked
+        )
+      );
+    }
+  }
   handleHighlight = async (rendition: any) => {
     let highlighters: any = this.props.notes;
     if (!highlighters) return;
@@ -234,7 +250,7 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
           isIndent: ConfigService.getReaderConfig("isIndent"),
           isStartFromEven: ConfigService.getReaderConfig("isStartFromEven"),
           password: getPdfPassword(this.props.currentBook),
-          scale: parseFloat(this.state.scale),
+          scale: parseFloat(this.props.scale),
           isConvertPDF: ConfigService.getReaderConfig("isConvertPDF"),
           ocrLang: ConfigService.getReaderConfig("ocrLang")
             ? ConfigService.getReaderConfig("ocrLang")

src/containers/viewer/index.tsx

@@ -38,6 +38,8 @@ const mapStateToProps = (state: stateType) => {
     readerMode: state.reader.readerMode,
     defaultSyncOption: state.backupPage.defaultSyncOption,
     menuMode: state.viewArea.menuMode,
+    scale: state.reader.scale,
+    margin: state.reader.margin,
   };
 };
 const actionCreator = {

src/containers/viewer/interface.tsx

@@ -17,6 +17,8 @@ export interface ViewerProps {
   isNavLocked: boolean;
   isSettingLocked: boolean;
   defaultSyncOption: string;
+  scale: string;
+  margin: string;
   handleRenderBookFunc: (renderBookFunc: () => void) => void;
   renderNoteFunc: () => void;
   handleFetchAuthed: () => void;
@@ -41,12 +43,10 @@ export interface ViewerProps {
 }
 export interface ViewerState {
   key: string;
-  scale: string;
   isFirst: boolean;
   isTouch: boolean;
   chapterTitle: string;
   isDisablePopup: boolean;
-  margin: number;
   chapter: string;
   pageOffset: string;
   pageWidth: string;

src/pages/reader/index.tsx

@@ -26,6 +26,7 @@ const mapStateToProps = (state: stateType) => {
     isSettingLocked: state.reader.isSettingLocked,
     isAuthed: state.manager.isAuthed,
     isSearch: state.manager.isSearch,
+    scale: state.reader.scale,
   };
 };
 const actionCreator = {

src/pages/reader/interface.tsx

@@ -11,6 +11,7 @@ export interface ReaderProps {
   isSearch: boolean;
   isAuthed: boolean;
   readerMode: string;
+  scale: string;
   handleFetchNotes: () => void;
   handleReaderMode: (readerMode: string) => void;
   handleConvertDialog: (isConvertOpen: boolean) => void;

src/store/actions/reader.tsx

@@ -37,6 +37,15 @@ export function handleNoteKey(key: string) {
 export function handleReaderMode(readerMode: string) {
   return { type: "HANDLE_READER_MODE", payload: readerMode };
 }
+export function handleScale(scale: string) {
+  return { type: "HANDLE_SCALE", payload: scale };
+}
+export function handleMargin(margin: string) {
+  return { type: "HANDLE_MARGIN", payload: margin };
+}
+export function handleBackgroundColor(backgroundColor: string) {
+  return { type: "HANDLE_BACKGROUND_COLOR", payload: backgroundColor };
+}
 export function handleNavLock(isNavLocked: boolean) {
   return { type: "HANDLE_NAV_LOCK", payload: isNavLocked };
 }

src/store/index.tsx

@@ -92,6 +92,10 @@ export type stateType = {
     color: number;
     chapters: any[];
     readerMode: string;
+    scale: string;
+    margin: string;
+    backgroundColor: string;
+    section: any;
     isNavLocked: boolean;
     isSettingLocked: boolean;
     isConvertOpen: boolean;

src/store/reducers/reader.tsx

@@ -12,9 +12,22 @@ const initState = {
         ConfigService.getReaderConfig("isOSNight") === "yes")
     ? 3
     : 0,
+  backgroundColor:
+    ConfigService.getReaderConfig("isMergeWord") === "yes"
+      ? "rgba(0,0,0,0)"
+      : ConfigService.getReaderConfig("backgroundColor")
+      ? ConfigService.getReaderConfig("backgroundColor")
+      : ConfigService.getReaderConfig("appSkin") === "night" ||
+        (ConfigService.getReaderConfig("appSkin") === "system" &&
+          ConfigService.getReaderConfig("isOSNight") === "yes")
+      ? "rgba(44,47,49,1)"
+      : "rgba(255,255,255,1)",
   noteKey: "",
   originalText: "",
   htmlBook: null,
+  scale: ConfigService.getReaderConfig("scale") || "1",
+  margin: ConfigService.getReaderConfig("margin") || "0",
+  section: null,
   readerMode: "double",
   isConvertOpen: false,
   isNavLocked: ConfigService.getReaderConfig("isNavLocked") === "yes",
@@ -76,7 +89,11 @@ export function reader(
         ...state,
         color: action.payload,
       };
-
+    case "HANDLE_BACKGROUND_COLOR":
+      return {
+        ...state,
+        backgroundColor: action.payload,
+      };
     case "HANDLE_NOTE_KEY":
       return {
         ...state,
@@ -97,6 +114,16 @@ export function reader(
         ...state,
         readerMode: action.payload,
       };
+    case "HANDLE_SCALE":
+      return {
+        ...state,
+        scale: action.payload,
+      };
+    case "HANDLE_MARGIN":
+      return {
+        ...state,
+        margin: action.payload,
+      };
     default:
       return state;
   }