From aee42d7bb1b5314b6dd1c68c5e05fb7b9f6081f8 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sat, 28 Dec 2024 04:06:03 +0100
Subject: [PATCH] Adjust "MobileReaderProgressBar" active dragging styling

---
 .../variants/MobileReaderProgressBar.tsx      | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
index 539aaa8e..646742fc 100644
--- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
@@ -73,7 +73,7 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotPro
             display: 'flex',
             alignItems: 'center',
             zIndex: 1,
-            pointer: 'default',
+            cursor: 'inherit',
         },
     },
     progressBarPageTexts: {
@@ -86,12 +86,13 @@ const BaseMobileReaderProgressBar = ({
     nextChapter,
     isVisible,
     setIsMaximized,
+    isDragging,
     currentPageIndex,
     pages,
     direction,
 }: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
     Pick<TReaderOverlayContext, 'isVisible'> &
-    Pick<TReaderProgressBarContext, 'setIsMaximized'> &
+    Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> &
     Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> & {
         direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
     }) => {
@@ -114,11 +115,12 @@ const BaseMobileReaderProgressBar = ({
                         height: '75%',
                         backgroundColor: 'primary.main',
                         borderRadius: 100,
+                        cursor: isDragging ? 'grabbing' : 'grab',
                     }}
                 />
             ),
         }),
-        [currentPagesIndex, pages.length],
+        [currentPagesIndex, pages.length, isDragging],
     );
 
     useLayoutEffect(() => {
@@ -191,5 +193,14 @@ export const MobileReaderProgressBar = withPropsFrom(
         userReaderStatePagesContext,
         () => ({ direction: ReaderService.useGetThemeDirection() }),
     ],
-    ['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized', 'currentPageIndex', 'pages', 'direction'],
+    [
+        'previousChapter',
+        'nextChapter',
+        'isVisible',
+        'setIsMaximized',
+        'isDragging',
+        'currentPageIndex',
+        'pages',
+        'direction',
+    ],
 );