diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx index cfb63845..eccc8b3b 100644 --- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx @@ -109,6 +109,36 @@ const BaseReaderProgressBar = ({ getOptionForDirection, ); + const handleMouseDown = (e: React.MouseEvent | React.TouchEvent) => { + if (!progressBarRef.current) { + return; + } + + const isTouchEvent = 'touches' in e; + + openPage( + getNextIndexFromPage( + getPageForMousePos( + isTouchEvent ? e.touches[0] : e, + progressBarRef.current.getBoundingClientRect(), + pages, + isHorizontalPosition, + getOptionForDirection, + ), + ), + undefined, + false, + ); + + clearTimeout(draggingDetectionTimeout.current); + draggingDetectionTimeout.current = setTimeout(() => setIsDragging(true), 250); + }; + + const handleMouseUp = () => { + setIsDragging(false); + clearTimeout(draggingDetectionTimeout.current); + }; + return ( @@ -132,58 +162,10 @@ const BaseReaderProgressBar = ({ { - setIsDragging(false); - clearTimeout(draggingDetectionTimeout.current); - }} - onTouchStart={(event) => { - if (!progressBarRef.current) { - return; - } - - openPage( - getNextIndexFromPage( - getPageForMousePos( - event.touches[0], - progressBarRef.current.getBoundingClientRect(), - pages, - isHorizontalPosition, - getOptionForDirection, - ), - ), - undefined, - false, - ); - - clearTimeout(draggingDetectionTimeout.current); - draggingDetectionTimeout.current = setTimeout(() => setIsDragging(true), 250); - }} - onMouseUp={() => { - setIsDragging(false); - clearTimeout(draggingDetectionTimeout.current); - }} - onMouseDown={(event) => { - if (!progressBarRef.current) { - return; - } - - openPage( - getNextIndexFromPage( - getPageForMousePos( - event, - progressBarRef.current.getBoundingClientRect(), - pages, - isHorizontalPosition, - getOptionForDirection, - ), - ), - undefined, - false, - ); - - clearTimeout(draggingDetectionTimeout.current); - draggingDetectionTimeout.current = setTimeout(() => setIsDragging(true), 250); - }} + onMouseDown={handleMouseDown} + onMouseUp={handleMouseUp} + onTouchStart={handleMouseDown} + onTouchEnd={handleMouseUp} > {pages.map((page, pagesIndex) => (