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

Cleanup reader store slices hooks

Browse Source
This commit is contained in:
schroda
2026-02-21 17:33:13 +01:00
parent daeb2a4e45
commit 576cf85c38
27 changed files with 142 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,12 +31,12 @@ const BaseReaderAutoScroll = ({
combinedDirection: Direction;
}) => {
const { scrollRef, direction } = useReaderAutoScrollStore((state) => ({
scrollRef: state.autoScroll.scrollRef,
direction: state.autoScroll.direction,
scrollRef: state.scrollRef,
direction: state.direction,
}));
const { readingMode, autoScroll } = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode.value,
autoScroll: state.settings.autoScroll,
readingMode: state.readingMode.value,
autoScroll: state.autoScroll,
}));
const isScrollingInvertedBasedOnReadingDirection =

2
src/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts
View File

@@ -12,7 +12,7 @@ import { getReaderAutoScrollStore, useReaderAutoScrollStore } from '@/features/r
export const useReaderAutoScroll = (isOverlayVisible: boolean, isStaticNav: IReaderSettings['isStaticNav']): void => {
const { isPaused } = useReaderAutoScrollStore((state) => ({
isPaused: state.autoScroll.isPaused,
isPaused: state.isPaused,
}));
useEffect(() => {

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

@@ -28,7 +28,7 @@ export const ReaderNavBarDesktopAutoScroll = ({
setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void;
}) => {
const { t } = useLingui();
const isActive = useReaderAutoScrollStore((state) => state.autoScroll.isActive);
const isActive = useReaderAutoScrollStore((state) => state.isActive);
const updateTimeout = useRef<NodeJS.Timeout>(undefined);

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

@@ -16,7 +16,7 @@ const BaseReaderRGBAFilter = ({ readerNavBarWidth }: Pick<NavbarContextType, 're
const {
value: { red, green, blue, alpha, blendMode },
enabled,
} = useReaderSettingsStore((state) => state.settings.customFilter.rgba);
} = useReaderSettingsStore((state) => state.customFilter.rgba);
if (!enabled) {
return null;

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

@@ -66,7 +66,7 @@ export const ReaderHotkeys = ({
const readerThemeDirection = ReaderService.useGetThemeDirection();
const { enableScope, disableScope } = useHotkeysContext();
const { hotkeys } = useReaderSettingsStore((state) => ({
hotkeys: state.settings.hotkeys,
hotkeys: state.hotkeys,
}));
const exitReader = ReaderService.useExit();

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

@@ -247,10 +247,10 @@ export const useReaderInfiniteScrollUpdateChapter = (
) => {
const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderSettingsStore(
(state) => ({
readingMode: state.settings.readingMode.value,
readingDirection: state.settings.readingDirection.value,
shouldUseInfiniteScroll: state.settings.shouldUseInfiniteScroll,
shouldShowTransitionPage: state.settings.shouldShowTransitionPage,
readingMode: state.readingMode.value,
readingDirection: state.readingDirection.value,
shouldUseInfiniteScroll: state.shouldUseInfiniteScroll,
shouldShowTransitionPage: state.shouldShowTransitionPage,
}),
);

2
src/features/reader/overlay/ReaderOverlay.tsx
View File

@@ -23,7 +23,7 @@ const BaseReaderOverlay = ({
isDesktop,
isMobile,
}: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop' | 'isMobile'>) => {
const isVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
const isVisible = useReaderOverlayStore((state) => state.isVisible);
const [areSettingsOpen, setAreSettingsOpen] = useState(false);

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

@@ -29,18 +29,18 @@ const BaseReaderPageNumber = ({
readerNavBarWidth,
}: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> &
Pick<NavbarContextType, 'readerNavBarWidth'>) => {
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const scrollbar = useReaderScrollbarStore((state) => state);
const { currentPageIndex, pages, totalPages } = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages,
totalPages: state.pages.totalPages,
currentPageIndex: state.currentPageIndex,
pages: state.pages,
totalPages: state.totalPages,
}));
const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderSettingsStore((state) => ({
readingDirection: state.settings.readingDirection.value,
shouldShowPageNumber: state.settings.shouldShowPageNumber,
progressBarType: state.settings.progressBarType,
readingDirection: state.readingDirection.value,
shouldShowPageNumber: state.shouldShowPageNumber,
progressBarType: state.progressBarType,
}));
const isMaximized = useReaderProgressBarStore((state) => state.progressBar.isMaximized);
const isMaximized = useReaderProgressBarStore((state) => state.isMaximized);
const pageName = useMemo(() => {
const currentPageName = getPage(currentPageIndex, pages).name;

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

@@ -18,7 +18,7 @@ export const useReaderHideOverlayOnUserScroll = (
scrollElementRef: MutableRefObject<HTMLDivElement | null>,
) => {
const { showPreview } = useReaderTapZoneStore((state) => ({
showPreview: state.tapZone.showPreview,
showPreview: state.showPreview,
}));
useEffect(() => {

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

@@ -41,10 +41,10 @@ const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
const BaseReaderOverlayHeaderMobile = ({ isVisible, ref }: MobileHeaderProps & { ref?: Ref<HTMLDivElement> }) => {
const { t } = useLingui();
const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' });
const currentChapter = useReaderChaptersStore((state) => state.chapters.currentChapter);
const currentChapter = useReaderChaptersStore((state) => state.currentChapter);
const manga = useReaderStore((state) => state.manga);
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const scrollbar = useReaderScrollbarStore((state) => state);
const { id: mangaId, title } = manga ?? DEFAULT_MANGA;
const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER;

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

@@ -69,15 +69,15 @@ const BaseReaderNavBarDesktop = ({
previousChapter,
nextChapter,
} = useReaderChaptersStore((state) => ({
chapters: state.chapters.chapters,
currentChapterId: state.chapters.currentChapter?.id,
currentChapterName: state.chapters.currentChapter?.name,
currentChapterNumber: state.chapters.currentChapter?.chapterNumber,
currentChapterScanlator: state.chapters.currentChapter?.scanlator,
previousChapter: state.chapters.previousChapter,
nextChapter: state.chapters.nextChapter,
chapters: state.chapters,
currentChapterId: state.currentChapter?.id,
currentChapterName: state.currentChapter?.name,
currentChapterNumber: state.currentChapter?.chapterNumber,
currentChapterScanlator: state.currentChapter?.scanlator,
previousChapter: state.previousChapter,
nextChapter: state.nextChapter,
}));
const isStaticNav = useReaderSettingsStore((state) => state.settings.isStaticNav);
const isStaticNav = useReaderSettingsStore((state) => state.isStaticNav);
const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
useResizeObserver(

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

@@ -65,14 +65,14 @@ const DownloadButton = ({ id = -1, isDownloaded }: ChapterIdInfo & ChapterDownlo
export const ReaderNavBarDesktopActions = memo(() => {
const { id, isDownloaded, isBookmarked, realUrl } = useReaderChaptersStore((state) => ({
id: state.chapters.currentChapter?.id ?? FALLBACK_CHAPTER.id,
isDownloaded: state.chapters.currentChapter?.isDownloaded ?? FALLBACK_CHAPTER.isDownloaded,
isBookmarked: state.chapters.currentChapter?.isBookmarked ?? FALLBACK_CHAPTER.isBookmarked,
realUrl: state.chapters.currentChapter?.realUrl ?? FALLBACK_CHAPTER.realUrl,
id: state.currentChapter?.id ?? FALLBACK_CHAPTER.id,
isDownloaded: state.currentChapter?.isDownloaded ?? FALLBACK_CHAPTER.isDownloaded,
isBookmarked: state.currentChapter?.isBookmarked ?? FALLBACK_CHAPTER.isBookmarked,
realUrl: state.currentChapter?.realUrl ?? FALLBACK_CHAPTER.realUrl,
}));
const { t } = useLingui();
const pageLoadStates = useReaderPagesStore((state) => state.pages.pageLoadStates);
const pageLoadStates = useReaderPagesStore((state) => state.pageLoadStates);
const pageRetryKeyPrefix = useRef<number>(0);

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

@@ -24,10 +24,10 @@ const BaseReaderNavBarDesktopPageNavigation = () => {
const { t } = useLingui();
const getOptionForDirection = useGetOptionForDirection();
const { currentPageIndex, pages } = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages,
currentPageIndex: state.currentPageIndex,
pages: state.pages,
}));
const readingDirection = useReaderSettingsStore((state) => state.settings.readingDirection.value);
const readingDirection = useReaderSettingsStore((state) => state.readingDirection.value);
const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];

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

@@ -24,12 +24,12 @@ const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBa
const { t } = useLingui();
const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } =
useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode,
shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads,
pageScaleMode: state.settings.pageScaleMode,
shouldStretchPage: state.settings.shouldStretchPage,
readingDirection: state.settings.readingDirection,
autoScroll: state.settings.autoScroll,
readingMode: state.readingMode,
shouldOffsetDoubleSpreads: state.shouldOffsetDoubleSpreads,
pageScaleMode: state.pageScaleMode,
shouldStretchPage: state.shouldStretchPage,
readingDirection: state.readingDirection,
autoScroll: state.autoScroll,
}));
return (

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

@@ -33,13 +33,13 @@ const BaseReaderBottomBarMobile = ({
}: ReaderBottomBarMobileProps & { topOffset?: number }) => {
const { t } = useLingui();
const { currentChapterId, chapters } = useReaderChaptersStore((state) => ({
currentChapterId: state.chapters.currentChapter?.id,
chapters: state.chapters.chapters,
currentChapterId: state.currentChapter?.id,
chapters: state.chapters,
}));
const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' });
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const scrollbar = useReaderScrollbarStore((state) => state);
const [bottomBarRefHeight, setBottomBarRefHeight] = useState(0);
const bottomBarRef = useRef<HTMLDivElement>(null);

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

@@ -23,11 +23,11 @@ import {
const BaseReaderBottomBarMobileQuickSettings = () => {
const { t } = useLingui();
const isActive = useReaderAutoScrollStore((state) => state.autoScroll.isActive);
const isActive = useReaderAutoScrollStore((state) => state.isActive);
const { readingMode, readingDirection, autoScroll } = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode,
readingDirection: state.settings.readingDirection,
autoScroll: state.settings.autoScroll,
readingMode: state.readingMode,
readingDirection: state.readingDirection,
autoScroll: state.autoScroll,
}));
return (

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

@@ -68,13 +68,13 @@ const BaseReaderProgressBar = ({
fullSegmentClicks: boolean;
}) => {
const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderPagesStore((state) => ({
pages: state.pages.pages,
pageLoadStates: state.pages.pageLoadStates,
totalPages: state.pages.totalPages,
currentPageIndex: state.pages.currentPageIndex,
pages: state.pages,
pageLoadStates: state.pageLoadStates,
totalPages: state.totalPages,
currentPageIndex: state.currentPageIndex,
}));
const readingMode = useReaderSettingsStore((state) => state.settings.readingMode.value);
const isDragging = useReaderProgressBarStore((state) => state.progressBar.isDragging);
const readingMode = useReaderSettingsStore((state) => state.readingMode.value);
const isDragging = useReaderProgressBarStore((state) => state.isDragging);
const progressBarRef = useRef<HTMLDivElement | null>(null);
const draggingDetectionTimeout = useRef<NodeJS.Timeout>(undefined);

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

@@ -36,18 +36,18 @@ const BaseStandardReaderProgressBar = ({
}) => {
const theme = useTheme();
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const totalPages = useReaderPagesStore((state) => state.pages.totalPages);
const scrollbar = useReaderScrollbarStore((state) => state);
const totalPages = useReaderPagesStore((state) => state.totalPages);
const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } =
useReaderSettingsStore((state) => ({
progressBarType: state.settings.progressBarType,
progressBarSize: state.settings.progressBarSize,
progressBarPosition: state.settings.progressBarPosition,
progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
progressBarType: state.progressBarType,
progressBarSize: state.progressBarSize,
progressBarPosition: state.progressBarPosition,
progressBarPositionAutoVertical: state.progressBarPositionAutoVertical,
}));
const { isMaximized, isDragging } = useReaderProgressBarStore((state) => ({
isMaximized: state.progressBar.isMaximized,
isDragging: state.progressBar.isDragging,
isMaximized: state.isMaximized,
isDragging: state.isDragging,
}));
const [, setRefreshProgressBarPosition] = useState({});

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

@@ -56,21 +56,21 @@ const BaseMobileReaderProgressBar = ({
topOffset?: number;
bottomOffset?: number;
}) => {
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const isVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
const scrollbar = useReaderScrollbarStore((state) => state);
const isVisible = useReaderOverlayStore((state) => state.isVisible);
const { currentPageIndex, pages } = useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages,
currentPageIndex: state.currentPageIndex,
pages: state.pages,
}));
const { previousChapter, nextChapter } = useReaderChaptersStore((state) => ({
previousChapter: state.chapters.previousChapter,
nextChapter: state.chapters.nextChapter,
previousChapter: state.previousChapter,
nextChapter: state.nextChapter,
}));
const { progressBarPosition, progressBarPositionAutoVertical } = useReaderSettingsStore((state) => ({
progressBarPosition: state.settings.progressBarPosition,
progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
progressBarPosition: state.progressBarPosition,
progressBarPositionAutoVertical: state.progressBarPositionAutoVertical,
}));
const isDragging = useReaderProgressBarStore((state) => state.progressBar.isDragging);
const isDragging = useReaderProgressBarStore((state) => state.isDragging);
const [, setRefreshProgressBarPosition] = useState({});
useResizeObserver(

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

@@ -52,10 +52,10 @@ const BaseReader = ({
const manga = useReaderStore((state) => state.manga);
const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderChaptersStore(
(state) => ({
mangaChapters: state.chapters.mangaChapters,
initialChapter: state.chapters.initialChapter,
chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling,
currentChapter: state.chapters.currentChapter,
mangaChapters: state.mangaChapters,
initialChapter: state.initialChapter,
chapterForDuplicatesHandling: state.chapterForDuplicatesHandling,
currentChapter: state.currentChapter,
}),
);
const {
@@ -68,14 +68,14 @@ const BaseReader = ({
shouldShowReadingModePreview,
shouldShowTapZoneLayoutPreview,
} = useReaderSettingsStore((state) => ({
shouldSkipDupChapters: state.settings.shouldSkipDupChapters,
shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters,
backgroundColor: state.settings.backgroundColor,
readingMode: state.settings.readingMode,
tapZoneLayout: state.settings.tapZoneLayout,
tapZoneInvertMode: state.settings.tapZoneInvertMode,
shouldShowReadingModePreview: state.settings.shouldShowReadingModePreview,
shouldShowTapZoneLayoutPreview: state.settings.shouldShowTapZoneLayoutPreview,
shouldSkipDupChapters: state.shouldSkipDupChapters,
shouldSkipFilteredChapters: state.shouldSkipFilteredChapters,
backgroundColor: state.backgroundColor,
readingMode: state.readingMode,
tapZoneLayout: state.tapZoneLayout,
tapZoneInvertMode: state.tapZoneInvertMode,
shouldShowReadingModePreview: state.shouldShowReadingModePreview,
shouldShowTapZoneLayoutPreview: state.shouldShowTapZoneLayoutPreview,
}));
const scrollElementRef = useRef<HTMLDivElement | null>(null);

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

@@ -230,7 +230,7 @@ export class ReaderService {
static useGetThemeDirection(): Direction {
const { direction } = useTheme();
const readingDirection = useReaderSettingsStore((state) => state.settings.readingDirection.value);
const readingDirection = useReaderSettingsStore((state) => state.readingDirection.value);
return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection
? direction
@@ -372,7 +372,7 @@ export class ReaderService {
static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } {
const isTouchDevice = MediaQuery.useIsTouchDevice();
const overlayMode = useReaderSettingsStore((state) => state.settings.overlayMode);
const overlayMode = useReaderSettingsStore((state) => state.overlayMode);
const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO;
const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP;
@@ -389,7 +389,7 @@ export class ReaderService {
}
static useExit(): () => void {
const exitMode = useReaderSettingsStore((state) => state.settings.exitMode);
const exitMode = useReaderSettingsStore((state) => state.exitMode);
const handleBack = useBackButton();
const navigate = useNavigate();

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

@@ -18,7 +18,7 @@ import { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => {
const settings = useReaderSettingsStore((state) => state.settings);
const settings = useReaderSettingsStore((state) => state);
useDisableAllHotkeysWhileMounted(isOpen);

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

@@ -166,26 +166,34 @@ const readerStore = create<ReaderStore>()(
export const useReaderStore = <T>(selector: (state: ReaderStore) => T): T => readerStore(useShallow(selector));
export const getReaderStore = () => readerStore.getState();
export const useReaderScrollbarStore = useReaderStore;
export const useReaderScrollbarStore = <T>(selector: (state: ReaderStore['scrollbar']) => T): T =>
readerStore(useShallow((state) => selector(state.scrollbar)));
export const getReaderScrollbarStore = () => readerStore.getState().scrollbar;
export const useReaderSettingsStore = useReaderStore;
export const useReaderSettingsStore = <T>(selector: (state: ReaderStore['settings']) => T): T =>
readerStore(useShallow((state) => selector(state.settings)));
export const getReaderSettingsStore = () => readerStore.getState().settings;
export const useReaderOverlayStore = useReaderStore;
export const useReaderOverlayStore = <T>(selector: (state: ReaderOverlayStoreSlice['overlay']) => T): T =>
readerStore(useShallow((state) => selector(state.overlay)));
export const getReaderOverlayStore = () => readerStore.getState().overlay;
export const useReaderAutoScrollStore = useReaderStore;
export const useReaderAutoScrollStore = <T>(selector: (state: ReaderAutoScrollStoreSlice['autoScroll']) => T): T =>
readerStore(useShallow((state) => selector(state.autoScroll)));
export const getReaderAutoScrollStore = () => readerStore.getState().autoScroll;
export const useReaderPagesStore = useReaderStore;
export const useReaderPagesStore = <T>(selector: (state: ReaderPagesStoreSlice['pages']) => T): T =>
readerStore(useShallow((state) => selector(state.pages)));
export const getReaderPagesStore = () => readerStore.getState().pages;
export const useReaderChaptersStore = useReaderStore;
export const useReaderChaptersStore = <T>(selector: (state: ReaderChaptersStoreSlice['chapters']) => T): T =>
readerStore(useShallow((state) => selector(state.chapters)));
export const getReaderChaptersStore = () => readerStore.getState().chapters;
export const useReaderProgressBarStore = useReaderStore;
export const useReaderProgressBarStore = <T>(selector: (state: ReaderProgressBarStoreSlice['progressBar']) => T): T =>
readerStore(useShallow((state) => selector(state.progressBar)));
export const getReaderProgressBarStore = () => readerStore.getState().progressBar;
export const useReaderTapZoneStore = useReaderStore;
export const useReaderTapZoneStore = <T>(selector: (state: ReaderTapZoneStoreSlice['tapZone']) => T): T =>
readerStore(useShallow((state) => selector(state.tapZone)));
export const getReaderTapZoneStore = () => readerStore.getState().tapZone;

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

@@ -22,11 +22,11 @@ const CANVAS_ID = 'reader-tap-zone-layout-canvas';
const BaseTapZoneLayout = ({ readerNavBarWidth }: Pick<NavbarContextType, 'readerNavBarWidth'>) => {
const theme = useTheme();
const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderSettingsStore((state) => ({
tapZoneLayout: state.settings.tapZoneLayout.value,
tapZoneInvertMode: state.settings.tapZoneInvertMode.value,
readingDirection: state.settings.readingDirection.value,
tapZoneLayout: state.tapZoneLayout.value,
tapZoneInvertMode: state.tapZoneInvertMode.value,
readingDirection: state.readingDirection.value,
}));
const showPreview = useReaderTapZoneStore((state) => state.tapZone.showPreview);
const showPreview = useReaderTapZoneStore((state) => state.showPreview);
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

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

@@ -72,23 +72,23 @@ const BaseReaderViewer = ({
ref?: ForwardedRef<HTMLDivElement | null>;
}) => {
const { direction: themeDirection } = useTheme();
const isOverlayVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
const isOverlayVisible = useReaderOverlayStore((state) => state.isVisible);
const { currentPageIndex, pageToScrollToIndex, pages, totalPages, transitionPageMode, retryFailedPagesKeyPrefix } =
useReaderPagesStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pageToScrollToIndex: state.pages.pageToScrollToIndex,
pages: state.pages.pages,
totalPages: state.pages.totalPages,
transitionPageMode: state.pages.transitionPageMode,
retryFailedPagesKeyPrefix: state.pages.retryFailedPagesKeyPrefix,
currentPageIndex: state.currentPageIndex,
pageToScrollToIndex: state.pageToScrollToIndex,
pages: state.pages,
totalPages: state.totalPages,
transitionPageMode: state.transitionPageMode,
retryFailedPagesKeyPrefix: state.retryFailedPagesKeyPrefix,
}));
const { initialChapter, currentChapter, chapters, visibleChapters, isCurrentChapterReady } = useReaderChaptersStore(
(state) => ({
initialChapter: state.chapters.initialChapter,
currentChapter: state.chapters.currentChapter,
chapters: state.chapters.chapters,
visibleChapters: state.chapters.visibleChapters,
isCurrentChapterReady: state.chapters.isCurrentChapterReady,
initialChapter: state.initialChapter,
currentChapter: state.currentChapter,
chapters: state.chapters,
visibleChapters: state.visibleChapters,
isCurrentChapterReady: state.isCurrentChapterReady,
}),
);
const {
@@ -103,16 +103,16 @@ const BaseReaderViewer = ({
shouldStretchPage,
isStaticNav,
} = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode.value,
readingDirection: state.settings.readingDirection.value,
readerWidth: state.settings.readerWidth.value,
pageScaleMode: state.settings.pageScaleMode.value,
shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads.value,
imagePreLoadAmount: state.settings.imagePreLoadAmount,
pageGap: state.settings.pageGap.value,
customFilter: state.settings.customFilter,
shouldStretchPage: state.settings.shouldStretchPage.value,
isStaticNav: state.settings.isStaticNav,
readingMode: state.readingMode.value,
readingDirection: state.readingDirection.value,
readerWidth: state.readerWidth.value,
pageScaleMode: state.pageScaleMode.value,
shouldOffsetDoubleSpreads: state.shouldOffsetDoubleSpreads.value,
imagePreLoadAmount: state.imagePreLoadAmount,
pageGap: state.pageGap.value,
customFilter: state.customFilter,
shouldStretchPage: state.shouldStretchPage.value,
isStaticNav: state.isStaticNav,
}));
const { resumeMode = ReaderResumeMode.START } = useLocation<ReaderOpenChapterLocationState>().state ?? {
resumeMode: ReaderResumeMode.START,

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

@@ -86,7 +86,7 @@ const BaseReaderPage = ({
const { src } = props;
const isTabletWidth = MediaQuery.useIsTabletWidth();
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const scrollbar = useReaderScrollbarStore((state) => state);
const handleLoad = useCallback(
() => onLoad?.(pagesIndex, src, isPrimaryPage),

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

@@ -99,12 +99,12 @@ const BaseReaderTransitionPage = ({
}) => {
const { t } = useLingui();
const manga = useReaderStore((state) => state.manga);
const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
const transitionPageMode = useReaderPagesStore((state) => state.pages.transitionPageMode);
const scrollbar = useReaderScrollbarStore((state) => state);
const transitionPageMode = useReaderPagesStore((state) => state.transitionPageMode);
const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderSettingsStore((state) => ({
readingMode: state.settings.readingMode.value,
backgroundColor: state.settings.backgroundColor,
shouldShowTransitionPage: state.settings.shouldShowTransitionPage,
readingMode: state.readingMode.value,
backgroundColor: state.backgroundColor,
shouldShowTransitionPage: state.shouldShowTransitionPage,
}));
const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS;
@@ -225,7 +225,7 @@ export const ReaderTransitionPage = withPropsFrom(
memo(BaseReaderTransitionPage) as typeof BaseReaderTransitionPage,
[
({ chapterId }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId'>) => {
const chapters = useReaderChaptersStore((state) => state.chapters.chapters);
const chapters = useReaderChaptersStore((state) => state.chapters);
const currentChapterIndex = useMemo(
() => chapters.findIndex((chapter) => chapter.id === chapterId),
@@ -248,7 +248,7 @@ export const ReaderTransitionPage = withPropsFrom(
useNavBarContext,
({ chapterId, type }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId' | 'type'>) => {
const handleBack = useBackButton();
const chapters = useReaderChaptersStore((state) => state.chapters.chapters);
const chapters = useReaderChaptersStore((state) => state.chapters);
const currentChapterIndex = useMemo(
() => chapters.findIndex((chapter) => chapter.id === chapterId),