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/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,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) {
+    const baseStyling = {
-        return {
+        margin: 0,
-            marginLeft: isHorizontal ? '7px' : 0,
+        width: `${settings.readerWidth}%`,
-            marginRight: isHorizontal ? '7px' : 0,
+        objectFit: 'contain',
-            marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
+    };
-            width: 'auto',
+
-            maxWidth: settings.fitPageToWindow && !isHorizontal ? 'calc(100vw - (100vw - 100%))' : undefined,
+    const continuesVerticalStyling = {
-            height: 'auto',
+        marginBottom: '15px',
-            minHeight: isHorizontal ? '100vh' : undefined,
+    };
-            maxHeight: '100vh',
+
-            objectFit: 'contain',
+    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,
+        ...baseStyling,
-        minWidth: '10vw',
+        ...(isHorizontal ? continuesHorizontalStyling : undefined),
-        width: `${settings.readerWidth}%`,
+        ...(isVertical ? continuesVerticalStyling : undefined),
-        maxWidth: '100%',
+        ...(settings.fitPageToWindow && !isHorizontal ? fitToPageStyling : undefined),
-        objectFit: 'contain',
     };
 }
 

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,