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

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