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

Rename "reader scrollbar state" properties

Browse Source
This commit is contained in:
schroda
2025-08-31 16:38:26 +02:00
parent 4cc5821ead
commit 9bedec7115
10 changed files with 57 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/features/reader/ReaderStore.ts
View File

@@ -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<ReaderStore, 'manga'>;
scrollbar: {
xSize: 0,
ySize: 0,
},
} satisfies Pick<ReaderStore, 'manga'> & { scrollbar: Pick<ReaderStore['scrollbar'], 'xSize' | 'ySize'> };
export const useReaderStore = create<ReaderStore>()(
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;
}),
},
})),

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

@@ -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,

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

@@ -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<TReaderProgressBarContext, 'isMaximized'> &
Pick<ReaderStatePages, 'currentPageIndex' | 'pages' | 'totalPages'> &
Pick<IReaderSettings, 'progressBarType' | 'shouldShowPageNumber' | 'readingDirection'>) => {
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`,
}}

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

@@ -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),

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

@@ -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<HTMLDivElement>(null);
@@ -58,7 +58,7 @@ const BaseReaderBottomBarMobile = ({
<Stack
sx={{
position: 'fixed',
right: `${scrollbarYSize}px`,
right: `${scrollbar.ySize}px`,
bottom: 0,
left: 0,
height: `calc(100% - ${topOffset}px)`,
@@ -71,7 +71,7 @@ const BaseReaderBottomBarMobile = ({
sx={{
alignItems: 'center',
backgroundColor: (theme) => 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',
}}

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

@@ -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',

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

@@ -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, SlideProps['direction']> = {
[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);

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

@@ -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);

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

@@ -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',

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

@@ -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,
}}