Reader transition page

public/locales/en.json

@@ -235,7 +235,7 @@
       "label": {
         "downloading": "Downloading",
         "error": "Error",
-        "finished": "Finished",
+        "finished": "$t(global.label.finished)",
         "queued": "Queued"
       }
     },
@@ -407,6 +407,7 @@
       "discord": "Discord",
       "display": "Display",
       "filter": "Filter",
+      "finished": "Finished",
       "general": "General",
       "github": "GitHub",
       "hidden": "Hidden",
@@ -805,6 +806,7 @@
     },
     "error": {
       "label": {
+        "chapter_not_found": "Chapter does not exist",
         "next_chapter_does_not_exist": "There is no next chapter to open",
         "no_pages_found": "No pages found",
         "prev_chapter_does_not_exist": "There is no previous chapter to open"
@@ -929,7 +931,19 @@
         "reader_settings": "Reader Settings"
       }
     },
-    "title": "Reader — Manga {{mangaId}} Chapter {{chapterIndex}}"
+    "title": "Reader — Manga {{mangaId}} Chapter {{chapterIndex}}",
+    "transition_page": {
+      "current": "Current:",
+      "exit": {
+        "manga_page": "Exit to manga page",
+        "previous_page": "Exit to previous page"
+      },
+      "finished": "$t(global.label.finished):",
+      "first_chapter": "There is no previous chapter",
+      "last_chapter": "There is no next chapter",
+      "next": "$t(global.label.next):",
+      "previous": "$t(global.label.previous):"
+    }
   },
   "search": {
     "error": {

src/modules/reader/components/ReaderHotkeys.tsx

@@ -65,10 +65,11 @@ export const ReaderHotkeys = ({
                 CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION[readingMode.value],
                 readingDirection.value,
                 scrollElementRef.current,
+                openChapter,
                 ReaderScrollAmount.SMALL,
             ),
         { preventDefault: true },
-        [readingMode.value, readingDirection.value],
+        [readingMode.value, readingDirection.value, openChapter],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.SCROLL_FORWARD],
@@ -79,10 +80,11 @@ export const ReaderHotkeys = ({
                 CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION[readingMode.value],
                 readingDirection.value,
                 scrollElementRef.current,
+                openChapter,
                 ReaderScrollAmount.SMALL,
             ),
         { preventDefault: true },
-        [readingMode.value, readingDirection.value],
+        [readingMode.value, readingDirection.value, openChapter],
     );
     useHotkeys(hotkeys[ReaderHotkey.PREVIOUS_CHAPTER], () => openChapter('previous'), [openChapter]);
     useHotkeys(hotkeys[ReaderHotkey.NEXT_CHAPTER], () => openChapter('next'), [openChapter]);

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -57,7 +57,7 @@ export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDes
     const { setReaderNavBarWidth } = useNavBarContext();
     const { manga } = useReaderStateMangaContext();
     const { chapters, currentChapter, nextChapter, previousChapter } = useReaderStateChaptersContext();
-    const { pages, currentPageIndex, setPageToScrollToIndex } = userReaderStatePagesContext();
+    const { pages, currentPageIndex } = userReaderStatePagesContext();
 
     const getOptionForDirection = useGetOptionForDirection();
 
@@ -126,11 +126,7 @@ export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDes
                 </Stack>
                 <Stack sx={{ p: 2, gap: 2 }}>
                     <Stack sx={{ gap: 1 }}>
-                        <ReaderNavBarDesktopPageNavigation
+                        <ReaderNavBarDesktopPageNavigation currentPageIndex={currentPageIndex} pages={pages} />
-                            currentPageIndex={currentPageIndex}
-                            setPageToScrollToIndex={setPageToScrollToIndex}
-                            pages={pages}
-                        />
                         <ReaderNavBarDesktopChapterNavigation
                             chapters={chapters}
                             currentChapter={currentChapter}

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx

@@ -23,9 +23,8 @@ import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants
 
 export const ReaderNavBarDesktopPageNavigation = ({
     currentPageIndex,
-    setPageToScrollToIndex,
     pages,
-}: Pick<ReaderStatePages, 'currentPageIndex' | 'setPageToScrollToIndex' | 'pages'>) => {
+}: Pick<ReaderStatePages, 'currentPageIndex' | 'pages'>) => {
     const { t } = useTranslation();
     const openPage = ReaderControls.useOpenPage();
     const { readingDirection } = ReaderService.useSettings();
@@ -52,7 +51,7 @@ export const ReaderNavBarDesktopPageNavigation = ({
                     labelId="reader-nav-bar-desktop-page-select"
                     label={t('reader.page_info.label.page')}
                     value={currentPage.primary.index}
-                    onChange={(e) => setPageToScrollToIndex(e.target.value as number)}
+                    onChange={(e) => openPage(e.target.value as number)}
                 >
                     {pages.map(({ primary: { index }, name }) => (
                         <MenuItem key={index} value={index}>

src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx

@@ -20,7 +20,6 @@ import { ReaderProgressBarSlotsContainer } from '@/modules/reader/components/ove
 import { ProgressBarHighlightReadPages } from '@/modules/reader/components/overlay/progress-bar/ProgressBarHighlightReadPages.tsx';
 import { ReaderProgressBarCurrentPageSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx';
 import {
-    getNextPageIndex,
     getPage,
     getPageForMousePos,
     getProgressBarPositionInfo,
@@ -29,13 +28,13 @@ import {
 import { getOptionForDirection as getOptionForDirectionImpl } from '@/theme.tsx';
 import { ReaderProgressBarSlotsActionArea } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotsActionArea.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
 
 export const ReaderProgressBar = ({
     totalPages,
     pages,
     pageLoadStates,
     currentPageIndex,
-    setPageToScrollToIndex,
     slotProps,
     slots,
     createProgressBarSlot,
@@ -65,12 +64,13 @@ export const ReaderProgressBar = ({
     };
 }) => {
     const { isDragging, setIsDragging } = useReaderProgressBarContext();
+    const openPage = ReaderControls.useOpenPage();
+    const direction = ReaderService.useGetThemeDirection();
 
     const progressBarRef = useRef<HTMLDivElement | null>(null);
 
     const isHorizontalPosition = getProgressBarPositionInfo(progressBarPosition).isHorizontal;
     const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
-    const direction = ReaderService.useGetThemeDirection();
     const getOptionForDirection = useCallback(
         <T,>(...args: Parameters<typeof getOptionForDirectionImpl<T>>) =>
             getOptionForDirectionImpl(args[0], args[1], direction),
@@ -78,10 +78,10 @@ export const ReaderProgressBar = ({
     );
 
     useHandleProgressDragging(
+        openPage,
         progressBarRef,
         isDragging,
         currentPage,
-        setPageToScrollToIndex,
         pages,
         progressBarPosition,
         getOptionForDirection,
@@ -101,7 +101,7 @@ export const ReaderProgressBar = ({
                             ? (slotProps?.progressBarPageTexts?.current?.sx ?? [])
                             : [slotProps?.progressBarPageTexts?.current?.sx]),
                     ]}
-                    onClick={() => setPageToScrollToIndex(getNextPageIndex('previous', currentPage.pagesIndex, pages))}
+                    onClick={() => openPage('previous', 'ltr')}
                 >
                     {currentPage.name}
                 </ReaderProgressBarPageNumber>
@@ -115,7 +115,7 @@ export const ReaderProgressBar = ({
                                 return;
                             }
 
-                            setPageToScrollToIndex(
+                            openPage(
                                 getPageForMousePos(
                                     event.touches[0],
                                     progressBarRef.current.getBoundingClientRect(),
@@ -132,7 +132,7 @@ export const ReaderProgressBar = ({
                                 return;
                             }
 
-                            setPageToScrollToIndex(
+                            openPage(
                                 getPageForMousePos(
                                     event,
                                     progressBarRef.current.getBoundingClientRect(),
@@ -195,7 +195,7 @@ export const ReaderProgressBar = ({
                             ? (slotProps?.progressBarPageTexts?.total?.sx ?? [])
                             : [slotProps?.progressBarPageTexts?.total?.sx]),
                     ]}
-                    onClick={() => setPageToScrollToIndex(getNextPageIndex('next', currentPage.pagesIndex, pages))}
+                    onClick={() => openPage('next', 'ltr')}
                 >
                     {totalPages}
                 </ReaderProgressBarPageNumber>

src/modules/reader/components/viewer/ReaderTransitionPage.tsx

@@ -0,0 +1,185 @@
+/*
+ * 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 Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
+import Button from '@mui/material/Button';
+import { Link } from 'react-router-dom';
+import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
+import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
+import { ChapterScanlatorInfo } from '@/modules/chapter/services/Chapters.ts';
+import { TChapterReader } from '@/modules/chapter/Chapter.types.ts';
+import {
+    IReaderSettings,
+    ReaderPageScaleMode,
+    ReaderTransitionPageMode,
+    ReadingMode,
+} from '@/modules/reader/types/Reader.types.ts';
+import { isTransitionPageVisible } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
+import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+
+const ChapterInfo = ({
+    title,
+    chapter,
+}: {
+    title: string;
+    chapter?: Pick<TChapterReader, 'name'> & ChapterScanlatorInfo;
+}) => {
+    if (!chapter) {
+        return null;
+    }
+
+    return (
+        <Stack>
+            <Typography>{title}</Typography>
+            <Typography variant="h6" component="h1">
+                {chapter.name}
+            </Typography>
+            {chapter.scanlator && (
+                <Typography variant="body2" color="textDisabled">
+                    {chapter.scanlator}
+                </Typography>
+            )}
+        </Stack>
+    );
+};
+
+export const ReaderTransitionPage = ({
+    type,
+    mode,
+    readingMode,
+    pageScaleMode,
+}: Pick<IReaderSettings, 'readingMode' | 'pageScaleMode'> & {
+    type: Exclude<ReaderTransitionPageMode, ReaderTransitionPageMode.NONE | ReaderTransitionPageMode.BOTH>;
+    mode: ReaderTransitionPageMode;
+}) => {
+    const { t } = useTranslation();
+
+    const handleBack = useBackButton();
+    const { manga } = useReaderStateMangaContext();
+    const { currentChapter, nextChapter, previousChapter } = useReaderStateChaptersContext();
+    const { scrollbarXSize, scrollbarYSize } = useReaderScrollbarContext();
+    const { readerNavBarWidth } = useNavBarContext();
+
+    const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS;
+    const isNextType = type === ReaderTransitionPageMode.NEXT;
+
+    const isFirstChapter = !!currentChapter && !previousChapter;
+    const isLastChapter = !!currentChapter && !nextChapter;
+
+    const isFitWidthPageScaleMode = [ReaderPageScaleMode.SCREEN, ReaderPageScaleMode.WIDTH].includes(pageScaleMode);
+
+    if (!isTransitionPageVisible(type, mode, readingMode)) {
+        return null;
+    }
+
+    return (
+        <Stack
+            sx={{
+                minWidth: `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px)`,
+                minHeight: `calc(100vh - ${scrollbarXSize}px)`,
+                justifyContent: 'center',
+                alignItems: 'center',
+                ...applyStyles(isContinuousReadingMode(readingMode), {
+                    position: 'relative',
+                    transform: 'scale(1)',
+                    ...applyStyles(readingMode === ReadingMode.CONTINUOUS_VERTICAL, {
+                        maxWidth: '100%',
+                        width: '100%',
+                        ...applyStyles(!isFitWidthPageScaleMode, { alignItems: 'baseline' }),
+                    }),
+                    ...applyStyles(readingMode === ReadingMode.CONTINUOUS_HORIZONTAL, {
+                        maxHeight: '100%',
+                        height: '100%',
+                        justifyContent: 'unset',
+                    }),
+                }),
+            }}
+        >
+            <Stack
+                sx={{
+                    gap: 2,
+                    maxWidth: `calc(100vw - ${scrollbarYSize}px)`,
+                    maxHeight: `calc(100vh - ${scrollbarXSize}px)`,
+                    width: 'max-content',
+                    p: 1,
+                    ...applyStyles(isContinuousReadingMode(readingMode), {
+                        position: 'sticky',
+                        ...applyStyles(
+                            // on small screens with "fit to with" enabled, "left 50%" does not center the element in the
+                            // viewport which then causes "translate" to move the element mostly outside the viewport with
+                            // only a small part of it being visible
+                            !isFitWidthPageScaleMode && readingMode === ReadingMode.CONTINUOUS_VERTICAL,
+                            {
+                                left: '50%',
+                                transform: 'translateX(-50%)',
+                            },
+                        ),
+                        ...applyStyles(readingMode === ReadingMode.CONTINUOUS_HORIZONTAL, {
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                        }),
+                    }),
+                }}
+            >
+                {isPreviousType && isFirstChapter && (
+                    <Typography variant="h6">{t('reader.transition_page.first_chapter')}</Typography>
+                )}
+                <Stack sx={{ gap: 5 }}>
+                    {isPreviousType && !isFirstChapter && (
+                        <ChapterInfo title={t('reader.transition_page.previous')} chapter={previousChapter} />
+                    )}
+                    {!!currentChapter && (
+                        <ChapterInfo
+                            title={t(
+                                isPreviousType ? 'reader.transition_page.current' : 'reader.transition_page.finished',
+                            )}
+                            chapter={currentChapter}
+                        />
+                    )}
+                    {isNextType && !isLastChapter && (
+                        <ChapterInfo title={t('reader.transition_page.next')} chapter={nextChapter} />
+                    )}
+                </Stack>
+                {isNextType && isLastChapter && (
+                    <Typography variant="h6">{t('reader.transition_page.last_chapter')}</Typography>
+                )}
+                {((isPreviousType && isFirstChapter) || (isNextType && isLastChapter)) && (
+                    <Stack sx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
+                        <Button
+                            sx={{ flexGrow: 1 }}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                handleBack();
+                            }}
+                            variant="contained"
+                        >
+                            {t('reader.transition_page.exit.previous_page')}
+                        </Button>
+                        <Button
+                            sx={{ flexGrow: 1 }}
+                            component={Link}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
+                            variant="contained"
+                            to={`/manga/${manga?.id}`}
+                        >
+                            {t('reader.transition_page.exit.manga_page')}
+                        </Button>
+                    </Stack>
+                )}
+            </Stack>
+        </Stack>
+    );
+};

src/modules/reader/components/viewer/ReaderViewer.tsx

@@ -48,6 +48,7 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
         totalPages,
         pageUrls,
         setPageLoadStates,
+        transitionPageMode,
     } = userReaderStatePagesContext();
     const { readingMode, shouldOffsetDoubleSpreads, readingDirection } = ReaderService.useSettings();
     const { setScrollbarXSize, setScrollbarYSize } = useReaderScrollbarContext();
@@ -127,17 +128,19 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
         }
     }, [actualPages, readingMode.value]);
 
-    // optionally scroll selected page into view in continues reading modes
+    // handle user page selection
     useLayoutEffect(() => {
+        const pageToScrollTo = getPage(pageToScrollToIndex, pages);
+
         if (isContinuousReadingMode(readingMode.value)) {
-            const pageToScrollToPagesIndex = getPage(pageToScrollToIndex, pages).pagesIndex;
+            const imageRef = imageRefs.current[pageToScrollTo.pagesIndex];
-            const imageRef = imageRefs.current[pageToScrollToPagesIndex];
             imageRef?.scrollIntoView({
                 block: 'start',
                 inline: 'start',
             });
-            setCurrentPageIndex(pageToScrollToPagesIndex);
         }
+
+        setCurrentPageIndex(pageToScrollTo.primary.index);
     }, [pageToScrollToIndex]);
 
     // invert x and y scrolling for the continuous horizontal reading mode
@@ -187,6 +190,7 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
                 totalPages={totalPages}
                 currentPageIndex={currentPageIndex}
                 pages={actualPages}
+                transitionPageMode={transitionPageMode}
                 imageRefs={imageRefs}
                 onLoad={(pagesIndex, isPrimary = true) => {
                     const page = actualPages[pagesIndex];

src/modules/reader/components/viewer/pager/BasePager.tsx

@@ -13,11 +13,13 @@ import { getImageWidthStyling, getPageIndexesToLoad } from '@/modules/reader/uti
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { isContinuousReadingMode, isReaderWidthEditable } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
-import { ReaderPagerProps } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderPagerProps, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderTransitionPage } from '@/modules/reader/components/viewer/ReaderTransitionPage.tsx';
 
 export const BasePager = ({
     currentPageIndex,
     pages,
+    transitionPageMode,
     imageRefs,
     createPage,
     slots,
@@ -26,6 +28,7 @@ export const BasePager = ({
         page: ReaderStatePages['pages'][number],
         pagesIndex: number,
         shouldLoad: boolean,
+        shouldDisplay: boolean,
         setRef: (element: HTMLElement | null) => void,
     ) => ReactNode;
     slots?: { stackProps?: StackProps };
@@ -64,12 +67,30 @@ export const BasePager = ({
                 }),
             ]}
         >
+            <ReaderTransitionPage
+                type={ReaderTransitionPageMode.PREVIOUS}
+                mode={transitionPageMode}
+                readingMode={readingMode.value}
+                pageScaleMode={pageScaleMode.value}
+            />
             {pages.map((page, pagesIndex) =>
-                createPage(page, pagesIndex, pagesIndexesToRender.includes(pagesIndex), (element) => {
+                createPage(
+                    page,
+                    pagesIndex,
+                    pagesIndexesToRender.includes(pagesIndex),
+                    [ReaderTransitionPageMode.NONE, ReaderTransitionPageMode.BOTH].includes(transitionPageMode),
+                    (element) => {
                         // eslint-disable-next-line no-param-reassign
                         imageRefs.current[pagesIndex] = element;
-                }),
+                    },
+                ),
             )}
+            <ReaderTransitionPage
+                type={ReaderTransitionPageMode.NEXT}
+                mode={transitionPageMode}
+                readingMode={readingMode.value}
+                pageScaleMode={pageScaleMode.value}
+            />
         </Stack>
     );
 };

src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx

@@ -49,7 +49,7 @@ export const ReaderDoublePagedPager = ({ onLoad, ...props }: ReaderPagerProps) =
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad) => {
+            createPage={(page, pagesIndex, shouldLoad, shouldDisplay) => {
                 const { primary, secondary } = page;
 
                 const currentSecondaryPageIndex = currentPage.secondary?.index ?? currentPage.primary.index;
@@ -64,7 +64,7 @@ export const ReaderDoublePagedPager = ({ onLoad, ...props }: ReaderPagerProps) =
                             page,
                             () => onLoad?.(pagesIndex),
                             shouldLoad,
-                            isPrimaryPage,
+                            shouldDisplay && isPrimaryPage,
                             currentPage.primary.index,
                             totalPages,
                             hasSecondaryPage
@@ -77,7 +77,7 @@ export const ReaderDoublePagedPager = ({ onLoad, ...props }: ReaderPagerProps) =
                                 { ...page, primary: { ...page.secondary! } },
                                 () => onLoad?.(pagesIndex, false),
                                 shouldLoad,
-                                isSecondaryPage,
+                                shouldDisplay && isSecondaryPage,
                                 currentSecondaryPageIndex,
                                 totalPages,
                                 getPagePosition('second', themeDirection, readingDirection.value),

src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx

@@ -24,7 +24,7 @@ export const ReaderHorizontalPager = ({ onLoad, ...props }: ReaderPagerProps) =>
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, setRef) =>
+            createPage={(page, pagesIndex, shouldLoad, _, setRef) =>
                 createReaderPage(
                     page,
                     () => onLoad?.(pagesIndex),

src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx

@@ -16,12 +16,12 @@ export const ReaderPagedPager = ({ onLoad, ...props }: ReaderPagerProps) => {
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad) =>
+            createPage={(page, pagesIndex, shouldLoad, shouldDisplay) =>
                 createReaderPage(
                     page,
                     () => onLoad?.(pagesIndex),
                     shouldLoad,
-                    currentPageIndex === page.primary.index,
+                    shouldDisplay && currentPageIndex === page.primary.index,
                     currentPageIndex,
                     totalPages,
                 )

src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx

@@ -19,7 +19,7 @@ export const ReaderVerticalPager = ({ onLoad, ...props }: ReaderPagerProps) => {
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, setRef) =>
+            createPage={(page, pagesIndex, shouldLoad, _, setRef) =>
                 createReaderPage(
                     page,
                     () => onLoad?.(pagesIndex),

src/modules/reader/contexts/state/ReaderStatePagesContext.tsx

@@ -8,6 +8,7 @@
 
 import { createContext, useContext } from 'react';
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
 
 export const ReaderStatePagesContext = createContext<ReaderStatePages>({
     totalPages: 0,
@@ -22,6 +23,8 @@ export const ReaderStatePagesContext = createContext<ReaderStatePages>({
     setPageLoadStates: () => undefined,
     pages: [],
     setPages: () => undefined,
+    transitionPageMode: ReaderTransitionPageMode.NONE,
+    setTransitionPageMode: () => undefined,
 });
 
 export const userReaderStatePagesContext = () => useContext(ReaderStatePagesContext);

src/modules/reader/contexts/state/ReaderStatePagesContextProvider.tsx

@@ -9,6 +9,7 @@
 import { ContextType, ReactNode, useMemo, useState } from 'react';
 import { ReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { createPageData } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+import { ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
 
 type TContext = ContextType<typeof ReaderStatePagesContext>;
 
@@ -19,6 +20,9 @@ export const ReaderStatePagesContextProvider = ({ children }: { children: ReactN
     const [pageUrls, setPageUrls] = useState<TContext['pageUrls']>([]);
     const [pageLoadStates, setPageLoadStates] = useState<TContext['pageLoadStates']>([]);
     const [pages, setPages] = useState<TContext['pages']>([createPageData('', 0)]);
+    const [transitionPageMode, setTransitionPageMode] = useState<TContext['transitionPageMode']>(
+        ReaderTransitionPageMode.NONE,
+    );
 
     const value = useMemo(
         () => ({
@@ -34,8 +38,10 @@ export const ReaderStatePagesContextProvider = ({ children }: { children: ReactN
             setPageLoadStates,
             pages,
             setPages,
+            transitionPageMode,
+            setTransitionPageMode,
         }),
-        [totalPages, pages, currentPageIndex, pageToScrollToIndex, pageUrls, pageLoadStates],
+        [totalPages, pages, currentPageIndex, pageToScrollToIndex, pageUrls, pageLoadStates, transitionPageMode],
     );
 
     return <ReaderStatePagesContext.Provider value={value}>{children}</ReaderStatePagesContext.Provider>;

src/modules/reader/services/ReaderControls.ts

@@ -13,7 +13,12 @@ import { getNextPageIndex, getPage } from '@/modules/reader/utils/ReaderProgress
 import { getOptionForDirection } from '@/theme.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
-import { PageInViewportType, ReadingDirection, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+import {
+    PageInViewportType,
+    ReadingDirection,
+    ReadingMode,
+    ReaderTransitionPageMode,
+} from '@/modules/reader/types/Reader.types.ts';
 import { ScrollDirection, ScrollOffset } from '@/modules/core/Core.types.ts';
 import { ReaderScrollAmount } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { isPageInViewport } from '@/modules/reader/utils/ReaderPager.utils.tsx';
@@ -45,12 +50,22 @@ export class ReaderControls {
         direction: ScrollDirection,
         readingDirection: ReadingDirection,
         element: HTMLElement,
+        openChapter: ReturnType<(typeof ReaderControls)['useOpenChapter']>,
         scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
     ): void {
         if (!element) {
             return;
         }
 
+        const isAtStartY = element.scrollTop === 0;
+        const isAtEndY =
+            Math.floor(element.scrollTop) === element.scrollHeight - element.clientHeight ||
+            Math.ceil(element.scrollTop) === element.scrollHeight - element.clientHeight;
+        const isAtStartX = element.scrollLeft === 0;
+        const isAtEndX =
+            Math.floor(element.scrollLeft) === element.scrollWidth - element.clientWidth ||
+            Math.ceil(element.scrollLeft) === element.scrollWidth - element.clientWidth;
+
         const scrollAmount = scrollAmountPercentage / 100;
         const scrollDirection = SCROLL_DIRECTION_BY_SCROLL_OFFSET_BY_READING_DIRECTION[readingDirection][offset];
 
@@ -59,12 +74,32 @@ export class ReaderControls {
 
         switch (direction) {
             case ScrollDirection.X:
+                if (isAtStartX && offset === ScrollOffset.BACKWARD) {
+                    openChapter('previous');
+                    return;
+                }
+
+                if (isAtEndX && offset === ScrollOffset.FORWARD) {
+                    openChapter('next');
+                    return;
+                }
+
                 element.scroll({
                     left: getNewScrollPosition(element.scrollLeft, element.clientWidth),
                     behavior: 'smooth',
                 });
                 break;
             case ScrollDirection.Y:
+                if (isAtStartY && offset === ScrollOffset.BACKWARD) {
+                    openChapter('previous');
+                    return;
+                }
+
+                if (isAtEndY && offset === ScrollOffset.FORWARD) {
+                    openChapter('next');
+                    return;
+                }
+
                 element.scroll({
                     top: getNewScrollPosition(element.scrollTop, element.clientHeight),
                     behavior: 'smooth',
@@ -76,7 +111,7 @@ export class ReaderControls {
     }
 
     static useOpenChapter(): (offset: 'previous' | 'next') => void {
-        const { readingDirection } = ReaderService.useSettings();
+        const { readingDirection, readingMode } = ReaderService.useSettings();
         const { previousChapter, nextChapter } = useReaderStateChaptersContext();
         const direction = READING_DIRECTION_TO_DIRECTION[readingDirection.value];
 
@@ -96,13 +131,16 @@ export class ReaderControls {
                         throw new Error(`Unexpected "offset" (${offset})`);
                 }
             },
-            [direction, openPreviousChapter, openNextChapter],
+            [direction, openPreviousChapter, openNextChapter, readingMode.value],
         );
     }
 
-    static useOpenPage(): (offset: 'previous' | 'next') => void {
+    static useOpenPage(): (page: number | 'previous' | 'next', forceDirection?: Direction) => void {
-        const { currentPageIndex, setPageToScrollToIndex, pages } = userReaderStatePagesContext();
+        const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } =
-        const { readingDirection } = ReaderService.useSettings();
+            userReaderStatePagesContext();
+        const { previousChapter, nextChapter } = useReaderStateChaptersContext();
+        const { readingDirection, readingMode } = ReaderService.useSettings();
+        const openChapter = ReaderControls.useOpenChapter();
 
         const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
         const previousPageIndex = useMemo(
@@ -115,20 +153,85 @@ export class ReaderControls {
         );
         const direction = READING_DIRECTION_TO_DIRECTION[readingDirection.value];
 
+        const isFirstPage = currentPageIndex === 0;
+        const isLastPage = currentPageIndex === pages[pages.length - 1].primary.index;
+        const isATransitionPageVisible = transitionPageMode !== ReaderTransitionPageMode.NONE;
+        const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
+
         return useCallback(
-            (offset) => {
+            (page, forceDirection = direction) => {
-                switch (offset) {
+                const convertedPage = getOptionForDirection(
+                    page,
+                    page === 'previous' ? 'next' : 'previous',
+                    forceDirection,
+                );
+
+                const shouldOpenPreviousChapter =
+                    isFirstPage && isATransitionPageVisible && convertedPage === 'previous' && !!previousChapter;
+                if (shouldOpenPreviousChapter) {
+                    openChapter('previous');
+                    return;
+                }
+
+                const shouldOpenNextChapter =
+                    isLastPage && isATransitionPageVisible && convertedPage === 'next' && !!nextChapter;
+                if (shouldOpenNextChapter) {
+                    openChapter('next');
+                    return;
+                }
+
+                const hideTransitionPage = () => setTransitionPageMode(ReaderTransitionPageMode.NONE);
+
+                if (typeof page === 'number') {
+                    setPageToScrollToIndex(page);
+                    hideTransitionPage();
+                    return;
+                }
+
+                const needToHideTransitionPage = isATransitionPageVisible && !isContinuousReadingModeActive;
+                switch (convertedPage) {
                     case 'previous':
-                        setPageToScrollToIndex(getOptionForDirection(previousPageIndex, nextPageIndex, direction));
+                        if (isFirstPage) {
+                            setTransitionPageMode(ReaderTransitionPageMode.PREVIOUS);
+                            return;
+                        }
+
+                        if (needToHideTransitionPage) {
+                            hideTransitionPage();
+                            return;
+                        }
+
+                        setPageToScrollToIndex(previousPageIndex);
                         break;
                     case 'next':
-                        setPageToScrollToIndex(getOptionForDirection(nextPageIndex, previousPageIndex, direction));
+                        if (isLastPage) {
+                            setTransitionPageMode(ReaderTransitionPageMode.NEXT);
+                            return;
+                        }
+
+                        if (needToHideTransitionPage) {
+                            hideTransitionPage();
+                            return;
+                        }
+
+                        setPageToScrollToIndex(nextPageIndex);
                         break;
                     default:
-                        throw new Error(`Unexpected "offset" (${offset})`);
+                        throw new Error(`Unexpected "offset" (${page})`);
                 }
             },
-            [direction, previousPageIndex, nextPageIndex],
+            [
+                direction,
+                previousPageIndex,
+                nextPageIndex,
+                isATransitionPageVisible,
+                isContinuousReadingModeActive,
+                isFirstPage,
+                isLastPage,
+                openChapter,
+                !!previousChapter,
+                !!nextChapter,
+            ],
         );
     }
 
@@ -153,6 +256,7 @@ export class ReaderControls {
         const { setShowPreview } = useReaderTapZoneContext();
         const { readingMode, readingDirection, isStaticNav } = ReaderService.useSettings();
         const openPage = ReaderControls.useOpenPage();
+        const openChapter = ReaderControls.useOpenChapter();
 
         return useCallback(
             (e) => {
@@ -177,14 +281,26 @@ export class ReaderControls {
                         break;
                     case TapZoneRegionType.PREVIOUS:
                         if (isContinuousReadingModeActive) {
-                            this.scroll(ScrollOffset.BACKWARD, scrollDirection, readingDirection.value, scrollElement);
+                            this.scroll(
+                                ScrollOffset.BACKWARD,
+                                scrollDirection,
+                                readingDirection.value,
+                                scrollElement,
+                                openChapter,
+                            );
                         } else {
                             openPage('previous');
                         }
                         break;
                     case TapZoneRegionType.NEXT:
                         if (isContinuousReadingModeActive) {
-                            this.scroll(ScrollOffset.FORWARD, scrollDirection, readingDirection.value, scrollElement);
+                            this.scroll(
+                                ScrollOffset.FORWARD,
+                                scrollDirection,
+                                readingDirection.value,
+                                scrollElement,
+                                openChapter,
+                            );
                         } else {
                             openPage('next');
                         }
@@ -193,7 +309,7 @@ export class ReaderControls {
                         throw new Error(`Unexpected "TapZoneRegionType" (${action})`);
                 }
             },
-            [scrollElement, currentPageIndex, pages, readingMode.value, openPage, readingDirection.value],
+            [scrollElement, currentPageIndex, pages, readingMode.value, openPage, readingDirection.value, openChapter],
         );
     }
 }

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

@@ -197,7 +197,8 @@ export enum ReaderHotkey {
     OFFSET_SPREAD_PAGES,
 }
 
-export interface ReaderPagerProps extends Pick<ReaderStatePages, 'currentPageIndex' | 'pages' | 'totalPages'> {
+export interface ReaderPagerProps
+    extends Pick<ReaderStatePages, 'currentPageIndex' | 'pages' | 'totalPages' | 'transitionPageMode'> {
     imageRefs: MutableRefObject<(HTMLElement | null)[]>;
     onLoad?: (pagesIndex: number, isPrimary?: boolean) => void;
 }
@@ -206,3 +207,10 @@ export enum PageInViewportType {
     X,
     Y,
 }
+
+export enum ReaderTransitionPageMode {
+    NONE,
+    PREVIOUS,
+    NEXT,
+    BOTH,
+}

src/modules/reader/types/ReaderProgressBar.types.ts

@@ -8,7 +8,7 @@
 
 import { BoxProps } from '@mui/material/Box';
 import { TooltipProps } from '@mui/material/Tooltip';
-import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
+import { IReaderSettings, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
 
 interface SinglePageData {
     index: number;
@@ -35,6 +35,8 @@ export interface ReaderStatePages {
     setPageLoadStates: React.Dispatch<React.SetStateAction<boolean[]>>;
     pages: PageData[];
     setPages: React.Dispatch<React.SetStateAction<PageData[]>>;
+    transitionPageMode: ReaderTransitionPageMode;
+    setTransitionPageMode: React.Dispatch<React.SetStateAction<ReaderTransitionPageMode>>;
 }
 
 export interface ReaderProgressBarProps

src/modules/reader/utils/ReaderPager.utils.tsx

@@ -13,10 +13,11 @@ import {
     PageInViewportType,
     ReaderPageScaleMode,
     ReadingDirection,
+    ReaderTransitionPageMode,
     ReadingMode,
 } from '@/modules/reader/types/Reader.types.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
-import { isReaderWidthEditable } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
+import { isContinuousReadingMode, isReaderWidthEditable } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { ReaderPage } from '@/modules/reader/components/viewer/ReaderPage.tsx';
@@ -367,3 +368,9 @@ export const getPageIndexesToLoad = (
         .fill(1)
         .map((_, index) => startPagesIndex + index * directionInvert);
 };
+
+export const isTransitionPageVisible = (
+    mode: ReaderTransitionPageMode,
+    activeMode: ReaderTransitionPageMode,
+    readingMode: IReaderSettings['readingMode'],
+): boolean => [ReaderTransitionPageMode.BOTH, mode].includes(activeMode) || isContinuousReadingMode(readingMode);

src/modules/reader/utils/ReaderProgressBar.utils.tsx

@@ -10,6 +10,7 @@ import { RefObject, useEffect } from 'react';
 import { ReaderProgressBarProps, TReaderProgressCurrentPage } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { getOptionForDirection as getOptionForDirectionImpl } from '@/theme.tsx';
 import { ProgressBarPosition } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
 
 export const getPage = (pageIndex: number, pages: ReaderProgressBarProps['pages']): TReaderProgressCurrentPage => {
     const pagesIndex = pages.findIndex(({ primary, secondary }) =>
@@ -82,10 +83,10 @@ export const getProgressBarPositionInfo = (
 };
 
 export const useHandleProgressDragging = (
+    openPage: ReturnType<(typeof ReaderControls)['useOpenPage']>,
     progressBarRef: RefObject<HTMLDivElement | null>,
     isDragging: boolean,
     currentPage: TReaderProgressCurrentPage,
-    setPageToScrollToIndex: (pageIndex: number) => void,
     pages: ReaderProgressBarProps['pages'],
     progressBarPosition: ProgressBarPosition,
     getOptionForDirection: typeof getOptionForDirectionImpl,
@@ -115,7 +116,7 @@ export const useHandleProgressDragging = (
                 return;
             }
 
-            setPageToScrollToIndex(newPageIndex);
+            openPage(newPageIndex);
         };
 
         const handleMouseMove = (e: MouseEvent) => {
@@ -135,5 +136,5 @@ export const useHandleProgressDragging = (
             document.removeEventListener('mousemove', handleMouseMove);
             document.removeEventListener('touchmove', handleTouchMove);
         };
-    }, [isDragging, currentPage, pages, progressBarPosition]);
+    }, [openPage, isDragging, currentPage, pages, progressBarPosition]);
 };