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

Add "Webtoon" reading mode

Browse Source
This commit is contained in:
schroda
2024-12-16 16:26:32 +01:00
parent 74f78e40d4
commit 942d8699c1
10 changed files with 62 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/modules/reader/components/viewer/ReaderTransitionPage.tsx
View File

@@ -25,7 +25,10 @@ import { isTransitionPageVisible } from '@/modules/reader/utils/ReaderPager.util
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 {
isContinuousReadingMode,
isContinuousVerticalReadingMode,
} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
@@ -94,7 +97,7 @@ export const ReaderTransitionPage = ({
...applyStyles(isContinuousReadingMode(readingMode), {
position: 'relative',
transform: 'scale(1)',
...applyStyles(readingMode === ReadingMode.CONTINUOUS_VERTICAL, {
...applyStyles(isContinuousVerticalReadingMode(readingMode), {
maxWidth: '100%',
width: '100%',
...applyStyles(!isFitWidthPageScaleMode, { alignItems: 'baseline' }),
@@ -120,7 +123,7 @@ export const ReaderTransitionPage = ({
// 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,
!isFitWidthPageScaleMode && isContinuousVerticalReadingMode(readingMode),
{
left: '50%',
transform: 'translateX(-50%)',

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

@@ -45,6 +45,7 @@ const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType>
[ReadingMode.DOUBLE_PAGE]: PageInViewportType.X,
[ReadingMode.CONTINUOUS_VERTICAL]: PageInViewportType.Y,
[ReadingMode.CONTINUOUS_HORIZONTAL]: PageInViewportType.X,
[ReadingMode.WEBTOON]: PageInViewportType.Y,
};
export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | null>) => {
@@ -111,6 +112,7 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
case ReadingMode.DOUBLE_PAGE:
return ReaderDoublePagedPager;
case ReadingMode.CONTINUOUS_VERTICAL:
case ReadingMode.WEBTOON:
return ReaderVerticalPager;
case ReadingMode.CONTINUOUS_HORIZONTAL:
return ReaderHorizontalPager;

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

@@ -8,7 +8,7 @@
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 { ReaderPagerProps, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
export const ReaderVerticalPager = ({
@@ -20,7 +20,9 @@ export const ReaderVerticalPager = ({
}: ReaderPagerProps) => {
const { currentPageIndex, totalPages } = props;
const { pageGap } = ReaderService.useSettings();
const { readingMode, pageGap } = ReaderService.useSettings();
const isWebtoonMode = readingMode.value === ReadingMode.WEBTOON;
const actualPageGap = isWebtoonMode ? 0 : pageGap;
return (
<BasePager
@@ -46,7 +48,7 @@ export const ReaderVerticalPager = ({
margin: 'auto',
flexWrap: 'nowrap',
alignItems: 'center',
gap: `${pageGap.value}px`,
gap: `${actualPageGap}px`,
},
},
}}