Make reader width configurable (#565)

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>
2024-01-21 13:33:13 -08:00
parent dcbf5a1899
commit 5032a0ae94
9 changed files with 61 additions and 33 deletions
--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/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 }} />
--- a/src/components/reader/Page.tsx
+++ b/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',
    };
 }

--- a/src/components/reader/ReaderSettingsOptions.tsx
+++ b/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
--- a/src/components/settings/NumberSetting.tsx
+++ b/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}
--- a/src/i18n/locale/en.json
+++ b/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": {
--- a/src/screens/Reader.tsx
+++ b/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'),
--- a/src/screens/settings/DefaultReaderSettings.tsx
+++ b/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}
        />
    );
 }
--- a/src/typings.ts
+++ b/src/typings.ts
@@ -209,6 +209,7 @@ export interface IReaderSettings {
    fitPageToWindow: boolean;
    readerType: ReaderType;
    offsetFirstPage: boolean;
+    readerWidth: number;
 }

 export enum ChapterOffset {
--- a/src/util/readerSettings.ts
+++ b/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,
    );