1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
import React, { useCallback, useRef, useState } from "react";
import { PLAYBACK_SLOTS } from "../config";
interface SliderProps {
playback?: string;
slider: number;
setSlider: React.Dispatch<React.SetStateAction<number>>;
imageCount: number;
}
export function Slider({ playback, slider, setSlider, imageCount }: SliderProps) {
const sliderRef = useRef<HTMLDivElement>(null);
const [isDragging, setIsDragging] = useState(false);
const max = playback ? PLAYBACK_SLOTS : Math.max(0, imageCount - 1);
const handleStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {
setIsDragging(true);
updateSliderValue(e);
}, []);
const updateSliderValue = useCallback((e: MouseEvent | React.MouseEvent | TouchEvent | React.TouchEvent) => {
if (!sliderRef.current) return;
const rect = sliderRef.current.getBoundingClientRect();
let clientX: number;
if ('touches' in e) {
clientX = e.touches?.[0]?.clientX || (e as TouchEvent).changedTouches?.[0]?.clientX || 0;
} else {
clientX = e.clientX;
}
const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
const value = Math.round(percentage * max);
setSlider(value);
}, [max, setSlider]);
const handleMove = useCallback((e: MouseEvent | TouchEvent) => {
if (isDragging) {
e.preventDefault();
updateSliderValue(e);
}
}, [isDragging, updateSliderValue]);
const handleEnd = useCallback(() => {
setIsDragging(false);
}, []);
React.useEffect(() => {
if (isDragging) {
document.addEventListener('mousemove', handleMove);
document.addEventListener('mouseup', handleEnd);
document.addEventListener('touchmove', handleMove, { passive: false });
document.addEventListener('touchend', handleEnd);
return () => {
document.removeEventListener('mousemove', handleMove);
document.removeEventListener('mouseup', handleEnd);
document.removeEventListener('touchmove', handleMove);
document.removeEventListener('touchend', handleEnd);
};
}
}, [isDragging, handleMove, handleEnd]);
const percentage = (slider / max) * 100;
return (
<div id="slider" className="py-2.5 fixed bottom-[8vh] w-[30vw] ml-[35vw] max-[812px]:w-[80vw] max-[812px]:ml-[8vw] max-[812px]:z-10">
<div
ref={sliderRef}
className="relative h-5 bg-blue-500 rounded-full cursor-pointer touch-none"
onMouseDown={handleStart}
onTouchStart={handleStart}
>
<div
className={`absolute -top-2.5 w-10 h-10 bg-white rounded-full shadow-md z-[1] ${
isDragging ? 'cursor-grabbing' : 'cursor-grab'
}`}
style={{
left: `calc(${percentage}% - 20px)`
}}
/>
</div>
</div>
);
}
|
