diff --git a/src/modules/reader/components/viewer/ReaderPage.tsx b/src/modules/reader/components/viewer/ReaderPage.tsx
index 78396716..e10b0d09 100644
--- a/src/modules/reader/components/viewer/ReaderPage.tsx
+++ b/src/modules/reader/components/viewer/ReaderPage.tsx
@@ -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',
diff --git a/src/modules/reader/components/viewer/pager/BasePager.tsx b/src/modules/reader/components/viewer/pager/BasePager.tsx
index 64bf5338..f5cff5fe 100644
--- a/src/modules/reader/components/viewer/pager/BasePager.tsx
+++ b/src/modules/reader/components/viewer/pager/BasePager.tsx
@@ -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),
]}
>
diff --git a/src/modules/reader/utils/ReaderPager.utils.tsx b/src/modules/reader/utils/ReaderPager.utils.tsx
index 7fa4507e..b2a4695c 100644
--- a/src/modules/reader/utils/ReaderPager.utils.tsx
+++ b/src/modules/reader/utils/ReaderPager.utils.tsx
@@ -36,10 +36,10 @@ type CSSObject = ReturnType;
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, {