Reader page rendering

This commit is contained in:
schroda
2024-11-06 13:00:36 +01:00
parent 0b1c67ce9f
commit 7cf78e771a
28 changed files with 1243 additions and 69 deletions

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, setCurrentPageIndex } = userReaderStatePagesContext();
const { pages, currentPageIndex, setPageToScrollToIndex } = userReaderStatePagesContext();
const getOptionForDirection = useGetOptionForDirection();
@@ -128,7 +128,7 @@ export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDes
<Stack sx={{ gap: 1 }}>
<ReaderNavBarDesktopPageNavigation
currentPageIndex={currentPageIndex}
setCurrentPageIndex={setCurrentPageIndex}
setPageToScrollToIndex={setPageToScrollToIndex}
pages={pages}
/>
<ReaderNavBarDesktopChapterNavigation

View File

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

View File

@@ -35,7 +35,7 @@ export const ReaderProgressBar = ({
pages,
pageLoadStates,
currentPageIndex,
setCurrentPageIndex,
setPageToScrollToIndex,
slotProps,
slots,
createProgressBarSlot,
@@ -81,7 +81,7 @@ export const ReaderProgressBar = ({
progressBarRef,
isDragging,
currentPage,
setCurrentPageIndex,
setPageToScrollToIndex,
pages,
progressBarPosition,
getOptionForDirection,
@@ -101,7 +101,7 @@ export const ReaderProgressBar = ({
? (slotProps?.progressBarPageTexts?.current?.sx ?? [])
: [slotProps?.progressBarPageTexts?.current?.sx]),
]}
onClick={() => setCurrentPageIndex(getNextPageIndex('previous', currentPage.pagesIndex, pages))}
onClick={() => setPageToScrollToIndex(getNextPageIndex('previous', currentPage.pagesIndex, pages))}
>
{currentPage.name}
</ReaderProgressBarPageNumber>
@@ -115,7 +115,7 @@ export const ReaderProgressBar = ({
return;
}
setCurrentPageIndex(
setPageToScrollToIndex(
getPageForMousePos(
event.touches[0],
progressBarRef.current.getBoundingClientRect(),
@@ -132,7 +132,7 @@ export const ReaderProgressBar = ({
return;
}
setCurrentPageIndex(
setPageToScrollToIndex(
getPageForMousePos(
event,
progressBarRef.current.getBoundingClientRect(),
@@ -195,7 +195,7 @@ export const ReaderProgressBar = ({
? (slotProps?.progressBarPageTexts?.total?.sx ?? [])
: [slotProps?.progressBarPageTexts?.total?.sx]),
]}
onClick={() => setCurrentPageIndex(getNextPageIndex('next', currentPage.pagesIndex, pages))}
onClick={() => setPageToScrollToIndex(getNextPageIndex('next', currentPage.pagesIndex, pages))}
>
{totalPages}
</ReaderProgressBarPageNumber>