Make reader width configurable (#565)

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>

src/components/reader/Page.tsx

@@ -8,9 +8,12 @@
 
 import { useState, useEffect, forwardRef, useRef } from 'react';
 import Box from '@mui/material/Box';
-import { IReaderSettings } from '@/typings';
+import { IReaderSettings, ReaderType } from '@/typings';
 import { SpinnerImage } from '@/components/util/SpinnerImage';
 
+export const isFillsPageReaderType = (readerType: ReaderType): boolean =>
+    ['DoubleRTL', 'DoubleLTR', 'ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType);
+
 function imageStyle(settings: IReaderSettings): any {
     const [dimensions, setDimensions] = useState({
         height: window.innerHeight,
@@ -29,13 +32,7 @@ function imageStyle(settings: IReaderSettings): any {
             window.removeEventListener('resize', handleResize);
         };
     }, []);
-    if (
-        settings.fitPageToWindow ||
-        settings.readerType === 'DoubleLTR' ||
-        settings.readerType === 'DoubleRTL' ||
-        settings.readerType === 'ContinuesHorizontalLTR' ||
-        settings.readerType === 'ContinuesHorizontalRTL'
-    ) {
+    if (settings.fitPageToWindow || isFillsPageReaderType(settings.readerType)) {
         return {
             display: 'block',
             marginLeft: '7px',
@@ -51,9 +48,11 @@ function imageStyle(settings: IReaderSettings): any {
     return {
         display: 'block',
         marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
-        minWidth: '50vw',
-        width: dimensions.width < dimensions.height ? '100vw' : '100%',
+        minWidth: '10vw',
+        width: dimensions.width < dimensions.height ? '100vw' : `${settings.readerWidth}%`,
         maxWidth: '100%',
+        marginLeft: 'auto',
+        marginRight: 'auto',
     };
 }
 

src/components/reader/ReaderSettingsOptions.tsx

@@ -10,10 +10,12 @@ import { List, ListItem, ListItemText, Switch } from '@mui/material';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import { useTranslation } from 'react-i18next';
-import { IReaderSettings } from '@/typings';
+import { AllowedMetadataValueTypes, IReaderSettings } from '@/typings';
+import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
+import { isFillsPageReaderType } from '@/components/reader/Page.tsx';
 
 interface IProps extends IReaderSettings {
-    setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void;
+    setSettingValue: (key: keyof IReaderSettings, value: AllowedMetadataValueTypes) => void;
 }
 
 export function ReaderSettingsOptions({
@@ -25,15 +27,10 @@ export function ReaderSettingsOptions({
     setSettingValue,
     fitPageToWindow,
     offsetFirstPage,
+    readerWidth,
 }: IProps) {
     const { t } = useTranslation();
-    const fitPageToWindowEligible = [
-        'ContinuesVertical',
-        'Webtoon',
-        'SingleVertical',
-        'SingleRTL',
-        'SingleLTR',
-    ].includes(readerType);
+    const fitPageToWindowEligible = !isFillsPageReaderType(readerType);
     return (
         <List>
             <ListItem>
@@ -68,7 +65,7 @@ export function ReaderSettingsOptions({
                     onChange={(e) => setSettingValue('skipDupChapters', e.target.checked)}
                 />
             </ListItem>
-            {fitPageToWindowEligible ? (
+            {fitPageToWindowEligible && (
                 <ListItem>
                     <ListItemText primary={t('reader.settings.label.fit_page_to_window')} />
                     <Switch
@@ -77,8 +74,8 @@ export function ReaderSettingsOptions({
                         onChange={(e) => setSettingValue('fitPageToWindow', e.target.checked)}
                     />
                 </ListItem>
-            ) : null}
-            {readerType === 'DoubleLTR' || readerType === 'DoubleRTL' ? (
+            )}
+            {(readerType === 'DoubleLTR' || readerType === 'DoubleRTL') && (
                 <ListItem>
                     <ListItemText primary={t('reader.settings.label.offset_first_page')} />
                     <Switch
@@ -87,7 +84,22 @@ export function ReaderSettingsOptions({
                         onChange={(e) => setSettingValue('offsetFirstPage', e.target.checked)}
                     />
                 </ListItem>
-            ) : null}
+            )}
+            {fitPageToWindowEligible && !fitPageToWindow && (
+                <NumberSetting
+                    settingTitle={t('reader.settings.label.reader_width')}
+                    dialogTitle={t('reader.settings.label.reader_width')}
+                    settingValue={`${readerWidth}%`}
+                    value={readerWidth}
+                    minValue={10}
+                    maxValue={100}
+                    defaultValue={100}
+                    valueUnit="%"
+                    showSlider
+                    handleUpdate={(width: number) => setSettingValue('readerWidth', width)}
+                    listItemTextSx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
+                />
+            )}
             <ListItem>
                 <ListItemText primary={t('reader.settings.label.reader_type')} />
                 <Select