Clean up index setting, add callback to track changes

src/components/images/Gallery/index.tsx

@@ -134,11 +134,24 @@ export function Gallery({
   const itemRefsRef = useRef<Map<number, View>>(new Map())
   const currentIndexRef = useRef(0)
 
+  const setCurrentIndex = (index: number) => {
+    const prev = currentIndexRef.current
+    if (prev !== index) {
+      currentIndexRef.current = index
+      ax.metric('post:gallery:swipe', {
+        fromIndex: prev,
+        toIndex: index,
+        totalImages: images.length,
+      })
+    }
+  }
+
   const scrollTo = (offset: number) => {
     flatListRef.current?.scrollToOffset({offset, animated: false})
   }
 
   const onSettle = (index: number) => {
+    setCurrentIndex(index)
     if (!IS_WEB) return
     const el = itemRefsRef.current.get(index) as unknown as HTMLElement | null
     el?.focus({preventScroll: true})
@@ -211,12 +224,12 @@ export function Gallery({
             for (let i = 0; i < images.length; i++) {
               const w = (itemWidthsRef.current.get(i) ?? 0) + ITEM_GAP
               if (offsetX < accumulated + w / 2) {
-                currentIndexRef.current = i
+                setCurrentIndex(i)
                 break
               }
               accumulated += w
               if (i === images.length - 1) {
-                currentIndexRef.current = i
+                setCurrentIndex(i)
               }
             }
           }}

src/components/images/Gallery/useKeyboardHandlers.web.ts

@@ -47,6 +47,7 @@ export function useKeyboardHandlers({
       if (targetIndex != null) {
         e.preventDefault()
 
+        console.log('targetIndex', targetIndex)
         if (stopTween) {
           stopTween()
           stopTween = null
@@ -62,7 +63,6 @@ export function useKeyboardHandlers({
           },
           () => {
             stopTween = null
-            currentIndexRef.current = idx
             onSettle(idx)
           },
         )

src/components/images/Gallery/usePointerHandlers.web.ts

@@ -69,6 +69,7 @@ export function usePointerHandlers({
     let velo = 0
     let t = 0
     let stopTween: (() => void) | null = null
+    let localIndex = currentIndexRef.current
 
     el.style.cursor = 'grab'
 
@@ -83,6 +84,7 @@ export function usePointerHandlers({
 
       isMouseDown = true
       isDragging = false
+      localIndex = currentIndexRef.current
       startX = e.pageX
       dragScrollLeft = el.scrollLeft
       delta = 0
@@ -121,17 +123,17 @@ export function usePointerHandlers({
 
       scrollTo(dragScrollLeft - delta)
 
-      // Update current index from scroll position
+      // Update local index from scroll position
       const offsetX = dragScrollLeft - delta
       let accumulated = 0
       for (let i = 0; i < imageCount; i++) {
         const w = (itemWidthsRef.current.get(i) ?? 0) + ITEM_GAP
         if (offsetX < accumulated + w / 2) {
-          currentIndexRef.current = i
+          localIndex = i
           break
         }
         accumulated += w
-        if (i === imageCount - 1) currentIndexRef.current = i
+        if (i === imageCount - 1) localIndex = i
       }
     }
 
@@ -165,7 +167,7 @@ export function usePointerHandlers({
 
         const targetIndex = whichByDistance(
           itemWidthsRef.current,
-          currentIndexRef.current,
+          localIndex,
           totalDistance,
           direction,
           imageCount,
@@ -176,7 +178,7 @@ export function usePointerHandlers({
         const to = getOffsetForIndex(itemWidthsRef.current, targetIndex)
 
         if (from === to) {
-          currentIndexRef.current = targetIndex
+          onSettle(targetIndex)
           return
         }
 
@@ -190,7 +192,6 @@ export function usePointerHandlers({
           },
           () => {
             stopTween = null
-            currentIndexRef.current = targetIndex
             onSettle(targetIndex)
           },
         )