From da600bcdecc5bfd6da8e07240a493a5fa4e550cf Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sun, 19 Jan 2025 13:21:46 +0100
Subject: [PATCH] Extract reader pages wrapper styling

---
 .../reader/components/viewer/ReaderPage.tsx   |  2 +-
 .../components/viewer/pager/BasePager.tsx     |  4 +-
 .../reader/utils/ReaderPager.utils.tsx        | 69 +++++++++++++------
 3 files changed, 52 insertions(+), 23 deletions(-)

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),
             ]}
         >
             <ReaderTransitionPage type={ReaderTransitionPageMode.PREVIOUS} />
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<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, {