ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve progress bar dragging detection

Browse Source
This commit is contained in:
schroda
2024-12-28 02:04:19 +01:00
parent 0c6872edb3
commit 6bae3aaf3a
3 changed files with 15 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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