ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix "continuous vertical pager" unintentional page gaps

Browse Source 
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)
This commit is contained in:
schroda
2024-12-16 21:14:18 +01:00
parent 15a70760ca
commit f51446995a
10 changed files with 45 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/modules/reader/components/viewer/pager/BasePager.tsx
View File

@@ -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>
);
};

5
src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx
View File

@@ -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',
},
},
}}

10
src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx
View File

@@ -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`,
},
},
}}

2
src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx
View File

@@ -35,7 +35,7 @@ export const ReaderPagedPager = ({
)
}
slots={{
stackProps: {
boxProps: {
sx: {
margin: 'auto',
},

15
src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx
View File

@@ -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`,
},
},
}}
/>
);
};