tmp - reader pages

Suwayomi · Nov 6, 2024 · f3f773d · f3f773d
1 parent 0561e1c
commit f3f773d
Show file tree

Hide file tree

Showing 11 changed files with 606 additions and 41 deletions.
diff --git a/src/modules/core/components/SpinnerImage.tsx b/src/modules/core/components/SpinnerImage.tsx
@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useState, CSSProperties, useEffect, forwardRef, ForwardedRef } from 'react';
+import { useState, useEffect, forwardRef, ForwardedRef } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
@@ -24,7 +24,7 @@ interface IProps {
     alt: string;
 
     spinnerStyle?: SxProps<Theme> & { small?: boolean };
-    imgStyle?: CSSProperties;
+    imgStyle?: SxProps<Theme>;
 
     onImageLoad?: () => void;
 
@@ -145,9 +145,10 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
                     <ImageIcon fontSize="large" />
                 </Stack>
             ) : (
-                <img
+                <Box
+                    component="img"
                     key={`${src}_${imgLoadRetryKey}`}
-                    style={{
+                    sx={{
                         ...imgStyle,
                         display: !imageSourceUrl || isLoading || hasError ? 'none' : imgStyle?.display,
                     }}

diff --git a/src/modules/reader/components/viewer/ReaderPage.tsx b/src/modules/reader/components/viewer/ReaderPage.tsx
@@ -0,0 +1,97 @@
+/*
+ * 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 { ForwardedRef, forwardRef } from 'react';
+import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { ReaderCustomFilter } from '@/modules/reader/types/Reader.types.ts';
+import { getImageWidthStyling } from '@/modules/reader/utils/ReaderPager.utils.ts';
+
+const getCustomFilterString = (customFilter: ReaderCustomFilter): string =>
+    Object.keys(customFilter)
+        .map((key) => {
+            const filter = key as keyof ReaderCustomFilter;
+            const value = customFilter[filter];
+
+            switch (filter) {
+                case 'brightness':
+                case 'contrast':
+                case 'saturate':
+                    return (value as ReaderCustomFilter['brightness' | 'contrast' | 'saturate']).enabled
+                        ? `${filter}(${(value as ReaderCustomFilter['brightness' | 'contrast' | 'saturate']).value / 100})`
+                        : '';
+                case 'hue':
+                    return (value as ReaderCustomFilter['hue']).enabled
+                        ? `hue-rotate(${(value as ReaderCustomFilter['brightness' | 'contrast' | 'saturate']).value}deg)`
+                        : '';
+                case 'rgba':
+                    return '';
+                case 'sepia':
+                case 'grayscale':
+                case 'invert':
+                    return value ? `${filter}(${Number(value)})` : '';
+                default:
+                    throw new Error(`Unexpected "CustomFilter" (${filter})`);
+            }
+        })
+        .join(' ');
+
+export const ReaderPage = forwardRef(
+    (
+        {
+            index,
+            src,
+            name,
+            display,
+            doublePage = false,
+            position,
+            onLoad,
+        }: {
+            index: number;
+            src: string;
+            name: string;
+            display: boolean;
+            doublePage?: boolean;
+            position?: 'left' | 'right';
+            onLoad?: () => void;
+        },
+        ref: ForwardedRef<HTMLImageElement | null>,
+    ) => {
+        const { readingMode, customFilter, pageScaleMode, shouldStretchPage } = ReaderService.useSettings();
+
+        if (!display) {
+            return null;
+        }
+
+        return (
+            <SpinnerImage
+                ref={ref}
+                src={src}
+                alt={name}
+                spinnerStyle={{
+                    width: '50vw',
+                    height: '100vh',
+                    backgroundColor: 'background.paper',
+                }}
+                imgStyle={{
+                    ...getImageWidthStyling(
+                        readingMode.value,
+                        shouldStretchPage.value,
+                        pageScaleMode.value,
+                        doublePage,
+                    ),
+                    display: 'block',
+                    filter: getCustomFilterString(customFilter),
+                    objectFit: 'contain',
+                    objectPosition: position,
+                    flexGrow: 1,
+                }}
+            />
+        );
+    },
+);
diff --git a/src/modules/reader/components/viewer/pager/BasePager.tsx b/src/modules/reader/components/viewer/pager/BasePager.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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 Stack, { StackProps } from '@mui/material/Stack';
+import { ReactNode } from 'react';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { getImageWidthStyling } from '@/modules/reader/utils/ReaderPager.utils.ts';
+
+export const BasePager = ({ children, slots }: { children?: ReactNode; slots?: { stackProps?: StackProps } }) => {
+    const { readingMode, pageScaleMode, shouldStretchPage, readerWidth } = ReaderService.useSettings();
+
+    return (
+        <Stack
+            {...slots?.stackProps}
+            sx={[
+                ...(Array.isArray(slots?.stackProps?.sx) ? (slots?.stackProps?.sx ?? []) : [slots?.stackProps?.sx]),
+                getImageWidthStyling(
+                    readingMode.value,
+                    shouldStretchPage.value,
+                    pageScaleMode.value,
+                    false,
+                    readerWidth,
+                ),
+            ]}
+        >
+            {children}
+        </Stack>
+    );
+};
diff --git a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx b/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { ReaderPage } from '@/modules/reader/components/viewer/ReaderPage.tsx';
+import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
+import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
+import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
+
+export const ReaderDoublePagedPager = () => {
+    const { manga } = useReaderStateMangaContext();
+    const { currentChapter } = useReaderStateChaptersContext();
+
+    return (
+        <BasePager
+            slots={{
+                stackProps: {
+                    sx: {
+                        margin: 'auto',
+                        flexDirection: 'row',
+                        flexWrap: 'nowrap',
+                    },
+                },
+            }}
+        >
+            <ReaderPage
+                index={0}
+                src="http://localhost:4567/api/v1/manga/30622/chapter/1131/page/3"
+                // src="http://localhost:45672/api/v1/manga/38/chapter/1/page/0"
+                name={`${manga?.title}: ${currentChapter?.name} #0}`}
+                doublePage
+                display
+                position="right"
+            />
+            <ReaderPage
+                index={0}
+                src="http://localhost:4567/api/v1/manga/30622/chapter/1131/page/2"
+                // src="http://localhost:45672/api/v1/manga/38/chapter/1/page/0"
+                name={`${manga?.title}: ${currentChapter?.name} #0}`}
+                doublePage
+                display
+                position="left"
+            />
+        </BasePager>
+    );
+};
diff --git a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx b/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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 { ReaderPage } from '@/modules/reader/components/viewer/ReaderPage.tsx';
+import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
+import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
+
+export const ReaderHorizontalPager = () => {
+    const { manga } = useReaderStateMangaContext();
+    const { currentChapter } = useReaderStateChaptersContext();
+    const { pageGap } = ReaderService.useSettings();
+
+    return (
+        <BasePager
+            slots={{
+                stackProps: {
+                    sx: {
+                        my: 'auto',
+                        flexDirection: 'row',
+                        flexWrap: 'nowrap',
+                        alignItems: 'center',
+                        gap: `${pageGap.value}px`,
+                    },
+                },
+            }}
+        >
+            <ReaderPage
+                index={0}
+                src="http://localhost:4567/api/v1/manga/30622/chapter/1131/page/0"
+                // src="http://localhost:45672/api/v1/manga/38/chapter/1/page/0"
+                name={`${manga?.title}: ${currentChapter?.name} #0}`}
+                display
+            />
+            <ReaderPage
+                index={0}
+                src="http://localhost:4567/api/v1/manga/30622/chapter/1131/page/1"
+                // src="http://localhost:45672/api/v1/manga/38/chapter/1/page/0"
+                name={`${manga?.title}: ${currentChapter?.name} #0}`}
+                display
+            />
+            <ReaderPage
+                index={0}
+                src="http://localhost:4567/api/v1/manga/30622/chapter/1131/page/2"
+                // src="http://localhost:45672/api/v1/manga/38/chapter/1/page/0"
+                name={`${manga?.title}: ${currentChapter?.name} #0}`}
+                display
+            />
+            <ReaderPage
+                index={0}
+                src="http://localhost:4567/api/v1/manga/30622/chapter/1131/page/3"
+                // src="http://localhost:45672/api/v1/manga/38/chapter/1/page/0"
+                name={`${manga?.title}: ${currentChapter?.name} #0}`}
+                display
+            />
+            <ReaderPage
+                index={0}
+                src="http://localhost:4567/api/v1/manga/30622/chapter/1131/page/4"
+                // src="http://localhost:45672/api/v1/manga/38/chapter/1/page/0"
+                name={`${manga?.title}: ${currentChapter?.name} #0}`}
+                display
+            />
+            <ReaderPage
+                index={0}
+                src="http://localhost:4567/api/v1/manga/30622/chapter/1131/page/5"
+                // src="http://localhost:45672/api/v1/manga/38/chapter/1/page/0"
+                name={`${manga?.title}: ${currentChapter?.name} #0}`}
+                display
+            />
+            <ReaderPage
+                index={0}
+                src="http://localhost:4567/api/v1/manga/30622/chapter/1131/page/6"
+                // src="http://localhost:45672/api/v1/manga/38/chapter/1/page/0"
+                name={`${manga?.title}: ${currentChapter?.name} #0}`}
+                display
+            />
+        </BasePager>
+    );
+};
diff --git a/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx b/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 { ReaderPage } from '@/modules/reader/components/viewer/ReaderPage.tsx';
+import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
+import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
+import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
+
+export const ReaderPagedPager = () => {
+    const { manga } = useReaderStateMangaContext();
+    const { currentChapter } = useReaderStateChaptersContext();
+
+    return (
+        <BasePager
+            slots={{
+                stackProps: {
+                    sx: {
+                        margin: 'auto',
+                    },
+                },
+            }}
+        >
+            <ReaderPage
+                index={0}
+                src="http://localhost:4567/api/v1/manga/30622/chapter/1131/page/0"
+                // src="http://localhost:45672/api/v1/manga/38/chapter/1/page/0"
+                name={`${manga?.title}: ${currentChapter?.name} #0}`}
+                display
+            />
+        </BasePager>
+    );
+};