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