Add fit page to window reader setting (#323)

* Add fit page to window reader setting

* Renamed option and conditional rendering

* Rename translation key

src/components/navbar/ReaderNavBar.tsx

@@ -261,6 +261,7 @@ export default function ReaderNavBar(props: IProps) {
                             showPageNumber={settings.showPageNumber}
                             loadNextOnEnding={settings.loadNextOnEnding}
                             skipDupChapters={settings.skipDupChapters}
+                            fitPageToWindow={settings.fitPageToWindow}
                             readerType={settings.readerType}
                         />
                     </Collapse>

src/components/reader/Page.tsx

@@ -30,6 +30,7 @@ function imageStyle(settings: IReaderSettings): any {
         };
     }, []);
     if (
+        settings.fitPageToWindow ||
         settings.readerType === 'DoubleLTR' ||
         settings.readerType === 'DoubleRTL' ||
         settings.readerType === 'ContinuesHorizontalLTR' ||

src/components/reader/ReaderSettingsOptions.tsx

@@ -25,9 +25,16 @@ export default function ReaderSettingsOptions({
     showPageNumber,
     skipDupChapters,
     setSettingValue,
+    fitPageToWindow,
 }: IProps) {
     const { t } = useTranslation();
-
+    const fitPageToWindowEligible = [
+        'ContinuesVertical',
+        'Webtoon',
+        'SingleVertical',
+        'SingleRTL',
+        'SingleLTR',
+    ].includes(readerType);
     return (
         <List>
             <ListItem>
@@ -70,6 +77,18 @@ export default function ReaderSettingsOptions({
                     />
                 </ListItemSecondaryAction>
             </ListItem>
+            {fitPageToWindowEligible ? (
+                <ListItem>
+                    <ListItemText primary={t('reader.settings.label.fit_page_to_window')} />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={fitPageToWindow}
+                            onChange={(e) => setSettingValue('fitPageToWindow', e.target.checked)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
+            ) : null}
             <ListItem>
                 <ListItemText primary={t('reader.settings.label.reader_type')} />
                 <Select

src/i18n/locale/en.json

@@ -361,7 +361,8 @@
         "reader_type": "Reader type",
         "show_page_number": "Show page number",
         "skip_dup_chapters": "Skip duplicate chapters",
-        "static_navigation": "Static navigation"
+        "static_navigation": "Static navigation",
+        "fit_page_to_window": "Fit page to window"
       },
       "reader_type": {
         "label": {

src/i18n/locale/es.json

@@ -299,7 +299,8 @@
                 "static_navigation": "Navigación Estática",
                 "show_page_number": "Mostrar numero de pagina",
                 "reader_type": "Tipo de Lector",
-                "skip_dup_chapters": "Omitir capítulos duplicados"
+                "skip_dup_chapters": "Omitir capítulos duplicados",
+                "fit_page_to_window": "Ajustar página a la ventana"
             },
             "title": {
                 "default_reader_settings": "Ajustes Defecto del Lector",

src/screens/settings/DefaultReaderSettings.tsx

@@ -61,6 +61,7 @@ export default function DefaultReaderSettings() {
             showPageNumber={settings.showPageNumber}
             loadNextOnEnding={settings.loadNextOnEnding}
             skipDupChapters={settings.skipDupChapters}
+            fitPageToWindow={settings.fitPageToWindow}
             readerType={settings.readerType}
         />
     );

src/typings.ts

@@ -212,6 +212,7 @@ export interface IReaderSettings {
     showPageNumber: boolean;
     loadNextOnEnding: boolean;
     skipDupChapters: boolean;
+    fitPageToWindow: boolean;
     readerType: ReaderType;
 }
 

src/util/readerSettings.ts

@@ -19,6 +19,7 @@ export const getDefaultSettings = (): IReaderSettings => ({
     showPageNumber: true,
     loadNextOnEnding: false,
     skipDupChapters: true,
+    fitPageToWindow: false,
     readerType: 'ContinuesVertical',
 });
 
@@ -71,6 +72,7 @@ export const checkAndHandleMissingStoredReaderSettings = async (
             showPageNumber: undefined,
             loadNextOnEnding: undefined,
             skipDupChapters: undefined,
+            fitPageToWindow: undefined,
             readerType: undefined,
         },
         false,