Feature/refactor reader

public/locales/en.json

@@ -384,32 +384,47 @@
     "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",
       "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",
+      "right": "Right",
+      "share": "Share",
       "sort": "Sort",
+      "standard": "Standard",
       "started": "Started",
       "type": "Type",
       "unknown": "Unknown",
-      "username": "Username"
+      "username": "Username",
+      "vertical": "Vertical"
     },
     "language": {
       "label": {
@@ -745,11 +760,15 @@
   },
   "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": {
@@ -761,7 +780,8 @@
     "page_info": {
       "label": {
         "currently_on_page": "Currently on page",
-        "of_max_pages": "of {{maxPages}}"
+        "of_max_pages": "of {{maxPages}}",
+        "page": "Page"
       }
     },
     "settings": {
@@ -772,28 +792,58 @@
         }
       },
       "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",
         "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_ltr": "Horizontal (LTR) ➡️",
-          "continuous_horizontal_rtl": "Horizontal (RTL) ⬅️",
+          "continuous_horizontal": "Continues horizontal",
           "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) ⬅️",
+          "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"

src/App.tsx

@@ -21,12 +21,13 @@ 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 { ReaderNew } from '@/modules/reader/screens/ReaderNew.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 { Reader } = loadable(() => import('@/modules/reader-deprecated/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);
@@ -36,7 +37,7 @@ const { CategorySettings } = loadable(
     lazyLoadFallback,
 );
 const { DefaultReaderSettings } = loadable(
-    () => import('@/modules/reader/screens/DefaultReaderSettings.tsx'),
+    () => import('@/modules/reader-deprecated/screens/DefaultReaderSettings.tsx'),
     lazyLoadFallback,
 );
 const { SourceConfigure } = loadable(() => import('@/modules/source/screens/SourceConfigure.tsx'), lazyLoadFallback);
@@ -164,8 +165,8 @@ const MainApp = () => {
 const ReaderApp = () => (
     <ErrorBoundary>
         <Routes>
-            <Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
-            <Route path="*" element={null} />
+            <Route path="/old" element={<Reader />} />
+            <Route path="*" element={<ReaderNew />} />
         </Routes>
     </ErrorBoundary>
 );
@@ -181,8 +182,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/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>
+);

src/assets/icons/svg/ContinuousVerticalPageIcon.tsx

@@ -0,0 +1,16 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+export const ContinuousVerticalPageIcon = () => (
+    <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="M20 2v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2m0 20v-6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6"
+            />
+        </svg>
+    </SvgIcon>
+);

src/assets/icons/svg/DoublePageIcon.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 DoublePageIcon = () => (
+    <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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zm20 0h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
+            />
+        </svg>
+    </SvgIcon>
+);

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>
+);

src/assets/icons/svg/OffsetDoubleSpreadIcon.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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 OffsetDoubleSpreadIcon = () => (
+    <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+            <path d="M2 4h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2m20 0h-6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6M2 12h20m-3-3 3 3-3 3M5 9l-3 3 3 3" />
+        </svg>
+    </SvgIcon>
+);

src/assets/icons/svg/SinglePageIcon.tsx

@@ -0,0 +1,24 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+export const SinglePageIcon = () => (
+    <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="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"
+            />
+            <path
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M13 2v7h7"
+            />
+        </svg>
+    </SvgIcon>
+);

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>
+);

src/lib/graphql/fragments/ChapterFragments.ts

@@ -48,6 +48,7 @@ export const CHAPTER_READER_FIELDS = gql`
         ...CHAPTER_BASE_FIELDS
         ...CHAPTER_STATE_FIELDS
 
+        uploadDate
         lastPageRead
         pageCount
     }

src/lib/graphql/generated/graphql.ts

@@ -2725,7 +2725,7 @@ export type ChapterBaseFieldsFragment = { __typename?: 'ChapterType', id: number
 
 export type ChapterStateFieldsFragment = { __typename?: 'ChapterType', id: number, isRead: boolean, isDownloaded: boolean, isBookmarked: boolean };
 
-export type ChapterReaderFieldsFragment = { __typename?: 'ChapterType', lastPageRead: number, pageCount: number, id: number, name: string, mangaId: number, scanlator?: string | null, realUrl?: string | null, sourceOrder: number, chapterNumber: number, isRead: boolean, isDownloaded: boolean, isBookmarked: boolean };
+export type ChapterReaderFieldsFragment = { __typename?: 'ChapterType', uploadDate: string, lastPageRead: number, pageCount: number, id: number, name: string, mangaId: number, scanlator?: string | null, realUrl?: string | null, sourceOrder: number, chapterNumber: number, isRead: boolean, isDownloaded: boolean, isBookmarked: boolean };
 
 export type ChapterListFieldsFragment = { __typename?: 'ChapterType', fetchedAt: string, uploadDate: string, id: number, name: string, mangaId: number, scanlator?: string | null, realUrl?: string | null, sourceOrder: number, chapterNumber: number, isRead: boolean, isDownloaded: boolean, isBookmarked: boolean };
 
@@ -3296,7 +3296,7 @@ export type GetChaptersReaderQueryVariables = Exact<{
 }>;
 
 
-export type GetChaptersReaderQuery = { __typename?: 'Query', chapters: { __typename?: 'ChapterNodeList', totalCount: number, nodes: Array<{ __typename?: 'ChapterType', lastPageRead: number, pageCount: number, id: number, name: string, mangaId: number, scanlator?: string | null, realUrl?: string | null, sourceOrder: number, chapterNumber: number, isRead: boolean, isDownloaded: boolean, isBookmarked: boolean }>, pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor?: string | null } } };
+export type GetChaptersReaderQuery = { __typename?: 'Query', chapters: { __typename?: 'ChapterNodeList', totalCount: number, nodes: Array<{ __typename?: 'ChapterType', uploadDate: string, lastPageRead: number, pageCount: number, id: number, name: string, mangaId: number, scanlator?: string | null, realUrl?: string | null, sourceOrder: number, chapterNumber: number, isRead: boolean, isDownloaded: boolean, isBookmarked: boolean }>, pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor?: string | null } } };
 
 export type GetChaptersMangaQueryVariables = Exact<{
   after?: InputMaybe<Scalars['Cursor']['input']>;

src/lib/requests/RequestManager.ts

@@ -1958,7 +1958,7 @@ export class RequestManager {
         return this.doRequest(GQLMethod.QUERY, document, variables, options);
     }
 
-    public useGetMangaChapters<Data, Variables extends OperationVariables>(
+    public useGetMangaChapters<Data, Variables extends OperationVariables = OperationVariables>(
         document: DocumentNode | TypedDocumentNode<Data, Variables>,
         mangaId: number | string,
         options?: QueryHookOptions<Data, Variables>,