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

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)}