From 9bedec711584c5edd8e4b273286b68914ec31a51 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sun, 31 Aug 2025 16:38:26 +0200 Subject: [PATCH] Rename "reader scrollbar state" properties --- src/features/reader/ReaderStore.ts | 28 +++++++++++-------- .../useReaderInfiniteScrollUpdateChapter.ts | 4 +-- .../overlay/components/ReaderPageNumber.tsx | 6 ++-- .../mobile/ReaderOverlayHeaderMobile.tsx | 6 ++-- .../mobile/ReaderBottomBarMobile.tsx | 6 ++-- .../desktop/StandardReaderProgressBar.tsx | 26 ++++++++--------- .../mobile/MobileReaderProgressBar.tsx | 6 ++-- src/features/reader/viewer/ReaderViewer.tsx | 4 +-- .../reader/viewer/components/ReaderPage.tsx | 10 +++---- .../components/ReaderTransitionPage.tsx | 14 +++++----- 10 files changed, 57 insertions(+), 53 deletions(-) diff --git a/src/features/reader/ReaderStore.ts b/src/features/reader/ReaderStore.ts index 602db3cb..1eb6396a 100644 --- a/src/features/reader/ReaderStore.ts +++ b/src/features/reader/ReaderStore.ts @@ -16,38 +16,42 @@ interface ReaderStore { manga: TMangaReader | undefined; setManga: (manga: TMangaReader | undefined) => void; scrollbar: { - scrollbarXSize: number; - setScrollbarXSize: (size: number) => void; - scrollbarYSize: number; - setScrollbarYSize: (size: number) => void; + xSize: number; + setXSize: (size: number) => void; + ySize: number; + setYSize: (size: number) => void; }; } const DEFAULT_STATE = { manga: undefined, -} satisfies Pick; + scrollbar: { + xSize: 0, + ySize: 0, + }, +} satisfies Pick & { scrollbar: Pick }; export const useReaderStore = create()( - immer((set) => ({ + immer((set, get) => ({ ...DEFAULT_STATE, reset: () => set((draft) => { draft.manga = DEFAULT_STATE.manga; + draft.scrollbar = { ...get().scrollbar, ...DEFAULT_STATE.scrollbar }; }), setManga: (manga) => set((draft) => { draft.manga = manga; }), scrollbar: { - scrollbarXSize: 0, - setScrollbarXSize: (size) => + ...DEFAULT_STATE.scrollbar, + setXSize: (size) => set((draft) => { - draft.scrollbar.scrollbarXSize = size; + draft.scrollbar.xSize = size; }), - scrollbarYSize: 0, - setScrollbarYSize: (size) => + setYSize: (size) => set((draft) => { - draft.scrollbar.scrollbarYSize = size; + draft.scrollbar.ySize = size; }), }, })), diff --git a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts index 64138f3b..1debfb59 100644 --- a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts +++ b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts @@ -320,8 +320,8 @@ export const useReaderInfiniteScrollUpdateChapter = ( const elementIntersectionInfo = getElementIntersectionInfo( readingDirection, entry.target.getBoundingClientRect(), - getReaderStore().scrollbar.scrollbarXSize, - getReaderStore().scrollbar.scrollbarYSize, + getReaderStore().scrollbar.xSize, + getReaderStore().scrollbar.ySize, ); const { start: isStartIntersecting, end: isEndIntersecting } = getElementIntersection( elementIntersectionInfo, diff --git a/src/features/reader/overlay/components/ReaderPageNumber.tsx b/src/features/reader/overlay/components/ReaderPageNumber.tsx index fe257bb3..9f251bdb 100644 --- a/src/features/reader/overlay/components/ReaderPageNumber.tsx +++ b/src/features/reader/overlay/components/ReaderPageNumber.tsx @@ -25,7 +25,7 @@ import { reverseString } from '@/base/utils/Strings.ts'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { TReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { useReaderStore } from '@/features/reader/ReaderStore.ts'; +import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const BaseReaderPageNumber = ({ isDesktop, @@ -42,7 +42,7 @@ const BaseReaderPageNumber = ({ Pick & Pick & Pick) => { - const scrollbarXSize = useReaderStore((state) => state.scrollbar.scrollbarXSize); + const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const pageName = useMemo(() => { const currentPageName = getPage(currentPageIndex, pages).name; @@ -74,7 +74,7 @@ const BaseReaderPageNumber = ({ position: 'fixed', left: readerNavBarWidth, right: 0, - bottom: (theme) => `max(calc(${theme.spacing(1)} + ${scrollbarXSize}px), env(safe-area-inset-bottom))`, + bottom: (theme) => `max(calc(${theme.spacing(1)} + ${scrollbar.xSize}px), env(safe-area-inset-bottom))`, alignItems: 'center', transition: (theme) => `left 0.${theme.transitions.duration.shortest}s`, }} diff --git a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx index 2652803b..e9f7068c 100644 --- a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx +++ b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx @@ -33,7 +33,7 @@ import { FALLBACK_CHAPTER } from '@/features/chapter/Chapter.constants.ts'; import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts'; import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx'; import { requestManager } from '@/lib/requests/RequestManager.ts'; -import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; +import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' }; @@ -45,7 +45,7 @@ const BaseReaderOverlayHeaderMobile = forwardRef< const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' }); const manga = useReaderStoreShallow((state) => state.manga); - const scrollbarYSize = useReaderStore((state) => state.scrollbar.scrollbarYSize); + const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const { id: mangaId, title } = manga ?? DEFAULT_MANGA; const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER; @@ -59,7 +59,7 @@ const BaseReaderOverlayHeaderMobile = forwardRef< position: 'fixed', top: 0, left: 0, - right: `${scrollbarYSize}px`, + right: `${scrollbar.ySize}px`, p: 2, pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(2)})`, backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95), diff --git a/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx b/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx index 4b98df85..c8661a99 100644 --- a/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx +++ b/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx @@ -40,7 +40,7 @@ const BaseReaderBottomBarMobile = ({ const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' }); const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' }); - const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar); + const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const [bottomBarRefHeight, setBottomBarRefHeight] = useState(0); const bottomBarRef = useRef(null); @@ -58,7 +58,7 @@ const BaseReaderBottomBarMobile = ({ alpha(theme.palette.background.paper, 0.95), - pb: `max(${scrollbarXSize}px, env(safe-area-inset-bottom))`, + pb: `max(${scrollbar.xSize}px, env(safe-area-inset-bottom))`, boxShadow: 2, pointerEvents: 'all', }} diff --git a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx index b82877a4..19f14579 100644 --- a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx @@ -50,7 +50,7 @@ const BaseStandardReaderProgressBar = ({ }) => { const theme = useTheme(); - const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar); + const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const [, setRefreshProgressBarPosition] = useState({}); useResizeObserver( @@ -61,8 +61,8 @@ const BaseStandardReaderProgressBar = ({ const finalProgressBarPosition = getProgressBarPosition( progressBarPosition, progressBarPositionAutoVertical, - scrollbarYSize, - readerNavBarWidth + scrollbarXSize, + scrollbar.ySize, + readerNavBarWidth + scrollbar.xSize, ); const { isBottom, isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(finalProgressBarPosition); @@ -111,20 +111,20 @@ const BaseStandardReaderProgressBar = ({ ...applyStyles(isHorizontal, { minHeight: '100px', ...applyStyles(theme.direction === 'ltr', { - left: readerDirection === 'ltr' ? readerNavBarWidth : scrollbarYSize, - right: readerDirection === 'rtl' ? readerNavBarWidth : scrollbarYSize, + left: readerDirection === 'ltr' ? readerNavBarWidth : scrollbar.ySize, + right: readerDirection === 'rtl' ? readerNavBarWidth : scrollbar.ySize, }), ...applyStyles(theme.direction === 'rtl', { - left: readerDirection === 'rtl' ? readerNavBarWidth : scrollbarYSize, - right: readerDirection === 'ltr' ? readerNavBarWidth : scrollbarYSize, + left: readerDirection === 'rtl' ? readerNavBarWidth : scrollbar.ySize, + right: readerDirection === 'ltr' ? readerNavBarWidth : scrollbar.ySize, }), }), ...applyStyles(isVertical, { minWidth: '100px', - bottom: `${scrollbarXSize}px`, + bottom: `${scrollbar.xSize}px`, }), ...applyStyles(isBottom, { - bottom: `${scrollbarXSize}px`, + bottom: `${scrollbar.xSize}px`, }), ...applyStyles(isLeft, { ...applyStyles(theme.direction === 'ltr', { @@ -132,14 +132,14 @@ const BaseStandardReaderProgressBar = ({ right: readerDirection === 'rtl' ? readerNavBarWidth : 'unset', }), ...applyStyles(theme.direction === 'rtl', { - right: readerDirection === 'rtl' ? scrollbarYSize : 'unset', - left: readerDirection === 'ltr' ? scrollbarYSize : 'unset', + right: readerDirection === 'rtl' ? scrollbar.ySize : 'unset', + left: readerDirection === 'ltr' ? scrollbar.ySize : 'unset', }), }), ...applyStyles(isRight, { ...applyStyles(theme.direction === 'ltr', { - right: readerDirection === 'ltr' ? scrollbarYSize : 'unset', - left: readerDirection === 'rtl' ? scrollbarYSize : 'unset', + right: readerDirection === 'ltr' ? scrollbar.ySize : 'unset', + left: readerDirection === 'rtl' ? scrollbar.ySize : 'unset', }), ...applyStyles(theme.direction === 'rtl', { left: readerDirection === 'rtl' ? readerNavBarWidth : 'unset', diff --git a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx index abcbc69d..a31466f7 100644 --- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx @@ -38,7 +38,7 @@ import { applyStyles } from '@/base/utils/ApplyStyles.ts'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; -import { useReaderStore } from '@/features/reader/ReaderStore.ts'; +import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record = { [ProgressBarPosition.BOTTOM]: 'up', @@ -71,7 +71,7 @@ const BaseMobileReaderProgressBar = ({ bottomOffset?: number; }) => { const openChapter = ReaderControls.useOpenChapter(); - const scrollbarXSize = useReaderStore((state) => state.scrollbar.scrollbarXSize); + const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const [, setRefreshProgressBarPosition] = useState({}); useResizeObserver( @@ -84,7 +84,7 @@ const BaseMobileReaderProgressBar = ({ progressBarPositionAutoVertical, // scrollbar x size is already included in the top/bottom offset due to the progress bar being placed in the reader mobile bottom bar topOffset + bottomOffset, - scrollbarXSize, + scrollbar.xSize, ); const { isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(finalProgressBarPosition); diff --git a/src/features/reader/viewer/ReaderViewer.tsx b/src/features/reader/viewer/ReaderViewer.tsx index 241a0ea3..5aeff71c 100644 --- a/src/features/reader/viewer/ReaderViewer.tsx +++ b/src/features/reader/viewer/ReaderViewer.tsx @@ -180,8 +180,8 @@ const BaseReaderViewer = forwardRef( const scrollbarYSize = MediaQuery.useGetScrollbarSize('height', scrollElementRef.current); useLayoutEffect(() => { const { scrollbar } = getReaderStore(); - scrollbar.setScrollbarXSize(scrollbarXSize); - scrollbar.setScrollbarYSize(scrollbarYSize); + scrollbar.setXSize(scrollbarXSize); + scrollbar.setYSize(scrollbarYSize); }, [scrollbarXSize, scrollbarYSize]); const handleClick = ReaderControls.useHandleClick(scrollElementRef.current); diff --git a/src/features/reader/viewer/components/ReaderPage.tsx b/src/features/reader/viewer/components/ReaderPage.tsx index b44afe38..27eddb01 100644 --- a/src/features/reader/viewer/components/ReaderPage.tsx +++ b/src/features/reader/viewer/components/ReaderPage.tsx @@ -86,7 +86,7 @@ const BaseReaderPage = ({ const { src } = props; const isTabletWidth = MediaQuery.useIsTabletWidth(); - const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar); + const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const handleLoad = useCallback( () => onLoad?.(pagesIndex, src, isPrimaryPage), @@ -114,8 +114,8 @@ const BaseReaderPage = ({ shouldStretchPage, pageScaleMode, readerWidth, - readerNavBarWidth + scrollbarYSize, - scrollbarXSize, + readerNavBarWidth + scrollbar.ySize, + scrollbar.xSize, doublePage, isTabletWidth, ), @@ -131,8 +131,8 @@ const BaseReaderPage = ({ pageScaleMode, doublePage, readerWidth, - readerNavBarWidth + scrollbarYSize, - scrollbarXSize, + readerNavBarWidth + scrollbar.ySize, + scrollbar.xSize, ), filter: getCustomFilterString(customFilter), objectFit: 'contain', diff --git a/src/features/reader/viewer/components/ReaderTransitionPage.tsx b/src/features/reader/viewer/components/ReaderTransitionPage.tsx index ef4c3923..e17d3ac4 100644 --- a/src/features/reader/viewer/components/ReaderTransitionPage.tsx +++ b/src/features/reader/viewer/components/ReaderTransitionPage.tsx @@ -107,7 +107,7 @@ const BaseReaderTransitionPage = ({ }) => { const { t } = useTranslation(); const manga = useReaderStoreShallow((state) => state.manga); - const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar); + const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS; const isNextType = type === ReaderTransitionPageMode.NEXT; @@ -141,13 +141,13 @@ const BaseReaderTransitionPage = ({ position: 'sticky', ...applyStyles(isContinuousVerticalReadingMode(readingMode), { left: 0, - maxWidth: `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px)`, - minHeight: `calc(100vh - ${scrollbarXSize}px)`, + maxWidth: `calc(100vw - ${scrollbar.ySize}px - ${readerNavBarWidth}px)`, + minHeight: `calc(100vh - ${scrollbar.xSize}px)`, }), ...applyStyles(readingMode === ReadingMode.CONTINUOUS_HORIZONTAL, { top: 0, - minWidth: `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px)`, - maxHeight: `calc(100vh - ${scrollbarXSize}px)`, + minWidth: `calc(100vw - ${scrollbar.ySize}px - ${readerNavBarWidth}px)`, + maxHeight: `calc(100vh - ${scrollbar.xSize}px)`, }), }), }} @@ -157,8 +157,8 @@ const BaseReaderTransitionPage = ({ gap: 2, maxWidth: (theme) => // spacing = added padding left + right - `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px - ${theme.spacing(2)})`, - maxHeight: `calc(100vh - ${scrollbarXSize}px)`, + `calc(100vw - ${scrollbar.ySize}px - ${readerNavBarWidth}px - ${theme.spacing(2)})`, + maxHeight: `calc(100vh - ${scrollbar.xSize}px)`, width: 'max-content', p: 1, }}