tmp - Reader settings

Suwayomi · Oct 24, 2024 · 6d8bcc6 · 6d8bcc6
1 parent 71f5f2f
commit 6d8bcc6
Show file tree

Hide file tree

Showing 30 changed files with 989 additions and 101 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -384,22 +384,30 @@
     "label": {
       "advanced": "Advanced",
       "are_you_sure": "Are you sure?",
+      "auto": "Auto",
+      "both": "Both",
+      "bottom": "Bottom",
       "browse": "Browse",
       "client": "Client",
       "close": "Close",
       "copied_clipboard": "Copied to clipboard",
       "default": "Default",
+      "desktop": "Desktop",
       "disabled": "Disabled",
       "discord": "Discord",
       "display": "Display",
       "filter": "Filter",
       "general": "General",
       "github": "GitHub",
+      "hidden": "Hidden",
+      "horizontal": "Horizontal",
+      "left": "Left",
       "links": "Links",
       "load_in_progress": "Still loading required data…",
       "loading": "Loading…",
       "logged_in": "Logged in",
       "menu": "Menu",
+      "mobile": "Mobile",
       "never": "Never",
       "next": "Next",
       "none": "None",
@@ -408,12 +416,15 @@
       "password": "Password",
       "placeholder": "Placeholder",
       "previous": "Previous",
+      "right": "Right",
       "share": "Share",
       "sort": "Sort",
+      "standard": "Standard",
       "started": "Started",
       "type": "Type",
       "unknown": "Unknown",
-      "username": "Username"
+      "username": "Username",
+      "vertical": "Vertical"
     },
     "language": {
       "label": {
@@ -782,24 +793,34 @@
       },
       "label": {
         "fit_page_to_window": "Fit page to window",
+        "limit_reader_width": "Limit reader width",
         "load_next_chapter": "Load next chapter at ending",
         "offset_double_spread": "Offset double spreads",
         "reader_type": "Reader type",
-        "reader_width": "Reader width",
+        "reader_width": "Reader width: {{value}}%",
         "reading_direction": "Reading direction",
         "reading_mode": "Reading mode",
         "scale_page": "Scale small pages",
         "show_page_number": "Show page number",
         "skip_dup_chapters": "Skip duplicate chapters",
         "static_navigation": "Static navigation"
       },
+      "overlay_mode": {
+        "title": "Overlay mode"
+      },
       "page_scale": {
         "height": "Fit height",
         "original": "Original size",
         "screen": "Fit screen",
         "stretch": "Stretch small pages",
+        "title": "Scale types",
         "width": "Fit width"
       },
+      "progress_bar": {
+        "position": "Progress bar position",
+        "size": "Progress bar size: {{value}} pixel",
+        "style": "Progress bar style"
+      },
       "reader_type": {
         "label": {
           "continuous_horizontal": "Continues horizontal",
@@ -813,6 +834,14 @@
         "ltr": "Left to right",
         "rtl": "Right to left"
       },
+      "tap_zones": {
+        "edge": "Edge",
+        "invert": "Invert tap zones",
+        "kindle": "Kindle",
+        "l_shape": "L-Shape",
+        "right_left": "Right and left",
+        "title": "Tap zones"
+      },
       "title": {
         "default_reader_settings": "Default Reader Settings",
         "reader_settings": "Reader Settings"

diff --git a/src/assets/icons/svg/HiddenProgressBarIcon.tsx b/src/assets/icons/svg/HiddenProgressBarIcon.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import SvgIcon from '@mui/material/SvgIcon';
+
+export const HiddenProgressBarIcon = () => (
+    <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 15h16"
+            />
+        </svg>
+    </SvgIcon>
+);
diff --git a/src/assets/icons/svg/StandardProgressBarIcon.tsx b/src/assets/icons/svg/StandardProgressBarIcon.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import SvgIcon from '@mui/material/SvgIcon';
+
+export const StandardProgressBarIcon = () => (
+    <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 15h16M7 15v-5m10 5v-5M4 9h16"
+            />
+        </svg>
+    </SvgIcon>
+);
diff --git a/src/modules/metadata/Metadata.constants.ts b/src/modules/metadata/Metadata.constants.ts
@@ -150,6 +150,18 @@ export const METADATA_MIGRATIONS: IMetadataMigration[] = [
                 oldKey: 'scalePage',
                 newKey: 'shouldScalePage',
             },
+            {
+                oldKey: 'skipDupChapters',
+                newKey: 'shouldSkipDupChapters',
+            },
+            {
+                oldKey: 'showPageNumber',
+                newKey: 'shouldShowPageNumber',
+            },
+            {
+                oldKey: 'staticNav',
+                newKey: 'isStaticNav',
+            },
         ],
         values: [
             // START: readerType

diff --git a/src/modules/reader-deprecated/Reader.constants.ts b/src/modules/reader-deprecated/Reader.constants.ts
@@ -10,6 +10,7 @@ import {
     IReaderSettings,
     ProgressBarPosition,
     ProgressBarType,
+    ReaderOverlayMode,
     ReaderPageScaleMode,
     ReadingDirection,
     ReadingMode,
@@ -26,6 +27,8 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
     readerType: 'ContinuesVertical',
     offsetFirstPage: false,
     readerWidth: 50,
+    shouldLimitReaderWidth: false,
+    overlayMode: ReaderOverlayMode.AUTO,
     tapZoneLayout: TapZoneLayouts.RIGHT_LEFT,
     tapZoneInvertMode: { vertical: false, horizontal: false },
     progressBarType: ProgressBarType.STANDARD,
@@ -34,6 +37,9 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
     pageScaleMode: ReaderPageScaleMode.ORIGINAL,
     shouldScalePage: false,
     shouldOffsetDoubleSpreads: false,
+    shouldSkipDupChapters: true,
+    shouldShowPageNumber: true,
+    isStaticNav: false,
     readingDirection: ReadingDirection.LTR,
     readingMode: ReadingMode.SINGLE_PAGE,
 };
diff --git a/src/modules/reader-deprecated/Reader.types.ts b/src/modules/reader-deprecated/Reader.types.ts
@@ -51,6 +51,12 @@ export enum ReaderPageScaleMode {
     ORIGINAL,
 }
 
+export enum ReaderOverlayMode {
+    AUTO,
+    DESKTOP,
+    MOBILE,
+}
+
 export interface IReaderSettings {
     staticNav: boolean;
     showPageNumber: boolean;
@@ -61,6 +67,8 @@ export interface IReaderSettings {
     readerType: ReaderType;
     offsetFirstPage: boolean;
     readerWidth: number;
+    shouldLimitReaderWidth: boolean;
+    overlayMode: ReaderOverlayMode;
     tapZoneLayout: TapZoneLayouts;
     tapZoneInvertMode: TapZoneInvertMode;
     progressBarType: ProgressBarType;
@@ -69,6 +77,9 @@ export interface IReaderSettings {
     pageScaleMode: ReaderPageScaleMode;
     shouldScalePage: boolean;
     shouldOffsetDoubleSpreads: boolean;
+    shouldSkipDupChapters: boolean;
+    shouldShowPageNumber: boolean;
+    isStaticNav: boolean;
     readingDirection: ReadingDirection;
     readingMode: ReadingMode;
 }

diff --git a/src/modules/reader-deprecated/services/ReaderSettingsMetadata.ts b/src/modules/reader-deprecated/services/ReaderSettingsMetadata.ts
@@ -121,6 +121,8 @@ export const checkAndHandleMissingStoredReaderSettings = async (
             readerType: undefined,
             offsetFirstPage: undefined,
             readerWidth: undefined,
+            shouldLimitReaderWidth: undefined,
+            overlayMode: undefined,
             tapZoneLayout: undefined,
             tapZoneInvertMode: undefined,
             progressBarType: undefined,
@@ -129,6 +131,9 @@ export const checkAndHandleMissingStoredReaderSettings = async (
             pageScaleMode: undefined,
             shouldScalePage: undefined,
             shouldOffsetDoubleSpreads: undefined,
+            shouldSkipDupChapters: undefined,
+            shouldShowPageNumber: undefined,
+            isStaticNav: undefined,
             readingDirection: undefined,
             readingMode: undefined,
         },

diff --git a/src/modules/reader/components/ReaderPageNumber.tsx b/src/modules/reader/components/ReaderPageNumber.tsx
@@ -23,11 +23,11 @@ export const ReaderPageNumber = () => {
     const { readerNavBarWidth } = useNavBarContext();
     const { isMaximized } = useReaderProgressBarContext();
     const { currentPageIndex, pages, totalPages } = userReaderStatePagesContext();
-    const { progressBarType, showPageNumber } = ReaderService.useSettings();
+    const { progressBarType, shouldShowPageNumber } = ReaderService.useSettings();
 
     const pageName = useMemo(() => getPage(currentPageIndex, pages)[1], [currentPageIndex, pages]);
 
-    if (!showPageNumber) {
+    if (!shouldShowPageNumber) {
         return null;
     }
 

diff --git a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
@@ -28,30 +28,30 @@ import { ReaderNavBarDesktopActions } from '@/modules/reader/components/overlay/
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
-import { createUpdateReaderSettings } from '@/modules/reader-deprecated/services/ReaderSettingsMetadata.ts';
-import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
 
-const useGetPreviousNavBarStaticValue = (isVisible: boolean, staticNav: boolean) => {
-    const wasNavBarStaticRef = useRef(staticNav);
-    const wasNavBarStaticPreviousRef = useRef(staticNav);
+const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
+    const wasNavBarStaticRef = useRef(isStaticNav);
+    const wasNavBarStaticPreviousRef = useRef(isStaticNav);
 
     const resetWasNavBarStaticValue = wasNavBarStaticPreviousRef.current !== wasNavBarStaticRef.current && !isVisible;
     if (resetWasNavBarStaticValue) {
         wasNavBarStaticRef.current = false;
     }
 
-    const didNavBarStaticValueChange = wasNavBarStaticPreviousRef.current !== staticNav;
+    const didNavBarStaticValueChange = wasNavBarStaticPreviousRef.current !== isStaticNav;
     if (didNavBarStaticValueChange) {
         wasNavBarStaticRef.current = wasNavBarStaticPreviousRef.current;
-        wasNavBarStaticPreviousRef.current = staticNav;
+        wasNavBarStaticPreviousRef.current = isStaticNav;
     }
 
     return wasNavBarStaticRef.current;
 };
 
+const DEFAULT_MANGA: MangaIdInfo = { id: -1 };
 export const ReaderNavBarDesktop = ({ isVisible, setIsVisible, openSettings }: ReaderNavBarDesktopProps) => {
     const { t } = useTranslation();
     const { setReaderNavBarWidth } = useNavBarContext();
@@ -62,26 +62,24 @@ export const ReaderNavBarDesktop = ({ isVisible, setIsVisible, openSettings }: R
     const handleBack = useBackButton();
     const getOptionForDirection = useGetOptionForDirection();
 
-    const updateReaderSettings = createUpdateReaderSettings(manga ?? { id: -1 }, () =>
-        makeToast(t('reader.settings.error.label.failed_to_save_settings')),
-    );
+    const updateReaderSettings = ReaderService.useCreateUpdateSetting(manga ?? DEFAULT_MANGA);
 
     const settings = ReaderService.useSettings();
 
     const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
     useResizeObserver(
         navBarElement,
         useCallback(() => {
-            if (!settings?.staticNav) {
+            if (!settings?.isStaticNav) {
                 return;
             }
 
             setReaderNavBarWidth(navBarElement!.offsetWidth);
-        }, [navBarElement, settings?.staticNav]),
+        }, [navBarElement, settings?.isStaticNav]),
     );
     useLayoutEffect(() => () => setReaderNavBarWidth(0), []);
 
-    const wasNavBarStatic = useGetPreviousNavBarStaticValue(isVisible, settings.staticNav);
+    const wasNavBarStatic = useGetPreviousNavBarStaticValue(isVisible, settings.isStaticNav);
     const changedNavBarStaticValue = wasNavBarStatic && isVisible;
     const drawerTransitionDuration = changedNavBarStaticValue ? 0 : undefined;
 
@@ -91,8 +89,8 @@ export const ReaderNavBarDesktop = ({ isVisible, setIsVisible, openSettings }: R
 
     return (
         <Drawer
-            variant={settings.staticNav ? 'permanent' : 'temporary'}
-            open={isVisible || settings.staticNav}
+            variant={settings.isStaticNav ? 'permanent' : 'temporary'}
+            open={isVisible || settings.isStaticNav}
             onClose={() => {
                 setIsVisible(false);
                 setReaderNavBarWidth(0);
@@ -114,9 +112,9 @@ export const ReaderNavBarDesktop = ({ isVisible, setIsVisible, openSettings }: R
                             <IconButton
                                 onClick={() => {
                                     setReaderNavBarWidth(0);
-                                    updateReaderSettings('staticNav', !settings.staticNav);
+                                    updateReaderSettings('isStaticNav', !settings.isStaticNav);
                                 }}
-                                color={settings.staticNav ? 'primary' : 'inherit'}
+                                color={settings.isStaticNav ? 'primary' : 'inherit'}
                             >
                                 <PushPinIcon />
                             </IconButton>