Add zooming to the lightbox

src/view/com/lightbox/Images.tsx

@@ -1,7 +1,15 @@
 import React from 'react'
 import {Image, StyleSheet, useWindowDimensions, View} from 'react-native'
 
-export function Component({uris, index}: {uris: string[]; index: number}) {
+export function Component({
+  uris,
+  index,
+  isZooming,
+}: {
+  uris: string[]
+  index: number
+  isZooming: boolean
+}) {
   const winDim = useWindowDimensions()
   const left = index * winDim.width * -1
   return (
@@ -9,7 +17,11 @@ export function Component({uris, index}: {uris: string[]; index: number}) {
       {uris.map((uri, i) => (
         <Image
           key={i}
-          style={[styles.image, {left: i * winDim.width}]}
+          style={[
+            styles.image,
+            {left: i * winDim.width},
+            isZooming && i !== index ? {opacity: 0} : undefined,
+          ]}
           source={{uri}}
         />
       ))}

src/view/com/lightbox/Lightbox.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useState} from 'react'
 import {
   Animated,
   StyleSheet,
@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Swipe, Dir} from '../util/gestures/Swipe'
+import {SwipeAndZoom, Dir} from '../util/gestures/SwipeAndZoom'
 import {useStores} from '../../../state'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'
 
@@ -21,12 +21,17 @@ import * as ImagesLightbox from './Images'
 export const Lightbox = observer(function Lightbox() {
   const store = useStores()
   const winDim = useWindowDimensions()
+  const [isZooming, setIsZooming] = useState(false)
   const panX = useAnimatedValue(0)
   const panY = useAnimatedValue(0)
+  const zoom = useAnimatedValue(0)
 
   const onClose = () => {
     store.shell.closeLightbox()
   }
+  const onSwipeStartDirection = (dir: Dir) => {
+    setIsZooming(dir === Dir.Zoom)
+  }
   const onSwipeEnd = (dir: Dir) => {
     if (dir === Dir.Up || dir === Dir.Down) {
       onClose()
@@ -57,6 +62,7 @@ export const Lightbox = observer(function Lightbox() {
   } else if (store.shell.activeLightbox?.name === 'images') {
     element = (
       <ImagesLightbox.Component
+        isZooming={isZooming}
         {...(store.shell.activeLightbox as models.ImagesLightbox)}
       />
     )
@@ -66,7 +72,16 @@ export const Lightbox = observer(function Lightbox() {
 
   const translateX = Animated.multiply(panX, winDim.width * -1)
   const translateY = Animated.multiply(panY, winDim.height * -1)
-  const swipeTransform = {transform: [{translateX}, {translateY}]}
+  const scale = Animated.add(zoom, 1)
+  const swipeTransform = {
+    transform: [
+      {translateY: winDim.height / 2},
+      {scale},
+      {translateY: winDim.height / -2},
+      {translateX},
+      {translateY},
+    ],
+  }
   const swipeOpacity = {
     opacity: panY.interpolate({
       inputRange: [-1, 0, 1],
@@ -76,15 +91,18 @@ export const Lightbox = observer(function Lightbox() {
 
   return (
     <View style={StyleSheet.absoluteFill}>
-      <Swipe
+      <SwipeAndZoom
         panX={panX}
         panY={panY}
+        zoom={zoom}
         swipeEnabled
+        zoomEnabled
         canSwipeLeft={store.shell.activeLightbox.canSwipeLeft}
         canSwipeRight={store.shell.activeLightbox.canSwipeRight}
         canSwipeUp
         canSwipeDown
         hasPriority
+        onSwipeStartDirection={onSwipeStartDirection}
         onSwipeEnd={onSwipeEnd}>
         <TouchableWithoutFeedback onPress={onClose}>
           <Animated.View style={[styles.bg, swipeOpacity]} />
@@ -95,7 +113,7 @@ export const Lightbox = observer(function Lightbox() {
           </View>
         </TouchableWithoutFeedback>
         <Animated.View style={swipeTransform}>{element}</Animated.View>
-      </Swipe>
+      </SwipeAndZoom>
     </View>
   )
 })

src/view/com/util/gestures/SwipeAndZoom.tsx

@@ -16,16 +16,19 @@ export enum Dir {
   Down,
   Left,
   Right,
+  Zoom,
 }
 
 interface Props {
   panX: Animated.Value
   panY: Animated.Value
+  zoom: Animated.Value
   canSwipeLeft?: boolean
   canSwipeRight?: boolean
   canSwipeUp?: boolean
   canSwipeDown?: boolean
   swipeEnabled?: boolean
+  zoomEnabled?: boolean
   hasPriority?: boolean // if has priority, will not release control of the gesture to another gesture
   horzDistThresholdDivisor?: number
   vertDistThresholdDivisor?: number
@@ -36,14 +39,16 @@ interface Props {
   children: React.ReactNode
 }
 
-export function Swipe({
+export function SwipeAndZoom({
   panX,
   panY,
+  zoom,
   canSwipeLeft = false,
   canSwipeRight = false,
   canSwipeUp = false,
   canSwipeDown = false,
-  swipeEnabled = true,
+  swipeEnabled = false,
+  zoomEnabled = false,
   hasPriority = false,
   horzDistThresholdDivisor = 1.75,
   vertDistThresholdDivisor = 1.75,
@@ -55,6 +60,9 @@ export function Swipe({
 }: Props) {
   const winDim = useWindowDimensions()
   const [dir, setDir] = useState<Dir>(Dir.None)
+  const [initialDistance, setInitialDistance] = useState<number | undefined>(
+    undefined,
+  )
 
   const swipeVelocityThreshold = 35
   const swipeHorzDistanceThreshold = winDim.width / horzDistThresholdDivisor
@@ -84,6 +92,7 @@ export function Swipe({
     if (d === Dir.Right) return canSwipeRight
     if (d === Dir.Up) return canSwipeUp
     if (d === Dir.Down) return canSwipeDown
+    if (d === Dir.Zoom) return zoomEnabled
     return false
   }
   const isHorz = (d: Dir) => d === Dir.Left || d === Dir.Right
@@ -93,10 +102,9 @@ export function Swipe({
     event: GestureResponderEvent,
     gestureState: PanResponderGestureState,
   ) => {
-    if (swipeEnabled === false) {
+    if (zoomEnabled && gestureState.numberActiveTouches === 2) {
-      return false
+      return true
-    }
+    } else if (swipeEnabled && gestureState.numberActiveTouches === 1) {
-
       const dx = I18nManager.isRTL ? -gestureState.dx : gestureState.dx
       const dy = gestureState.dy
       const willHandle =
@@ -106,21 +114,28 @@ export function Swipe({
           ((dy > 0 && canSwipeUp) || (dy < 0 && canSwipeDown)))
       return willHandle
     }
+    return false
+  }
 
   const startGesture = () => {
     setDir(Dir.None)
     onSwipeStart?.()
 
+    // reset all state
     panX.stopAnimation()
     // @ts-expect-error: _value is private, but docs use it as well
     panX.setOffset(panX._value)
     panY.stopAnimation()
     // @ts-expect-error: _value is private, but docs use it as well
     panY.setOffset(panY._value)
+    zoom.stopAnimation()
+    // @ts-expect-error: _value is private, but docs use it as well
+    zoom.setOffset(zoom._value)
+    setInitialDistance(undefined)
   }
 
   const respondToGesture = (
-    _: GestureResponderEvent,
+    e: GestureResponderEvent,
     gestureState: PanResponderGestureState,
   ) => {
     const dx = I18nManager.isRTL ? -gestureState.dx : gestureState.dx
@@ -128,8 +143,10 @@ export function Swipe({
 
     let newDir = Dir.None
     if (dir === Dir.None) {
-      // establish if the user is swiping horz or vert
+      // establish if the user is swiping horz or vert, or zooming
-      if (Math.abs(dx) > Math.abs(dy)) {
+      if (gestureState.numberActiveTouches === 2) {
+        newDir = Dir.Zoom
+      } else if (Math.abs(dx) > Math.abs(dy)) {
         newDir = dx > 0 ? Dir.Left : Dir.Right
       } else {
         newDir = dy > 0 ? Dir.Up : Dir.Down
@@ -140,9 +157,37 @@ export function Swipe({
     } else if (isVert(dir)) {
       // direction update
       newDir = dy > 0 ? Dir.Up : Dir.Down
+    } else {
+      newDir = dir
     }
 
-    if (isHorz(newDir)) {
+    if (newDir === Dir.Zoom) {
+      if (zoomEnabled) {
+        if (gestureState.numberActiveTouches === 2) {
+          // zoom in/out
+          const x0 = e.nativeEvent.touches[0].pageX
+          const x1 = e.nativeEvent.touches[1].pageX
+          const y0 = e.nativeEvent.touches[0].pageY
+          const y1 = e.nativeEvent.touches[1].pageY
+          const zoomDx = Math.abs(x0 - x1)
+          const zoomDy = Math.abs(y0 - y1)
+          const dist = Math.sqrt(zoomDx * zoomDx + zoomDy * zoomDy) / 100
+          if (
+            typeof initialDistance === 'undefined' ||
+            dist - initialDistance < 0
+          ) {
+            setInitialDistance(dist)
+          } else {
+            zoom.setValue(dist - initialDistance)
+          }
+        } else {
+          // pan around after zooming
+          panX.setValue(clamp(dx / winDim.width, -1, 1) * -1)
+          panY.setValue(clamp(dy / winDim.height, -1, 1) * -1)
+        }
+      }
+    } else if (isHorz(newDir)) {
+      // swipe left/right
       panX.setValue(
         clamp(
           dx / swipeHorzDistanceThreshold,
@@ -152,6 +197,7 @@ export function Swipe({
       )
       panY.setValue(0)
     } else if (isVert(newDir)) {
+      // swipe up/down
       panY.setValue(
         clamp(
           dy / swipeVertDistanceThreshold,
@@ -175,7 +221,7 @@ export function Swipe({
     _: GestureResponderEvent,
     gestureState: PanResponderGestureState,
   ) => {
-    const finish = (finalDir: dir) => () => {
+    const finish = (finalDir: Dir) => () => {
       if (finalDir !== Dir.None) {
         onSwipeEnd?.(finalDir)
       }
@@ -190,6 +236,7 @@ export function Swipe({
       (Math.abs(gestureState.dx) > swipeHorzDistanceThreshold / 4 ||
         Math.abs(gestureState.vx) > swipeVelocityThreshold)
     ) {
+      // horizontal swipe reset
       Animated.timing(panX, {
         toValue: dir === Dir.Left ? -1 : 1,
         duration: 100,
@@ -200,18 +247,30 @@ export function Swipe({
       (Math.abs(gestureState.dy) > swipeVertDistanceThreshold / 8 ||
         Math.abs(gestureState.vy) > swipeVelocityThreshold)
     ) {
+      // vertical swipe reset
       Animated.timing(panY, {
         toValue: dir === Dir.Up ? -1 : 1,
         duration: 100,
         useNativeDriver,
       }).start(finish(dir))
     } else {
+      // zoom (or no direction) reset
       onSwipeEnd?.(Dir.None)
       Animated.timing(panX, {
         toValue: 0,
         duration: 100,
         useNativeDriver,
-      }).start(finish(Dir.None))
+      }).start()
+      Animated.timing(panY, {
+        toValue: 0,
+        duration: 100,
+        useNativeDriver,
+      }).start()
+      Animated.timing(zoom, {
+        toValue: 0,
+        duration: 100,
+        useNativeDriver,
+      }).start()
     }
   }