Add "automatic scrolling"

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopAutoScroll.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTranslation } from 'react-i18next';
+import Button from '@mui/material/Button';
+import PauseCircleFilledIcon from '@mui/icons-material/PauseCircleFilled';
+import PlayCircleFilledIcon from '@mui/icons-material/PlayCircleFilled';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import { useRef } from 'react';
+import { useReaderAutoScrollContext } from '@/modules/reader/contexts/ReaderAutoScrollContext.tsx';
+import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
+import { AUTO_SCROLL_SPEED } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+
+export const ReaderNavBarDesktopAutoScroll = ({
+    autoScroll,
+    setAutoScroll,
+}: Pick<IReaderSettings, 'autoScroll'> & {
+    setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void;
+}) => {
+    const { t } = useTranslation();
+    const { isActive, toggleActive } = useReaderAutoScrollContext();
+
+    const updateTimeout = useRef<NodeJS.Timeout>();
+
+    return (
+        <Stack sx={{ flexDirection: 'row', gap: 1 }}>
+            <Button
+                sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
+                size="large"
+                onClick={toggleActive}
+                color={isActive ? 'secondary' : 'primary'}
+                variant="contained"
+                startIcon={isActive ? <PauseCircleFilledIcon /> : <PlayCircleFilledIcon />}
+            >
+                {t('reader.settings.auto_scroll.title')}
+            </Button>
+            <TextField
+                value={autoScroll.value}
+                type="number"
+                onBlur={(e) => {
+                    const value = +e.target.value;
+
+                    if (value !== autoScroll.value) {
+                        clearTimeout(updateTimeout.current);
+                        setAutoScroll({ ...autoScroll, value }, true);
+                    }
+                }}
+                onChange={(e) => {
+                    const value = +e.target.value;
+                    setAutoScroll({ ...autoScroll, value }, false);
+
+                    clearTimeout(updateTimeout.current);
+                    updateTimeout.current = setTimeout(() => setAutoScroll({ ...autoScroll, value }, true), 1000);
+                }}
+                slotProps={{
+                    input: {
+                        inputProps: AUTO_SCROLL_SPEED,
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                {t('global.time.seconds.second', { count: autoScroll.value })}
+                            </InputAdornment>
+                        ),
+                    },
+                }}
+            />
+        </Stack>
+    );
+};

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx

@@ -20,6 +20,7 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts';
+import { ReaderNavBarDesktopAutoScroll } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopAutoScroll.tsx';
 
 const BaseReaderNavBarDesktopQuickSettings = ({
     manga,
@@ -28,12 +29,18 @@ const BaseReaderNavBarDesktopQuickSettings = ({
     pageScaleMode,
     shouldStretchPage,
     readingDirection,
+    autoScroll,
     openSettings,
 }: Pick<TReaderStateMangaContext, 'manga'> &
     Pick<ReaderNavBarDesktopProps, 'openSettings'> &
     Pick<
         IReaderSettingsWithDefaultFlag,
-        'readingMode' | 'shouldOffsetDoubleSpreads' | 'pageScaleMode' | 'shouldStretchPage' | 'readingDirection'
+        | 'readingMode'
+        | 'shouldOffsetDoubleSpreads'
+        | 'pageScaleMode'
+        | 'shouldStretchPage'
+        | 'readingDirection'
+        | 'autoScroll'
     >) => {
     const { t } = useTranslation();
 
@@ -66,6 +73,10 @@ const BaseReaderNavBarDesktopQuickSettings = ({
                 isDefaultable
                 onDefault={() => deleteSetting('readingDirection')}
             />
+            <ReaderNavBarDesktopAutoScroll
+                autoScroll={autoScroll}
+                setAutoScroll={(...args) => updateSetting('autoScroll', ...args)}
+            />
             <Button
                 onClick={() => openSettings()}
                 size="large"
@@ -82,5 +93,13 @@ const BaseReaderNavBarDesktopQuickSettings = ({
 export const ReaderNavBarDesktopQuickSettings = withPropsFrom(
     BaseReaderNavBarDesktopQuickSettings,
     [useReaderStateMangaContext, ReaderService.useSettings],
-    ['manga', 'readingMode', 'shouldOffsetDoubleSpreads', 'pageScaleMode', 'shouldStretchPage', 'readingDirection'],
+    [
+        'manga',
+        'readingMode',
+        'shouldOffsetDoubleSpreads',
+        'pageScaleMode',
+        'shouldStretchPage',
+        'readingDirection',
+        'autoScroll',
+    ],
 );

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -84,7 +84,7 @@ const BaseReaderBottomBarMobile = ({
                                     <FormatListBulletedIcon />
                                 </IconButton>
                             </Tooltip>
-                            <Tooltip title={t('reader.settings.label.reader_type')}>
+                            <Tooltip title={t('reader.settings.title.quick_settings')}>
                                 <IconButton {...bindTrigger(quickSettingsPopupState)} size="large" color="inherit">
                                     <AppSettingsAltIcon />
                                 </IconButton>

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx

@@ -8,21 +8,34 @@
 
 import Stack from '@mui/material/Stack';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ReaderSettingReadingMode } from '@/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx';
 import { ReaderSettingReadingDirection } from '@/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
-import { IReaderSettingsWithDefaultFlag, TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.ts';
+import {
+    IReaderSettingsWithDefaultFlag,
+    TReaderAutoScrollContext,
+    TReaderStateMangaContext,
+} from '@/modules/reader/types/Reader.types.ts';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts';
+import { ReaderSettingAutoScroll } from '@/modules/reader/components/settings/behaviour/ReaderSettingAutoScroll.tsx';
+import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.tsx';
+import { useReaderAutoScrollContext } from '@/modules/reader/contexts/ReaderAutoScrollContext.tsx';
 
 const BaseReaderBottomBarMobileQuickSettings = ({
     manga,
     readingMode,
     readingDirection,
+    autoScroll,
+    isActive,
+    toggleActive,
 }: Pick<TReaderStateMangaContext, 'manga'> &
-    Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection'>) => {
+    Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection' | 'autoScroll'> &
+    Pick<TReaderAutoScrollContext, 'isActive' | 'toggleActive'>) => {
+    const { t } = useTranslation();
     const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? FALLBACK_MANGA);
 
     if (!manga) {
@@ -44,12 +57,21 @@ const BaseReaderBottomBarMobileQuickSettings = ({
                 isDefaultable
                 onDefault={() => deleteSetting('readingDirection')}
             />
+            <CheckboxInput
+                label={t('reader.settings.auto_scroll.title')}
+                checked={isActive}
+                onChange={() => toggleActive()}
+            />
+            <ReaderSettingAutoScroll
+                autoScroll={autoScroll}
+                setAutoScroll={(...args) => ReaderService.updateSetting(manga, 'autoScroll', ...args)}
+            />
         </Stack>
     );
 };
 
 export const ReaderBottomBarMobileQuickSettings = withPropsFrom(
     memo(BaseReaderBottomBarMobileQuickSettings),
-    [useReaderStateMangaContext, ReaderService.useSettings],
-    ['manga', 'readingMode', 'readingDirection'],
+    [useReaderStateMangaContext, ReaderService.useSettings, useReaderAutoScrollContext],
+    ['manga', 'readingMode', 'readingDirection', 'autoScroll', 'isActive', 'toggleActive'],
 );