From 6bae3aaf3a8deee87eb92b0c1b3434e351c36f62 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sat, 28 Dec 2024 02:04:19 +0100
Subject: [PATCH] Improve progress bar dragging detection

---
 .../progress-bar/ReaderProgressBar.tsx        | 20 ++++++++++++++-----
 .../ReaderProgressBarCurrentPageSlot.tsx      | 17 ----------------
 .../reader/types/ReaderProgressBar.types.ts   |  1 -
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
index 3d5caf04..cfb63845 100644
--- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
@@ -71,6 +71,7 @@ const BaseReaderProgressBar = ({
         direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
     }) => {
     const progressBarRef = useRef<HTMLDivElement | null>(null);
+    const draggingDetectionTimeout = useRef<NodeJS.Timeout>();
 
     const [totalPagesTextWidth, setTotalPagesTextWidth] = useState(0);
     const totalPagesTextRef = useRef<HTMLSpanElement | null>(null);
@@ -131,7 +132,10 @@ const BaseReaderProgressBar = ({
                     <ReaderProgressBarSlotsActionArea
                         {...slotProps?.progressBarSlotsActionArea}
                         ref={progressBarRef}
-                        onTouchEnd={() => setIsDragging(false)}
+                        onTouchEnd={() => {
+                            setIsDragging(false);
+                            clearTimeout(draggingDetectionTimeout.current);
+                        }}
                         onTouchStart={(event) => {
                             if (!progressBarRef.current) {
                                 return;
@@ -150,9 +154,14 @@ const BaseReaderProgressBar = ({
                                 undefined,
                                 false,
                             );
-                            setIsDragging(true);
+
+                            clearTimeout(draggingDetectionTimeout.current);
+                            draggingDetectionTimeout.current = setTimeout(() => setIsDragging(true), 250);
+                        }}
+                        onMouseUp={() => {
+                            setIsDragging(false);
+                            clearTimeout(draggingDetectionTimeout.current);
                         }}
-                        onMouseUp={() => setIsDragging(false)}
                         onMouseDown={(event) => {
                             if (!progressBarRef.current) {
                                 return;
@@ -171,7 +180,9 @@ const BaseReaderProgressBar = ({
                                 undefined,
                                 false,
                             );
-                            setIsDragging(true);
+
+                            clearTimeout(draggingDetectionTimeout.current);
+                            draggingDetectionTimeout.current = setTimeout(() => setIsDragging(true), 250);
                         }}
                     >
                         <ReaderProgressBarSlotsContainer {...slotProps?.progressBarSlotsContainer}>
@@ -206,7 +217,6 @@ const BaseReaderProgressBar = ({
                             currentPagesIndex={currentPage.pagesIndex}
                             pagesLength={pages.length}
                             isDragging={isDragging}
-                            setIsDragging={setIsDragging}
                             progressBarPosition={progressBarPosition}
                         >
                             {slots?.progressBarCurrentPage}
diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx
index 86578a3a..06134239 100644
--- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx
@@ -19,7 +19,6 @@ export const ReaderProgressBarCurrentPageSlot = ({
     currentPagesIndex,
     pagesLength,
     isDragging,
-    setIsDragging,
     boxProps,
     children,
     progressBarPosition,
@@ -48,22 +47,6 @@ export const ReaderProgressBarCurrentPageSlot = ({
                 }),
                 ...boxProps?.sx,
             }}
-            onTouchEnd={(e) => {
-                e.stopPropagation();
-                setIsDragging(false);
-            }}
-            onTouchStart={(e) => {
-                e.stopPropagation();
-                setIsDragging(true);
-            }}
-            onMouseUp={(e) => {
-                e.stopPropagation();
-                setIsDragging(false);
-            }}
-            onMouseDown={(e) => {
-                e.stopPropagation();
-                setIsDragging(true);
-            }}
         >
             {children}
         </Box>
diff --git a/src/modules/reader/types/ReaderProgressBar.types.ts b/src/modules/reader/types/ReaderProgressBar.types.ts
index d4838fcc..32d7d41e 100644
--- a/src/modules/reader/types/ReaderProgressBar.types.ts
+++ b/src/modules/reader/types/ReaderProgressBar.types.ts
@@ -62,7 +62,6 @@ export interface CurrentPageSlotProps extends Pick<IReaderSettings, 'progressBar
     currentPagesIndex: number;
     pagesLength: number;
     isDragging: boolean;
-    setIsDragging: (isDragging: boolean) => void;
     boxProps?: BoxProps;
 }