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

Always use "useShallow" for store selection

Browse Source
This commit is contained in:
schroda
2025-09-21 00:28:38 +02:00
parent 5730690ae6
commit ed488f76dd
24 changed files with 85 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderAutoScroll = ({ const BaseReaderAutoScroll = ({
themeDirection, themeDirection,
@@ -26,11 +26,11 @@ const BaseReaderAutoScroll = ({
themeDirection: Direction; themeDirection: Direction;
combinedDirection: Direction; combinedDirection: Direction;
}) => { }) => {
const { scrollRef, direction } = useReaderStoreShallow((state) => ({ const { scrollRef, direction } = useReaderStore((state) => ({
scrollRef: state.autoScroll.scrollRef, scrollRef: state.autoScroll.scrollRef,
direction: state.autoScroll.direction, direction: state.autoScroll.direction,
})); }));
const { readingMode, autoScroll } = useReaderStoreShallow((state) => ({ const { readingMode, autoScroll } = useReaderStore((state) => ({
readingMode: state.settings.readingMode.value, readingMode: state.settings.readingMode.value,
autoScroll: state.settings.autoScroll, autoScroll: state.settings.autoScroll,
})); }));

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 { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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 } = useReaderStoreShallow((state) => ({ const { isActive, toggleActive } = useReaderStore((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 { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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,
} = useReaderStoreShallow((state) => state.settings.customFilter.rgba); } = useReaderStore((state) => state.settings.customFilter.rgba);
if (!enabled) { if (!enabled) {
return null; return null;

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

@@ -23,7 +23,7 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { getReaderStore, useReaderStore } 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 +60,7 @@ export const ReaderHotkeys = ({
}) => { }) => {
const readerThemeDirection = ReaderService.useGetThemeDirection(); const readerThemeDirection = ReaderService.useGetThemeDirection();
const { enableScope, disableScope } = useHotkeysContext(); const { enableScope, disableScope } = useHotkeysContext();
const { hotkeys } = useReaderStoreShallow((state) => ({ const { hotkeys } = useReaderStore((state) => ({
hotkeys: state.settings.hotkeys, hotkeys: state.settings.hotkeys,
})); }));
const exitReader = ReaderService.useExit(); const exitReader = ReaderService.useExit();

4
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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { getReaderStore, useReaderStore } 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 } = useReaderStoreShallow( const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderStore(
(state) => ({ (state) => ({
readingMode: state.settings.readingMode.value, readingMode: state.settings.readingMode.value,
readingDirection: state.settings.readingDirection.value, readingDirection: state.settings.readingDirection.value,

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

@@ -17,20 +17,20 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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 = useReaderStoreShallow((state) => state.scrollbar); const scrollbar = useReaderStore((state) => state.scrollbar);
const { currentPageIndex, pages, totalPages } = useReaderStoreShallow((state) => ({ const { currentPageIndex, pages, totalPages } = useReaderStore((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 } = useReaderStoreShallow((state) => ({ const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStore((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,

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

@@ -30,17 +30,17 @@ 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 { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { 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 = useReaderStoreShallow((state) => state.chapters.currentChapter); const currentChapter = useReaderStore((state) => state.chapters.currentChapter);
const manga = useReaderStoreShallow((state) => state.manga); const manga = useReaderStore((state) => state.manga);
const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const scrollbar = useReaderStore((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;

4
src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx
View File

@@ -14,7 +14,7 @@ import { memo } from 'react';
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx'; import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
import { useManageMangaLibraryState } from '@/features/manga/hooks/useManageMangaLibraryState.tsx'; import { useManageMangaLibraryState } from '@/features/manga/hooks/useManageMangaLibraryState.tsx';
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts'; import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const ACTION_FALLBACK_MANGA = { const ACTION_FALLBACK_MANGA = {
...FALLBACK_MANGA, ...FALLBACK_MANGA,
@@ -23,7 +23,7 @@ const ACTION_FALLBACK_MANGA = {
}; };
export const ReaderLibraryButton = memo(() => { export const ReaderLibraryButton = memo(() => {
const manga = useReaderStoreShallow((state) => state.manga); const manga = useReaderStore((state) => state.manga);
const { inLibrary } = manga ?? ACTION_FALLBACK_MANGA; const { inLibrary } = manga ?? ACTION_FALLBACK_MANGA;

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

@@ -29,7 +29,7 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { 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);
@@ -55,8 +55,8 @@ const BaseReaderNavBarDesktop = ({
setReaderNavBarWidth, setReaderNavBarWidth,
}: ReaderNavBarDesktopProps & Pick<NavbarContextType, 'setReaderNavBarWidth'>) => { }: ReaderNavBarDesktopProps & Pick<NavbarContextType, 'setReaderNavBarWidth'>) => {
const { t } = useTranslation(); const { t } = useTranslation();
const manga = useReaderStoreShallow((state) => state.manga); const manga = useReaderStore((state) => state.manga);
const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStoreShallow((state) => ({ const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStore((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,

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 { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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 = useReaderStoreShallow((state) => state.chapters.currentChapter); const currentChapter = useReaderStore((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 } = useReaderStoreShallow((state) => ({ const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderStore((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,

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

@@ -17,13 +17,13 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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 } = useReaderStoreShallow((state) => ({ const { currentPageIndex, pages } = useReaderStore((state) => ({
currentPageIndex: state.pages.currentPageIndex, currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages, pages: state.pages.pages,
})); }));

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 { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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 } =
useReaderStoreShallow((state) => ({ useReaderStore((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 { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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 } = useReaderStoreShallow((state) => ({ const { currentChapter, chapters } = useReaderStore((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 = useReaderStoreShallow((state) => state.scrollbar); const scrollbar = useReaderStore((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 { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderBottomBarMobileQuickSettings = () => { const BaseReaderBottomBarMobileQuickSettings = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { isActive, toggleActive } = useReaderStoreShallow((state) => ({ const { isActive, toggleActive } = useReaderStore((state) => ({
isActive: state.autoScroll.isActive, isActive: state.autoScroll.isActive,
toggleActive: state.autoScroll.toggleActive, toggleActive: state.autoScroll.toggleActive,
})); }));
const { readingMode, readingDirection, autoScroll } = useReaderStoreShallow((state) => ({ const { readingMode, readingDirection, autoScroll } = useReaderStore((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,

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

@@ -31,7 +31,7 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderProgressBar = ({ const BaseReaderProgressBar = ({
slotProps, slotProps,
@@ -62,14 +62,14 @@ const BaseReaderProgressBar = ({
direction: ReturnType<typeof ReaderService.useGetThemeDirection>; direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
fullSegmentClicks: boolean; fullSegmentClicks: boolean;
}) => { }) => {
const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderStoreShallow((state) => ({ const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderStore((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 = useReaderStore((state) => state.settings.readingMode.value);
const { isDragging, setIsDragging } = useReaderStoreShallow((state) => ({ const { isDragging, setIsDragging } = useReaderStore((state) => ({
isDragging: state.progressBar.isDragging, isDragging: state.progressBar.isDragging,
setIsDragging: state.progressBar.setIsDragging, setIsDragging: state.progressBar.setIsDragging,
})); }));

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

@@ -20,7 +20,7 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseStandardReaderProgressBar = ({ const BaseStandardReaderProgressBar = ({
readerNavBarWidth, readerNavBarWidth,
@@ -30,16 +30,17 @@ const BaseStandardReaderProgressBar = ({
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const scrollbar = useReaderStore((state) => state.scrollbar);
const totalPages = useReaderStore((state) => state.pages.totalPages); const totalPages = useReaderStore((state) => state.pages.totalPages);
const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = useReaderStore(
useReaderStoreShallow((state) => ({ (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 } = useReaderStoreShallow((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,

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

@@ -28,7 +28,7 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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,9 +48,9 @@ const BaseMobileReaderProgressBar = ({
topOffset?: number; topOffset?: number;
bottomOffset?: number; bottomOffset?: number;
}) => { }) => {
const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const scrollbar = useReaderStore((state) => state.scrollbar);
const isVisible = useReaderStore((state) => state.overlay.isVisible); const isVisible = useReaderStore((state) => state.overlay.isVisible);
const { currentPageIndex, pages } = useReaderStoreShallow((state) => ({ const { currentPageIndex, pages } = useReaderStore((state) => ({
currentPageIndex: state.pages.currentPageIndex, currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages, pages: state.pages.pages,
})); }));
@@ -58,11 +58,11 @@ const BaseMobileReaderProgressBar = ({
previousChapter: state.chapters.previousChapter, previousChapter: state.chapters.previousChapter,
nextChapter: state.chapters.nextChapter, nextChapter: state.chapters.nextChapter,
})); }));
const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStoreShallow((state) => ({ const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStore((state) => ({
progressBarPosition: state.settings.progressBarPosition, progressBarPosition: state.settings.progressBarPosition,
progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
})); }));
const { setIsMaximized, isDragging } = useReaderStoreShallow((state) => ({ const { setIsMaximized, isDragging } = useReaderStore((state) => ({
setIsMaximized: state.progressBar.setIsMaximized, setIsMaximized: state.progressBar.setIsMaximized,
isDragging: state.progressBar.isDragging, isDragging: state.progressBar.isDragging,
})); }));

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

@@ -35,7 +35,8 @@ 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 { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll.tsx'; import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll.tsx';
const BaseReader = ({ const BaseReader = ({
@@ -43,16 +44,14 @@ const BaseReader = ({
readerNavBarWidth, readerNavBarWidth,
}: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'>) => { }: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'>) => {
const { t } = useTranslation(); const { t } = useTranslation();
const manga = useReaderStoreShallow((state) => state.manga); const manga = useReaderStore((state) => state.manga);
const overlay = useReaderStoreShallow((state) => state.overlay); const overlay = useReaderStore((state) => state.overlay);
const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderStoreShallow( const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderStore((state) => ({
(state) => ({ mangaChapters: state.chapters.mangaChapters,
mangaChapters: state.chapters.mangaChapters, initialChapter: state.chapters.initialChapter,
initialChapter: state.chapters.initialChapter, chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling,
chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling, currentChapter: state.chapters.currentChapter,
currentChapter: state.chapters.currentChapter, }));
}),
);
const { const {
shouldSkipDupChapters, shouldSkipDupChapters,
shouldSkipFilteredChapters, shouldSkipFilteredChapters,
@@ -63,7 +62,7 @@ const BaseReader = ({
shouldShowReadingModePreview, shouldShowReadingModePreview,
shouldShowTapZoneLayoutPreview, shouldShowTapZoneLayoutPreview,
setSettings, setSettings,
} = useReaderStoreShallow((state) => ({ } = useReaderStore((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,
@@ -112,7 +111,7 @@ const BaseReader = ({
const error = mangaResponse.error ?? chaptersResponse.error ?? defaultSettingsResponse.error; const error = mangaResponse.error ?? chaptersResponse.error ?? defaultSettingsResponse.error;
useEffect(() => { useEffect(() => {
useReaderStore.getState().setManga(mangaResponse.data?.manga); getReaderStore().setManga(mangaResponse.data?.manga);
}, [mangaResponse.data?.manga]); }, [mangaResponse.data?.manga]);
useReaderResetStates(); useReaderResetStates();

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 { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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 = useReaderStoreShallow((state) => state.settings); const settings = useReaderStore((state) => state.settings);
useDisableAllHotkeysWhileMounted(isOpen); useDisableAllHotkeysWhileMounted(isOpen);

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

@@ -63,7 +63,7 @@ const DEFAULT_STATE = {
}, },
} satisfies Pick<ReaderStore, 'manga'> & { scrollbar: Pick<ReaderStore['scrollbar'], 'xSize' | 'ySize'> }; } satisfies Pick<ReaderStore, 'manga'> & { scrollbar: Pick<ReaderStore['scrollbar'], 'xSize' | 'ySize'> };
export const useReaderStore = create<ReaderStore>()( const readerStore = create<ReaderStore>()(
immer((set, get, store) => ({ immer((set, get, store) => ({
...DEFAULT_STATE, ...DEFAULT_STATE,
reset: () => reset: () =>
@@ -114,6 +114,5 @@ export const useReaderStore = create<ReaderStore>()(
...createReaderTapZoneStoreSlice(set, get, store), ...createReaderTapZoneStoreSlice(set, get, store),
})), })),
); );
export const useReaderStoreShallow = <T>(selector: (state: ReaderStore) => T): T => export const useReaderStore = <T>(selector: (state: ReaderStore) => T): T => readerStore(useShallow(selector));
useReaderStore(useShallow(selector)); export const getReaderStore = () => readerStore.getState();
export const getReaderStore = () => useReaderStore.getState();

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

@@ -15,13 +15,13 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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 } = useReaderStoreShallow((state) => ({ const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderStore((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,

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

@@ -56,7 +56,7 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { getReaderStore, useReaderStore } 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,
@@ -92,7 +92,7 @@ const BaseReaderViewer = forwardRef(
transitionPageMode, transitionPageMode,
retryFailedPagesKeyPrefix, retryFailedPagesKeyPrefix,
setTransitionPageMode, setTransitionPageMode,
} = useReaderStoreShallow((state) => ({ } = useReaderStore((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 +113,7 @@ const BaseReaderViewer = forwardRef(
visibleChapters, visibleChapters,
setReaderStateChapters, setReaderStateChapters,
isCurrentChapterReady, isCurrentChapterReady,
} = useReaderStoreShallow((state) => ({ } = useReaderStore((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 +132,7 @@ const BaseReaderViewer = forwardRef(
customFilter, customFilter,
shouldStretchPage, shouldStretchPage,
isStaticNav, isStaticNav,
} = useReaderStoreShallow((state) => ({ } = useReaderStore((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 +144,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 } = useReaderStoreShallow((state) => ({ const { showPreview, setShowPreview } = useReaderStore((state) => ({
showPreview: state.tapZone.showPreview, showPreview: state.tapZone.showPreview,
setShowPreview: state.tapZone.setShowPreview, setShowPreview: state.tapZone.setShowPreview,
})); }));
@@ -159,7 +159,7 @@ const BaseReaderViewer = forwardRef(
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode); const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
const isDragging = useMouseDragScroll(scrollElementRef); const isDragging = useMouseDragScroll(scrollElementRef);
const automaticScrolling = useReaderStoreShallow((state) => ({ const automaticScrolling = useReaderStore((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 { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } 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 = useReaderStoreShallow((state) => state.scrollbar); const scrollbar = useReaderStore((state) => state.scrollbar);
const handleLoad = useCallback( const handleLoad = useCallback(
() => onLoad?.(pagesIndex, src, isPrimaryPage), () => onLoad?.(pagesIndex, src, isPrimaryPage),

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

@@ -29,7 +29,7 @@ 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, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const ChapterInfo = ({ const ChapterInfo = ({
title, title,
@@ -92,10 +92,10 @@ const BaseReaderTransitionPage = ({
handleBack: () => void; handleBack: () => void;
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const manga = useReaderStoreShallow((state) => state.manga); const manga = useReaderStore((state) => state.manga);
const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const scrollbar = useReaderStore((state) => state.scrollbar);
const transitionPageMode = useReaderStore((state) => state.pages.transitionPageMode); const transitionPageMode = useReaderStore((state) => state.pages.transitionPageMode);
const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderStoreShallow((state) => ({ const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderStore((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 +223,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 = useReaderStoreShallow((state) => state.chapters.chapters); const chapters = useReaderStore((state) => state.chapters.chapters);
const currentChapterIndex = useMemo( const currentChapterIndex = useMemo(
() => chapters.findIndex((chapter) => chapter.id === chapterId), () => chapters.findIndex((chapter) => chapter.id === chapterId),
@@ -246,7 +246,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 = useReaderStoreShallow((state) => state.chapters.chapters); const chapters = useReaderStore((state) => state.chapters.chapters);
const currentChapterIndex = useMemo( const currentChapterIndex = useMemo(
() => chapters.findIndex((chapter) => chapter.id === chapterId), () => chapters.findIndex((chapter) => chapter.id === chapterId),