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

16
src/modules/reader/utils/ReaderPager.utils.tsx
View File

@@ -17,7 +17,11 @@ import {
ReadingMode,
} from '@/modules/reader/types/Reader.types.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
import { isContinuousReadingMode, isReaderWidthEditable } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
import {
isContinuousReadingMode,
isContinuousVerticalReadingMode,
isReaderWidthEditable,
} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { ReaderPage } from '@/modules/reader/components/viewer/ReaderPage.tsx';
@@ -71,6 +75,10 @@ export const getImagePlaceholderStyling = (
minWidth: DEFAULT_SINGLE_PAGE_WIDTH,
minHeight: `calc(${DEFAULT_SINGLE_PAGE_HEIGHT} - ${scrollbarXSize}px)`,
},
[ReadingMode.WEBTOON]: {
minWidth: `calc(${DEFAULT_SINGLE_PAGE_WIDTH} - ${scrollbarYSize}px)`,
minHeight: '100vh',
},
};
const defaultStyling = READING_MODE_TO_PLACEHOLDER_SIZE[readingMode];
const minWidthForStretch = isDoublePage ? '50%' : '100%';
@@ -91,7 +99,7 @@ export const getImagePlaceholderStyling = (
...defaultStyling,
...applyStyles(shouldStretchPage, {
minHeight: `calc(100vh - ${scrollbarXSize}px)`,
...applyStyles(readingMode === ReadingMode.CONTINUOUS_VERTICAL, {
...applyStyles(isContinuousVerticalReadingMode(readingMode), {
minHeight: '100vh',
}),
}),
@@ -105,7 +113,7 @@ export const getImagePlaceholderStyling = (
...applyStyles(shouldStretchPage, {
minWidth: minWidthForStretch,
minHeight: `calc(100vh - ${scrollbarXSize}px)`,
...applyStyles(readingMode === ReadingMode.CONTINUOUS_VERTICAL, {
...applyStyles(isContinuousVerticalReadingMode(readingMode), {
minHeight: '100vh',
}),
}),
@@ -160,7 +168,7 @@ export const getImageWidthStyling = (
minWidth: 'unset',
minHeight: '100%',
}),
...applyStyles(readingMode === ReadingMode.CONTINUOUS_VERTICAL, {
...applyStyles(isContinuousVerticalReadingMode(readingMode), {
minWidth: width,
minHeight: 'unset',
}),

5
src/modules/reader/utils/ReaderSettings.utils.tsx
View File

@@ -15,4 +15,7 @@ export const isReaderWidthEditable = (pageScaleMode: IReaderSettings['pageScaleM
[ReaderPageScaleMode.WIDTH, ReaderPageScaleMode.SCREEN].includes(pageScaleMode);
export const isContinuousReadingMode = (readingMode: IReaderSettings['readingMode']): boolean =>
[ReadingMode.CONTINUOUS_VERTICAL, ReadingMode.CONTINUOUS_HORIZONTAL].includes(readingMode);
[ReadingMode.CONTINUOUS_VERTICAL, ReadingMode.CONTINUOUS_HORIZONTAL, ReadingMode.WEBTOON].includes(readingMode);
export const isContinuousVerticalReadingMode = (readingMode: IReaderSettings['readingMode']): boolean =>
[ReadingMode.CONTINUOUS_VERTICAL, ReadingMode.WEBTOON].includes(readingMode);