From f51446995a46094ae0d7507380a22485705e9de9 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Mon, 16 Dec 2024 21:14:18 +0100 Subject: [PATCH] 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) --- src/modules/core/components/SpinnerImage.tsx | 6 ++++-- .../reader/components/viewer/ReaderPage.tsx | 3 +++ .../components/viewer/ReaderTransitionPage.tsx | 4 ++-- .../reader/components/viewer/ReaderViewer.tsx | 13 +++++++++++-- .../reader/components/viewer/pager/BasePager.tsx | 12 ++++++------ .../viewer/pager/ReaderDoublePagedPager.tsx | 5 +++-- .../viewer/pager/ReaderHorizontalPager.tsx | 10 ++++++---- .../components/viewer/pager/ReaderPagedPager.tsx | 2 +- .../viewer/pager/ReaderVerticalPager.tsx | 15 +++------------ src/modules/reader/utils/ReaderPager.utils.tsx | 6 ++++++ 10 files changed, 45 insertions(+), 31 deletions(-) diff --git a/src/modules/core/components/SpinnerImage.tsx b/src/modules/core/components/SpinnerImage.tsx index a43e6c6a..e1bef79b 100644 --- a/src/modules/core/components/SpinnerImage.tsx +++ b/src/modules/core/components/SpinnerImage.tsx @@ -162,9 +162,11 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef @@ -193,7 +195,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef )} - + )} ); diff --git a/src/modules/reader/components/viewer/ReaderPage.tsx b/src/modules/reader/components/viewer/ReaderPage.tsx index 7a7b9e62..cf4a78c5 100644 --- 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, ) => { @@ -115,6 +117,7 @@ export const ReaderPage = forwardRef( objectPosition: position, userSelect: 'none', ...getImageMarginStyling(readingMode.value, doublePage, position), + mt: `${marginTop}px`, }} /> ); diff --git a/src/modules/reader/components/viewer/ReaderTransitionPage.tsx b/src/modules/reader/components/viewer/ReaderTransitionPage.tsx index f0f2be93..a1a73fa1 100644 --- a/src/modules/reader/components/viewer/ReaderTransitionPage.tsx +++ b/src/modules/reader/components/viewer/ReaderTransitionPage.tsx @@ -90,19 +90,19 @@ export const ReaderTransitionPage = ({ return ( = { [ReadingMode.SINGLE_PAGE]: PageInViewportType.X, @@ -244,7 +248,12 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef !isDragging && handleClick(e)} onScroll={() => ReaderControls.updateCurrentPageOnScroll( diff --git a/src/modules/reader/components/viewer/pager/BasePager.tsx b/src/modules/reader/components/viewer/pager/BasePager.tsx index 5578dcee..51abe701 100644 --- 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 ( - - + ); }; diff --git a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx b/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx index fa6bd651..75f6bfec 100644 --- 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', }, }, }} diff --git a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx b/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx index 9df2371b..1bbaa913 100644 --- 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`, }, }, }} diff --git a/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx b/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx index d57e4981..801ef513 100644 --- 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', }, diff --git a/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx b/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx index e3190583..1fabbfdb 100644 --- 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 ( ); }; diff --git a/src/modules/reader/utils/ReaderPager.utils.tsx b/src/modules/reader/utils/ReaderPager.utils.tsx index 5f687fac..5d729e52 100644 --- 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 => ( );