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 => ( );