Convert reader image styling to vw/vh

Preparation for infinite scroll, since there will be a wrapper which fits its content in width and height, thus, percentage based dimension won't work anymore

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 { getPageIndexesToLoad, getReaderImageWrapperStyling } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+import { getPageIndexesToLoad } 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';
@@ -23,15 +23,9 @@ const BaseBasePager = ({
     createPage,
     slots,
     readingMode,
-    pageScaleMode,
-    shouldStretchPage,
-    readerWidth,
     imagePreLoadAmount,
 }: Omit<ReaderPagerProps, 'pageLoadStates' | 'retryFailedPagesKeyPrefix'> &
-    Pick<
-        IReaderSettings,
-        'readingMode' | 'pageScaleMode' | 'shouldStretchPage' | 'readerWidth' | 'imagePreLoadAmount'
-    > & {
+    Pick<IReaderSettings, 'readingMode' | 'imagePreLoadAmount'> & {
         createPage: (
             page: ReaderStatePages['pages'][number],
             pagesIndex: number,
@@ -68,10 +62,7 @@ const BaseBasePager = ({
     return (
         <Box
             {...slots?.boxProps}
-            sx={[
-                ...(Array.isArray(slots?.boxProps?.sx) ? (slots?.boxProps?.sx ?? []) : [slots?.boxProps?.sx]),
-                getReaderImageWrapperStyling(readingMode, shouldStretchPage, pageScaleMode, readerWidth),
-            ]}
+            sx={[...(Array.isArray(slots?.boxProps?.sx) ? (slots?.boxProps?.sx ?? []) : [slots?.boxProps?.sx])]}
         >
             <ReaderTransitionPage type={ReaderTransitionPageMode.PREVIOUS} />
             {pages.map((page, pagesIndex) =>
@@ -91,5 +82,5 @@ const BaseBasePager = ({
 export const BasePager = withPropsFrom(
     memo(BaseBasePager),
     [ReaderService.useSettingsWithoutDefaultFlag],
-    ['readingMode', 'pageScaleMode', 'shouldStretchPage', 'readerWidth', 'imagePreLoadAmount'],
+    ['readingMode', 'imagePreLoadAmount'],
 );

src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx

@@ -10,7 +10,12 @@ import { Direction, useTheme } from '@mui/material/styles';
 import { Fragment, memo, useMemo } from 'react';
 import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
-import { IReaderSettings, ReaderPagerProps, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
+import {
+    IReaderSettings,
+    ReaderPagerProps,
+    ReaderPageScaleMode,
+    ReadingDirection,
+} from '@/modules/reader/types/Reader.types.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
@@ -44,8 +49,9 @@ const BaseReaderDoublePagedPager = ({
     pageLoadStates,
     retryFailedPagesKeyPrefix,
     readingDirection,
+    pageScaleMode,
     ...props
-}: ReaderPagerProps & Pick<IReaderSettings, 'readingDirection'>) => {
+}: ReaderPagerProps & Pick<IReaderSettings, 'readingDirection' | 'pageScaleMode'>) => {
     const { currentPageIndex, pages, totalPages } = props;
 
     const { direction: themeDirection } = useTheme();
@@ -102,7 +108,13 @@ const BaseReaderDoublePagedPager = ({
             slots={{
                 boxProps: {
                     sx: {
-                        margin: 'auto',
+                        ...applyStyles(pageScaleMode === ReaderPageScaleMode.ORIGINAL, {
+                            margin: 'auto',
+                        }),
+                        width: '100%',
+                        minWidth: 'fit-content',
+                        height: '100%',
+                        minHeight: 'fit-content',
                         display: 'flex',
                         flexDirection: 'row',
                         flexWrap: 'nowrap',
@@ -122,5 +134,5 @@ const BaseReaderDoublePagedPager = ({
 export const ReaderDoublePagedPager = withPropsFrom(
     memo(BaseReaderDoublePagedPager),
     [ReaderService.useSettingsWithoutDefaultFlag],
-    ['readingDirection'],
+    ['readingDirection', 'pageScaleMode'],
 );