Make reader width configurable (#565)

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

src/components/navbar/ReaderNavBar.tsx

@@ -23,7 +23,7 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Collapse from '@mui/material/Collapse';
 import { useTranslation } from 'react-i18next';
-import { ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings';
+import { AllowedMetadataValueTypes, ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings';
 import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions';
 
 const Root = styled('div')(({ theme }) => ({
@@ -112,7 +112,7 @@ const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
 
 interface IProps {
     settings: IReaderSettings;
-    setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void;
+    setSettingValue: (key: keyof IReaderSettings, value: AllowedMetadataValueTypes) => void;
     manga: TManga;
     chapter: TChapter;
     curPage: number;
@@ -141,7 +141,7 @@ export function ReaderNavBar(props: IProps) {
 
     const disableChapterNavButtons = retrievingNextChapter;
 
-    const updateSettingValue = (key: keyof IReaderSettings, value: string | boolean) => {
+    const updateSettingValue = (key: keyof IReaderSettings, value: AllowedMetadataValueTypes) => {
         // prevent closing the navBar when updating the "staticNav" setting
         setUpdateDrawerOnRender(key !== 'staticNav');
         setSettingValue(key, value);
@@ -269,6 +269,7 @@ export function ReaderNavBar(props: IProps) {
                             fitPageToWindow={settings.fitPageToWindow}
                             readerType={settings.readerType}
                             offsetFirstPage={settings.offsetFirstPage}
+                            readerWidth={settings.readerWidth}
                         />
                     </Collapse>
                     <Divider sx={{ my: 1, mx: 2 }} />

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 (
+    if (settings.fitPageToWindow || isFillsPageReaderType(settings.readerType)) {
-        settings.fitPageToWindow ||
-        settings.readerType === 'DoubleLTR' ||
-        settings.readerType === 'DoubleRTL' ||
-        settings.readerType === 'ContinuesHorizontalLTR' ||
-        settings.readerType === 'ContinuesHorizontalRTL'
-    ) {
         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',
+        minWidth: '10vw',
-        width: dimensions.width < dimensions.height ? '100vw' : '100%',
+        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 = [
+    const fitPageToWindowEligible = !isFillsPageReaderType(readerType);
-        'ContinuesVertical',
-        'Webtoon',
-        'SingleVertical',
-        'SingleRTL',
-        'SingleLTR',
-    ].includes(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

src/components/settings/NumberSetting.tsx

@@ -10,7 +10,7 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import TextField from '@mui/material/TextField';
-import { InputAdornment, ListItemText, Stack, Typography } from '@mui/material';
+import { InputAdornment, ListItemText, Stack, SxProps, Typography, Theme } from '@mui/material';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { useCallback, useEffect, useState } from 'react';
@@ -38,6 +38,7 @@ type BaseProps = {
     handleUpdate: (value: number) => void;
     showSlider?: never;
     disabled?: boolean;
+    listItemTextSx?: SxProps<Theme>;
 };
 
 type PropsWithSlider = Omit<BaseProps, 'defaultValue' | 'minValue' | 'maxValue' | 'showSlider'> &
@@ -61,6 +62,7 @@ export const NumberSetting = ({
     handleUpdate,
     showSlider,
     disabled = false,
+    listItemTextSx: sx,
 }: Props) => {
     const { t } = useTranslation();
 
@@ -107,6 +109,7 @@ export const NumberSetting = ({
                 <ListItemText
                     primary={settingTitle}
                     secondary={settingValue ?? t('global.label.loading')}
+                    sx={sx}
                     secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
                 />
             </ListItemButton>
@@ -150,7 +153,7 @@ export const NumberSetting = ({
                         }}
                         InputProps={{
                             inputProps: { min: minValue, max: maxValue, step: stepSize },
-                            startAdornment: <InputAdornment position="start">{valueUnit}</InputAdornment>,
+                            endAdornment: <InputAdornment position="end">{valueUnit}</InputAdornment>,
                         }}
                         autoFocus
                         value={dialogValue}

src/i18n/locale/en.json

@@ -607,7 +607,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",
+        "reader_width": "Reader width"
       },
       "reader_type": {
         "label": {

src/screens/Reader.tsx

@@ -11,7 +11,15 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { ChapterOffset, IReaderSettings, ReaderType, TChapter, TManga, TranslationKey } from '@/typings';
+import {
+    AllowedMetadataValueTypes,
+    ChapterOffset,
+    IReaderSettings,
+    ReaderType,
+    TChapter,
+    TManga,
+    TranslationKey,
+} from '@/typings';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import {
     checkAndHandleMissingStoredReaderSettings,
@@ -227,7 +235,7 @@ export function Reader() {
             .response.catch();
     };
 
-    const setSettingValue = (key: keyof IReaderSettings, value: string | boolean) => {
+    const setSettingValue = (key: keyof IReaderSettings, value: AllowedMetadataValueTypes) => {
         setSettings({ ...settings, [key]: value });
         requestUpdateMangaMetadata(manga, [[key, value]]).catch(() =>
             makeToast(t('reader.settings.error.label.failed_to_save_settings'), 'warning'),

src/screens/settings/DefaultReaderSettings.tsx

@@ -10,7 +10,7 @@ import { useContext, useEffect } from 'react';
 import { Box } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useTranslation } from 'react-i18next';
-import { IReaderSettings } from '@/typings';
+import { AllowedMetadataValueTypes, IReaderSettings } from '@/typings';
 import { convertToGqlMeta, requestUpdateServerMetadata } from '@/util/metadata';
 import {
     checkAndHandleMissingStoredReaderSettings,
@@ -34,7 +34,7 @@ export function DefaultReaderSettings() {
 
     useSetDefaultBackTo('settings');
 
-    const setSettingValue = (key: keyof IReaderSettings, value: string | boolean) => {
+    const setSettingValue = (key: keyof IReaderSettings, value: AllowedMetadataValueTypes) => {
         requestUpdateServerMetadata(convertToGqlMeta(metadata)! ?? {}, [[key, value]]).catch(() =>
             makeToast(t('reader.settings.error.label.failed_to_save_settings'), 'warning'),
         );
@@ -71,6 +71,7 @@ export function DefaultReaderSettings() {
             fitPageToWindow={settings.fitPageToWindow}
             readerType={settings.readerType}
             offsetFirstPage={settings.offsetFirstPage}
+            readerWidth={settings.readerWidth}
         />
     );
 }

src/typings.ts

@@ -209,6 +209,7 @@ export interface IReaderSettings {
     fitPageToWindow: boolean;
     readerType: ReaderType;
     offsetFirstPage: boolean;
+    readerWidth: number;
 }
 
 export enum ChapterOffset {

src/util/readerSettings.ts

@@ -28,6 +28,7 @@ export const getDefaultSettings = (): IReaderSettings => ({
     fitPageToWindow: false,
     readerType: 'ContinuesVertical',
     offsetFirstPage: false,
+    readerWidth: 100,
 });
 
 const getReaderSettingsWithDefaultValueFallback = <DefaultSettings extends IReaderSettings | UndefinedReaderSettings>(
@@ -84,6 +85,7 @@ export const checkAndHandleMissingStoredReaderSettings = async (
             fitPageToWindow: undefined,
             readerType: undefined,
             offsetFirstPage: undefined,
+            readerWidth: undefined,
         },
         false,
     );