Make mobile progress bar position changeable

src/modules/reader/components/overlay/ReaderOverlay.tsx

@@ -7,7 +7,7 @@
  */
 
 import Box from '@mui/material/Box';
-import { memo, useState } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 import { BaseReaderOverlayProps, MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
 import { ReaderSettings } from '@/modules/reader/components/settings/ReaderSettings.tsx';
 import { ReaderPageNumber } from '@/modules/reader/components/ReaderPageNumber.tsx';
@@ -17,6 +17,7 @@ import { ReaderOverlayHeaderMobile } from '@/modules/reader/components/overlay/R
 import { ReaderBottomBarMobile } from '@/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 
 const BaseReaderOverlay = ({
     isVisible,
@@ -27,6 +28,13 @@ const BaseReaderOverlay = ({
     Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop' | 'isMobile'>) => {
     const [areSettingsOpen, setAreSettingsOpen] = useState(false);
 
+    const [mobileHeaderHeight, setMobileHeaderHeight] = useState(0);
+    const mobileHeaderRef = useRef<HTMLDivElement>(null);
+    useResizeObserver(
+        mobileHeaderRef,
+        useCallback(() => setMobileHeaderHeight(mobileHeaderRef.current?.clientHeight ?? 0), [isMobile]),
+    );
+
     return (
         <Box sx={{ position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none', zIndex: 1 }}>
             {isDesktop && (
@@ -38,8 +46,12 @@ const BaseReaderOverlay = ({
 
             {isMobile && (
                 <>
-                    <ReaderOverlayHeaderMobile isVisible={isVisible} />
+                    <ReaderOverlayHeaderMobile ref={mobileHeaderRef} isVisible={isVisible} />
-                    <ReaderBottomBarMobile openSettings={() => setAreSettingsOpen(true)} isVisible={isVisible} />
+                    <ReaderBottomBarMobile
+                        openSettings={() => setAreSettingsOpen(true)}
+                        isVisible={isVisible}
+                        topOffset={mobileHeaderHeight}
+                    />
                 </>
             )}
 

src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx

@@ -22,7 +22,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { alpha } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import Slide from '@mui/material/Slide';
-import { memo } from 'react';
+import { forwardRef, memo } from 'react';
 import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
@@ -44,15 +44,13 @@ import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrol
 const DEFAULT_MANGA = { id: -1, title: '' };
 const DEFAULT_CHAPTER = { id: -1, name: '', realUrl: '', isBookmarked: false };
 
-const BaseReaderOverlayHeaderMobile = ({
+const BaseReaderOverlayHeaderMobile = forwardRef<
-    isVisible,
+    HTMLDivElement,
-    manga,
+    MobileHeaderProps &
-    currentChapter,
+        Pick<TReaderStateMangaContext, 'manga'> &
-    scrollbarYSize,
+        Pick<ReaderStateChapters, 'currentChapter'> &
-}: MobileHeaderProps &
+        Pick<TReaderScrollbarContext, 'scrollbarYSize'>
-    Pick<TReaderStateMangaContext, 'manga'> &
+>(({ isVisible, manga, currentChapter, scrollbarYSize }, ref) => {
-    Pick<ReaderStateChapters, 'currentChapter'> &
-    Pick<TReaderScrollbarContext, 'scrollbarYSize'>) => {
     const { t } = useTranslation();
     const getOptionForDirection = useGetOptionForDirection();
     const handleBack = useBackButton();
@@ -66,7 +64,7 @@ const BaseReaderOverlayHeaderMobile = ({
         : 'bookmark';
 
     return (
-        <Slide direction="down" in={isVisible} mountOnEnter unmountOnExit>
+        <Slide direction="down" in={isVisible} ref={ref}>
             <Stack
                 sx={{
                     flexDirection: 'row',
@@ -140,7 +138,7 @@ const BaseReaderOverlayHeaderMobile = ({
             </Stack>
         </Slide>
     );
-};
+});
 
 export const ReaderOverlayHeaderMobile = withPropsFrom(
     memo(BaseReaderOverlayHeaderMobile),

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -18,7 +18,7 @@ import DialogContent from '@mui/material/DialogContent';
 import Tooltip from '@mui/material/Tooltip';
 import { useTranslation } from 'react-i18next';
 import Slide from '@mui/material/Slide';
-import { memo, useLayoutEffect } from 'react';
+import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { ReaderBottomBarMobileProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
 import { MobileReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx';
 import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
@@ -27,6 +27,7 @@ import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/R
 import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
 import { ReaderStateChapters, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 
 const BaseReaderBottomBarMobile = ({
     openSettings,
@@ -35,38 +36,47 @@ const BaseReaderBottomBarMobile = ({
     chapters,
     scrollbarXSize,
     scrollbarYSize,
+    topOffset = 0,
 }: ReaderBottomBarMobileProps &
     Pick<ReaderStateChapters, 'currentChapter' | 'chapters'> &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'>) => {
+    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> & { topOffset?: number }) => {
     const { t } = useTranslation();
 
     const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
     const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' });
 
+    const [bottomBarRefHeight, setBottomBarRefHeight] = useState(0);
+    const bottomBarRef = useRef<HTMLDivElement>(null);
+    useResizeObserver(
+        bottomBarRef,
+        useCallback(() => setBottomBarRefHeight(bottomBarRef.current?.clientHeight ?? 0), [bottomBarRefHeight]),
+    );
+
     useLayoutEffect(() => {
         chapterListPopupState.close();
     }, [currentChapter?.id]);
 
     return (
         <>
-            <Slide direction="up" in={isVisible}>
+            <Stack
-                <Stack
+                sx={{
-                    sx={{
+                    position: 'fixed',
-                        position: 'fixed',
+                    right: `${scrollbarYSize}px`,
-                        right: `${scrollbarYSize}px`,
+                    bottom: 0,
-                        bottom: 0,
+                    left: 0,
-                        left: 0,
+                    height: `calc(100% - ${topOffset}px)`,
-                        gap: 2,
+                }}
-                        pointerEvents: 'all',
+            >
-                    }}
+                <MobileReaderProgressBar topOffset={topOffset} bottomOffset={bottomBarRefHeight} />
-                >
+                <Slide direction="up" in={isVisible}>
-                    <MobileReaderProgressBar />
                     <Stack
+                        ref={bottomBarRef}
                         sx={{
                             alignItems: 'center',
                             backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
                             pb: `max(${scrollbarXSize}px, env(safe-area-inset-bottom))`,
                             boxShadow: 2,
+                            pointerEvents: 'all',
                         }}
                     >
                         <Stack
@@ -96,8 +106,8 @@ const BaseReaderBottomBarMobile = ({
                             </Tooltip>
                         </Stack>
                     </Stack>
-                </Stack>
+                </Slide>
-            </Slide>
+            </Stack>
             {chapterListPopupState.isOpen && (
                 <Dialog {...bindDialog(chapterListPopupState)} fullWidth maxWidth="md" scroll="paper">
                     <DialogContent sx={{ p: 0, pb: 1 }}>

src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx

@@ -133,7 +133,7 @@ const BaseReaderProgressBar = ({
             getNextIndexFromPage(
                 getPageForMousePos(
                     isTouchEvent ? e.touches[0] : e,
-                    progressBarRef.current.getBoundingClientRect(),
+                    progressBarRef.current,
                     pages,
                     isHorizontalPosition,
                     fullSegmentClicks,
@@ -175,13 +175,12 @@ const BaseReaderProgressBar = ({
                 <ClickAwayListener onClickAway={() => setIsDragging(false)}>
                     <ReaderProgressBarSlotsActionArea
                         {...slotProps?.progressBarSlotsActionArea}
-                        ref={progressBarRef}
                         onMouseDown={handleMouseDown}
                         onMouseUp={handleMouseUp}
                         onTouchStart={handleMouseDown}
                         onTouchEnd={handleMouseUp}
                     >
-                        <ReaderProgressBarSlotsContainer {...slotProps?.progressBarSlotsContainer}>
+                        <ReaderProgressBarSlotsContainer ref={progressBarRef} {...slotProps?.progressBarSlotsContainer}>
                             {pages.map((page, pagesIndex) => (
                                 <ReaderProgressBarSlotWrapper
                                     {...slotProps?.progressBarSlot}

src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx

@@ -41,7 +41,7 @@ export const ReaderProgressBarCurrentPageSlot = ({
                     height: '100%',
                 }),
                 ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
-                    top: `${(Math.max(0, currentPagesIndex - 1) / pagesLength - 1) * 100}%`,
+                    top: `${(Math.max(0, currentPagesIndex - 1) / (pagesLength - 1)) * 100}%`,
                     width: '100%',
                     height: `calc(100% / ${pagesLength - 1})`,
                 }),

src/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx

@@ -6,9 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ReactNode, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { CacheProvider } from '@emotion/react';
 import { ThemeProvider } from '@mui/material/styles';
+import Box, { BoxProps } from '@mui/material/Box';
 import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts';
@@ -18,13 +19,12 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
-const BaseReaderProgressBarDirectionWrapper = ({
+const BaseReaderProgressBarDirectionWrapper = forwardRef<
-    children,
+    HTMLElement,
-    direction,
+    BoxProps & {
-}: {
+        direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
-    children: ReactNode;
+    }
-    direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
+>(({ direction, ...boxProps }, ref) => {
-}) => {
     const [appTheme] = useLocalStorage<AppThemes>('appTheme', 'default');
     const [themeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
     const [pureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
@@ -41,11 +41,11 @@ const BaseReaderProgressBarDirectionWrapper = ({
     return (
         <CacheProvider value={DIRECTION_TO_CACHE[direction]}>
             <ThemeProvider theme={readerTheme}>
-                <div dir={direction}>{children}</div>
+                <Box {...boxProps} ref={ref} dir={direction} />
             </ThemeProvider>
         </CacheProvider>
     );
-};
+});
 
 export const ReaderProgressBarDirectionWrapper = withPropsFrom(
     BaseReaderProgressBarDirectionWrapper,

src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx

@@ -20,34 +20,34 @@ const SLOT_SX_PROP: NonNullable<NonNullable<ComponentProps<typeof ReaderProgress
     backgroundColor: 'background.default',
 };
 
-const START_END_GAP = '4px';
 const POINT_SIZE = '3px';
 const ProgressBarPagePoint = memo(
     ({
         isTrailingPage,
         pagesIndex,
         totalPages,
+        isVertical,
+        isHorizontal,
     }: {
         isTrailingPage: boolean;
         pagesIndex: number;
         totalPages: number;
+        isVertical: boolean;
+        isHorizontal: boolean;
     }) => {
-        const isFirstPage = pagesIndex === 0;
+        const position = `${(pagesIndex / (totalPages - 1)) * 100}%`;
-        const isLastPage = pagesIndex === totalPages - 1;
-
-        const left = `${(pagesIndex / (totalPages - 1)) * 100}%`;
 
         return (
             <Box
                 sx={{
                     position: 'absolute',
-                    top: '50%',
+                    ...applyStyles(isVertical, {
-                    left,
+                        top: position,
-                    ...applyStyles(isFirstPage, {
+                        left: '50%',
-                        left: START_END_GAP,
                     }),
-                    ...applyStyles(isLastPage, {
+                    ...applyStyles(isHorizontal, {
-                        left: `calc(${left} - ${START_END_GAP})`,
+                        top: '50%',
+                        left: position,
                     }),
                     transform: 'translate(-50%, -50%)',
                     width: POINT_SIZE,
@@ -68,20 +68,34 @@ export const ReaderProgressBarSlotMobile = memo(
     ({
         pageName,
         isTrailingPage,
+        isCurrentPage,
         pagesIndex,
         totalPages,
+        isVertical,
+        isHorizontal,
     }: {
         pageName: string;
         isTrailingPage: boolean;
+        isCurrentPage: boolean;
         pagesIndex: number;
         totalPages: number;
+        isVertical: boolean;
+        isHorizontal: boolean;
     }) => (
         <ReaderProgressBarSlot
             pageName={pageName}
             progressBarPosition={ProgressBarPosition.BOTTOM}
             slotProps={{ box: { sx: SLOT_SX_PROP } }}
         >
-            <ProgressBarPagePoint isTrailingPage={isTrailingPage} pagesIndex={pagesIndex} totalPages={totalPages} />
+            {!isCurrentPage && (
+                <ProgressBarPagePoint
+                    isTrailingPage={isTrailingPage}
+                    pagesIndex={pagesIndex}
+                    totalPages={totalPages}
+                    isVertical={isVertical}
+                    isHorizontal={isHorizontal}
+                />
+            )}
         </ReaderProgressBarSlot>
     ),
 );

src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx

@@ -12,13 +12,20 @@ import SkipNextIcon from '@mui/icons-material/SkipNext';
 import Stack from '@mui/material/Stack';
 import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import { ComponentProps, memo, useCallback, useLayoutEffect, useMemo } from 'react';
+import { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import Slide, { SlideProps } from '@mui/material/Slide';
 import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
-import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
+import { getPage, getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
 import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
-import { ProgressBarPosition, ReaderResumeMode, ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
+import {
+    IReaderSettings,
+    ProgressBarPosition,
+    ProgressBarPositionAutoVertical,
+    ReaderResumeMode,
+    ReaderStateChapters,
+} from '@/modules/reader/types/Reader.types.ts';
 import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
 import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
@@ -28,57 +35,12 @@ import { ReaderProgressBarProps, TReaderProgressBarContext } from '@/modules/rea
 import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 
-const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotProps'] = {
+const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = {
-    container: {
+    [ProgressBarPosition.BOTTOM]: 'up',
-        sx: {
+    [ProgressBarPosition.LEFT]: 'right',
-            flexGrow: 1,
+    [ProgressBarPosition.RIGHT]: 'left',
-            position: 'relative',
-            display: 'flex',
-            justifyItems: 'center',
-            alignItems: 'stretch',
-            backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
-            borderRadius: 100,
-            boxShadow: 2,
-        },
-    },
-    progressBarRoot: {
-        sx: {
-            flexGrow: 1,
-            alignItems: 'stretch',
-            gap: 0,
-        },
-    },
-    progressBarSlotsActionArea: {
-        sx: {
-            height: '100%',
-            alignItems: 'center',
-            py: 2,
-            cursor: 'pointer',
-        },
-    },
-    progressBarSlotsContainer: {
-        sx: {
-            borderRadius: 100,
-            backgroundColor: 'background.default',
-        },
-    },
-    progressBarSlot: {
-        sx: {
-            height: '20px',
-        },
-    },
-    progressBarCurrentPageSlot: {
-        sx: {
-            display: 'flex',
-            alignItems: 'center',
-            zIndex: 1,
-            cursor: 'inherit',
-        },
-    },
-    progressBarPageTexts: {
-        base: { px: 1 },
-    },
 };
 
 const BaseMobileReaderProgressBar = ({
@@ -89,16 +51,37 @@ const BaseMobileReaderProgressBar = ({
     isDragging,
     currentPageIndex,
     pages,
-    direction,
+    direction: readerDirection,
+    progressBarPosition,
+    progressBarPositionAutoVertical,
+    topOffset = 0,
+    bottomOffset = 0,
 }: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
     Pick<TReaderOverlayContext, 'isVisible'> &
     Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> &
-    Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> & {
+    Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> &
+    Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> & {
         direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
+        topOffset?: number;
+        bottomOffset?: number;
     }) => {
     const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
     const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
 
+    const [, setRefreshProgressBarPosition] = useState({});
+    useResizeObserver(
+        window.document.documentElement,
+        useCallback(() => setRefreshProgressBarPosition({}), []),
+    );
+
+    const finalProgressBarPosition =
+        window.innerHeight - topOffset - bottomOffset > window.innerWidth &&
+        progressBarPositionAutoVertical !== ProgressBarPositionAutoVertical.OFF
+            ? (progressBarPositionAutoVertical as unknown as ProgressBarPosition)
+            : progressBarPosition;
+
+    const { isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(finalProgressBarPosition);
+    const finalReaderDirection = isHorizontal ? readerDirection : 'ltr';
     const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]);
 
     const progressBarCurrentPage = useMemo(
@@ -107,12 +90,22 @@ const BaseMobileReaderProgressBar = ({
                 <Box
                     sx={{
                         position: 'absolute',
-                        left: 'calc(100% - 6px)',
+                        ...applyStyles(isVertical, {
-                        ...applyStyles(currentPagesIndex === 0, {
+                            top: 'calc(100% - 6px)',
-                            left: '0',
+                            ...applyStyles(currentPagesIndex === 0, {
+                                top: '0',
+                            }),
+                            width: '75%',
+                            height: '6px',
+                        }),
+                        ...applyStyles(isHorizontal, {
+                            left: 'calc(100% - 0px)',
+                            ...applyStyles(currentPagesIndex === 0, {
+                                left: '0',
+                            }),
+                            width: '6px',
+                            height: '75%',
                         }),
-                        width: '6px',
-                        height: '75%',
                         backgroundColor: 'primary.main',
                         borderRadius: 100,
                         cursor: isDragging ? 'grabbing' : 'grab',
@@ -120,7 +113,7 @@ const BaseMobileReaderProgressBar = ({
                 />
             ),
         }),
-        [currentPagesIndex, pages.length, isDragging],
+        [currentPagesIndex, pages.length, isDragging, isVertical, isHorizontal],
     );
 
     useLayoutEffect(() => {
@@ -130,58 +123,222 @@ const BaseMobileReaderProgressBar = ({
     }, [isVisible]);
 
     return (
-        <ReaderProgressBarDirectionWrapper>
+        <Slide direction={PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION[finalProgressBarPosition]} in={isVisible}>
-            <Stack
+            <ReaderProgressBarDirectionWrapper
                 sx={{
-                    flexDirection: 'row',
+                    position: 'relative',
-                    alignItems: 'center',
+                    display: 'flex',
-                    px: 2,
+                    alignItems: 'end',
-                    gap: 1,
+                    height: '100%',
+                    pointerEvents: 'none',
+                    ...applyStyles(isLeft, {
+                        justifyContent: readerDirection === 'ltr' ? 'start' : 'end',
+                    }),
+                    ...applyStyles(isRight, {
+                        justifyContent: readerDirection === 'ltr' ? 'end' : 'start',
+                    }),
                 }}
             >
-                <IconButton
+                <Stack
-                    onClick={openPreviousChapter}
+                    sx={{
-                    disabled={!previousChapter}
+                        p: 2,
-                    sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
+                        gap: 1,
-                >
+                        pointerEvents: 'all',
-                    {getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
+                        alignItems: 'center',
-                </IconButton>
+                        ...applyStyles(isVertical, {
-                <ReaderProgressBar
+                            height: '100%',
-                    progressBarPosition={ProgressBarPosition.BOTTOM}
+                            flexDirection: 'column',
-                    fullSegmentClicks={false}
+                        }),
-                    createProgressBarSlot={useCallback(
+                        ...applyStyles(isHorizontal, {
-                        (page, pagesIndex, _2, _3, _4, _5, isTrailingPage, totalPages) => (
+                            width: '100%',
-                            <ReaderProgressBarSlotMobile
+                            flexDirection: 'row',
-                                pageName={page.name}
+                        }),
-                                isTrailingPage={isTrailingPage}
-                                pagesIndex={pagesIndex}
-                                totalPages={totalPages}
-                            />
-                        ),
-                        [],
-                    )}
-                    slotProps={{
-                        ...PROGRESS_BAR_SLOT_PROPS,
-                        progressBarReadPages: {
-                            sx: {
-                                height: '20px',
-                                backgroundColor: 'primary.main',
-                                borderRadius: '400px 0 0 400px',
-                                width: `${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / (pages.length - 1)) * 100}%`,
-                            },
-                        },
                     }}
-                    slots={progressBarCurrentPage}
-                />
-                <IconButton
-                    onClick={openNextChapter}
-                    disabled={!nextChapter}
-                    sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
                 >
-                    {getOptionForDirection(<SkipNextIcon />, <SkipPreviousIcon />, direction)}
+                    <IconButton
-                </IconButton>
+                        onClick={openPreviousChapter}
-            </Stack>
+                        disabled={!previousChapter}
-        </ReaderProgressBarDirectionWrapper>
+                        sx={{
+                            backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
+                            boxShadow: 2,
+                        }}
+                    >
+                        {getOptionForDirection(
+                            <SkipPreviousIcon
+                                sx={{
+                                    ...applyStyles(isVertical, {
+                                        transform: 'rotate(90deg)',
+                                    }),
+                                }}
+                            />,
+                            <SkipNextIcon
+                                sx={{
+                                    ...applyStyles(isVertical, {
+                                        transform: 'rotate(90deg)',
+                                    }),
+                                }}
+                            />,
+                            finalReaderDirection,
+                        )}
+                    </IconButton>
+                    <ReaderProgressBar
+                        progressBarPosition={finalProgressBarPosition}
+                        fullSegmentClicks={false}
+                        createProgressBarSlot={useCallback(
+                            (
+                                page,
+                                pagesIndex,
+                                _primaryPageLoadState,
+                                _secondaryPageLoadState,
+                                isCurrentPage,
+                                _isLeadingPage,
+                                isTrailingPage,
+                                totalPages,
+                            ) => (
+                                <ReaderProgressBarSlotMobile
+                                    pageName={page.name}
+                                    isTrailingPage={isTrailingPage}
+                                    isCurrentPage={isCurrentPage}
+                                    pagesIndex={pagesIndex}
+                                    totalPages={totalPages}
+                                    isVertical={isVertical}
+                                    isHorizontal={isHorizontal}
+                                />
+                            ),
+                            [isVertical, isHorizontal],
+                        )}
+                        slotProps={{
+                            container: {
+                                sx: {
+                                    flexGrow: 1,
+                                    position: 'relative',
+                                    display: 'flex',
+                                    justifyItems: 'center',
+                                    alignItems: 'stretch',
+                                    backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
+                                    borderRadius: 100,
+                                    boxShadow: 2,
+                                },
+                            },
+                            progressBarRoot: {
+                                sx: {
+                                    flexGrow: 1,
+                                    gap: 0,
+                                    ...applyStyles(isVertical, {
+                                        flexDirection: 'column',
+                                    }),
+                                    ...applyStyles(isHorizontal, {
+                                        alignItems: 'stretch',
+                                    }),
+                                },
+                            },
+                            progressBarSlotsActionArea: {
+                                sx: {
+                                    alignItems: 'center',
+                                    cursor: 'pointer',
+                                    ...applyStyles(isVertical, {
+                                        width: '100%',
+                                        flexDirection: 'column',
+                                        px: 2,
+                                    }),
+                                    ...applyStyles(isHorizontal, {
+                                        height: '100%',
+                                        py: 2,
+                                    }),
+                                },
+                            },
+                            progressBarSlotsContainer: {
+                                sx: {
+                                    borderRadius: 100,
+                                    backgroundColor: 'background.default',
+                                    ...applyStyles(isVertical, {
+                                        flexDirection: 'column',
+                                        py: 1,
+                                    }),
+                                    ...applyStyles(isHorizontal, {
+                                        px: 1,
+                                    }),
+                                },
+                            },
+                            progressBarSlot: {
+                                sx: {
+                                    ...applyStyles(isVertical, {
+                                        width: '20px',
+                                    }),
+                                    ...applyStyles(isHorizontal, {
+                                        height: '20px',
+                                    }),
+                                },
+                            },
+                            progressBarCurrentPageSlot: {
+                                sx: {
+                                    display: 'flex',
+                                    zIndex: 1,
+                                    cursor: 'inherit',
+                                    ...applyStyles(isVertical, {
+                                        justifyContent: 'center',
+                                    }),
+                                    ...applyStyles(isHorizontal, {
+                                        alignItems: 'center',
+                                    }),
+                                },
+                            },
+                            progressBarPageTexts: {
+                                base: {
+                                    sx: {
+                                        ...applyStyles(isVertical, {
+                                            py: 1,
+                                        }),
+                                        ...applyStyles(isHorizontal, {
+                                            px: 1,
+                                        }),
+                                    },
+                                },
+                            },
+                            progressBarReadPages: {
+                                sx: {
+                                    backgroundColor: 'primary.main',
+                                    ...applyStyles(isVertical, {
+                                        width: '20px',
+                                        height: `${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / (pages.length - 1)) * 100}%`,
+                                        borderRadius: '400px 400px 0 0',
+                                    }),
+                                    ...applyStyles(isHorizontal, {
+                                        width: `${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / (pages.length - 1)) * 100}%`,
+                                        height: '20px',
+                                        borderRadius: '400px 0 0 400px',
+                                    }),
+                                },
+                            },
+                        }}
+                        slots={progressBarCurrentPage}
+                    />
+                    <IconButton
+                        onClick={openNextChapter}
+                        disabled={!nextChapter}
+                        sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
+                    >
+                        {getOptionForDirection(
+                            <SkipNextIcon
+                                sx={{
+                                    ...applyStyles(isVertical, {
+                                        transform: 'rotate(90deg)',
+                                    }),
+                                }}
+                            />,
+                            <SkipPreviousIcon
+                                sx={{
+                                    ...applyStyles(isVertical, {
+                                        transform: 'rotate(90deg)',
+                                    }),
+                                }}
+                            />,
+                            finalReaderDirection,
+                        )}
+                    </IconButton>
+                </Stack>
+            </ReaderProgressBarDirectionWrapper>
+        </Slide>
     );
 };
 
@@ -193,6 +350,7 @@ export const MobileReaderProgressBar = withPropsFrom(
         useReaderProgressBarContext,
         userReaderStatePagesContext,
         () => ({ direction: ReaderService.useGetThemeDirection() }),
+        ReaderService.useSettingsWithoutDefaultFlag,
     ],
     [
         'previousChapter',
@@ -203,5 +361,7 @@ export const MobileReaderProgressBar = withPropsFrom(
         'currentPageIndex',
         'pages',
         'direction',
+        'progressBarPosition',
+        'progressBarPositionAutoVertical',
     ],
 );

src/modules/reader/services/ReaderControls.ts

@@ -614,7 +614,7 @@ export class ReaderControls {
                 const newPageIndex = getNextIndexFromPage(
                     getPageForMousePos(
                         coordinates,
-                        progressBarRef.current.getBoundingClientRect(),
+                        progressBarRef.current,
                         pages,
                         isHorizontal,
                         fullSegmentClicks,

src/modules/reader/utils/ReaderProgressBar.utils.tsx

@@ -45,17 +45,25 @@ export const getNextPageIndex = (
 
 export const getPageForMousePos = (
     coordinates: { clientX: number; clientY: number },
-    elementRect: DOMRect,
+    element: HTMLElement,
     pages: ReaderProgressBarProps['pages'],
     isHorizontalPosition: boolean,
     fullSegmentClicks: boolean,
     getOptionForDirection: typeof getOptionForDirectionImpl,
 ): ReaderProgressBarProps['pages'][number] => {
     const pos = isHorizontalPosition ? coordinates.clientX : coordinates.clientY;
-    const rectPos = isHorizontalPosition ? elementRect.left : elementRect.top;
-    const rectSize = isHorizontalPosition ? elementRect.width : elementRect.height;
 
-    const mousePosRelativeToProgressBar = pos - rectPos;
+    const { paddingTop, paddingBottom, paddingLeft, paddingRight } = getComputedStyle(element);
+    const elementRect = element.getBoundingClientRect();
+    const padding = isHorizontalPosition
+        ? parseFloat(paddingLeft) + parseFloat(paddingRight)
+        : parseFloat(paddingTop) + parseFloat(paddingBottom);
+
+    const rectPos = isHorizontalPosition ? elementRect.left : elementRect.top;
+    const rectSizeWithPadding = isHorizontalPosition ? elementRect.width : elementRect.height;
+    const rectSize = rectSizeWithPadding - padding;
+
+    const mousePosRelativeToProgressBar = pos - rectPos - padding / 2;
 
     const totalPages = pages.length - Number(!fullSegmentClicks);