added auto focus chapter in list in manga reader

mienaiyami · Nov 17, 2023 · a8de941 · a8de941
1 parent 6641a3c
commit a8de941
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 23 deletions.
diff --git a/src/renderer/Components/ReaderSideListItem.tsx b/src/renderer/Components/ReaderSideListItem.tsx
@@ -1,5 +1,6 @@
 import { useContext, memo, useEffect, useState } from "react";
 import { AppContext } from "../App";
+import { useAppSelector } from "../store/hooks";
 // import { setContextMenu } from "../store/contextMenu";
 // import { useAppDispatch } from "../store/hooks";
 
@@ -23,6 +24,8 @@ const ReaderSideListItem = memo(
         current: boolean;
         focused: boolean;
     }) => {
+        const appSettings = useAppSelector((state) => state.appSettings);
+
         const { openInReader, setContextMenuData, contextMenuData } = useContext(AppContext);
         const [contextMenuFocused, setContextMenuFocused] = useState(false);
         useEffect(() => {
@@ -40,16 +43,19 @@ const ReaderSideListItem = memo(
                 }`}
                 data-focused={focused}
                 ref={(node) => {
-                    // todo, not working
                     if (node && focused) node.scrollIntoView({ block: "nearest" });
                 }}
             >
                 <a
                     onClick={() => openInReader(link)}
                     title={name}
-                    ref={(node) => {
-                        if (current && node !== null) node.scrollIntoView({ block: "nearest" });
-                    }}
+                    ref={
+                        appSettings.readerSettings.focusChapterInList
+                            ? (node) => {
+                                  if (current && node !== null) node.scrollIntoView({ block: "nearest" });
+                              }
+                            : undefined
+                    }
                     data-url={link}
                     onContextMenu={(e) => {
                         const items = [

diff --git a/src/renderer/Components/Settings.tsx b/src/renderer/Components/Settings.tsx
@@ -1271,6 +1271,40 @@ const Settings = (): ReactElement => {
                                             stuttering while scrolling.
                                         </div>
                                     </div>
+                                    <div className="toggleItem">
+                                        <InputCheckbox
+                                            // todo impl
+                                            checked={appSettings.readerSettings.focusChapterInList}
+                                            className="noBG"
+                                            onChange={(e) => {
+                                                dispatch(
+                                                    setReaderSettings({
+                                                        focusChapterInList: e.currentTarget.checked,
+                                                    })
+                                                );
+                                            }}
+                                            labelAfter="Focus current chapter in side-list "
+                                        />
+                                        <div className="desc">
+                                            Automatically focus/scroll to current chapter entry in side-list when
+                                            changing chapter. Can cause huge performance loss in case of epub with
+                                            large number (&gt; 500) of chapters.
+                                        </div>
+                                    </div>
+                                    <div className="toggleItem">
+                                        <InputCheckbox
+                                            checked={appSettings.epubReaderSettings.focusChapterInList}
+                                            className="noBG"
+                                            onChange={(e) => {
+                                                dispatch(
+                                                    setEpubReaderSettings({
+                                                        focusChapterInList: e.currentTarget.checked,
+                                                    })
+                                                );
+                                            }}
+                                            labelAfter="EPUB: Focus current chapter in side-list "
+                                        />
+                                    </div>
                                     <div className="toggleItem">
                                         <InputCheckbox
                                             checked={appSettings.epubReaderSettings.loadOneChapter}
@@ -1307,25 +1341,6 @@ const Settings = (): ReactElement => {
                                             zen mode.
                                         </div>
                                     </div>
-                                    <div className="toggleItem">
-                                        <InputCheckbox
-                                            checked={!appSettings.epubReaderSettings.focusChapterInList}
-                                            className="noBG"
-                                            onChange={(e) => {
-                                                dispatch(
-                                                    setEpubReaderSettings({
-                                                        focusChapterInList: !e.currentTarget.checked,
-                                                    })
-                                                );
-                                            }}
-                                            labelAfter="EPUB: Focus current chapter in side-list "
-                                        />
-                                        <div className="desc">
-                                            Automatically focus/scroll to current chapter entry in side-list when
-                                            changing chapter. Can cause huge performance loss in case of epub with
-                                            large number (&gt; 500) of chapters
-                                        </div>
-                                    </div>
                                     <div className="toggleItem">
                                         <InputCheckbox
                                             checked={!HAValue}

diff --git a/src/renderer/MainImports.ts b/src/renderer/MainImports.ts
@@ -205,6 +205,7 @@ const settingSchema = z
                 customColorFilter: z.boolean(),
                 others: z.boolean(),
             }),
+            focusChapterInList: z.boolean(),
             hideSideList: z.boolean(),
         }),
         epubReaderSettings: z.object({
@@ -362,6 +363,7 @@ const settingSchema = z
                 customColorFilter: true,
                 others: false,
             },
+            focusChapterInList: true,
             hideSideList: false,
         },
         epubReaderSettings: {