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

Fix click/scroll/hotkey open previous/next chapter

Browse Source 
Properly handle all combinations of theme and reader reading directions
This commit is contained in:
schroda
2024-12-09 13:58:17 +01:00
parent 3839b438eb
commit f654d95804
3 changed files with 57 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/modules/reader/components/ReaderHotkeys.tsx
View File

@@ -23,6 +23,7 @@ import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
import { HotkeyScope } from '@/modules/hotkeys/Hotkeys.types.ts';
import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
import { ScrollDirection, ScrollOffset } from '@/modules/core/Core.types.ts';
import { getOptionForDirection } from '@/theme.tsx';
const useHotkeys = (...args: Parameters<typeof useHotKeysHook>): ReturnType<typeof useHotKeysHook> => {
const [keys, callback, options, dependencies] = args;
@@ -44,6 +45,7 @@ export const ReaderHotkeys = ({
scrollElementRef: React.MutableRefObject<HTMLElement | null>;
}) => {
const { direction: themeDirection } = useTheme();
const readerThemeDirection = ReaderService.useGetThemeDirection();
const { enableScope, disableScope } = useHotkeysContext();
const { manga } = useReaderStateMangaContext();
const { isVisible, setIsVisible } = useReaderOverlayContext();
@@ -92,8 +94,16 @@ export const ReaderHotkeys = ({
{ preventDefault: true },
[readingMode.value, readingDirection.value, themeDirection, openChapter],
);
useHotkeys(hotkeys[ReaderHotkey.PREVIOUS_CHAPTER], () => openChapter('previous'), [openChapter]);
useHotkeys(hotkeys[ReaderHotkey.NEXT_CHAPTER], () => openChapter('next'), [openChapter]);
useHotkeys(
hotkeys[ReaderHotkey.PREVIOUS_CHAPTER],
() => openChapter(getOptionForDirection('previous', 'next', readerThemeDirection)),
[openChapter, readerThemeDirection],
);
useHotkeys(
hotkeys[ReaderHotkey.NEXT_CHAPTER],
() => openChapter(getOptionForDirection('next', 'previous', readerThemeDirection)),
[openChapter, readerThemeDirection],
);
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () => setIsVisible(!isVisible), [isVisible]);
useHotkeys(
hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE],

44
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx
View File

@@ -21,9 +21,8 @@ import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { ReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
import { ReaderNavBarDesktopNextPreviousButton } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx';
import { useGetOptionForDirection } from '@/theme.tsx';
import { getOptionForDirection } from '@/theme.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { ReaderResumeMode } from '@/modules/reader/types/Reader.types.ts';
export const ReaderNavBarDesktopChapterNavigation = ({
@@ -36,13 +35,10 @@ export const ReaderNavBarDesktopChapterNavigation = ({
'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'
>) => {
const { t } = useTranslation();
const { readingDirection } = ReaderService.useSettings();
const getOptionForDirection = useGetOptionForDirection();
const readerThemeDirection = ReaderService.useGetThemeDirection();
const popupState = usePopupState({ variant: 'popover', popupId: 'reader-nav-bar-desktop-chapter-list' });
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
useLayoutEffect(() => {
popupState.close();
}, [currentChapter?.id]);
@@ -53,16 +49,26 @@ export const ReaderNavBarDesktopChapterNavigation = ({
component={Link}
type="previous"
title={t(
getOptionForDirection('reader.button.previous_chapter', 'reader.button.next_chapter', direction),
getOptionForDirection(
'reader.button.previous_chapter',
'reader.button.next_chapter',
readerThemeDirection,
),
)}
disabled={getOptionForDirection(!previousChapter, !nextChapter, direction)}
disabled={getOptionForDirection(!previousChapter, !nextChapter, readerThemeDirection)}
to={getOptionForDirection(
previousChapter && Chapters.getReaderUrl(previousChapter),
nextChapter && Chapters.getReaderUrl(nextChapter),
direction,
readerThemeDirection,
)}
replace
state={{ resumeMode: getOptionForDirection(ReaderResumeMode.END, ReaderResumeMode.START) }}
state={{
resumeMode: getOptionForDirection(
ReaderResumeMode.END,
ReaderResumeMode.START,
readerThemeDirection,
),
}}
/>
<FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
<InputLabel id="reader-nav-bar-desktop-chapter-select">{t('chapter.title_one')}</InputLabel>
@@ -85,16 +91,26 @@ export const ReaderNavBarDesktopChapterNavigation = ({
component={Link}
type="next"
title={t(
getOptionForDirection('reader.button.next_chapter', 'reader.button.previous_chapter', direction),
getOptionForDirection(
'reader.button.next_chapter',
'reader.button.previous_chapter',
readerThemeDirection,
),
)}
disabled={getOptionForDirection(!nextChapter, !previousChapter, direction)}
disabled={getOptionForDirection(!nextChapter, !previousChapter, readerThemeDirection)}
to={getOptionForDirection(
nextChapter && Chapters.getReaderUrl(nextChapter),
previousChapter && Chapters.getReaderUrl(previousChapter),
direction,
readerThemeDirection,
)}
replace
state={{ resumeMode: getOptionForDirection(ReaderResumeMode.START, ReaderResumeMode.END) }}
state={{
resumeMode: getOptionForDirection(
ReaderResumeMode.START,
ReaderResumeMode.END,
readerThemeDirection,
),
}}
/>
<Popover
{...bindPopover(popupState)}

31
src/modules/reader/services/ReaderControls.ts
View File

@@ -88,14 +88,14 @@ export class ReaderControls {
const areReadingDirectionsEqual = themeDirection === themeDirectionOfReadingDirection;
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
const isAtStartY = element.scrollTop === 0;
const isAtStartY = Math.abs(element.scrollTop) <= 1;
const isAtEndY =
Math.floor(element.scrollTop) === element.scrollHeight - element.clientHeight ||
Math.ceil(element.scrollTop) === element.scrollHeight - element.clientHeight;
const isAtStartX = element.scrollLeft === 0;
const isAtStartX = Math.abs(element.scrollLeft) <= 1;
const isAtEndX =
Math.floor(Math.abs(element.scrollLeft)) === element.scrollWidth - element.clientWidth ||
Math.ceil(Math.abs(element.scrollLeft)) === element.scrollWidth - element.clientWidth;
element.scrollWidth - element.clientWidth - Math.floor(Math.abs(element.scrollLeft)) <= 1 ||
element.scrollWidth - element.clientWidth - Math.ceil(Math.abs(element.scrollLeft)) <= 1;
const isAtStartXForDirection = areReadingDirectionsEqual ? isAtStartX : isAtEndX;
const isAtEndXForDirection = areReadingDirectionsEqual ? isAtEndX : isAtStartX;
@@ -108,12 +108,12 @@ export class ReaderControls {
switch (direction) {
case ScrollDirection.X:
if (isAtStartXForDirection && offset === ScrollOffset.BACKWARD && isContinuousReadingModeActive) {
openChapter('previous', 'ltr');
openChapter('previous');
return;
}
if (isAtEndXForDirection && offset === ScrollOffset.FORWARD && isContinuousReadingModeActive) {
openChapter('next', 'ltr');
openChapter('next');
return;
}
@@ -124,12 +124,12 @@ export class ReaderControls {
break;
case ScrollDirection.Y:
if (isAtStartY && offset === ScrollOffset.BACKWARD && isContinuousReadingModeActive) {
openChapter('previous', 'ltr');
openChapter('previous');
return;
}
if (isAtEndY && offset === ScrollOffset.FORWARD && isContinuousReadingModeActive) {
openChapter('next', 'ltr');
openChapter('next');
return;
}
@@ -143,28 +143,27 @@ export class ReaderControls {
}
}
static useOpenChapter(): (offset: 'previous' | 'next', forceDirection?: Direction) => void {
const { readingDirection, readingMode } = ReaderService.useSettings();
static useOpenChapter(): (offset: 'previous' | 'next') => void {
const { readingMode } = ReaderService.useSettings();
const { previousChapter, nextChapter } = useReaderStateChaptersContext();
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
return useCallback(
(offset, forceDirection = direction) => {
(offset) => {
switch (offset) {
case 'previous':
getOptionForDirection(openPreviousChapter, openNextChapter, forceDirection)();
openPreviousChapter();
break;
case 'next':
getOptionForDirection(openNextChapter, openPreviousChapter, forceDirection)();
openNextChapter();
break;
default:
throw new Error(`Unexpected "offset" (${offset})`);
}
},
[direction, openPreviousChapter, openNextChapter, readingMode.value],
[openPreviousChapter, openNextChapter, readingMode.value],
);
}
@@ -390,7 +389,7 @@ export class ReaderControls {
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
const scrollDirection =
readingMode.value === ReadingMode.CONTINUOUS_HORIZONTAL ? ScrollDirection.X : ScrollDirection.Y;
console.log('click', action);
switch (action) {
case TapZoneRegionType.MENU:
setIsOverlayVisible((isVisible) => isStaticNav || !isVisible);