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

Add dedicated store access util functions

Browse Source 
Makes it easier to find the specific store slice usage
This commit is contained in:
schroda
2025-09-21 00:50:19 +02:00
parent ed488f76dd
commit 525173e05e
28 changed files with 247 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/features/reader/auto-scroll/ReaderAutoScroll.tsx
View File

@@ -17,7 +17,11 @@ import { useAutomaticScrolling } from '@/base/hooks/useAutomaticScrolling.ts';
import { CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
getReaderAutoScrollStore,
useReaderAutoScrollStore,
useReaderSettingsStore,
} from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderAutoScroll = ({
themeDirection,
@@ -26,11 +30,11 @@ const BaseReaderAutoScroll = ({
themeDirection: Direction;
combinedDirection: Direction;
}) => {
const { scrollRef, direction } = useReaderStore((state) => ({
const { scrollRef, direction } = useReaderAutoScrollStore((state) => ({
scrollRef: state.autoScroll.scrollRef,
direction: state.autoScroll.direction,
}));
const { readingMode, autoScroll } = useReaderStore((state) => ({
const { readingMode, autoScroll } = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode.value,
autoScroll: state.settings.autoScroll,
}));
@@ -60,7 +64,7 @@ const BaseReaderAutoScroll = ({
);
useEffect(() => {
const autoScrollStore = getReaderStore().autoScroll;
const autoScrollStore = getReaderAutoScrollStore();
autoScrollStore.setIsActive(automaticScrolling.isActive);
autoScrollStore.setIsPaused(automaticScrolling.isPaused);

4
src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx
View File

@@ -17,7 +17,7 @@ import { useRef } from 'react';
import { IReaderSettings } from '@/features/reader/Reader.types.ts';
import { AUTO_SCROLL_SPEED } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { coerceIn } from '@/lib/HelperFunctions.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderAutoScrollStore } from '@/features/reader/stores/ReaderStore.ts';
export const ReaderNavBarDesktopAutoScroll = ({
autoScroll,
@@ -26,7 +26,7 @@ export const ReaderNavBarDesktopAutoScroll = ({
setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void;
}) => {
const { t } = useTranslation();
const { isActive, toggleActive } = useReaderStore((state) => ({
const { isActive, toggleActive } = useReaderAutoScrollStore((state) => ({
isActive: state.autoScroll.isActive,
toggleActive: state.autoScroll.toggleActive,
}));

4
src/features/reader/filters/ReaderRGBAFilter.tsx
View File

@@ -10,13 +10,13 @@ import Box from '@mui/material/Box';
import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderRGBAFilter = ({ readerNavBarWidth }: Pick<NavbarContextType, 'readerNavBarWidth'>) => {
const {
value: { red, green, blue, alpha, blendMode },
enabled,
} = useReaderStore((state) => state.settings.customFilter.rgba);
} = useReaderSettingsStore((state) => state.settings.customFilter.rgba);
if (!enabled) {
return null;

4
src/features/reader/hooks/useReaderSetChaptersState.ts
View File

@@ -20,7 +20,7 @@ import { filterChapters } from '@/features/chapter/utils/ChapterList.util.tsx';
import { ChapterListOptions } from '@/features/chapter/Chapter.types.ts';
import { getReaderChapterFromCache } from '@/features/reader/Reader.utils.ts';
import { DirectionOffset } from '@/base/Base.types.ts';
import { getReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { getReaderChaptersStore } from '@/features/reader/stores/ReaderStore.ts';
import { READER_DEFAULT_CHAPTERS_STATE } from '@/features/reader/stores/ReaderChaptersStore.ts';
@@ -79,7 +79,7 @@ export const useReaderSetChaptersState = (
navigate('', { replace: true, state: { ...locationState, updateInitialChapter: undefined } });
}
getReaderStore().chapters.setReaderStateChapters((prevState) => {
getReaderChaptersStore().setReaderStateChapters((prevState) => {
const hasCurrentChapterChanged = newCurrentChapter?.id !== prevState.currentChapter?.id;
return {

54
src/features/reader/hotkeys/ReaderHotkeys.tsx
View File

@@ -23,7 +23,13 @@ import { HotkeyScope } from '@/features/hotkeys/Hotkeys.types.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { ScrollOffset } from '@/base/Base.types.ts';
import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
getReaderAutoScrollStore,
getReaderOverlayStore,
getReaderSettingsStore,
getReaderTapZoneStore,
useReaderSettingsStore,
} from '@/features/reader/stores/ReaderStore.ts';
const useHotkeys = (...args: Parameters<typeof useHotKeysHook>): ReturnType<typeof useHotKeysHook> => {
const [keys, callback, options, dependencies] = args;
@@ -60,7 +66,7 @@ export const ReaderHotkeys = ({
}) => {
const readerThemeDirection = ReaderService.useGetThemeDirection();
const { enableScope, disableScope } = useHotkeysContext();
const { hotkeys } = useReaderStore((state) => ({
const { hotkeys } = useReaderSettingsStore((state) => ({
hotkeys: state.settings.hotkeys,
}));
const exitReader = ReaderService.useExit();
@@ -70,10 +76,8 @@ export const ReaderHotkeys = ({
useHotkeys(
hotkeys[ReaderHotkey.SCROLL_BACKWARD],
() => {
const {
autoScroll,
settings: { readingMode, readingDirection, scrollAmount },
} = getReaderStore();
const autoScroll = getReaderAutoScrollStore();
const { readingMode, readingDirection, scrollAmount } = getReaderSettingsStore();
if (autoScroll.isActive) {
autoScroll.setDirection(ScrollOffset.BACKWARD);
@@ -90,7 +94,7 @@ export const ReaderHotkeys = ({
readingMode.value,
readingDirection.value,
scrollElementRef.current,
getReaderStore().tapZone.setShowPreview,
getReaderTapZoneStore().setShowPreview,
scrollAmount,
);
},
@@ -99,10 +103,8 @@ export const ReaderHotkeys = ({
useHotkeys(
hotkeys[ReaderHotkey.SCROLL_FORWARD],
() => {
const {
autoScroll,
settings: { readingMode, readingDirection, scrollAmount },
} = getReaderStore();
const autoScroll = getReaderAutoScrollStore();
const { readingMode, readingDirection, scrollAmount } = getReaderSettingsStore();
if (autoScroll.isActive) {
autoScroll.setDirection(ScrollOffset.FORWARD);
@@ -119,7 +121,7 @@ export const ReaderHotkeys = ({
readingMode.value,
readingDirection.value,
scrollElementRef.current,
getReaderStore().tapZone.setShowPreview,
getReaderTapZoneStore().setShowPreview,
scrollAmount,
);
},
@@ -136,61 +138,61 @@ export const ReaderHotkeys = ({
[readerThemeDirection],
);
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () =>
getReaderStore().overlay.setIsVisible(!getReaderStore().overlay.isVisible),
getReaderOverlayStore().setIsVisible(!getReaderOverlayStore().isVisible),
);
useHotkeys(
hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE],
() => {
updateSettingCycleThrough(
'pageScaleMode',
getReaderStore().settings.pageScaleMode.value,
getReaderSettingsStore().pageScaleMode.value,
READER_PAGE_SCALE_MODE_VALUES,
getReaderStore().settings.pageScaleMode.isDefault,
getReaderSettingsStore().pageScaleMode.isDefault,
true,
);
},
[],
);
useHotkeys(hotkeys[ReaderHotkey.STRETCH_IMAGE], () =>
ReaderService.updateSetting('shouldStretchPage', !getReaderStore().settings.shouldStretchPage.value),
ReaderService.updateSetting('shouldStretchPage', !getReaderSettingsStore().shouldStretchPage.value),
);
useHotkeys(hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES], () =>
ReaderService.updateSetting(
'shouldOffsetDoubleSpreads',
!getReaderStore().settings.shouldOffsetDoubleSpreads.value,
!getReaderSettingsStore().shouldOffsetDoubleSpreads.value,
),
);
useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_MODE], () => {
updateSettingCycleThrough(
'readingMode',
getReaderStore().settings.readingMode.value,
getReaderSettingsStore().readingMode.value,
READING_MODE_VALUES,
getReaderStore().settings.readingMode.isDefault,
getReaderSettingsStore().readingMode.isDefault,
true,
);
});
useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION], () => {
updateSettingCycleThrough(
'readingDirection',
getReaderStore().settings.readingDirection.value,
getReaderSettingsStore().readingDirection.value,
READING_DIRECTION_VALUES,
getReaderStore().settings.readingDirection.isDefault,
getReaderSettingsStore().readingDirection.isDefault,
true,
);
});
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], () => getReaderStore().autoScroll.toggleActive(), {
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], () => getReaderAutoScrollStore().toggleActive(), {
preventDefault: true,
});
useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE], () =>
ReaderService.updateSetting('autoScroll', {
...getReaderStore().settings.autoScroll,
value: Math.min(AUTO_SCROLL_SPEED.max, getReaderStore().settings.autoScroll.value + AUTO_SCROLL_SPEED.step),
...getReaderSettingsStore().autoScroll,
value: Math.min(AUTO_SCROLL_SPEED.max, getReaderSettingsStore().autoScroll.value + AUTO_SCROLL_SPEED.step),
}),
);
useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE], () =>
ReaderService.updateSetting('autoScroll', {
...getReaderStore().settings.autoScroll,
value: Math.max(AUTO_SCROLL_SPEED.min, getReaderStore().settings.autoScroll.value - AUTO_SCROLL_SPEED.step),
...getReaderSettingsStore().autoScroll,
value: Math.max(AUTO_SCROLL_SPEED.min, getReaderSettingsStore().autoScroll.value - AUTO_SCROLL_SPEED.step),
}),
);
useHotkeys(hotkeys[ReaderHotkey.EXIT_READER], exitReader, [exitReader]);

8
src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts
View File

@@ -15,7 +15,7 @@ import {
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
import { useIntersectionObserver } from '@/base/hooks/useIntersectionObserver.tsx';
import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { getReaderScrollbarStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
interface ElementIntersection {
@@ -245,7 +245,7 @@ export const useReaderInfiniteScrollUpdateChapter = (
image: HTMLElement | null,
scrollElement: HTMLElement | null,
) => {
const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderStore(
const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderSettingsStore(
(state) => ({
readingMode: state.settings.readingMode.value,
readingDirection: state.settings.readingDirection.value,
@@ -323,8 +323,8 @@ export const useReaderInfiniteScrollUpdateChapter = (
const elementIntersectionInfo = getElementIntersectionInfo(
readingDirection,
entry.target.getBoundingClientRect(),
getReaderStore().scrollbar.xSize,
getReaderStore().scrollbar.ySize,
getReaderScrollbarStore().xSize,
getReaderScrollbarStore().ySize,
);
const { start: isStartIntersecting, end: isEndIntersecting } = getElementIntersection(
elementIntersectionInfo,

15
src/features/reader/overlay/components/ReaderPageNumber.tsx
View File

@@ -17,25 +17,30 @@ import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
import { reverseString } from '@/base/utils/Strings.ts';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
useReaderPagesStore,
useReaderProgressBarStore,
useReaderScrollbarStore,
useReaderSettingsStore,
} from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderPageNumber = ({
isDesktop,
readerNavBarWidth,
}: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> &
Pick<NavbarContextType, 'readerNavBarWidth'>) => {
const scrollbar = useReaderStore((state) => state.scrollbar);
const { currentPageIndex, pages, totalPages } = useReaderStore((state) => ({
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const { currentPageIndex, pages, totalPages } = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages,
totalPages: state.pages.totalPages,
}));
const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStore((state) => ({
const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderSettingsStore((state) => ({
readingDirection: state.settings.readingDirection.value,
shouldShowPageNumber: state.settings.shouldShowPageNumber,
progressBarType: state.settings.progressBarType,
}));
const isMaximized = useReaderStore((state) => state.progressBar.isMaximized);
const isMaximized = useReaderProgressBarStore((state) => state.progressBar.isMaximized);
const pageName = useMemo(() => {
const currentPageName = getPage(currentPageIndex, pages).name;

4
src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts
View File

@@ -8,7 +8,7 @@
import { MutableRefObject, useEffect } from 'react';
import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
import { getReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { getReaderOverlayStore } from '@/features/reader/stores/ReaderStore.ts';
export const useReaderHideOverlayOnUserScroll = (
isOverlayVisible: boolean,
@@ -19,7 +19,7 @@ export const useReaderHideOverlayOnUserScroll = (
useEffect(() => {
const handleScroll = () => {
if (isOverlayVisible) {
getReaderStore().overlay.setIsVisible(false);
getReaderOverlayStore().setIsVisible(false);
}
if (showPreview) {

10
src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx
View File

@@ -30,17 +30,21 @@ import { FALLBACK_CHAPTER } from '@/features/chapter/Chapter.constants.ts';
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
useReaderChaptersStore,
useReaderScrollbarStore,
useReaderStore,
} from '@/features/reader/stores/ReaderStore.ts';
const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
const BaseReaderOverlayHeaderMobile = forwardRef<HTMLDivElement, MobileHeaderProps>(({ isVisible }, ref) => {
const { t } = useTranslation();
const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' });
const currentChapter = useReaderStore((state) => state.chapters.currentChapter);
const currentChapter = useReaderChaptersStore((state) => state.chapters.currentChapter);
const manga = useReaderStore((state) => state.manga);
const scrollbar = useReaderStore((state) => state.scrollbar);
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const { id: mangaId, title } = manga ?? DEFAULT_MANGA;
const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER;

10
src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
View File

@@ -29,7 +29,11 @@ import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholde
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
useReaderChaptersStore,
useReaderSettingsStore,
useReaderStore,
} from '@/features/reader/stores/ReaderStore.ts';
const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
const wasNavBarStaticRef = useRef(isStaticNav);
@@ -56,13 +60,13 @@ const BaseReaderNavBarDesktop = ({
}: ReaderNavBarDesktopProps & Pick<NavbarContextType, 'setReaderNavBarWidth'>) => {
const { t } = useTranslation();
const manga = useReaderStore((state) => state.manga);
const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStore((state) => ({
const { chapters, currentChapter, previousChapter, nextChapter } = useReaderChaptersStore((state) => ({
chapters: state.chapters.chapters,
currentChapter: state.chapters.currentChapter,
previousChapter: state.chapters.previousChapter,
nextChapter: state.chapters.nextChapter,
}));
const isStaticNav = useReaderStore((state) => state.settings.isStaticNav);
const isStaticNav = useReaderSettingsStore((state) => state.settings.isStaticNav);
const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
useResizeObserver(

6
src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx
View File

@@ -22,7 +22,7 @@ import { CHAPTER_ACTION_TO_TRANSLATION, FALLBACK_CHAPTER } from '@/features/chap
import { IconBrowser } from '@/assets/icons/IconBrowser.tsx';
import { IconWebView } from '@/assets/icons/IconWebView.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderChaptersStore, useReaderPagesStore } from '@/features/reader/stores/ReaderStore.ts';
import { ChapterDownloadInfo, ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
const DownloadButton = ({
@@ -62,12 +62,12 @@ const DownloadButton = ({
};
export const ReaderNavBarDesktopActions = memo(() => {
const currentChapter = useReaderStore((state) => state.chapters.currentChapter);
const currentChapter = useReaderChaptersStore((state) => state.chapters.currentChapter);
const { id, isBookmarked, realUrl } = currentChapter ?? FALLBACK_CHAPTER;
const { t } = useTranslation();
const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderStore((state) => ({
const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderPagesStore((state) => ({
pageLoadStates: state.pages.pageLoadStates,
setPageLoadStates: state.pages.setPageLoadStates,
setRetryFailedPagesKeyPrefix: state.pages.setRetryFailedPagesKeyPrefix,

6
src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
View File

@@ -17,17 +17,17 @@ import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progres
import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopNextPreviousButton.tsx';
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderPagesStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
const BaseReaderNavBarDesktopPageNavigation = () => {
const { t } = useTranslation();
const getOptionForDirection = useGetOptionForDirection();
const { currentPageIndex, pages } = useReaderStore((state) => ({
const { currentPageIndex, pages } = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages,
}));
const readingDirection = useReaderStore((state) => state.settings.readingDirection.value);
const readingDirection = useReaderSettingsStore((state) => state.settings.readingDirection.value);
const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];

4
src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
View File

@@ -18,12 +18,12 @@ import { ReaderNavBarDesktopReadingDirection } from '@/features/reader/overlay/n
import { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts';
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
const { t } = useTranslation();
const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } =
useReaderStore((state) => ({
useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode,
shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads,
pageScaleMode: state.settings.pageScaleMode,

6
src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
View File

@@ -24,7 +24,7 @@ import { MobileReaderProgressBar } from '@/features/reader/overlay/progress-bar/
import { ReaderChapterList } from '@/features/reader/overlay/navigation/components/ReaderChapterList.tsx';
import { ReaderBottomBarMobileQuickSettings } from '@/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderChaptersStore, useReaderScrollbarStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderBottomBarMobile = ({
openSettings,
@@ -32,14 +32,14 @@ const BaseReaderBottomBarMobile = ({
topOffset = 0,
}: ReaderBottomBarMobileProps & { topOffset?: number }) => {
const { t } = useTranslation();
const { currentChapter, chapters } = useReaderStore((state) => ({
const { currentChapter, chapters } = useReaderChaptersStore((state) => ({
currentChapter: state.chapters.currentChapter,
chapters: state.chapters.chapters,
}));
const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' });
const scrollbar = useReaderStore((state) => state.scrollbar);
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const [bottomBarRefHeight, setBottomBarRefHeight] = useState(0);
const bottomBarRef = useRef<HTMLDivElement>(null);

6
src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx
View File

@@ -15,15 +15,15 @@ import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderAutoScrollStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderBottomBarMobileQuickSettings = () => {
const { t } = useTranslation();
const { isActive, toggleActive } = useReaderStore((state) => ({
const { isActive, toggleActive } = useReaderAutoScrollStore((state) => ({
isActive: state.autoScroll.isActive,
toggleActive: state.autoScroll.toggleActive,
}));
const { readingMode, readingDirection, autoScroll } = useReaderStore((state) => ({
const { readingMode, readingDirection, autoScroll } = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode,
readingDirection: state.settings.readingDirection,
autoScroll: state.settings.autoScroll,

12
src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx
View File

@@ -31,7 +31,11 @@ import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotWrapper.tsx';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { ReadingMode } from '@/features/reader/Reader.types.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
useReaderPagesStore,
useReaderProgressBarStore,
useReaderSettingsStore,
} from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderProgressBar = ({
slotProps,
@@ -62,14 +66,14 @@ const BaseReaderProgressBar = ({
direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
fullSegmentClicks: boolean;
}) => {
const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderStore((state) => ({
const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderPagesStore((state) => ({
pages: state.pages.pages,
pageLoadStates: state.pages.pageLoadStates,
totalPages: state.pages.totalPages,
currentPageIndex: state.pages.currentPageIndex,
}));
const readingMode = useReaderStore((state) => state.settings.readingMode.value);
const { isDragging, setIsDragging } = useReaderStore((state) => ({
const readingMode = useReaderSettingsStore((state) => state.settings.readingMode.value);
const { isDragging, setIsDragging } = useReaderProgressBarStore((state) => ({
isDragging: state.progressBar.isDragging,
setIsDragging: state.progressBar.setIsDragging,
}));

20
src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx
View File

@@ -20,7 +20,12 @@ import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
import { ReaderProgressBarSlotDesktop } from '@/features/reader/overlay/progress-bar/desktop/components/ReaderProgressBarSlotDesktop.tsx';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
useReaderPagesStore,
useReaderProgressBarStore,
useReaderScrollbarStore,
useReaderSettingsStore,
} from '@/features/reader/stores/ReaderStore.ts';
const BaseStandardReaderProgressBar = ({
readerNavBarWidth,
@@ -30,17 +35,16 @@ const BaseStandardReaderProgressBar = ({
}) => {
const theme = useTheme();
const scrollbar = useReaderStore((state) => state.scrollbar);
const totalPages = useReaderStore((state) => state.pages.totalPages);
const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = useReaderStore(
(state) => ({
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const totalPages = useReaderPagesStore((state) => state.pages.totalPages);
const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } =
useReaderSettingsStore((state) => ({
progressBarType: state.settings.progressBarType,
progressBarSize: state.settings.progressBarSize,
progressBarPosition: state.settings.progressBarPosition,
progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
}),
);
const { isMaximized, setIsMaximized, isDragging } = useReaderStore((state) => ({
}));
const { isMaximized, setIsMaximized, isDragging } = useReaderProgressBarStore((state) => ({
isMaximized: state.progressBar.isMaximized,
setIsMaximized: state.progressBar.setIsMaximized,
isDragging: state.progressBar.isDragging,

21
src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
View File

@@ -28,7 +28,14 @@ import { ReaderProgressBarSlotMobile } from '@/features/reader/overlay/progress-
import { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
useReaderChaptersStore,
useReaderOverlayStore,
useReaderPagesStore,
useReaderProgressBarStore,
useReaderScrollbarStore,
useReaderSettingsStore,
} from '@/features/reader/stores/ReaderStore.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = {
@@ -48,21 +55,21 @@ const BaseMobileReaderProgressBar = ({
topOffset?: number;
bottomOffset?: number;
}) => {
const scrollbar = useReaderStore((state) => state.scrollbar);
const isVisible = useReaderStore((state) => state.overlay.isVisible);
const { currentPageIndex, pages } = useReaderStore((state) => ({
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const isVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
const { currentPageIndex, pages } = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages,
}));
const { previousChapter, nextChapter } = useReaderStore((state) => ({
const { previousChapter, nextChapter } = useReaderChaptersStore((state) => ({
previousChapter: state.chapters.previousChapter,
nextChapter: state.chapters.nextChapter,
}));
const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStore((state) => ({
const { progressBarPosition, progressBarPositionAutoVertical } = useReaderSettingsStore((state) => ({
progressBarPosition: state.settings.progressBarPosition,
progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
}));
const { setIsMaximized, isDragging } = useReaderStore((state) => ({
const { setIsMaximized, isDragging } = useReaderProgressBarStore((state) => ({
setIsMaximized: state.progressBar.setIsMaximized,
isDragging: state.progressBar.isDragging,
}));

29
src/features/reader/screens/Reader.tsx
View File

@@ -35,7 +35,14 @@ import { useReaderSetChaptersState } from '@/features/reader/hooks/useReaderSetC
import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
import { useChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
getReaderStore,
useReaderChaptersStore,
useReaderOverlayStore,
useReaderSettingsStore,
useReaderStore,
useReaderTapZoneStore,
} from '@/features/reader/stores/ReaderStore.ts';
import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll.tsx';
@@ -45,13 +52,15 @@ const BaseReader = ({
}: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'>) => {
const { t } = useTranslation();
const manga = useReaderStore((state) => state.manga);
const overlay = useReaderStore((state) => state.overlay);
const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderStore((state) => ({
mangaChapters: state.chapters.mangaChapters,
initialChapter: state.chapters.initialChapter,
chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling,
currentChapter: state.chapters.currentChapter,
}));
const overlay = useReaderOverlayStore((state) => state.overlay);
const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderChaptersStore(
(state) => ({
mangaChapters: state.chapters.mangaChapters,
initialChapter: state.chapters.initialChapter,
chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling,
currentChapter: state.chapters.currentChapter,
}),
);
const {
shouldSkipDupChapters,
shouldSkipFilteredChapters,
@@ -62,7 +71,7 @@ const BaseReader = ({
shouldShowReadingModePreview,
shouldShowTapZoneLayoutPreview,
setSettings,
} = useReaderStore((state) => ({
} = useReaderSettingsStore((state) => ({
shouldSkipDupChapters: state.settings.shouldSkipDupChapters,
shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters,
backgroundColor: state.settings.backgroundColor,
@@ -73,7 +82,7 @@ const BaseReader = ({
shouldShowTapZoneLayoutPreview: state.settings.shouldShowTapZoneLayoutPreview,
setSettings: state.settings.setSettings,
}));
const setShowPreview = useReaderStore((state) => state.tapZone.setShowPreview);
const setShowPreview = useReaderTapZoneStore((state) => state.tapZone.setShowPreview);
const scrollElementRef = useRef<HTMLDivElement | null>(null);

70
src/features/reader/services/ReaderControls.ts
View File

@@ -48,7 +48,13 @@ import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.
import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { TReaderProgressCurrentPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
import { getReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
getReaderChaptersStore,
getReaderOverlayStore,
getReaderPagesStore,
getReaderSettingsStore,
getReaderTapZoneStore,
} from '@/features/reader/stores/ReaderStore.ts';
const getScrollDirectionInvert = (
scrollDirection: ScrollDirection,
@@ -118,7 +124,7 @@ export class ReaderControls {
const getNewScrollPosition = (currentPos: number, elementSize: number) =>
currentPos + elementSize * scrollAmount * scrollDirection;
getReaderStore().overlay.setIsVisible(false);
getReaderOverlayStore().setIsVisible(false);
setShowPreview(false);
const doScroll = (
@@ -162,16 +168,15 @@ export class ReaderControls {
scrollIntoView: boolean = true,
): void {
const {
chapters: {
currentChapter,
previousChapter,
nextChapter,
chapters,
visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder },
setReaderStateChapters,
},
settings: { shouldInformAboutMissingChapter, shouldInformAboutScanlatorChange, shouldUseInfiniteScroll },
} = getReaderStore();
currentChapter,
previousChapter,
nextChapter,
chapters,
visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder },
setReaderStateChapters,
} = getReaderChaptersStore();
const { shouldInformAboutMissingChapter, shouldInformAboutScanlatorChange, shouldUseInfiniteScroll } =
getReaderSettingsStore();
if (!currentChapter) {
return;
@@ -311,10 +316,9 @@ export class ReaderControls {
}
static openPage(page: number | 'previous' | 'next', forceDirection?: Direction, hideOverlay: boolean = true): void {
const {
pages: { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode },
settings: { readingDirection, readingMode, shouldShowTransitionPage },
} = getReaderStore();
const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } =
getReaderPagesStore();
const { readingDirection, readingMode, shouldShowTransitionPage } = getReaderSettingsStore();
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
@@ -336,8 +340,8 @@ export class ReaderControls {
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
if (hideOverlay) {
getReaderStore().overlay.setIsVisible(false);
getReaderStore().tapZone.setShowPreview(false);
getReaderOverlayStore().setIsVisible(false);
getReaderTapZoneStore().setShowPreview(false);
}
const hideTransitionPage = () => setTransitionPageMode(ReaderTransitionPageMode.NONE);
@@ -360,7 +364,7 @@ export class ReaderControls {
isFirstPage &&
(!shouldShowTransitionPage || isPreviousTransitionPageVisible) &&
convertedPage === 'previous' &&
!!getReaderStore().chapters.previousChapter;
!!getReaderChaptersStore().previousChapter;
if (shouldOpenPreviousChapter) {
ReaderControls.openChapter('previous');
return;
@@ -370,7 +374,7 @@ export class ReaderControls {
isLastPage &&
(!shouldShowTransitionPage || isNextTransitionPageVisible) &&
convertedPage === 'next' &&
!!getReaderStore().chapters.nextChapter;
!!getReaderChaptersStore().nextChapter;
if (shouldOpenNextChapter) {
ReaderControls.openChapter('next');
return;
@@ -415,17 +419,15 @@ export class ReaderControls {
return useCallback(
(pageIndex, debounceChapterUpdate = true, endReached = false) => {
const { currentPageIndex, setCurrentPageIndex } = getReaderPagesStore();
const {
pages: { currentPageIndex, setCurrentPageIndex },
chapters: {
currentChapter,
chapters,
previousChapter,
nextChapter,
visibleChapters,
setReaderStateChapters,
},
} = getReaderStore();
currentChapter,
chapters,
previousChapter,
nextChapter,
visibleChapters,
setReaderStateChapters,
} = getReaderChaptersStore();
if (pageIndex === currentPageIndex && !endReached) {
return;
@@ -526,14 +528,14 @@ export class ReaderControls {
return;
}
const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderStore().settings;
const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderSettingsStore();
const rect = e.currentTarget.getBoundingClientRect();
const rectRelativeX = e.clientX - rect.left;
const rectRelativeY = e.clientY - rect.top;
const action = ReaderTapZoneService.getAction(rectRelativeX, rectRelativeY);
getReaderStore().tapZone.setShowPreview(false);
getReaderTapZoneStore().setShowPreview(false);
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
const scrollDirection =
@@ -541,7 +543,7 @@ export class ReaderControls {
switch (action) {
case TapZoneRegionType.MENU:
getReaderStore().overlay.setIsVisible(isStaticNav || !getReaderStore().overlay.isVisible);
getReaderOverlayStore().setIsVisible(isStaticNav || !getReaderOverlayStore().isVisible);
break;
case TapZoneRegionType.PREVIOUS:
case TapZoneRegionType.NEXT:
@@ -552,7 +554,7 @@ export class ReaderControls {
readingMode.value,
readingDirection.value,
scrollElement,
getReaderStore().tapZone.setShowPreview,
getReaderTapZoneStore().setShowPreview,
scrollAmount,
);
} else {

21
src/features/reader/services/ReaderService.ts
View File

@@ -46,7 +46,12 @@ import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
import { getMetadataKey } from '@/features/metadata/Metadata.utils.ts';
import { DirectionOffset } from '@/base/Base.types.ts';
import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
getReaderChaptersStore,
getReaderSettingsStore,
getReaderStore,
useReaderSettingsStore,
} from '@/features/reader/stores/ReaderStore.ts';
import { ReactRouter } from '@/lib/react-router/ReactRouter.ts';
const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
@@ -152,11 +157,9 @@ export class ReaderService {
return useCallback(
(patch) => {
const {
manga,
chapters: { currentChapter, mangaChapters, chapters },
settings: { shouldSkipDupChapters },
} = getReaderStore();
const { manga } = getReaderStore();
const { currentChapter, mangaChapters, chapters } = getReaderChaptersStore();
const { shouldSkipDupChapters } = getReaderSettingsStore();
if (!manga || !currentChapter || !mangaChapters) {
return;
@@ -227,7 +230,7 @@ export class ReaderService {
static useGetThemeDirection(): Direction {
const { direction } = useTheme();
const readingDirection = useReaderStore((state) => state.settings.readingDirection.value);
const readingDirection = useReaderSettingsStore((state) => state.settings.readingDirection.value);
return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection
? direction
@@ -336,7 +339,7 @@ export class ReaderService {
static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } {
const isTouchDevice = MediaQuery.useIsTouchDevice();
const overlayMode = useReaderStore((state) => state.settings.overlayMode);
const overlayMode = useReaderSettingsStore((state) => state.settings.overlayMode);
const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO;
const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP;
@@ -353,7 +356,7 @@ export class ReaderService {
}
static useExit(): () => void {
const exitMode = useReaderStore((state) => state.settings.exitMode);
const exitMode = useReaderSettingsStore((state) => state.settings.exitMode);
const handleBack = useBackButton();
const navigate = useNavigate();

4
src/features/reader/settings/components/ReaderSettingsTabs.tsx
View File

@@ -23,7 +23,7 @@ import { ReaderBehaviourSettings } from '@/features/reader/settings/behaviour/Re
import { ReaderDefaultLayoutSettings } from '@/features/reader/settings/layout/ReaderDefaultLayoutSettings.tsx';
import { ReaderHotkeysSettings } from '@/features/reader/hotkeys/settings/ReaderHotkeysSettings.tsx';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderTapZoneStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderSettingsTabs = ({
activeTab,
@@ -45,7 +45,7 @@ const BaseReaderSettingsTabs = ({
}) => {
const { t } = useTranslation();
const isTouchDevice = MediaQuery.useIsTouchDevice();
const setShowPreview = useReaderStore((state) => state.tapZone.setShowPreview);
const setShowPreview = useReaderTapZoneStore((state) => state.tapZone.setShowPreview);
return (
<>

4
src/features/reader/settings/screens/ReaderSettings.tsx
View File

@@ -15,10 +15,10 @@ import { ReaderSettingsTabs } from '@/features/reader/settings/components/Reader
import { ReaderSettingTab } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { useDisableAllHotkeysWhileMounted } from '@/features/hotkeys/Hotkeys.utils.ts';
import { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => {
const settings = useReaderStore((state) => state.settings);
const settings = useReaderSettingsStore((state) => state.settings);
useDisableAllHotkeysWhileMounted(isOpen);

24
src/features/reader/stores/ReaderStore.ts
View File

@@ -116,3 +116,27 @@ const readerStore = create<ReaderStore>()(
);
export const useReaderStore = <T>(selector: (state: ReaderStore) => T): T => readerStore(useShallow(selector));
export const getReaderStore = () => readerStore.getState();
export const useReaderScrollbarStore = useReaderStore;
export const getReaderScrollbarStore = () => readerStore.getState().scrollbar;
export const useReaderSettingsStore = useReaderStore;
export const getReaderSettingsStore = () => readerStore.getState().settings;
export const useReaderOverlayStore = useReaderStore;
export const getReaderOverlayStore = () => readerStore.getState().overlay;
export const useReaderAutoScrollStore = useReaderStore;
export const getReaderAutoScrollStore = () => readerStore.getState().autoScroll;
export const useReaderPagesStore = useReaderStore;
export const getReaderPagesStore = () => readerStore.getState().pages;
export const useReaderChaptersStore = useReaderStore;
export const getReaderChaptersStore = () => readerStore.getState().chapters;
export const useReaderProgressBarStore = useReaderStore;
export const getReaderProgressBarStore = () => readerStore.getState().progressBar;
export const useReaderTapZoneStore = useReaderStore;
export const getReaderTapZoneStore = () => readerStore.getState().tapZone;

6
src/features/reader/tap-zones/TapZoneLayout.tsx
View File

@@ -15,18 +15,18 @@ import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { ReadingDirection } from '@/features/reader/Reader.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderSettingsStore, useReaderTapZoneStore } from '@/features/reader/stores/ReaderStore.ts';
const CANVAS_ID = 'reader-tap-zone-layout-canvas';
const BaseTapZoneLayout = ({ readerNavBarWidth }: Pick<NavbarContextType, 'readerNavBarWidth'>) => {
const theme = useTheme();
const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderStore((state) => ({
const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderSettingsStore((state) => ({
tapZoneLayout: state.settings.tapZoneLayout.value,
tapZoneInvertMode: state.settings.tapZoneInvertMode.value,
readingDirection: state.settings.readingDirection.value,
}));
const showPreview = useReaderStore((state) => state.tapZone.showPreview);
const showPreview = useReaderTapZoneStore((state) => state.tapZone.showPreview);
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

22
src/features/reader/viewer/ReaderViewer.tsx
View File

@@ -56,7 +56,15 @@ import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types
import { useReaderPreserveScrollPosition } from '@/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts';
import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
getReaderStore,
useReaderAutoScrollStore,
useReaderChaptersStore,
useReaderOverlayStore,
useReaderPagesStore,
useReaderSettingsStore,
useReaderTapZoneStore,
} from '@/features/reader/stores/ReaderStore.ts';
const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
[ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -78,7 +86,7 @@ const BaseReaderViewer = forwardRef(
ref: ForwardedRef<HTMLDivElement | null>,
) => {
const { direction: themeDirection } = useTheme();
const isOverlayVisible = useReaderStore((state) => state.overlay.isVisible);
const isOverlayVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
const {
currentPageIndex,
pageToScrollToIndex,
@@ -92,7 +100,7 @@ const BaseReaderViewer = forwardRef(
transitionPageMode,
retryFailedPagesKeyPrefix,
setTransitionPageMode,
} = useReaderStore((state) => ({
} = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pageToScrollToIndex: state.pages.pageToScrollToIndex,
setPageToScrollToIndex: state.pages.setPageToScrollToIndex,
@@ -113,7 +121,7 @@ const BaseReaderViewer = forwardRef(
visibleChapters,
setReaderStateChapters,
isCurrentChapterReady,
} = useReaderStore((state) => ({
} = useReaderChaptersStore((state) => ({
initialChapter: state.chapters.initialChapter,
currentChapter: state.chapters.currentChapter,
chapters: state.chapters.chapters,
@@ -132,7 +140,7 @@ const BaseReaderViewer = forwardRef(
customFilter,
shouldStretchPage,
isStaticNav,
} = useReaderStore((state) => ({
} = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode.value,
readingDirection: state.settings.readingDirection.value,
readerWidth: state.settings.readerWidth.value,
@@ -144,7 +152,7 @@ const BaseReaderViewer = forwardRef(
shouldStretchPage: state.settings.shouldStretchPage.value,
isStaticNav: state.settings.isStaticNav,
}));
const { showPreview, setShowPreview } = useReaderStore((state) => ({
const { showPreview, setShowPreview } = useReaderTapZoneStore((state) => ({
showPreview: state.tapZone.showPreview,
setShowPreview: state.tapZone.setShowPreview,
}));
@@ -159,7 +167,7 @@ const BaseReaderViewer = forwardRef(
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
const isDragging = useMouseDragScroll(scrollElementRef);
const automaticScrolling = useReaderStore((state) => ({
const automaticScrolling = useReaderAutoScrollStore((state) => ({
isPaused: state.autoScroll.isPaused,
pause: state.autoScroll.pause,
resume: state.autoScroll.resume,

4
src/features/reader/viewer/components/ReaderPage.tsx
View File

@@ -17,7 +17,7 @@ import {
import { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderScrollbarStore } from '@/features/reader/stores/ReaderStore.ts';
const getCustomFilterString = (customFilter: ReaderCustomFilter): string =>
Object.keys(customFilter)
@@ -86,7 +86,7 @@ const BaseReaderPage = ({
const { src } = props;
const isTabletWidth = MediaQuery.useIsTabletWidth();
const scrollbar = useReaderStore((state) => state.scrollbar);
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const handleLoad = useCallback(
() => onLoad?.(pagesIndex, src, isPrimaryPage),

18
src/features/reader/viewer/components/ReaderTransitionPage.tsx
View File

@@ -29,7 +29,13 @@ import { getValueFromObject, noOp } from '@/lib/HelperFunctions.ts';
import { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import {
useReaderChaptersStore,
useReaderPagesStore,
useReaderScrollbarStore,
useReaderSettingsStore,
useReaderStore,
} from '@/features/reader/stores/ReaderStore.ts';
const ChapterInfo = ({
title,
@@ -93,9 +99,9 @@ const BaseReaderTransitionPage = ({
}) => {
const { t } = useTranslation();
const manga = useReaderStore((state) => state.manga);
const scrollbar = useReaderStore((state) => state.scrollbar);
const transitionPageMode = useReaderStore((state) => state.pages.transitionPageMode);
const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderStore((state) => ({
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const transitionPageMode = useReaderPagesStore((state) => state.pages.transitionPageMode);
const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode.value,
backgroundColor: state.settings.backgroundColor,
shouldShowTransitionPage: state.settings.shouldShowTransitionPage,
@@ -223,7 +229,7 @@ export const ReaderTransitionPage = withPropsFrom(
memo(BaseReaderTransitionPage) as typeof BaseReaderTransitionPage,
[
({ chapterId }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId'>) => {
const chapters = useReaderStore((state) => state.chapters.chapters);
const chapters = useReaderChaptersStore((state) => state.chapters.chapters);
const currentChapterIndex = useMemo(
() => chapters.findIndex((chapter) => chapter.id === chapterId),
@@ -246,7 +252,7 @@ export const ReaderTransitionPage = withPropsFrom(
useNavBarContext,
({ chapterId, type }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId' | 'type'>) => {
const handleBack = useBackButton();
const chapters = useReaderStore((state) => state.chapters.chapters);
const chapters = useReaderChaptersStore((state) => state.chapters.chapters);
const currentChapterIndex = useMemo(
() => chapters.findIndex((chapter) => chapter.id === chapterId),