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

Extract reader pages wrapper styling

Browse Source
This commit is contained in:
schroda
2025-01-19 13:21:46 +01:00
parent ca1c95cdfe
commit da600bcdec
3 changed files with 52 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/reader/components/viewer/ReaderPage.tsx
View File

@@ -129,7 +129,7 @@ const BaseReaderPage = ({
...getImageMarginStyling(doublePage, position),
}}
imgStyle={{
...getReaderImageStyling(readingMode, shouldStretchPage, pageScaleMode, doublePage, readerWidth, true),
...getReaderImageStyling(readingMode, shouldStretchPage, pageScaleMode, doublePage, readerWidth),
display: 'block',
...applyStyles(!display, {
display: 'none',

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

@@ -9,7 +9,7 @@
import { memo, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
import Box, { BoxProps } from '@mui/material/Box';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { getReaderImageStyling, getPageIndexesToLoad } from '@/modules/reader/utils/ReaderPager.utils.tsx';
import { getPageIndexesToLoad, getReaderImageWrapperStyling } from '@/modules/reader/utils/ReaderPager.utils.tsx';
import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { IReaderSettings, ReaderPagerProps, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
import { ReaderTransitionPage } from '@/modules/reader/components/viewer/ReaderTransitionPage.tsx';
@@ -70,7 +70,7 @@ const BaseBasePager = ({
{...slots?.boxProps}
sx={[
...(Array.isArray(slots?.boxProps?.sx) ? (slots?.boxProps?.sx ?? []) : [slots?.boxProps?.sx]),
getReaderImageStyling(readingMode, shouldStretchPage, pageScaleMode, false, readerWidth),
getReaderImageWrapperStyling(readingMode, shouldStretchPage, pageScaleMode, readerWidth),
]}
>
<ReaderTransitionPage type={ReaderTransitionPageMode.PREVIOUS} />

69
src/modules/reader/utils/ReaderPager.utils.tsx
View File

@@ -36,10 +36,10 @@ type CSSObject = ReturnType<Theme['applyStyles']>;
const getPageWidth = (
pageScaleMode: IReaderSettings['pageScaleMode'],
isDoublePage?: boolean,
readerWidth?: IReaderSettings['readerWidth'],
shouldStretchPage?: IReaderSettings['shouldStretchPage'],
isImage?: boolean,
isDoublePage: boolean,
readerWidth: IReaderSettings['readerWidth'],
shouldStretchPage: IReaderSettings['shouldStretchPage'],
isImage: boolean,
): string => {
// only return 50% in case pages should get stretched, otherwise, pages might unintentionally shrink in size (e.g. 2 pages with different dimensions, the bigger page will shrink due to taking up more than 50%)
if (isImage && isDoublePage && shouldStretchPage) {
@@ -137,22 +137,12 @@ export const getImagePlaceholderStyling = (
}
};
export const getReaderImageStyling = (
const getReaderDimensionStyling = (
width: string,
readingMode: IReaderSettings['readingMode'],
shouldStretchPage: IReaderSettings['shouldStretchPage'],
pageScaleMode: IReaderSettings['pageScaleMode'],
isDoublePage?: boolean,
readerWidth?: IReaderSettings['readerWidth'],
isImage?: boolean,
): CSSObject => {
const width = getPageWidth(pageScaleMode, isDoublePage, readerWidth, shouldStretchPage, isImage);
// setting the "width" of the wrapper is required for being able to properly size the image placeholders
const staticReaderWidthForWrapper = applyStyles(!isImage && shouldApplyReaderWidth(readerWidth, pageScaleMode), {
width,
});
const readerWidthStretchForWrapper = applyStyles(!isImage && shouldStretchPage, { width: '100%' });
switch (pageScaleMode) {
case ReaderPageScaleMode.WIDTH:
return {
@@ -162,9 +152,7 @@ export const getReaderImageStyling = (
}),
...applyStyles(shouldStretchPage, {
minWidth: width,
...readerWidthStretchForWrapper,
}),
...staticReaderWidthForWrapper,
maxWidth: width,
};
case ReaderPageScaleMode.HEIGHT:
@@ -197,9 +185,7 @@ export const getReaderImageStyling = (
minWidth: width,
minHeight: 'unset',
}),
...readerWidthStretchForWrapper,
}),
...staticReaderWidthForWrapper,
maxWidth: width,
maxHeight: `100%`,
};
@@ -210,6 +196,49 @@ export const getReaderImageStyling = (
}
};
export const getReaderImageWrapperStyling = (
readingMode: IReaderSettings['readingMode'],
shouldStretchPage: IReaderSettings['shouldStretchPage'],
pageScaleMode: IReaderSettings['pageScaleMode'],
readerWidth: IReaderSettings['readerWidth'],
): CSSObject => {
const width = getPageWidth(pageScaleMode, false, readerWidth, shouldStretchPage, false);
const readerImageStyling = getReaderDimensionStyling(width, readingMode, shouldStretchPage, pageScaleMode);
switch (pageScaleMode) {
case ReaderPageScaleMode.WIDTH:
case ReaderPageScaleMode.SCREEN:
return {
...readerImageStyling,
...applyStyles(shouldStretchPage, {
width: '100%',
}),
// setting the "width" of the wrapper is required for being able to properly size the image placeholders
...applyStyles(shouldApplyReaderWidth(readerWidth, pageScaleMode), {
width,
}),
};
case ReaderPageScaleMode.HEIGHT:
case ReaderPageScaleMode.ORIGINAL:
return {
...readerImageStyling,
};
default:
throw new Error(`Unexpected "PageScaleMode" (${pageScaleMode})`);
}
};
export const getReaderImageStyling = (
readingMode: IReaderSettings['readingMode'],
shouldStretchPage: IReaderSettings['shouldStretchPage'],
pageScaleMode: IReaderSettings['pageScaleMode'],
isDoublePage: boolean,
readerWidth: IReaderSettings['readerWidth'],
): CSSObject => {
const width = getPageWidth(pageScaleMode, isDoublePage, readerWidth, shouldStretchPage, true);
return getReaderDimensionStyling(width, readingMode, shouldStretchPage, pageScaleMode);
};
export const getImageMarginStyling = (doublePage: boolean, objectFitPosition?: 'left' | 'right'): CSSObject => ({
m: 'auto',
...applyStyles(doublePage, {