@stream-io/video-react-sdk 1.28.1 → 1.29.0

package/src/hooks/useDragToScroll.ts

@@ -0,0 +1,162 @@
+import { useEffect, useRef } from 'react';
+
+interface DragScrollState {
+  isDragging: boolean;
+  isPointerActive: boolean;
+  prevX: number;
+  prevY: number;
+  velocityX: number;
+  velocityY: number;
+  rafId: number;
+  startX: number;
+  startY: number;
+}
+
+interface DragToScrollOptions {
+  decay?: number;
+  minVelocity?: number;
+  dragThreshold?: number;
+  enabled?: boolean;
+}
+
+/**
+ * Enables drag-to-scroll functionality with momentum scrolling on a scrollable element.
+ *
+ * This hook allows users to click and drag to scroll an element, with momentum scrolling
+ * that continues after the drag ends. The drag only activates after moving beyond a threshold
+ *  distance, which prevents accidental drags from clicks.
+ *
+ * @param element - The HTML element to enable drag to scroll on.
+ * @param options - Options for customizing the drag-to-scroll behavior.
+ */
+export function useDragToScroll(
+  element: HTMLElement | null,
+  options: DragToScrollOptions = {},
+) {
+  const stateRef = useRef<DragScrollState>({
+    isDragging: false,
+    isPointerActive: false,
+    prevX: 0,
+    prevY: 0,
+    velocityX: 0,
+    velocityY: 0,
+    rafId: 0,
+    startX: 0,
+    startY: 0,
+  });
+
+  useEffect(() => {
+    if (!element || !options.enabled) return;
+
+    const { decay = 0.95, minVelocity = 0.5, dragThreshold = 5 } = options;
+
+    const state = stateRef.current;
+
+    const stopMomentum = () => {
+      if (state.rafId) {
+        cancelAnimationFrame(state.rafId);
+        state.rafId = 0;
+      }
+      state.velocityX = 0;
+      state.velocityY = 0;
+    };
+
+    const momentumStep = () => {
+      state.velocityX *= decay;
+      state.velocityY *= decay;
+
+      element.scrollLeft -= state.velocityX;
+      element.scrollTop -= state.velocityY;
+
+      if (
+        Math.abs(state.velocityX) < minVelocity &&
+        Math.abs(state.velocityY) < minVelocity
+      ) {
+        state.rafId = 0;
+        return;
+      }
+
+      state.rafId = requestAnimationFrame(momentumStep);
+    };
+
+    const onPointerDown = (e: PointerEvent) => {
+      if (e.pointerType !== 'mouse') return;
+
+      stopMomentum();
+
+      state.isDragging = false;
+      state.isPointerActive = true;
+
+      state.prevX = e.clientX;
+      state.prevY = e.clientY;
+      state.startX = e.clientX;
+      state.startY = e.clientY;
+    };
+
+    const onPointerMove = (e: PointerEvent) => {
+      if (e.pointerType !== 'mouse') return;
+
+      if (!state.isPointerActive) return;
+
+      const dx = e.clientX - state.startX;
+      const dy = e.clientY - state.startY;
+
+      if (!state.isDragging && Math.hypot(dx, dy) > dragThreshold) {
+        state.isDragging = true;
+        e.preventDefault();
+      }
+
+      if (!state.isDragging) return;
+
+      const moveDx = e.clientX - state.prevX;
+      const moveDy = e.clientY - state.prevY;
+
+      element.scrollLeft -= moveDx;
+      element.scrollTop -= moveDy;
+
+      state.velocityX = moveDx;
+      state.velocityY = moveDy;
+
+      state.prevX = e.clientX;
+      state.prevY = e.clientY;
+    };
+
+    const onPointerUpOrCancel = () => {
+      const wasDragging = state.isDragging;
+
+      state.isDragging = false;
+      state.isPointerActive = false;
+
+      state.prevX = 0;
+      state.prevY = 0;
+      state.startX = 0;
+      state.startY = 0;
+
+      if (!wasDragging) {
+        stopMomentum();
+        return;
+      }
+
+      if (Math.hypot(state.velocityX, state.velocityY) < minVelocity) {
+        stopMomentum();
+        return;
+      }
+
+      state.rafId = requestAnimationFrame(momentumStep);
+    };
+
+    element.addEventListener('pointerdown', onPointerDown);
+    element.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', onPointerUpOrCancel);
+    window.addEventListener('pointercancel', onPointerUpOrCancel);
+
+    return () => {
+      element.removeEventListener('pointerdown', onPointerDown);
+      element.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('pointerup', onPointerUpOrCancel);
+      window.removeEventListener('pointercancel', onPointerUpOrCancel);
+
+      stopMomentum();
+    };
+  }, [element, options]);
+}