Reader page rendering
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user