release: v0.20.0

hooks/useSwipe.ts

@@ -4,19 +4,54 @@ interface UseSwipeProps {
   onSwipeLeft: () => void;
   onSwipeRight: () => void;
   threshold?: number;
+  /**
+   * False while a swipe must not navigate — the lightbox while zoomed, where
+   * one finger pans the photo (#467). Read when the touch starts and when it
+   * ends, so a gesture that began zoomed never turns into a swipe.
+   */
+  enabled?: boolean;
 }
 
-export function useSwipe({ onSwipeLeft, onSwipeRight, threshold = 60 }: UseSwipeProps) {
+/**
+ * A one-finger horizontal swipe.
+ *
+ * Anything with a second finger is not a swipe: a pinch that drifts sideways
+ * used to be read as one and jump to the next photo, because only the first
+ * touch was ever looked at. Once a second finger lands, the whole touch
+ * sequence is ignored, up to the moment the last finger lifts.
+ */
+export function useSwipe({
+  onSwipeLeft,
+  onSwipeRight,
+  threshold = 60,
+  enabled = true,
+}: UseSwipeProps) {
   const touchStartX = useRef<number>(0);
   const touchStartY = useRef<number>(0);
+  /** The current touch sequence is out: multi-touch, or started while disabled. */
+  const ignored = useRef(false);
 
-  const handleTouchStart = useCallback((e: React.TouchEvent | TouchEvent) => {
-    touchStartX.current = e.touches[0].clientX;
-    touchStartY.current = e.touches[0].clientY;
-  }, []);
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent | TouchEvent) => {
+      if (e.touches.length > 1) {
+        ignored.current = true;
+        return;
+      }
+      ignored.current = !enabled;
+      touchStartX.current = e.touches[0].clientX;
+      touchStartY.current = e.touches[0].clientY;
+    },
+    [enabled],
+  );
 
   const handleTouchEnd = useCallback(
     (e: React.TouchEvent | TouchEvent) => {
+      // Fingers still down: the sequence is not over yet.
+      if (e.touches.length > 0) return;
+      const skip = ignored.current || !enabled;
+      ignored.current = false;
+      if (skip) return;
+
       const dx = e.changedTouches[0].clientX - touchStartX.current;
       const dy = e.changedTouches[0].clientY - touchStartY.current;
 
@@ -25,7 +60,7 @@ export function useSwipe({ onSwipeLeft, onSwipeRight, threshold = 60 }: UseSwipe
         else onSwipeLeft();
       }
     },
-    [onSwipeLeft, onSwipeRight, threshold],
+    [onSwipeLeft, onSwipeRight, threshold, enabled],
   );
 
   return { handleTouchStart, handleTouchEnd };