Feature/reader setting add scale small pages (#615)

* Add option to stretch small pages

In case "fit page to window" is enabled, small pages can be scaled up to the available width and height, while maintaining the aspect ratio

* Cleanup "imageStyle" function

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,27 +17,40 @@ 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',
-        };
-    }
+    const baseStyling = {
+        margin: 0,
+        width: `${settings.readerWidth}%`,
+        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 {
-        marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
-        minWidth: '10vw',
-        width: `${settings.readerWidth}%`,
-        maxWidth: '100%',
-        objectFit: 'contain',
+        ...baseStyling,
+        ...(isHorizontal ? continuesHorizontalStyling : undefined),
+        ...(isVertical ? continuesVerticalStyling : undefined),
+        ...(settings.fitPageToWindow && !isHorizontal ? fitToPageStyling : undefined),
     };
 }
 

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')} />