Add "auto webtoon mode" option to reader

src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx

@@ -8,6 +8,8 @@
 
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { IReaderSettingsWithDefaultFlag, ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts';
 import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.tsx';
@@ -46,6 +48,18 @@ export const ReaderBehaviourSettings = ({
                     onChange={(_, checked) => updateSetting('shouldOffsetDoubleSpreads', checked)}
                 />
             )}
+            <CheckboxInput
+                label={
+                    <Box>
+                        <Typography>{t('reader.settings.auto_webtoon_mode.title')}</Typography>
+                        <Typography variant="body2" color="textDisabled">
+                            {t('reader.settings.auto_webtoon_mode.description')}
+                        </Typography>
+                    </Box>
+                }
+                checked={settings.shouldUseAutoWebtoonMode}
+                onChange={(_, checked) => updateSetting('shouldUseAutoWebtoonMode', checked)}
+            />
             <SliderInput
                 label={t('reader.settings.image_preload_amount')}
                 value={settings.imagePreLoadAmount}

src/modules/reader/constants/ReaderSettings.constants.tsx

@@ -55,6 +55,7 @@ const GLOBAL_READER_SETTING_OBJECT: Record<keyof IReaderSettingsGlobal, undefine
     backgroundColor: undefined,
     hotkeys: undefined,
     imagePreLoadAmount: undefined,
+    shouldUseAutoWebtoonMode: undefined,
 };
 
 export const GLOBAL_READER_SETTING_KEYS = Object.keys(GLOBAL_READER_SETTING_OBJECT);
@@ -123,6 +124,7 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
         [ReaderHotkey.CYCLE_READING_DIRECTION]: ['t'],
     },
     imagePreLoadAmount: 5,
+    shouldUseAutoWebtoonMode: true,
 };
 
 export const READER_PROGRESS_BAR_POSITION_TO_PLACEMENT: Record<ProgressBarPosition, TooltipProps['placement']> = {

src/modules/reader/screens/Reader.tsx

@@ -42,6 +42,7 @@ import {
     ReaderResumeMode,
     ReaderStateChapters,
     ReaderTransitionPageMode,
+    ReadingMode,
     TReaderStateMangaContext,
     TReaderStateSettingsContext,
 } from '@/modules/reader/types/Reader.types.ts';
@@ -52,7 +53,7 @@ import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.type
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
-import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts';
+import { isAutoWebtoonMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
 
 const BaseReader = ({
     setTitle,
@@ -221,25 +222,36 @@ const BaseReader = ({
 
     // set settings state
     useEffect(() => {
-        if (!mangaResponse.data?.manga || defaultSettingsResponse.loading || defaultSettingsResponse.error) {
+        const mangaFromResponse = mangaResponse.data?.manga;
+        if (!mangaFromResponse || defaultSettingsResponse.loading || defaultSettingsResponse.error) {
             return;
         }
 
-        const settingsWithDefaultProfileFallback = getReaderSettingsFor(
-            mangaResponse.data?.manga ?? FALLBACK_MANGA,
-            defaultSettings,
+        const settingsWithDefaultProfileFallback = getReaderSettingsFor(mangaFromResponse, defaultSettings);
+
+        const shouldUseWebtoonMode = isAutoWebtoonMode(
+            mangaFromResponse,
+            settingsWithDefaultProfileFallback.shouldUseAutoWebtoonMode,
+            settingsWithDefaultProfileFallback.readingMode,
         );
 
-        const profile = settingsWithDefaultProfileFallback.readingMode.value;
+        const defaultSettingsWithAutoReadingMode = {
+            ...defaultSettings,
+            readingMode: shouldUseWebtoonMode ? ReadingMode.WEBTOON : defaultSettings.readingMode,
+        };
+
+        const profile = shouldUseWebtoonMode
+            ? ReadingMode.WEBTOON
+            : settingsWithDefaultProfileFallback.readingMode.value;
         const profileSettings = getReaderSettings(
             'global',
             { meta: defaultSettingsMetadata! },
-            defaultSettings,
+            defaultSettingsWithAutoReadingMode,
             undefined,
             profile,
         );
 
-        setSettings(getReaderSettingsFor(mangaResponse.data!.manga, profileSettings));
+        setSettings(getReaderSettingsFor(mangaFromResponse, profileSettings));
     }, [mangaResponse.data?.manga, defaultSettings]);
 
     // set chapters state

src/modules/reader/types/Reader.types.ts

@@ -123,6 +123,7 @@ export interface IReaderSettingsGlobal {
     backgroundColor: ReaderBackgroundColor;
     hotkeys: Record<ReaderHotkey, string[]>;
     imagePreLoadAmount: number;
+    shouldUseAutoWebtoonMode: boolean;
 }
 
 export interface IReaderSettingsManga {

src/modules/reader/utils/ReaderSettings.utils.tsx

@@ -6,7 +6,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { IReaderSettings, ReaderPageScaleMode, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+import {
+    IReaderSettings,
+    IReaderSettingsWithDefaultFlag,
+    ReaderPageScaleMode,
+    ReadingMode,
+} from '@/modules/reader/types/Reader.types.ts';
+import { MangaGenreInfo, MangaSourceNameInfo } from '@/modules/manga/Manga.types.ts';
+import { Mangas } from '@/modules/manga/services/Mangas.ts';
 
 export const isOffsetDoubleSpreadPagesEditable = (readingMode: IReaderSettings['readingMode']): boolean =>
     readingMode === ReadingMode.DOUBLE_PAGE;
@@ -19,3 +26,9 @@ export const isContinuousReadingMode = (readingMode: IReaderSettings['readingMod
 
 export const isContinuousVerticalReadingMode = (readingMode: IReaderSettings['readingMode']): boolean =>
     [ReadingMode.CONTINUOUS_VERTICAL, ReadingMode.WEBTOON].includes(readingMode);
+
+export const isAutoWebtoonMode = (
+    manga: MangaGenreInfo & MangaSourceNameInfo,
+    shouldUseAutoWebtoonMode: IReaderSettings['shouldUseAutoWebtoonMode'],
+    readingMode: IReaderSettingsWithDefaultFlag['readingMode'],
+): boolean => shouldUseAutoWebtoonMode && readingMode.isDefault && Mangas.isLongStripType(manga);