Feature/refactor reader

package.json

@@ -58,6 +58,7 @@
     "react": "18.3.1",
     "react-beautiful-dnd": "13.1.1",
     "react-dom": "18.3.1",
+    "react-hotkeys-hook": "^4.6.1",
     "react-i18next": "15.0.1",
     "react-lazily": "0.9.2",
     "react-router-dom": "6.26.1",

public/locales/en.json

@@ -235,7 +235,7 @@
       "label": {
         "downloading": "Downloading",
         "error": "Error",
-        "finished": "Finished",
+        "finished": "$t(global.label.finished)",
         "queued": "Queued"
       }
     },
@@ -344,6 +344,11 @@
       "stop": "Stop",
       "submit": "Submit"
     },
+    "colors": {
+      "black": "Black",
+      "gray": "Gray",
+      "white": "White"
+    },
     "date": {
       "label": {
         "day_one": "Day",
@@ -389,32 +394,50 @@
     "label": {
       "advanced": "Advanced",
       "are_you_sure": "Are you sure?",
+      "auto": "Auto",
+      "both": "Both",
+      "bottom": "Bottom",
       "browse": "Browse",
       "client": "Client",
       "close": "Close",
-      "copied": "Copied",
+      "copied_clipboard": "Copied to clipboard",
       "default": "Default",
+      "desktop": "Desktop",
       "disabled": "Disabled",
       "discord": "Discord",
       "display": "Display",
       "filter": "Filter",
+      "finished": "Finished",
       "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",
       "open_in_browser": "Open in browser",
       "other": "Other",
       "password": "Password",
       "placeholder": "Placeholder",
+      "previous": "Previous",
+      "profile_one": "Profile",
+      "profile_other": "Profiles",
+      "right": "Right",
+      "share": "Share",
       "sort": "Sort",
+      "standard": "Standard",
       "started": "Started",
       "type": "Type",
       "unknown": "Unknown",
-      "username": "Username"
+      "username": "Username",
+      "vertical": "Vertical"
     },
     "language": {
       "label": {
@@ -449,6 +472,9 @@
         "value": "{{count}} $t(global.time.seconds.second, lowercase)"
       }
     },
+    "unit": {
+      "px": "px"
+    },
     "update": {
       "label": {
         "available": "Update available",
@@ -468,7 +494,25 @@
           }
         }
       }
-    }
+    },
+    "value": "{{value}}{{unit}}"
+  },
+  "hotkeys": {
+    "create": {
+      "dialog": {
+        "label": "Recorded keys: <Keys/>",
+        "placeholder": "Press keys",
+        "title": "Record keybind"
+      },
+      "error": {
+        "exists": "Hotkey already exists"
+      }
+    },
+    "info": {
+      "delete": "Click key to remove binding"
+    },
+    "title_one": "Keybind",
+    "title_other": "Keybinds"
   },
   "library": {
     "action": {
@@ -750,14 +794,19 @@
   },
   "reader": {
     "button": {
+      "chapter_list": "Chapter list",
       "close_menu": "Close menu",
       "exit": "Exit reader",
-      "next_chapter": "Next Chapter",
+      "next_chapter": "Next chapter",
+      "next_page": "Next page",
       "open_menu": "Open menu",
-      "previous_chapter": "Previous Chapter"
+      "previous_chapter": "Previous chapter",
+      "previous_page": "Previous page",
+      "retry_load_pages": "Retry errored pages"
     },
     "error": {
       "label": {
+        "chapter_not_found": "Chapter does not exist",
         "next_chapter_does_not_exist": "There is no next chapter to open",
         "no_pages_found": "No pages found",
         "prev_chapter_does_not_exist": "There is no previous chapter to open"
@@ -766,45 +815,135 @@
     "page_info": {
       "label": {
         "currently_on_page": "Currently on page",
-        "of_max_pages": "of {{maxPages}}"
+        "of_max_pages": "of {{maxPages}}",
+        "page": "Page"
       }
     },
     "settings": {
+      "background_color": "Background color",
+      "custom_filter": {
+        "brightness": {
+          "title": "Custom brightness",
+          "value": "$t(reader.settings.custom_filter.brightness.title)"
+        },
+        "contrast": {
+          "title": "Custom contrast",
+          "value": "$t(reader.settings.custom_filter.contrast.title)"
+        },
+        "grayscale": "Grayscale",
+        "hue": {
+          "title": "Custom hue",
+          "value": "$t(reader.settings.custom_filter.hue.title)"
+        },
+        "invert": "Invert",
+        "rgba": {
+          "alpha": "Alpha",
+          "blue": "Blue",
+          "green": "Green",
+          "red": "Red",
+          "title": "Custom color filters"
+        },
+        "saturate": {
+          "title": "Custom saturate",
+          "value": "$t(reader.settings.custom_filter.saturate.title)"
+        },
+        "sepia": "Sepia",
+        "title": "Custom filter"
+      },
       "error": {
         "label": {
           "failed_to_save_default_settings": "Could not save the default reader settings to the server",
           "failed_to_save_settings": "Could not save the reader settings to the server"
         }
       },
+      "exit_mode": "Open page on exit",
+      "hotkey": {
+        "menu": "Toggle menu",
+        "next_chapter": "Next chapter",
+        "next_page": "Next page",
+        "offset_spread_pages": "Toggle offset spread pages",
+        "previous_chapter": "Previous chapter",
+        "previous_page": "Previous page",
+        "scale_type": "Cycle image scale type",
+        "scroll_backward": "Scroll backward",
+        "scroll_forward": "Scroll forward",
+        "stretch_image": "Toggle stretch image"
+      },
+      "image_preload_amount": "Preload images",
       "label": {
+        "behaviour": "Behaviour",
         "fit_page_to_window": "Fit page to window",
+        "layout": "Layout",
+        "limit_reader_width": "Limit reader width",
         "load_next_chapter": "Load next chapter at ending",
-        "offset_first_page": "Offset first page",
+        "offset_double_spread": "Offset double spreads",
+        "page_gap": "Page gap",
         "reader_type": "Reader type",
         "reader_width": "Reader width",
+        "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": "Overlay mode",
+      "page_scale": {
+        "height": "Fit height",
+        "original": "Original size",
+        "screen": "Fit screen",
+        "stretch": "Stretch small pages",
+        "title": "Scale type",
+        "width": "Fit width"
+      },
+      "profiles": {
+        "description": "Profiles are used to define the default reader settings which then can be used for series and reading modes",
+        "placeholder": "Comics | length: 16, chars: letters, numbers, -, _"
+      },
+      "progress_bar": {
+        "position": "Progress bar position",
+        "size": "Progress bar size",
+        "style": "Progress bar style"
+      },
       "reader_type": {
         "label": {
-          "continuous_horizontal_ltr": "Horizontal (LTR) ➡️",
-          "continuous_horizontal_rtl": "Horizontal (RTL) ⬅️",
-          "continuous_vertical": "Continues vertical",
-          "double_page_ltr": "Double page (LTR) ➡️",
-          "double_page_rtl": "Double page (RTL) ⬅️",
-          "single_page_ltr": "Single page (LTR) ➡️",
-          "single_page_rtl": "Single page (RTL) ⬅️",
+          "continuous_horizontal": "Continuous horizontal",
+          "continuous_vertical": "Continuous vertical",
+          "double_page": "Double page",
+          "single_page": "Single page",
           "webtoon": "Webtoon"
         }
       },
+      "reading_direction": {
+        "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"
       }
     },
-    "title": "Reader — Manga {{mangaId}} Chapter {{chapterIndex}}"
+    "title": "Reader — Manga {{mangaId}} Chapter {{chapterIndex}}",
+    "transition_page": {
+      "current": "Current:",
+      "exit": {
+        "manga_page": "Exit to manga page",
+        "previous_page": "Exit to previous page"
+      },
+      "finished": "$t(global.label.finished):",
+      "first_chapter": "There is no previous chapter",
+      "last_chapter": "There is no next chapter",
+      "next": "$t(global.label.next):",
+      "previous": "$t(global.label.previous):"
+    }
   },
   "search": {
     "error": {

src/App.tsx

@@ -21,12 +21,12 @@ import { ServerUpdateChecker } from '@/modules/app-updates/components/ServerUpda
 import { lazyLoadFallback } from '@/modules/core/utils/LazyLoad.tsx';
 import { ErrorBoundary } from '@/modules/core/components/ErrorBoundary.tsx';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { Reader } from '@/modules/reader/screens/Reader.tsx';
 
 const { Browse } = loadable(() => import('@/modules/browse/screens/Browse.tsx'), lazyLoadFallback);
 const { DownloadQueue } = loadable(() => import('@/modules/downloads/screens/DownloadQueue.tsx'), lazyLoadFallback);
 const { Library } = loadable(() => import('@/modules/library/screens/Library.tsx'), lazyLoadFallback);
 const { Manga } = loadable(() => import('@/modules/manga/screens/Manga.tsx'), lazyLoadFallback);
-const { Reader } = loadable(() => import('@/modules/reader/screens/Reader.tsx'), lazyLoadFallback);
 const { SearchAll } = loadable(() => import('@/modules/global-search/screens/SearchAll.tsx'), lazyLoadFallback);
 const { Settings } = loadable(() => import('@/modules/settings/screens/Settings.tsx'), lazyLoadFallback);
 const { About } = loadable(() => import('@/modules/settings/screens/About.tsx'), lazyLoadFallback);
@@ -35,10 +35,6 @@ const { CategorySettings } = loadable(
     () => import('@/modules/category/screens/CategorySettings.tsx'),
     lazyLoadFallback,
 );
-const { DefaultReaderSettings } = loadable(
-    () => import('@/modules/reader/screens/DefaultReaderSettings.tsx'),
-    lazyLoadFallback,
-);
 const { SourceConfigure } = loadable(() => import('@/modules/source/screens/SourceConfigure.tsx'), lazyLoadFallback);
 const { SourceMangas } = loadable(() => import('@/modules/source/screens/SourceMangas.tsx'), lazyLoadFallback);
 const { Updates } = loadable(() => import('@/modules/updates/screens/Updates.tsx'), lazyLoadFallback);
@@ -62,6 +58,10 @@ const { LibraryDuplicates } = loadable(
     lazyLoadFallback,
 );
 const { Appearance } = loadable(() => import('@/modules/settings/screens/Appearance.tsx'), lazyLoadFallback);
+const { DefaultReaderSettings } = loadable(
+    () => import('@/modules/reader/screens/DefaultReaderSettings.tsx'),
+    lazyLoadFallback,
+);
 
 if (process.env.NODE_ENV !== 'production') {
     // Adds messages only in a dev environment
@@ -164,8 +164,7 @@ const MainApp = () => {
 const ReaderApp = () => (
     <ErrorBoundary>
         <Routes>
-            <Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
-            <Route path="*" element={null} />
+            <Route path="*" element={<Reader />} />
         </Routes>
     </ErrorBoundary>
 );
@@ -181,8 +180,10 @@ export const App: React.FC = () => (
             <Box sx={{ flexShrink: 0 }}>
                 <DefaultNavBar />
             </Box>
-            <MainApp />
-            <ReaderApp />
+            <Routes>
+                <Route path="*" element={<MainApp />} />
+                <Route path="manga/:mangaId/chapter/:chapterIndex/*" element={<ReaderApp />} />
+            </Routes>
         </Box>
     </AppContext>
 );

src/UtilTypes.d.ts

@@ -26,6 +26,10 @@ type PropertiesNever<T> = { [key in keyof T]?: never };
 
 type OmitFirst<T extends any[]> = T extends [any, ...infer R] ? R : never;
 
-type TupleUnion<U extends string, R extends any[] = []> = {
+type TupleUnion<U extends string | number | symbol, R extends any[] = []> = {
     [S in U]: Exclude<U, S> extends never ? [...R, S] : TupleUnion<Exclude<U, S>, [...R, S]>;
 }[U];
+
+type TransformRecordToWithDefaultFlag<T extends Record<string, any>> = {
+    [K in keyof T]: { value: T[K]; isDefault: boolean };
+};

src/assets/icons/svg/ContinuousHorizontalPageIcon.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 ContinuousHorizontalPageIcon = () => (
+    <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="M22 20h-6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6M2 4h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2"
+            />
+        </svg>
+    </SvgIcon>
+);