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 { CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { ReaderService } from '@/features/reader/services/ReaderService.ts'; 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 = ({ const BaseReaderAutoScroll = ({
themeDirection, themeDirection,
@@ -26,11 +30,11 @@ const BaseReaderAutoScroll = ({
themeDirection: Direction; themeDirection: Direction;
combinedDirection: Direction; combinedDirection: Direction;
}) => { }) => {
const { scrollRef, direction } = useReaderStore((state) => ({ const { scrollRef, direction } = useReaderAutoScrollStore((state) => ({
scrollRef: state.autoScroll.scrollRef, scrollRef: state.autoScroll.scrollRef,
direction: state.autoScroll.direction, direction: state.autoScroll.direction,
})); }));
const { readingMode, autoScroll } = useReaderStore((state) => ({ const { readingMode, autoScroll } = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode.value, readingMode: state.settings.readingMode.value,
autoScroll: state.settings.autoScroll, autoScroll: state.settings.autoScroll,
})); }));
@@ -60,7 +64,7 @@ const BaseReaderAutoScroll = ({
); );
useEffect(() => { useEffect(() => {
const autoScrollStore = getReaderStore().autoScroll; const autoScrollStore = getReaderAutoScrollStore();
autoScrollStore.setIsActive(automaticScrolling.isActive); autoScrollStore.setIsActive(automaticScrolling.isActive);
autoScrollStore.setIsPaused(automaticScrolling.isPaused); 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 { IReaderSettings } from '@/features/reader/Reader.types.ts';
import { AUTO_SCROLL_SPEED } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { AUTO_SCROLL_SPEED } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { coerceIn } from '@/lib/HelperFunctions.ts'; 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 = ({ export const ReaderNavBarDesktopAutoScroll = ({
autoScroll, autoScroll,
@@ -26,7 +26,7 @@ export const ReaderNavBarDesktopAutoScroll = ({
setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void; setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void;
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { isActive, toggleActive } = useReaderStore((state) => ({ const { isActive, toggleActive } = useReaderAutoScrollStore((state) => ({
isActive: state.autoScroll.isActive, isActive: state.autoScroll.isActive,
toggleActive: state.autoScroll.toggleActive, 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 { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; 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 BaseReaderRGBAFilter = ({ readerNavBarWidth }: Pick<NavbarContextType, 'readerNavBarWidth'>) => {
const { const {
value: { red, green, blue, alpha, blendMode }, value: { red, green, blue, alpha, blendMode },
enabled, enabled,
} = useReaderStore((state) => state.settings.customFilter.rgba); } = useReaderSettingsStore((state) => state.settings.customFilter.rgba);
if (!enabled) { if (!enabled) {
return null; 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 { ChapterListOptions } from '@/features/chapter/Chapter.types.ts';
import { getReaderChapterFromCache } from '@/features/reader/Reader.utils.ts'; import { getReaderChapterFromCache } from '@/features/reader/Reader.utils.ts';
import { DirectionOffset } from '@/base/Base.types.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'; 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 } }); navigate('', { replace: true, state: { ...locationState, updateInitialChapter: undefined } });
} }
getReaderStore().chapters.setReaderStateChapters((prevState) => { getReaderChaptersStore().setReaderStateChapters((prevState) => {
const hasCurrentChapterChanged = newCurrentChapter?.id !== prevState.currentChapter?.id; const hasCurrentChapterChanged = newCurrentChapter?.id !== prevState.currentChapter?.id;
return { 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 { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { ScrollOffset } from '@/base/Base.types.ts'; import { ScrollOffset } from '@/base/Base.types.ts';
import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.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 useHotkeys = (...args: Parameters<typeof useHotKeysHook>): ReturnType<typeof useHotKeysHook> => {
const [keys, callback, options, dependencies] = args; const [keys, callback, options, dependencies] = args;
@@ -60,7 +66,7 @@ export const ReaderHotkeys = ({
}) => { }) => {
const readerThemeDirection = ReaderService.useGetThemeDirection(); const readerThemeDirection = ReaderService.useGetThemeDirection();
const { enableScope, disableScope } = useHotkeysContext(); const { enableScope, disableScope } = useHotkeysContext();
const { hotkeys } = useReaderStore((state) => ({ const { hotkeys } = useReaderSettingsStore((state) => ({
hotkeys: state.settings.hotkeys, hotkeys: state.settings.hotkeys,
})); }));
const exitReader = ReaderService.useExit(); const exitReader = ReaderService.useExit();
@@ -70,10 +76,8 @@ export const ReaderHotkeys = ({
useHotkeys( useHotkeys(
hotkeys[ReaderHotkey.SCROLL_BACKWARD], hotkeys[ReaderHotkey.SCROLL_BACKWARD],
() => { () => {
const { const autoScroll = getReaderAutoScrollStore();
autoScroll, const { readingMode, readingDirection, scrollAmount } = getReaderSettingsStore();
settings: { readingMode, readingDirection, scrollAmount },
} = getReaderStore();
if (autoScroll.isActive) { if (autoScroll.isActive) {
autoScroll.setDirection(ScrollOffset.BACKWARD); autoScroll.setDirection(ScrollOffset.BACKWARD);
@@ -90,7 +94,7 @@ export const ReaderHotkeys = ({
readingMode.value, readingMode.value,
readingDirection.value, readingDirection.value,
scrollElementRef.current, scrollElementRef.current,
getReaderStore().tapZone.setShowPreview, getReaderTapZoneStore().setShowPreview,
scrollAmount, scrollAmount,
); );
}, },
@@ -99,10 +103,8 @@ export const ReaderHotkeys = ({
useHotkeys( useHotkeys(
hotkeys[ReaderHotkey.SCROLL_FORWARD], hotkeys[ReaderHotkey.SCROLL_FORWARD],
() => { () => {
const { const autoScroll = getReaderAutoScrollStore();
autoScroll, const { readingMode, readingDirection, scrollAmount } = getReaderSettingsStore();
settings: { readingMode, readingDirection, scrollAmount },
} = getReaderStore();
if (autoScroll.isActive) { if (autoScroll.isActive) {
autoScroll.setDirection(ScrollOffset.FORWARD); autoScroll.setDirection(ScrollOffset.FORWARD);
@@ -119,7 +121,7 @@ export const ReaderHotkeys = ({
readingMode.value, readingMode.value,
readingDirection.value, readingDirection.value,
scrollElementRef.current, scrollElementRef.current,
getReaderStore().tapZone.setShowPreview, getReaderTapZoneStore().setShowPreview,
scrollAmount, scrollAmount,
); );
}, },
@@ -136,61 +138,61 @@ export const ReaderHotkeys = ({
[readerThemeDirection], [readerThemeDirection],
); );
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () => useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () =>
getReaderStore().overlay.setIsVisible(!getReaderStore().overlay.isVisible), getReaderOverlayStore().setIsVisible(!getReaderOverlayStore().isVisible),
); );
useHotkeys( useHotkeys(
hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE], hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE],
() => { () => {
updateSettingCycleThrough( updateSettingCycleThrough(
'pageScaleMode', 'pageScaleMode',
getReaderStore().settings.pageScaleMode.value, getReaderSettingsStore().pageScaleMode.value,
READER_PAGE_SCALE_MODE_VALUES, READER_PAGE_SCALE_MODE_VALUES,
getReaderStore().settings.pageScaleMode.isDefault, getReaderSettingsStore().pageScaleMode.isDefault,
true, true,
); );
}, },
[], [],
); );
useHotkeys(hotkeys[ReaderHotkey.STRETCH_IMAGE], () => useHotkeys(hotkeys[ReaderHotkey.STRETCH_IMAGE], () =>
ReaderService.updateSetting('shouldStretchPage', !getReaderStore().settings.shouldStretchPage.value), ReaderService.updateSetting('shouldStretchPage', !getReaderSettingsStore().shouldStretchPage.value),
); );
useHotkeys(hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES], () => useHotkeys(hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES], () =>
ReaderService.updateSetting( ReaderService.updateSetting(
'shouldOffsetDoubleSpreads', 'shouldOffsetDoubleSpreads',
!getReaderStore().settings.shouldOffsetDoubleSpreads.value, !getReaderSettingsStore().shouldOffsetDoubleSpreads.value,
), ),
); );
useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_MODE], () => { useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_MODE], () => {
updateSettingCycleThrough( updateSettingCycleThrough(
'readingMode', 'readingMode',
getReaderStore().settings.readingMode.value, getReaderSettingsStore().readingMode.value,
READING_MODE_VALUES, READING_MODE_VALUES,
getReaderStore().settings.readingMode.isDefault, getReaderSettingsStore().readingMode.isDefault,
true, true,
); );
}); });
useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION], () => { useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION], () => {
updateSettingCycleThrough( updateSettingCycleThrough(
'readingDirection', 'readingDirection',
getReaderStore().settings.readingDirection.value, getReaderSettingsStore().readingDirection.value,
READING_DIRECTION_VALUES, READING_DIRECTION_VALUES,
getReaderStore().settings.readingDirection.isDefault, getReaderSettingsStore().readingDirection.isDefault,
true, true,
); );
}); });
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], () => getReaderStore().autoScroll.toggleActive(), { useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], () => getReaderAutoScrollStore().toggleActive(), {
preventDefault: true, preventDefault: true,
}); });
useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE], () => useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE], () =>
ReaderService.updateSetting('autoScroll', { ReaderService.updateSetting('autoScroll', {
...getReaderStore().settings.autoScroll, ...getReaderSettingsStore().autoScroll,
value: Math.min(AUTO_SCROLL_SPEED.max, getReaderStore().settings.autoScroll.value + AUTO_SCROLL_SPEED.step), value: Math.min(AUTO_SCROLL_SPEED.max, getReaderSettingsStore().autoScroll.value + AUTO_SCROLL_SPEED.step),
}), }),
); );
useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE], () => useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE], () =>
ReaderService.updateSetting('autoScroll', { ReaderService.updateSetting('autoScroll', {
...getReaderStore().settings.autoScroll, ...getReaderSettingsStore().autoScroll,
value: Math.max(AUTO_SCROLL_SPEED.min, getReaderStore().settings.autoScroll.value - AUTO_SCROLL_SPEED.step), value: Math.max(AUTO_SCROLL_SPEED.min, getReaderSettingsStore().autoScroll.value - AUTO_SCROLL_SPEED.step),
}), }),
); );
useHotkeys(hotkeys[ReaderHotkey.EXIT_READER], exitReader, [exitReader]); 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 { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts'; import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
import { useIntersectionObserver } from '@/base/hooks/useIntersectionObserver.tsx'; 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'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
interface ElementIntersection { interface ElementIntersection {
@@ -245,7 +245,7 @@ export const useReaderInfiniteScrollUpdateChapter = (
image: HTMLElement | null, image: HTMLElement | null,
scrollElement: HTMLElement | null, scrollElement: HTMLElement | null,
) => { ) => {
const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderStore( const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderSettingsStore(
(state) => ({ (state) => ({
readingMode: state.settings.readingMode.value, readingMode: state.settings.readingMode.value,
readingDirection: state.settings.readingDirection.value, readingDirection: state.settings.readingDirection.value,
@@ -323,8 +323,8 @@ export const useReaderInfiniteScrollUpdateChapter = (
const elementIntersectionInfo = getElementIntersectionInfo( const elementIntersectionInfo = getElementIntersectionInfo(
readingDirection, readingDirection,
entry.target.getBoundingClientRect(), entry.target.getBoundingClientRect(),
getReaderStore().scrollbar.xSize, getReaderScrollbarStore().xSize,
getReaderStore().scrollbar.ySize, getReaderScrollbarStore().ySize,
); );
const { start: isStartIntersecting, end: isEndIntersecting } = getElementIntersection( const { start: isStartIntersecting, end: isEndIntersecting } = getElementIntersection(
elementIntersectionInfo, 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 { reverseString } from '@/base/utils/Strings.ts';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; 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 = ({ const BaseReaderPageNumber = ({
isDesktop, isDesktop,
readerNavBarWidth, readerNavBarWidth,
}: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> & }: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> &
Pick<NavbarContextType, 'readerNavBarWidth'>) => { Pick<NavbarContextType, 'readerNavBarWidth'>) => {
const scrollbar = useReaderStore((state) => state.scrollbar); const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const { currentPageIndex, pages, totalPages } = useReaderStore((state) => ({ const { currentPageIndex, pages, totalPages } = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex, currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages, pages: state.pages.pages,
totalPages: state.pages.totalPages, totalPages: state.pages.totalPages,
})); }));
const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStore((state) => ({ const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderSettingsStore((state) => ({
readingDirection: state.settings.readingDirection.value, readingDirection: state.settings.readingDirection.value,
shouldShowPageNumber: state.settings.shouldShowPageNumber, shouldShowPageNumber: state.settings.shouldShowPageNumber,
progressBarType: state.settings.progressBarType, progressBarType: state.settings.progressBarType,
})); }));
const isMaximized = useReaderStore((state) => state.progressBar.isMaximized); const isMaximized = useReaderProgressBarStore((state) => state.progressBar.isMaximized);
const pageName = useMemo(() => { const pageName = useMemo(() => {
const currentPageName = getPage(currentPageIndex, pages).name; 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 { MutableRefObject, useEffect } from 'react';
import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts'; 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 = ( export const useReaderHideOverlayOnUserScroll = (
isOverlayVisible: boolean, isOverlayVisible: boolean,
@@ -19,7 +19,7 @@ export const useReaderHideOverlayOnUserScroll = (
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
if (isOverlayVisible) { if (isOverlayVisible) {
getReaderStore().overlay.setIsVisible(false); getReaderOverlayStore().setIsVisible(false);
} }
if (showPreview) { 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 { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx'; import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts'; 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 DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
const BaseReaderOverlayHeaderMobile = forwardRef<HTMLDivElement, MobileHeaderProps>(({ isVisible }, ref) => { const BaseReaderOverlayHeaderMobile = forwardRef<HTMLDivElement, MobileHeaderProps>(({ isVisible }, ref) => {
const { t } = useTranslation(); const { t } = useTranslation();
const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' }); 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 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: mangaId, title } = manga ?? DEFAULT_MANGA;
const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER; 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 { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.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 useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
const wasNavBarStaticRef = useRef(isStaticNav); const wasNavBarStaticRef = useRef(isStaticNav);
@@ -56,13 +60,13 @@ const BaseReaderNavBarDesktop = ({
}: ReaderNavBarDesktopProps & Pick<NavbarContextType, 'setReaderNavBarWidth'>) => { }: ReaderNavBarDesktopProps & Pick<NavbarContextType, 'setReaderNavBarWidth'>) => {
const { t } = useTranslation(); const { t } = useTranslation();
const manga = useReaderStore((state) => state.manga); const manga = useReaderStore((state) => state.manga);
const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStore((state) => ({ const { chapters, currentChapter, previousChapter, nextChapter } = useReaderChaptersStore((state) => ({
chapters: state.chapters.chapters, chapters: state.chapters.chapters,
currentChapter: state.chapters.currentChapter, currentChapter: state.chapters.currentChapter,
previousChapter: state.chapters.previousChapter, previousChapter: state.chapters.previousChapter,
nextChapter: state.chapters.nextChapter, nextChapter: state.chapters.nextChapter,
})); }));
const isStaticNav = useReaderStore((state) => state.settings.isStaticNav); const isStaticNav = useReaderSettingsStore((state) => state.settings.isStaticNav);
const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>(); const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
useResizeObserver( 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 { IconBrowser } from '@/assets/icons/IconBrowser.tsx';
import { IconWebView } from '@/assets/icons/IconWebView.tsx'; import { IconWebView } from '@/assets/icons/IconWebView.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts'; 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'; import { ChapterDownloadInfo, ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
const DownloadButton = ({ const DownloadButton = ({
@@ -62,12 +62,12 @@ const DownloadButton = ({
}; };
export const ReaderNavBarDesktopActions = memo(() => { 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 { id, isBookmarked, realUrl } = currentChapter ?? FALLBACK_CHAPTER;
const { t } = useTranslation(); const { t } = useTranslation();
const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderStore((state) => ({ const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderPagesStore((state) => ({
pageLoadStates: state.pages.pageLoadStates, pageLoadStates: state.pages.pageLoadStates,
setPageLoadStates: state.pages.setPageLoadStates, setPageLoadStates: state.pages.setPageLoadStates,
setRetryFailedPagesKeyPrefix: state.pages.setRetryFailedPagesKeyPrefix, 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 { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopNextPreviousButton.tsx'; 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 { 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'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
const BaseReaderNavBarDesktopPageNavigation = () => { const BaseReaderNavBarDesktopPageNavigation = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const getOptionForDirection = useGetOptionForDirection(); const getOptionForDirection = useGetOptionForDirection();
const { currentPageIndex, pages } = useReaderStore((state) => ({ const { currentPageIndex, pages } = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex, currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages, 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 currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection]; 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 { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts';
import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx'; 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 BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } = const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } =
useReaderStore((state) => ({ useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode, readingMode: state.settings.readingMode,
shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads, shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads,
pageScaleMode: state.settings.pageScaleMode, 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 { ReaderChapterList } from '@/features/reader/overlay/navigation/components/ReaderChapterList.tsx';
import { ReaderBottomBarMobileQuickSettings } from '@/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx'; import { ReaderBottomBarMobileQuickSettings } from '@/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.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 = ({ const BaseReaderBottomBarMobile = ({
openSettings, openSettings,
@@ -32,14 +32,14 @@ const BaseReaderBottomBarMobile = ({
topOffset = 0, topOffset = 0,
}: ReaderBottomBarMobileProps & { topOffset?: number }) => { }: ReaderBottomBarMobileProps & { topOffset?: number }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { currentChapter, chapters } = useReaderStore((state) => ({ const { currentChapter, chapters } = useReaderChaptersStore((state) => ({
currentChapter: state.chapters.currentChapter, currentChapter: state.chapters.currentChapter,
chapters: state.chapters.chapters, chapters: state.chapters.chapters,
})); }));
const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' }); const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-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 [bottomBarRefHeight, setBottomBarRefHeight] = useState(0);
const bottomBarRef = useRef<HTMLDivElement>(null); 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 { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx'; import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.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 BaseReaderBottomBarMobileQuickSettings = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { isActive, toggleActive } = useReaderStore((state) => ({ const { isActive, toggleActive } = useReaderAutoScrollStore((state) => ({
isActive: state.autoScroll.isActive, isActive: state.autoScroll.isActive,
toggleActive: state.autoScroll.toggleActive, toggleActive: state.autoScroll.toggleActive,
})); }));
const { readingMode, readingDirection, autoScroll } = useReaderStore((state) => ({ const { readingMode, readingDirection, autoScroll } = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode, readingMode: state.settings.readingMode,
readingDirection: state.settings.readingDirection, readingDirection: state.settings.readingDirection,
autoScroll: state.settings.autoScroll, 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 { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotWrapper.tsx';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { ReadingMode } from '@/features/reader/Reader.types.ts'; 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 = ({ const BaseReaderProgressBar = ({
slotProps, slotProps,
@@ -62,14 +66,14 @@ const BaseReaderProgressBar = ({
direction: ReturnType<typeof ReaderService.useGetThemeDirection>; direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
fullSegmentClicks: boolean; fullSegmentClicks: boolean;
}) => { }) => {
const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderStore((state) => ({ const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderPagesStore((state) => ({
pages: state.pages.pages, pages: state.pages.pages,
pageLoadStates: state.pages.pageLoadStates, pageLoadStates: state.pages.pageLoadStates,
totalPages: state.pages.totalPages, totalPages: state.pages.totalPages,
currentPageIndex: state.pages.currentPageIndex, currentPageIndex: state.pages.currentPageIndex,
})); }));
const readingMode = useReaderStore((state) => state.settings.readingMode.value); const readingMode = useReaderSettingsStore((state) => state.settings.readingMode.value);
const { isDragging, setIsDragging } = useReaderStore((state) => ({ const { isDragging, setIsDragging } = useReaderProgressBarStore((state) => ({
isDragging: state.progressBar.isDragging, isDragging: state.progressBar.isDragging,
setIsDragging: state.progressBar.setIsDragging, 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 { ReaderProgressBarSlotDesktop } from '@/features/reader/overlay/progress-bar/desktop/components/ReaderProgressBarSlotDesktop.tsx';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.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 = ({ const BaseStandardReaderProgressBar = ({
readerNavBarWidth, readerNavBarWidth,
@@ -30,17 +35,16 @@ const BaseStandardReaderProgressBar = ({
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const scrollbar = useReaderStore((state) => state.scrollbar); const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const totalPages = useReaderStore((state) => state.pages.totalPages); const totalPages = useReaderPagesStore((state) => state.pages.totalPages);
const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = useReaderStore( const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } =
(state) => ({ useReaderSettingsStore((state) => ({
progressBarType: state.settings.progressBarType, progressBarType: state.settings.progressBarType,
progressBarSize: state.settings.progressBarSize, progressBarSize: state.settings.progressBarSize,
progressBarPosition: state.settings.progressBarPosition, progressBarPosition: state.settings.progressBarPosition,
progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
}), }));
); const { isMaximized, setIsMaximized, isDragging } = useReaderProgressBarStore((state) => ({
const { isMaximized, setIsMaximized, isDragging } = useReaderStore((state) => ({
isMaximized: state.progressBar.isMaximized, isMaximized: state.progressBar.isMaximized,
setIsMaximized: state.progressBar.setIsMaximized, setIsMaximized: state.progressBar.setIsMaximized,
isDragging: state.progressBar.isDragging, 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 { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.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'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = { const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = {
@@ -48,21 +55,21 @@ const BaseMobileReaderProgressBar = ({
topOffset?: number; topOffset?: number;
bottomOffset?: number; bottomOffset?: number;
}) => { }) => {
const scrollbar = useReaderStore((state) => state.scrollbar); const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const isVisible = useReaderStore((state) => state.overlay.isVisible); const isVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
const { currentPageIndex, pages } = useReaderStore((state) => ({ const { currentPageIndex, pages } = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex, currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages, pages: state.pages.pages,
})); }));
const { previousChapter, nextChapter } = useReaderStore((state) => ({ const { previousChapter, nextChapter } = useReaderChaptersStore((state) => ({
previousChapter: state.chapters.previousChapter, previousChapter: state.chapters.previousChapter,
nextChapter: state.chapters.nextChapter, nextChapter: state.chapters.nextChapter,
})); }));
const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStore((state) => ({ const { progressBarPosition, progressBarPositionAutoVertical } = useReaderSettingsStore((state) => ({
progressBarPosition: state.settings.progressBarPosition, progressBarPosition: state.settings.progressBarPosition,
progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
})); }));
const { setIsMaximized, isDragging } = useReaderStore((state) => ({ const { setIsMaximized, isDragging } = useReaderProgressBarStore((state) => ({
setIsMaximized: state.progressBar.setIsMaximized, setIsMaximized: state.progressBar.setIsMaximized,
isDragging: state.progressBar.isDragging, 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 { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
import { useChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx'; import { useChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts'; 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'; import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll.tsx';
@@ -45,13 +52,15 @@ const BaseReader = ({
}: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'>) => { }: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'>) => {
const { t } = useTranslation(); const { t } = useTranslation();
const manga = useReaderStore((state) => state.manga); const manga = useReaderStore((state) => state.manga);
const overlay = useReaderStore((state) => state.overlay); const overlay = useReaderOverlayStore((state) => state.overlay);
const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderStore((state) => ({ const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderChaptersStore(
mangaChapters: state.chapters.mangaChapters, (state) => ({
initialChapter: state.chapters.initialChapter, mangaChapters: state.chapters.mangaChapters,
chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling, initialChapter: state.chapters.initialChapter,
currentChapter: state.chapters.currentChapter, chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling,
})); currentChapter: state.chapters.currentChapter,
}),
);
const { const {
shouldSkipDupChapters, shouldSkipDupChapters,
shouldSkipFilteredChapters, shouldSkipFilteredChapters,
@@ -62,7 +71,7 @@ const BaseReader = ({
shouldShowReadingModePreview, shouldShowReadingModePreview,
shouldShowTapZoneLayoutPreview, shouldShowTapZoneLayoutPreview,
setSettings, setSettings,
} = useReaderStore((state) => ({ } = useReaderSettingsStore((state) => ({
shouldSkipDupChapters: state.settings.shouldSkipDupChapters, shouldSkipDupChapters: state.settings.shouldSkipDupChapters,
shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters, shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters,
backgroundColor: state.settings.backgroundColor, backgroundColor: state.settings.backgroundColor,
@@ -73,7 +82,7 @@ const BaseReader = ({
shouldShowTapZoneLayoutPreview: state.settings.shouldShowTapZoneLayoutPreview, shouldShowTapZoneLayoutPreview: state.settings.shouldShowTapZoneLayoutPreview,
setSettings: state.settings.setSettings, setSettings: state.settings.setSettings,
})); }));
const setShowPreview = useReaderStore((state) => state.tapZone.setShowPreview); const setShowPreview = useReaderTapZoneStore((state) => state.tapZone.setShowPreview);
const scrollElementRef = useRef<HTMLDivElement | null>(null); 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 { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { TReaderProgressCurrentPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.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 = ( const getScrollDirectionInvert = (
scrollDirection: ScrollDirection, scrollDirection: ScrollDirection,
@@ -118,7 +124,7 @@ export class ReaderControls {
const getNewScrollPosition = (currentPos: number, elementSize: number) => const getNewScrollPosition = (currentPos: number, elementSize: number) =>
currentPos + elementSize * scrollAmount * scrollDirection; currentPos + elementSize * scrollAmount * scrollDirection;
getReaderStore().overlay.setIsVisible(false); getReaderOverlayStore().setIsVisible(false);
setShowPreview(false); setShowPreview(false);
const doScroll = ( const doScroll = (
@@ -162,16 +168,15 @@ export class ReaderControls {
scrollIntoView: boolean = true, scrollIntoView: boolean = true,
): void { ): void {
const { const {
chapters: { currentChapter,
currentChapter, previousChapter,
previousChapter, nextChapter,
nextChapter, chapters,
chapters, visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder },
visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder }, setReaderStateChapters,
setReaderStateChapters, } = getReaderChaptersStore();
}, const { shouldInformAboutMissingChapter, shouldInformAboutScanlatorChange, shouldUseInfiniteScroll } =
settings: { shouldInformAboutMissingChapter, shouldInformAboutScanlatorChange, shouldUseInfiniteScroll }, getReaderSettingsStore();
} = getReaderStore();
if (!currentChapter) { if (!currentChapter) {
return; return;
@@ -311,10 +316,9 @@ export class ReaderControls {
} }
static openPage(page: number | 'previous' | 'next', forceDirection?: Direction, hideOverlay: boolean = true): void { static openPage(page: number | 'previous' | 'next', forceDirection?: Direction, hideOverlay: boolean = true): void {
const { const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } =
pages: { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode }, getReaderPagesStore();
settings: { readingDirection, readingMode, shouldShowTransitionPage }, const { readingDirection, readingMode, shouldShowTransitionPage } = getReaderSettingsStore();
} = getReaderStore();
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value]; const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
@@ -336,8 +340,8 @@ export class ReaderControls {
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value); const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
if (hideOverlay) { if (hideOverlay) {
getReaderStore().overlay.setIsVisible(false); getReaderOverlayStore().setIsVisible(false);
getReaderStore().tapZone.setShowPreview(false); getReaderTapZoneStore().setShowPreview(false);
} }
const hideTransitionPage = () => setTransitionPageMode(ReaderTransitionPageMode.NONE); const hideTransitionPage = () => setTransitionPageMode(ReaderTransitionPageMode.NONE);
@@ -360,7 +364,7 @@ export class ReaderControls {
isFirstPage && isFirstPage &&
(!shouldShowTransitionPage || isPreviousTransitionPageVisible) && (!shouldShowTransitionPage || isPreviousTransitionPageVisible) &&
convertedPage === 'previous' && convertedPage === 'previous' &&
!!getReaderStore().chapters.previousChapter; !!getReaderChaptersStore().previousChapter;
if (shouldOpenPreviousChapter) { if (shouldOpenPreviousChapter) {
ReaderControls.openChapter('previous'); ReaderControls.openChapter('previous');
return; return;
@@ -370,7 +374,7 @@ export class ReaderControls {
isLastPage && isLastPage &&
(!shouldShowTransitionPage || isNextTransitionPageVisible) && (!shouldShowTransitionPage || isNextTransitionPageVisible) &&
convertedPage === 'next' && convertedPage === 'next' &&
!!getReaderStore().chapters.nextChapter; !!getReaderChaptersStore().nextChapter;
if (shouldOpenNextChapter) { if (shouldOpenNextChapter) {
ReaderControls.openChapter('next'); ReaderControls.openChapter('next');
return; return;
@@ -415,17 +419,15 @@ export class ReaderControls {
return useCallback( return useCallback(
(pageIndex, debounceChapterUpdate = true, endReached = false) => { (pageIndex, debounceChapterUpdate = true, endReached = false) => {
const { currentPageIndex, setCurrentPageIndex } = getReaderPagesStore();
const { const {
pages: { currentPageIndex, setCurrentPageIndex }, currentChapter,
chapters: { chapters,
currentChapter, previousChapter,
chapters, nextChapter,
previousChapter, visibleChapters,
nextChapter, setReaderStateChapters,
visibleChapters, } = getReaderChaptersStore();
setReaderStateChapters,
},
} = getReaderStore();
if (pageIndex === currentPageIndex && !endReached) { if (pageIndex === currentPageIndex && !endReached) {
return; return;
@@ -526,14 +528,14 @@ export class ReaderControls {
return; return;
} }
const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderStore().settings; const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderSettingsStore();
const rect = e.currentTarget.getBoundingClientRect(); const rect = e.currentTarget.getBoundingClientRect();
const rectRelativeX = e.clientX - rect.left; const rectRelativeX = e.clientX - rect.left;
const rectRelativeY = e.clientY - rect.top; const rectRelativeY = e.clientY - rect.top;
const action = ReaderTapZoneService.getAction(rectRelativeX, rectRelativeY); const action = ReaderTapZoneService.getAction(rectRelativeX, rectRelativeY);
getReaderStore().tapZone.setShowPreview(false); getReaderTapZoneStore().setShowPreview(false);
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value); const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
const scrollDirection = const scrollDirection =
@@ -541,7 +543,7 @@ export class ReaderControls {
switch (action) { switch (action) {
case TapZoneRegionType.MENU: case TapZoneRegionType.MENU:
getReaderStore().overlay.setIsVisible(isStaticNav || !getReaderStore().overlay.isVisible); getReaderOverlayStore().setIsVisible(isStaticNav || !getReaderOverlayStore().isVisible);
break; break;
case TapZoneRegionType.PREVIOUS: case TapZoneRegionType.PREVIOUS:
case TapZoneRegionType.NEXT: case TapZoneRegionType.NEXT:
@@ -552,7 +554,7 @@ export class ReaderControls {
readingMode.value, readingMode.value,
readingDirection.value, readingDirection.value,
scrollElement, scrollElement,
getReaderStore().tapZone.setShowPreview, getReaderTapZoneStore().setShowPreview,
scrollAmount, scrollAmount,
); );
} else { } 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 { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
import { getMetadataKey } from '@/features/metadata/Metadata.utils.ts'; import { getMetadataKey } from '@/features/metadata/Metadata.utils.ts';
import { DirectionOffset } from '@/base/Base.types.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'; import { ReactRouter } from '@/lib/react-router/ReactRouter.ts';
const DIRECTION_TO_INVERTED: Record<Direction, Direction> = { const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
@@ -152,11 +157,9 @@ export class ReaderService {
return useCallback( return useCallback(
(patch) => { (patch) => {
const { const { manga } = getReaderStore();
manga, const { currentChapter, mangaChapters, chapters } = getReaderChaptersStore();
chapters: { currentChapter, mangaChapters, chapters }, const { shouldSkipDupChapters } = getReaderSettingsStore();
settings: { shouldSkipDupChapters },
} = getReaderStore();
if (!manga || !currentChapter || !mangaChapters) { if (!manga || !currentChapter || !mangaChapters) {
return; return;
@@ -227,7 +230,7 @@ export class ReaderService {
static useGetThemeDirection(): Direction { static useGetThemeDirection(): Direction {
const { direction } = useTheme(); 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 return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection
? direction ? direction
@@ -336,7 +339,7 @@ export class ReaderService {
static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } { static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } {
const isTouchDevice = MediaQuery.useIsTouchDevice(); const isTouchDevice = MediaQuery.useIsTouchDevice();
const overlayMode = useReaderStore((state) => state.settings.overlayMode); const overlayMode = useReaderSettingsStore((state) => state.settings.overlayMode);
const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO; const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO;
const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP; const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP;
@@ -353,7 +356,7 @@ export class ReaderService {
} }
static useExit(): () => void { static useExit(): () => void {
const exitMode = useReaderStore((state) => state.settings.exitMode); const exitMode = useReaderSettingsStore((state) => state.settings.exitMode);
const handleBack = useBackButton(); const handleBack = useBackButton();
const navigate = useNavigate(); 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 { ReaderDefaultLayoutSettings } from '@/features/reader/settings/layout/ReaderDefaultLayoutSettings.tsx';
import { ReaderHotkeysSettings } from '@/features/reader/hotkeys/settings/ReaderHotkeysSettings.tsx'; import { ReaderHotkeysSettings } from '@/features/reader/hotkeys/settings/ReaderHotkeysSettings.tsx';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.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 = ({ const BaseReaderSettingsTabs = ({
activeTab, activeTab,
@@ -45,7 +45,7 @@ const BaseReaderSettingsTabs = ({
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const isTouchDevice = MediaQuery.useIsTouchDevice(); const isTouchDevice = MediaQuery.useIsTouchDevice();
const setShowPreview = useReaderStore((state) => state.tapZone.setShowPreview); const setShowPreview = useReaderTapZoneStore((state) => state.tapZone.setShowPreview);
return ( 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 { ReaderSettingTab } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { useDisableAllHotkeysWhileMounted } from '@/features/hotkeys/Hotkeys.utils.ts'; import { useDisableAllHotkeysWhileMounted } from '@/features/hotkeys/Hotkeys.utils.ts';
import { applyStyles } from '@/base/utils/ApplyStyles.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 }) => { export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => {
const settings = useReaderStore((state) => state.settings); const settings = useReaderSettingsStore((state) => state.settings);
useDisableAllHotkeysWhileMounted(isOpen); 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 useReaderStore = <T>(selector: (state: ReaderStore) => T): T => readerStore(useShallow(selector));
export const getReaderStore = () => readerStore.getState(); 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 { ReadingDirection } from '@/features/reader/Reader.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; 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 CANVAS_ID = 'reader-tap-zone-layout-canvas';
const BaseTapZoneLayout = ({ readerNavBarWidth }: Pick<NavbarContextType, 'readerNavBarWidth'>) => { const BaseTapZoneLayout = ({ readerNavBarWidth }: Pick<NavbarContextType, 'readerNavBarWidth'>) => {
const theme = useTheme(); const theme = useTheme();
const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderStore((state) => ({ const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderSettingsStore((state) => ({
tapZoneLayout: state.settings.tapZoneLayout.value, tapZoneLayout: state.settings.tapZoneLayout.value,
tapZoneInvertMode: state.settings.tapZoneInvertMode.value, tapZoneInvertMode: state.settings.tapZoneInvertMode.value,
readingDirection: state.settings.readingDirection.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 [width, setWidth] = useState(0);
const [height, setHeight] = 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 { useReaderPreserveScrollPosition } from '@/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts';
import { ChapterIdInfo } from '@/features/chapter/Chapter.types.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> = { const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
[ReadingMode.SINGLE_PAGE]: PageInViewportType.X, [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -78,7 +86,7 @@ const BaseReaderViewer = forwardRef(
ref: ForwardedRef<HTMLDivElement | null>, ref: ForwardedRef<HTMLDivElement | null>,
) => { ) => {
const { direction: themeDirection } = useTheme(); const { direction: themeDirection } = useTheme();
const isOverlayVisible = useReaderStore((state) => state.overlay.isVisible); const isOverlayVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
const { const {
currentPageIndex, currentPageIndex,
pageToScrollToIndex, pageToScrollToIndex,
@@ -92,7 +100,7 @@ const BaseReaderViewer = forwardRef(
transitionPageMode, transitionPageMode,
retryFailedPagesKeyPrefix, retryFailedPagesKeyPrefix,
setTransitionPageMode, setTransitionPageMode,
} = useReaderStore((state) => ({ } = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex, currentPageIndex: state.pages.currentPageIndex,
pageToScrollToIndex: state.pages.pageToScrollToIndex, pageToScrollToIndex: state.pages.pageToScrollToIndex,
setPageToScrollToIndex: state.pages.setPageToScrollToIndex, setPageToScrollToIndex: state.pages.setPageToScrollToIndex,
@@ -113,7 +121,7 @@ const BaseReaderViewer = forwardRef(
visibleChapters, visibleChapters,
setReaderStateChapters, setReaderStateChapters,
isCurrentChapterReady, isCurrentChapterReady,
} = useReaderStore((state) => ({ } = useReaderChaptersStore((state) => ({
initialChapter: state.chapters.initialChapter, initialChapter: state.chapters.initialChapter,
currentChapter: state.chapters.currentChapter, currentChapter: state.chapters.currentChapter,
chapters: state.chapters.chapters, chapters: state.chapters.chapters,
@@ -132,7 +140,7 @@ const BaseReaderViewer = forwardRef(
customFilter, customFilter,
shouldStretchPage, shouldStretchPage,
isStaticNav, isStaticNav,
} = useReaderStore((state) => ({ } = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode.value, readingMode: state.settings.readingMode.value,
readingDirection: state.settings.readingDirection.value, readingDirection: state.settings.readingDirection.value,
readerWidth: state.settings.readerWidth.value, readerWidth: state.settings.readerWidth.value,
@@ -144,7 +152,7 @@ const BaseReaderViewer = forwardRef(
shouldStretchPage: state.settings.shouldStretchPage.value, shouldStretchPage: state.settings.shouldStretchPage.value,
isStaticNav: state.settings.isStaticNav, isStaticNav: state.settings.isStaticNav,
})); }));
const { showPreview, setShowPreview } = useReaderStore((state) => ({ const { showPreview, setShowPreview } = useReaderTapZoneStore((state) => ({
showPreview: state.tapZone.showPreview, showPreview: state.tapZone.showPreview,
setShowPreview: state.tapZone.setShowPreview, setShowPreview: state.tapZone.setShowPreview,
})); }));
@@ -159,7 +167,7 @@ const BaseReaderViewer = forwardRef(
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode); const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
const isDragging = useMouseDragScroll(scrollElementRef); const isDragging = useMouseDragScroll(scrollElementRef);
const automaticScrolling = useReaderStore((state) => ({ const automaticScrolling = useReaderAutoScrollStore((state) => ({
isPaused: state.autoScroll.isPaused, isPaused: state.autoScroll.isPaused,
pause: state.autoScroll.pause, pause: state.autoScroll.pause,
resume: state.autoScroll.resume, 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 { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { MediaQuery } from '@/base/utils/MediaQuery.tsx'; import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; 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 => const getCustomFilterString = (customFilter: ReaderCustomFilter): string =>
Object.keys(customFilter) Object.keys(customFilter)
@@ -86,7 +86,7 @@ const BaseReaderPage = ({
const { src } = props; const { src } = props;
const isTabletWidth = MediaQuery.useIsTabletWidth(); const isTabletWidth = MediaQuery.useIsTabletWidth();
const scrollbar = useReaderStore((state) => state.scrollbar); const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const handleLoad = useCallback( const handleLoad = useCallback(
() => onLoad?.(pagesIndex, src, isPrimaryPage), () => 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 { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { ChapterType } from '@/lib/graphql/generated/graphql.ts'; import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
import { ChapterIdInfo } from '@/features/chapter/Chapter.types.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 = ({ const ChapterInfo = ({
title, title,
@@ -93,9 +99,9 @@ const BaseReaderTransitionPage = ({
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const manga = useReaderStore((state) => state.manga); const manga = useReaderStore((state) => state.manga);
const scrollbar = useReaderStore((state) => state.scrollbar); const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const transitionPageMode = useReaderStore((state) => state.pages.transitionPageMode); const transitionPageMode = useReaderPagesStore((state) => state.pages.transitionPageMode);
const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderStore((state) => ({ const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode.value, readingMode: state.settings.readingMode.value,
backgroundColor: state.settings.backgroundColor, backgroundColor: state.settings.backgroundColor,
shouldShowTransitionPage: state.settings.shouldShowTransitionPage, shouldShowTransitionPage: state.settings.shouldShowTransitionPage,
@@ -223,7 +229,7 @@ export const ReaderTransitionPage = withPropsFrom(
memo(BaseReaderTransitionPage) as typeof BaseReaderTransitionPage, memo(BaseReaderTransitionPage) as typeof BaseReaderTransitionPage,
[ [
({ chapterId }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId'>) => { ({ chapterId }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId'>) => {
const chapters = useReaderStore((state) => state.chapters.chapters); const chapters = useReaderChaptersStore((state) => state.chapters.chapters);
const currentChapterIndex = useMemo( const currentChapterIndex = useMemo(
() => chapters.findIndex((chapter) => chapter.id === chapterId), () => chapters.findIndex((chapter) => chapter.id === chapterId),
@@ -246,7 +252,7 @@ export const ReaderTransitionPage = withPropsFrom(
useNavBarContext, useNavBarContext,
({ chapterId, type }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId' | 'type'>) => { ({ chapterId, type }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId' | 'type'>) => {
const handleBack = useBackButton(); const handleBack = useBackButton();
const chapters = useReaderStore((state) => state.chapters.chapters); const chapters = useReaderChaptersStore((state) => state.chapters.chapters);
const currentChapterIndex = useMemo( const currentChapterIndex = useMemo(
() => chapters.findIndex((chapter) => chapter.id === chapterId), () => chapters.findIndex((chapter) => chapter.id === chapterId),