Reader page rendering
This commit is contained in:
schroda
75
src/modules/reader/components/viewer/pager/BasePager.tsx
Normal file
75
src/modules/reader/components/viewer/pager/BasePager.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
/*
|
||||
* 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 Stack, { StackProps } from '@mui/material/Stack';
|
||||
import { ReactNode, useEffect, useMemo, useRef } from 'react';
|
||||
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
|
||||
import { getImageWidthStyling, getPageIndexesToLoad } from '@/modules/reader/utils/ReaderPager.utils.tsx';
|
||||
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';
|
||||
|
||||
export const BasePager = ({
|
||||
currentPageIndex,
|
||||
pages,
|
||||
imageRefs,
|
||||
createPage,
|
||||
slots,
|
||||
}: ReaderPagerProps & {
|
||||
createPage: (
|
||||
page: ReaderStatePages['pages'][number],
|
||||
pagesIndex: number,
|
||||
shouldLoad: boolean,
|
||||
setRef: (element: HTMLElement | null) => void,
|
||||
) => ReactNode;
|
||||
slots?: { stackProps?: StackProps };
|
||||
}) => {
|
||||
const { readingMode, pageScaleMode, shouldStretchPage, readerWidth, imagePreLoadAmount } =
|
||||
ReaderService.useSettings();
|
||||
|
||||
const previousCurrentPageIndex = useRef(-1);
|
||||
const pagesIndexesToRender = useMemo(
|
||||
() => getPageIndexesToLoad(currentPageIndex, pages, previousCurrentPageIndex.current, imagePreLoadAmount),
|
||||
[currentPageIndex, pages, imagePreLoadAmount],
|
||||
);
|
||||
useEffect(() => {
|
||||
previousCurrentPageIndex.current = currentPageIndex;
|
||||
}, [pagesIndexesToRender]);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
{...slots?.stackProps}
|
||||
sx={[
|
||||
...(Array.isArray(slots?.stackProps?.sx) ? (slots?.stackProps?.sx ?? []) : [slots?.stackProps?.sx]),
|
||||
getImageWidthStyling(
|
||||
readingMode.value,
|
||||
shouldStretchPage.value,
|
||||
pageScaleMode.value,
|
||||
false,
|
||||
readerWidth.value,
|
||||
),
|
||||
applyStyles(!!readerWidth?.value.enabled && isReaderWidthEditable(pageScaleMode.value), {
|
||||
alignItems: 'center',
|
||||
// both continuous pagers have content that causes scrollbars, centering this content causes content
|
||||
// to be cut off
|
||||
...applyStyles(!isContinuousReadingMode(readingMode.value), {
|
||||
justifyContent: 'center',
|
||||
}),
|
||||
}),
|
||||
]}
|
||||
>
|
||||
{pages.map((page, pagesIndex) =>
|
||||
createPage(page, pagesIndex, pagesIndexesToRender.includes(pagesIndex), (element) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
imageRefs.current[pagesIndex] = element;
|
||||
}),
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,108 @@
|
||||
/*
|
||||
* 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 { Direction, useTheme } from '@mui/material/styles';
|
||||
import { Fragment, useMemo } from 'react';
|
||||
import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
|
||||
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
|
||||
import { ReaderPagerProps, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
|
||||
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
|
||||
import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
|
||||
import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
|
||||
|
||||
const getPagePosition = (
|
||||
pageType: 'first' | 'second',
|
||||
themeDirection: Direction,
|
||||
readingDirection: ReadingDirection,
|
||||
): 'left' | 'right' => {
|
||||
const isLtrReadingDirection = readingDirection === ReadingDirection.LTR;
|
||||
|
||||
if (pageType === 'first') {
|
||||
if (themeDirection === 'ltr') {
|
||||
return isLtrReadingDirection ? 'right' : 'left';
|
||||
}
|
||||
|
||||
return isLtrReadingDirection ? 'left' : 'right';
|
||||
}
|
||||
|
||||
if (themeDirection === 'ltr') {
|
||||
return isLtrReadingDirection ? 'left' : 'right';
|
||||
}
|
||||
|
||||
return isLtrReadingDirection ? 'right' : 'left';
|
||||
};
|
||||
|
||||
export const ReaderDoublePagedPager = ({ onLoad, ...props }: ReaderPagerProps) => {
|
||||
const { currentPageIndex, pages, totalPages } = props;
|
||||
|
||||
const { readingDirection } = ReaderService.useSettings();
|
||||
const { direction: themeDirection } = useTheme();
|
||||
|
||||
const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
|
||||
const isLtrReadingDirection = readingDirection.value === ReadingDirection.LTR;
|
||||
|
||||
return (
|
||||
<BasePager
|
||||
{...props}
|
||||
createPage={(page, pagesIndex, shouldLoad) => {
|
||||
const { primary, secondary } = page;
|
||||
|
||||
const currentSecondaryPageIndex = currentPage.secondary?.index ?? currentPage.primary.index;
|
||||
|
||||
const hasSecondaryPage = !!secondary;
|
||||
const isPrimaryPage = currentPage.primary.index === primary.index;
|
||||
const isSecondaryPage = !!secondary && currentSecondaryPageIndex === secondary.index;
|
||||
|
||||
return (
|
||||
<Fragment key={`${primary.url}_${secondary?.url}`}>
|
||||
{createReaderPage(
|
||||
page,
|
||||
() => onLoad?.(pagesIndex),
|
||||
shouldLoad,
|
||||
isPrimaryPage,
|
||||
currentPage.primary.index,
|
||||
totalPages,
|
||||
hasSecondaryPage
|
||||
? getPagePosition('first', themeDirection, readingDirection.value)
|
||||
: undefined,
|
||||
hasSecondaryPage,
|
||||
)}
|
||||
{hasSecondaryPage &&
|
||||
createReaderPage(
|
||||
{ ...page, primary: { ...page.secondary! } },
|
||||
() => onLoad?.(pagesIndex, false),
|
||||
shouldLoad,
|
||||
isSecondaryPage,
|
||||
currentSecondaryPageIndex,
|
||||
totalPages,
|
||||
getPagePosition('second', themeDirection, readingDirection.value),
|
||||
true,
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}}
|
||||
slots={{
|
||||
stackProps: {
|
||||
sx: {
|
||||
margin: 'auto',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
...applyStyles(themeDirection === 'ltr', {
|
||||
flexDirection: isLtrReadingDirection ? 'row' : 'row-reverse',
|
||||
}),
|
||||
...applyStyles(themeDirection === 'rtl', {
|
||||
flexDirection: isLtrReadingDirection ? 'row-reverse' : 'row',
|
||||
}),
|
||||
flexWrap: 'nowrap',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
* 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 { useTheme } from '@mui/material/styles';
|
||||
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
|
||||
import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
|
||||
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
|
||||
import { ReaderPagerProps, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
|
||||
import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
|
||||
|
||||
export const ReaderHorizontalPager = ({ onLoad, ...props }: ReaderPagerProps) => {
|
||||
const { currentPageIndex, totalPages } = props;
|
||||
|
||||
const { pageGap, readingDirection } = ReaderService.useSettings();
|
||||
const { direction: themeDirection } = useTheme();
|
||||
|
||||
const isLtrReadingDirection = readingDirection.value === ReadingDirection.LTR;
|
||||
|
||||
return (
|
||||
<BasePager
|
||||
{...props}
|
||||
createPage={(page, pagesIndex, shouldLoad, setRef) =>
|
||||
createReaderPage(
|
||||
page,
|
||||
() => onLoad?.(pagesIndex),
|
||||
shouldLoad,
|
||||
true,
|
||||
currentPageIndex,
|
||||
totalPages,
|
||||
undefined,
|
||||
undefined,
|
||||
setRef,
|
||||
)
|
||||
}
|
||||
slots={{
|
||||
stackProps: {
|
||||
sx: {
|
||||
my: 'auto',
|
||||
...applyStyles(themeDirection === 'ltr', {
|
||||
flexDirection: isLtrReadingDirection ? 'row' : 'row-reverse',
|
||||
justifyContent: isLtrReadingDirection ? 'flex-start' : 'flex-end',
|
||||
}),
|
||||
...applyStyles(themeDirection === 'rtl', {
|
||||
flexDirection: isLtrReadingDirection ? 'row-reverse' : 'row',
|
||||
justifyContent: isLtrReadingDirection ? 'flex-end' : 'flex-start',
|
||||
}),
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
gap: `${pageGap.value}px`,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,38 @@
|
||||
/*
|
||||
* 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 { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
|
||||
import { ReaderPagerProps } from '@/modules/reader/types/Reader.types.ts';
|
||||
import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
|
||||
|
||||
export const ReaderPagedPager = ({ onLoad, ...props }: ReaderPagerProps) => {
|
||||
const { currentPageIndex, totalPages } = props;
|
||||
|
||||
return (
|
||||
<BasePager
|
||||
{...props}
|
||||
createPage={(page, pagesIndex, shouldLoad) =>
|
||||
createReaderPage(
|
||||
page,
|
||||
() => onLoad?.(pagesIndex),
|
||||
shouldLoad,
|
||||
currentPageIndex === page.primary.index,
|
||||
currentPageIndex,
|
||||
totalPages,
|
||||
)
|
||||
}
|
||||
slots={{
|
||||
stackProps: {
|
||||
sx: {
|
||||
margin: 'auto',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
* 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 { ReaderService } from '@/modules/reader/services/ReaderService.ts';
|
||||
import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
|
||||
import { ReaderPagerProps } from '@/modules/reader/types/Reader.types.ts';
|
||||
import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
|
||||
|
||||
export const ReaderVerticalPager = ({ onLoad, ...props }: ReaderPagerProps) => {
|
||||
const { currentPageIndex, totalPages } = props;
|
||||
|
||||
const { pageGap } = ReaderService.useSettings();
|
||||
|
||||
return (
|
||||
<BasePager
|
||||
{...props}
|
||||
createPage={(page, pagesIndex, shouldLoad, setRef) =>
|
||||
createReaderPage(
|
||||
page,
|
||||
() => onLoad?.(pagesIndex),
|
||||
shouldLoad,
|
||||
true,
|
||||
currentPageIndex,
|
||||
totalPages,
|
||||
undefined,
|
||||
undefined,
|
||||
setRef,
|
||||
)
|
||||
}
|
||||
slots={{
|
||||
stackProps: {
|
||||
sx: {
|
||||
margin: 'auto',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
gap: `${pageGap.value}px`,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user