From f654d958044fff7b95efc4ff9e78073640e3ec3c Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Mon, 9 Dec 2024 13:58:17 +0100 Subject: [PATCH] Fix click/scroll/hotkey open previous/next chapter Properly handle all combinations of theme and reader reading directions --- .../reader/components/ReaderHotkeys.tsx | 14 +++++- .../ReaderNavBarDesktopChapterNavigation.tsx | 44 +++++++++++++------ src/modules/reader/services/ReaderControls.ts | 31 +++++++------ 3 files changed, 57 insertions(+), 32 deletions(-) diff --git a/src/modules/reader/components/ReaderHotkeys.tsx b/src/modules/reader/components/ReaderHotkeys.tsx index ed72a1a1..c3e1ca6e 100644 --- a/src/modules/reader/components/ReaderHotkeys.tsx +++ b/src/modules/reader/components/ReaderHotkeys.tsx @@ -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): ReturnType => { const [keys, callback, options, dependencies] = args; @@ -44,6 +45,7 @@ export const ReaderHotkeys = ({ scrollElementRef: React.MutableRefObject; }) => { 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], diff --git a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx index 637cbea6..93e9feef 100644 --- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx +++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx @@ -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, + ), + }} /> {t('chapter.title_one')} @@ -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, + ), + }} /> 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);