Fix "continuous vertical pager" unintentional page gaps

Depending on the screen size and e.g. the set "reader width" pages might not have filled out the full img elements size due to "object-fit contain". This was caused due to the image wrappers flex container "align-items center" which slightly reduced the images width to some ".xy" number (e.g. instead of wrappers width 258px, the images were something like 257.83px)
2024-12-16 21:14:18 +01:00
parent 15a70760ca
commit f51446995a
10 changed files with 45 additions and 31 deletions
--- a/src/modules/reader/components/viewer/ReaderPage.tsx
+++ b/src/modules/reader/components/viewer/ReaderPage.tsx
@@ -54,6 +54,7 @@ export const ReaderPage = forwardRef(
            display,
            doublePage = false,
            position,
+            marginTop,
            shouldLoad,
            retryKeyPrefix,
            ...props
@@ -61,6 +62,7 @@ export const ReaderPage = forwardRef(
            display: boolean;
            doublePage?: boolean;
            position?: 'left' | 'right';
+            marginTop?: number;
        },
        ref: ForwardedRef<HTMLImageElement | null>,
    ) => {
@@ -115,6 +117,7 @@ export const ReaderPage = forwardRef(
                    objectPosition: position,
                    userSelect: 'none',
                    ...getImageMarginStyling(readingMode.value, doublePage, position),
+                    mt: `${marginTop}px`,
                }}
            />
        );
--- a/src/modules/reader/components/viewer/ReaderTransitionPage.tsx
+++ b/src/modules/reader/components/viewer/ReaderTransitionPage.tsx
@@ -90,19 +90,19 @@ export const ReaderTransitionPage = ({
    return (
        <Stack
            sx={{
-                minWidth: `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px)`,
-                minHeight: `calc(100vh - ${scrollbarXSize}px)`,
                justifyContent: 'center',
                alignItems: 'center',
                ...applyStyles(isContinuousReadingMode(readingMode), {
                    position: 'relative',
                    transform: 'scale(1)',
                    ...applyStyles(isContinuousVerticalReadingMode(readingMode), {
+                        minHeight: `calc(100vh - ${scrollbarXSize}px)`,
                        maxWidth: '100%',
                        width: '100%',
                        ...applyStyles(!isFitWidthPageScaleMode, { alignItems: 'baseline' }),
                    }),
                    ...applyStyles(readingMode === ReadingMode.CONTINUOUS_HORIZONTAL, {
+                        minWidth: `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px)`,
                        maxHeight: '100%',
                        height: '100%',
                        justifyContent: 'unset',
--- a/src/modules/reader/components/viewer/ReaderViewer.tsx
+++ b/src/modules/reader/components/viewer/ReaderViewer.tsx
@@ -35,10 +35,14 @@ import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrol
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
 import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
-import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
+import {
+    isContinuousReadingMode,
+    isContinuousVerticalReadingMode,
+} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
 import { useMouseDragScroll } from '@/modules/core/hooks/useMouseDragScroll.tsx';
 import { DirectionOffset } from '@/Base.types.ts';
 import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';

 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
    [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -244,7 +248,12 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
    return (
        <Stack
            ref={scrollElementRef}
-            sx={{ width: '100%', height: '100%', overflow: 'auto' }}
+            sx={{
+                width: '100%',
+                height: '100%',
+                overflow: 'auto',
+                ...applyStyles(isContinuousVerticalReadingMode(readingMode.value), { alignItems: 'center' }),
+            }}
            onClick={(e) => !isDragging && handleClick(e)}
            onScroll={() =>
                ReaderControls.updateCurrentPageOnScroll(
--- a/src/modules/reader/components/viewer/pager/BasePager.tsx
+++ b/src/modules/reader/components/viewer/pager/BasePager.tsx
@@ -6,8 +6,8 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import Stack, { StackProps } from '@mui/material/Stack';
 import { ReactNode, useEffect, useMemo, useRef } from 'react';
+import Box, { BoxProps } from '@mui/material/Box';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { getImageWidthStyling, getPageIndexesToLoad } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
@@ -29,7 +29,7 @@ export const BasePager = ({
        shouldDisplay: boolean,
        setRef: (element: HTMLElement | null) => void,
    ) => ReactNode;
-    slots?: { stackProps?: StackProps };
+    slots?: { boxProps?: BoxProps };
 }) => {
    const { readingMode, pageScaleMode, shouldStretchPage, readerWidth, imagePreLoadAmount } =
        ReaderService.useSettings();
@@ -44,10 +44,10 @@ export const BasePager = ({
    }, [pagesIndexesToRender]);

    return (
-        <Stack
-            {...slots?.stackProps}
+        <Box
+            {...slots?.boxProps}
            sx={[
-                ...(Array.isArray(slots?.stackProps?.sx) ? (slots?.stackProps?.sx ?? []) : [slots?.stackProps?.sx]),
+                ...(Array.isArray(slots?.boxProps?.sx) ? (slots?.boxProps?.sx ?? []) : [slots?.boxProps?.sx]),
                getImageWidthStyling(
                    readingMode.value,
                    shouldStretchPage.value,
@@ -81,6 +81,6 @@ export const BasePager = ({
                readingMode={readingMode.value}
                pageScaleMode={pageScaleMode.value}
            />
-        </Stack>
+        </Box>
    );
 };
--- a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx
+++ b/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx
@@ -97,17 +97,18 @@ export const ReaderDoublePagedPager = ({
                );
            }}
            slots={{
-                stackProps: {
+                boxProps: {
                    sx: {
                        margin: 'auto',
+                        display: 'flex',
                        flexDirection: 'row',
+                        flexWrap: 'nowrap',
                        ...applyStyles(themeDirection === 'ltr', {
                            flexDirection: isLtrReadingDirection ? 'row' : 'row-reverse',
                        }),
                        ...applyStyles(themeDirection === 'rtl', {
                            flexDirection: isLtrReadingDirection ? 'row-reverse' : 'row',
                        }),
-                        flexWrap: 'nowrap',
                    },
                },
            }}
--- a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx
+++ b/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx
@@ -42,13 +42,18 @@ export const ReaderHorizontalPager = ({
                    pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                    undefined,
                    undefined,
+                    undefined,
                    setRef,
                )
            }
            slots={{
-                stackProps: {
+                boxProps: {
                    sx: {
                        my: 'auto',
+                        display: 'flex',
+                        flexWrap: 'nowrap',
+                        alignItems: 'center',
+                        gap: `${pageGap.value}px`,
                        ...applyStyles(themeDirection === 'ltr', {
                            flexDirection: isLtrReadingDirection ? 'row' : 'row-reverse',
                            justifyContent: isLtrReadingDirection ? 'flex-start' : 'flex-end',
@@ -57,9 +62,6 @@ export const ReaderHorizontalPager = ({
                            flexDirection: isLtrReadingDirection ? 'row-reverse' : 'row',
                            justifyContent: isLtrReadingDirection ? 'flex-end' : 'flex-start',
                        }),
-                        flexWrap: 'nowrap',
-                        alignItems: 'center',
-                        gap: `${pageGap.value}px`,
                    },
                },
            }}
--- a/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx
+++ b/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx
@@ -35,7 +35,7 @@ export const ReaderPagedPager = ({
                )
            }
            slots={{
-                stackProps: {
+                boxProps: {
                    sx: {
                        margin: 'auto',
                    },
--- a/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx
+++ b/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx
@@ -6,10 +6,10 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
 import { ReaderPagerProps, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
 import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';

 export const ReaderVerticalPager = ({
    onLoad,
@@ -22,7 +22,7 @@ export const ReaderVerticalPager = ({

    const { readingMode, pageGap } = ReaderService.useSettings();
    const isWebtoonMode = readingMode.value === ReadingMode.WEBTOON;
-    const actualPageGap = isWebtoonMode ? 0 : pageGap;
+    const actualPageGap = isWebtoonMode ? 0 : pageGap.value;

    return (
        <BasePager
@@ -39,19 +39,10 @@ export const ReaderVerticalPager = ({
                    pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                    undefined,
                    undefined,
+                    page.primary.index !== 0 ? actualPageGap : 0,
                    setRef,
                )
            }
-            slots={{
-                stackProps: {
-                    sx: {
-                        margin: 'auto',
-                        flexWrap: 'nowrap',
-                        alignItems: 'center',
-                        gap: `${actualPageGap}px`,
-                    },
-                },
-            }}
        />
    );
 };
--- a/src/modules/reader/utils/ReaderPager.utils.tsx
+++ b/src/modules/reader/utils/ReaderPager.utils.tsx
@@ -95,6 +95,10 @@ export const getImagePlaceholderStyling = (
                ...applyStyles(shouldStretchPage, {
                    minWidth: minWidthForStretch,
                }),
+                // the SpinnerImage placeholder has a default height of 100%, this caused the placeholder due take up 100% of the readers full scrollable height instead of only 100% of the viewport
+                ...applyStyles(isContinuousVerticalReadingMode(readingMode), {
+                    height: 'unset',
+                }),
            };
        case ReaderPageScaleMode.HEIGHT:
            return {
@@ -241,6 +245,7 @@ export const createReaderPage = (
    retryKeyPrefix?: string,
    position?: 'left' | 'right',
    isDoublePage?: boolean,
+    marginTop?: number,
    setRef?: (ref: HTMLElement | null) => void,
 ): ReactNode => (
    <ReaderPage
@@ -256,6 +261,7 @@ export const createReaderPage = (
        doublePage={isDoublePage}
        shouldLoad={shouldLoad}
        retryKeyPrefix={retryKeyPrefix}
+        marginTop={marginTop}
    />
 );