Reader page rendering

2024-11-06 13:00:36 +01:00
parent 0b1c67ce9f
commit 7cf78e771a
28 changed files with 1243 additions and 69 deletions
--- a/src/modules/reader/components/viewer/ReaderPage.tsx
+++ b/src/modules/reader/components/viewer/ReaderPage.tsx
@@ -0,0 +1,115 @@
+/*
+ * 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 { ComponentProps, 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 { getImagePlaceholderStyling, getImageWidthStyling } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
+import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
+
+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(
+    (
+        {
+            display,
+            doublePage = false,
+            position,
+            shouldLoad,
+            ...props
+        }: Omit<ComponentProps<typeof SpinnerImage>, 'ref' | 'spinnerStyle' | 'imgStyle'> & {
+            display: boolean;
+            doublePage?: boolean;
+            position?: 'left' | 'right';
+            onLoad?: () => void;
+        },
+        ref: ForwardedRef<HTMLImageElement | null>,
+    ) => {
+        const { readingMode, customFilter, pageScaleMode, shouldStretchPage, readerWidth } =
+            ReaderService.useSettings();
+        const { scrollbarXSize, scrollbarYSize } = useReaderScrollbarContext();
+        const isTabletWidth = MediaQuery.useIsTabletWidth();
+
+        if (!display && !shouldLoad) {
+            return null;
+        }
+
+        return (
+            <SpinnerImage
+                {...props}
+                shouldLoad={shouldLoad}
+                shouldDecode
+                ref={ref}
+                spinnerStyle={{
+                    backgroundColor: 'background.paper',
+                    ...getImagePlaceholderStyling(
+                        readingMode.value,
+                        shouldStretchPage.value,
+                        pageScaleMode.value,
+                        readerWidth.value,
+                        scrollbarXSize,
+                        scrollbarYSize,
+                        doublePage,
+                        isTabletWidth,
+                    ),
+                    ...applyStyles(!display, {
+                        display: 'none',
+                    }),
+                }}
+                imgStyle={{
+                    ...getImageWidthStyling(
+                        readingMode.value,
+                        shouldStretchPage.value,
+                        pageScaleMode.value,
+                        doublePage,
+                        readerWidth.value,
+                        true,
+                    ),
+                    display: 'block',
+                    ...applyStyles(!display, {
+                        display: 'none',
+                    }),
+                    filter: getCustomFilterString(customFilter),
+                    objectFit: 'contain',
+                    objectPosition: position,
+                    userSelect: 'none',
+                }}
+            />
+        );
+    },
+);