ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reader transition page

Browse Source
This commit is contained in:
schroda
2024-12-03 18:00:46 +01:00
parent 7cf78e771a
commit fb31a92cd7
19 changed files with 423 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/locales/en.json
View File

@@ -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": {

6
src/modules/reader/components/ReaderHotkeys.tsx
View File

@@ -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]);

8
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
View File

@@ -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
currentPageIndex={currentPageIndex}
setPageToScrollToIndex={setPageToScrollToIndex}
pages={pages}
/>
<ReaderNavBarDesktopPageNavigation currentPageIndex={currentPageIndex} pages={pages} />
<ReaderNavBarDesktopChapterNavigation
chapters={chapters}
currentChapter={currentChapter}

5
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx
View File

@@ -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}>

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

@@ -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>

185
src/modules/reader/components/viewer/ReaderTransitionPage.tsx Normal file
View File

@@ -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>
);
};

12
src/modules/reader/components/viewer/ReaderViewer.tsx
View File

@@ -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[pageToScrollToPagesIndex];
const imageRef = imageRefs.current[pageToScrollTo.pagesIndex];
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];

31
src/modules/reader/components/viewer/pager/BasePager.tsx
View File

@@ -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) => {
// eslint-disable-next-line no-param-reassign
imageRefs.current[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>
);
};

6
src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx
View File

@@ -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),

2
src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx
View File

@@ -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),

4
src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx
View File

@@ -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,
)

2
src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx
View File

@@ -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),

3
src/modules/reader/contexts/state/ReaderStatePagesContext.tsx
View File

@@ -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);

8
src/modules/reader/contexts/state/ReaderStatePagesContextProvider.tsx
View File

@@ -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>;

146
src/modules/reader/services/ReaderControls.ts
View File

@@ -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 {
const { currentPageIndex, setPageToScrollToIndex, pages } = userReaderStatePagesContext();
const { readingDirection } = ReaderService.useSettings();
static useOpenPage(): (page: number | 'previous' | 'next', forceDirection?: Direction) => void {
const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } =
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) => {
switch (offset) {
(page, forceDirection = direction) => {
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],
);
}
}

10
src/modules/reader/types/Reader.types.ts
View File

@@ -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,
}

4
src/modules/reader/types/ReaderProgressBar.types.ts
View File

@@ -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

9
src/modules/reader/utils/ReaderPager.utils.tsx
View File

@@ -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);

7
src/modules/reader/utils/ReaderProgressBar.utils.tsx
View File

@@ -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]);
};