带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(3)

// ...
useEffect(() => {
 const gesture = new DragGesture(
 // 拖拽“点”
 thumbRef.current,
 (state) => {
 if (state.first) {
 setIsDragging(true);
 }
 const x = state.xy[0];
 let walked: number;
 // 判断是否超出边界
 if (x < 0) {
 walked = 0;
 } else if (x > OVERALL_WIDTH) {
 walked = OVERALL_WIDTH;
 } else {
 walked = x;
 }
 setCurrentWalked(walked);
 if (state.last) {
 // 用户停止拖拽后，跳帧至当前时间
 const duration = Math.ceil((walked / OVERALL_WIDTH) * maxDuration);
 onChangeCurrentTime(duration);
 setIsDragging(false);
 }
 },
 {
 axis: 'x',
 pointer: { touch: true },
 },
 );
 return () => {
 gesture.destroy();
 };
}, []);
return (
 <div ref={thumbRef} />
);