Feature/reader setting add scale small pages

src/components/navbar/ReaderNavBar.tsx

@@ -271,6 +271,7 @@ export function ReaderNavBar(props: IProps) {
                             loadNextOnEnding={settings.loadNextOnEnding}
                             skipDupChapters={settings.skipDupChapters}
                             fitPageToWindow={settings.fitPageToWindow}
+                            scalePage={settings.scalePage}
                             readerType={settings.readerType}
                             offsetFirstPage={settings.offsetFirstPage}
                             readerWidth={settings.readerWidth}

src/components/reader/DoublePage.tsx

@@ -28,6 +28,10 @@ export const DoublePage = forwardRef((props: IProps, ref: any) => {
     const imgStyle = {
         ...baseImgStyle,
         width: settings.fitPageToWindow ? baseImgStyle.width : `calc(${baseImgStyle.width} * 0.5)`,
+        minWidth:
+            settings.fitPageToWindow && settings.scalePage
+                ? `calc(${baseImgStyle.minWidth} * 0.5)`
+                : baseImgStyle.minWidth,
         maxWidth: settings.fitPageToWindow ? `calc(${baseImgStyle.maxWidth} * 0.5)` : baseImgStyle.maxWidth,
     };
 
@@ -54,7 +58,7 @@ export const DoublePage = forwardRef((props: IProps, ref: any) => {
                 alt={`Page #${index}`}
                 imgRef={imgRef}
                 spinnerStyle={spinnerStyle}
-                imgStyle={imgStyle}
+                imgStyle={{ ...imgStyle, objectPosition: settings.readerType === 'DoubleLTR' ? 'right' : 'left' }}
             />
             <SpinnerImage
                 src={image2src}
@@ -66,7 +70,7 @@ export const DoublePage = forwardRef((props: IProps, ref: any) => {
                     width: 'calc(50% - 5px)',
                     marginLeft: '5px',
                 }}
-                imgStyle={imgStyle}
+                imgStyle={{ ...imgStyle, objectPosition: settings.readerType === 'DoubleLTR' ? 'left' : 'right' }}
             />
         </Box>
     );

src/components/reader/Page.tsx

@@ -17,28 +17,41 @@ export const isHorizontalReaderType = (readerType: ReaderType): boolean =>
     ['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType);
 
 export function imageStyle(settings: IReaderSettings): any {
+    const isVertical = settings.readerType === 'ContinuesVertical';
     const isHorizontal = isHorizontalReaderType(settings.readerType);
-    if (settings.fitPageToWindow || isHorizontal) {
-        return {
-            marginLeft: isHorizontal ? '7px' : 0,
-            marginRight: isHorizontal ? '7px' : 0,
-            marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
-            width: 'auto',
-            maxWidth: settings.fitPageToWindow && !isHorizontal ? 'calc(100vw - (100vw - 100%))' : undefined,
-            height: 'auto',
-            minHeight: isHorizontal ? '100vh' : undefined,
-            maxHeight: '100vh',
-            objectFit: 'contain',
-        };
-    }
-
-    return {
-        marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
-        minWidth: '10vw',
+    const baseStyling = {
+        margin: 0,
         width: `${settings.readerWidth}%`,
-        maxWidth: '100%',
         objectFit: 'contain',
     };
+
+    const continuesVerticalStyling = {
+        marginBottom: '15px',
+    };
+
+    const continuesHorizontalStyling = {
+        width: undefined,
+        minHeight: '100vh',
+        maxHeight: '100vh',
+        marginLeft: '7px',
+        marginRight: '7px',
+    };
+
+    const fitToPageStyling = {
+        width: undefined,
+        height: undefined,
+        minWidth: settings.scalePage ? 'calc(100vw - (100vw - 100%))' : undefined,
+        maxWidth: 'calc(100vw - (100vw - 100%))',
+        minHeight: settings.scalePage ? '100vh' : undefined,
+        maxHeight: '100vh',
+    };
+
+    return {
+        ...baseStyling,
+        ...(isHorizontal ? continuesHorizontalStyling : undefined),
+        ...(isVertical ? continuesVerticalStyling : undefined),
+        ...(settings.fitPageToWindow && !isHorizontal ? fitToPageStyling : undefined),
+    };
 }
 
 interface IProps {

src/components/reader/ReaderSettingsOptions.tsx

@@ -26,6 +26,7 @@ export function ReaderSettingsOptions({
     skipDupChapters,
     setSettingValue,
     fitPageToWindow,
+    scalePage,
     offsetFirstPage,
     readerWidth,
 }: IProps) {
@@ -75,6 +76,16 @@ export function ReaderSettingsOptions({
                     />
                 </ListItem>
             )}
+            {fitPageToWindowEligible && fitPageToWindow && (
+                <ListItem>
+                    <ListItemText primary={t('reader.settings.label.scale_page')} />
+                    <Switch
+                        edge="end"
+                        checked={scalePage}
+                        onChange={(e) => setSettingValue('scalePage', e.target.checked)}
+                    />
+                </ListItem>
+            )}
             {(readerType === 'DoubleLTR' || readerType === 'DoubleRTL') && (
                 <ListItem>
                     <ListItemText primary={t('reader.settings.label.offset_first_page')} />

src/i18n/locale/en.json

@@ -647,6 +647,7 @@
         "offset_first_page": "Offset first page",
         "reader_type": "Reader type",
         "reader_width": "Reader width",
+        "scale_page": "Scale small pages",
         "show_page_number": "Show page number",
         "skip_dup_chapters": "Skip duplicate chapters",
         "static_navigation": "Static navigation"

src/screens/settings/DefaultReaderSettings.tsx

@@ -74,6 +74,7 @@ export function DefaultReaderSettings() {
             loadNextOnEnding={settings.loadNextOnEnding}
             skipDupChapters={settings.skipDupChapters}
             fitPageToWindow={settings.fitPageToWindow}
+            scalePage={settings.scalePage}
             readerType={settings.readerType}
             offsetFirstPage={settings.offsetFirstPage}
             readerWidth={settings.readerWidth}

src/typings.ts

@@ -207,6 +207,7 @@ export interface IReaderSettings {
     loadNextOnEnding: boolean;
     skipDupChapters: boolean;
     fitPageToWindow: boolean;
+    scalePage: boolean;
     readerType: ReaderType;
     offsetFirstPage: boolean;
     readerWidth: number;

src/util/readerSettings.ts

@@ -26,6 +26,7 @@ export const getDefaultSettings = (): IReaderSettings => ({
     loadNextOnEnding: false,
     skipDupChapters: true,
     fitPageToWindow: true,
+    scalePage: false,
     readerType: 'ContinuesVertical',
     offsetFirstPage: false,
     readerWidth: 50,
@@ -83,6 +84,7 @@ export const checkAndHandleMissingStoredReaderSettings = async (
             loadNextOnEnding: undefined,
             skipDupChapters: undefined,
             fitPageToWindow: undefined,
+            scalePage: undefined,
             readerType: undefined,
             offsetFirstPage: undefined,
             readerWidth: undefined,