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

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