Improve progress bar dragging detection

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}

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>

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