@planningcenter/chat-react-native 3.10.0 → 3.10.1-qa-291.0

package/src/components/conversation/attachments/image_attachment.tsx

@@ -1,26 +1,8 @@
-import React, { useCallback, useMemo, useState } from 'react'
-import {
-  StyleSheet,
-  Modal,
-  useWindowDimensions,
-  SafeAreaView,
-  View,
-  Linking,
-  ImageStyle,
-} from 'react-native'
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-  type PanGesture,
-} from 'react-native-gesture-handler'
-import {
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-  type AnimatedStyle,
-} from 'react-native-reanimated'
+import React, { useMemo, useState, Dispatch, SetStateAction } from 'react'
+import { StyleSheet, Modal, SafeAreaView, View, Linking, Dimensions } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { IconButton, Image, Heading, Text } from '../../display'
 import colorFunction from 'color'
@@ -29,7 +11,17 @@ import { DenormalizedMessageAttachmentResource } from '../../../types/resources/
 import { PlatformPressable } from '@react-navigation/elements'
 import { useTheme } from '../../../hooks'
 
-const PAN_THRESHOLD_PX = 300
+const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window')
+const DISMISS_PAN_THRESHOLD = 300
+const DEFAULT_OPACITY = 1
+const DEFAULT_SCALE = 1
+const MIN_SCALE = 0.5
+const MAX_SCALE = 5
+const DOUBLE_TAP_ZOOM_SCALE = 2
+const RESET_SPRING_CONFIG = {
+  damping: 20,
+  stiffness: 150,
+}
 
 export type MetaProps = {
   authorName: string
@@ -52,34 +44,6 @@ export function ImageAttachment({
   const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })
   const [visible, setVisible] = useState(false)
 
-  // shared values run on the native UI thread and prevents clogging up the JS thread
-  const dismissY = useSharedValue(0)
-  const opacity = useSharedValue(1)
-
-  const resetAnimations = useCallback(() => {
-    dismissY.value = withTiming(0)
-    opacity.value = withTiming(1)
-  }, [dismissY, opacity])
-
-  const handleCloseModal = useCallback(() => {
-    setVisible(false)
-    resetAnimations()
-  }, [setVisible, resetAnimations])
-
-  const panGesture = Gesture.Pan()
-    .onUpdate(e => {
-      dismissY.value = e.translationY
-      opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX
-    })
-    .onEnd(() => {
-      runOnJS(handleCloseModal)() // Ensures we can call a JS function
-    })
-
-  const animatedImageStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: dismissY.value }],
-    opacity: opacity.value,
-  }))
-
   return (
     <>
       <PlatformPressable
@@ -98,11 +62,11 @@ export function ImageAttachment({
       </PlatformPressable>
       <LightboxModal
         visible={visible}
-        handleCloseModal={handleCloseModal}
+        setModalVisible={setVisible}
         uri={urlMedium || url}
         metaProps={metaProps}
-        panGesture={panGesture}
-        animatedImageStyle={animatedImageStyle}
+        imageWidth={metadata.width}
+        imageHeight={metadata.height}
       />
     </>
   )
@@ -110,39 +74,386 @@ export function ImageAttachment({
 
 interface LightboxModalProps {
   visible: boolean
-  handleCloseModal: () => void
+  setModalVisible: Dispatch<SetStateAction<boolean>>
   uri: string
   metaProps: MetaProps
-  panGesture: PanGesture
-  animatedImageStyle: AnimatedStyle<ImageStyle>
+  imageWidth?: number
+  imageHeight?: number
 }
 
 const LightboxModal = ({
   uri,
   visible,
-  handleCloseModal,
+  setModalVisible,
   metaProps,
-  panGesture,
-  animatedImageStyle,
+  imageWidth,
+  imageHeight,
 }: LightboxModalProps) => {
   const styles = useStyles()
+  const insets = useSafeAreaInsets()
 
   const { authorName, createdAt } = metaProps
 
+  // Calculate available space for image display
+  const availableWindowWidth = WINDOW_WIDTH
+  const availableWindowHeight = WINDOW_HEIGHT - insets.top - insets.bottom
+
+  /* ============================
+   ANIMATION VALUES
+  ============================ */
+  const dismissY = useSharedValue(0) // vertical distance to dismiss modal
+  const opacity = useSharedValue(DEFAULT_OPACITY) // opacity of modal
+  const scale = useSharedValue(DEFAULT_SCALE) // zoom level of image
+  const focalX = useSharedValue(0) // focal point of image between fingers
+  const focalY = useSharedValue(0) // focal point of image between fingers
+  const translateX = useSharedValue(0) // horizontal distance to pan image
+  const translateY = useSharedValue(0) // vertical distance to pan image
+  const savedScale = useSharedValue(DEFAULT_SCALE) // previous zoom level
+  const savedTranslateX = useSharedValue(0) // previous horizontal position
+  const savedTranslateY = useSharedValue(0) // previous vertical position
+
+  /* ============================
+   HANDLERS
+  ============================ */
   const handleOpenInBrowser = () => {
     Linking.openURL(uri)
   }
 
+  const resetDismissGestures = () => {
+    dismissY.value = withSpring(0, RESET_SPRING_CONFIG)
+    opacity.value = withSpring(DEFAULT_OPACITY, RESET_SPRING_CONFIG)
+  }
+
+  const resetAllGestures = () => {
+    resetDismissGestures()
+    scale.value = withSpring(DEFAULT_SCALE, RESET_SPRING_CONFIG)
+    translateX.value = withSpring(0, RESET_SPRING_CONFIG)
+    translateY.value = withSpring(0, RESET_SPRING_CONFIG)
+    savedScale.value = DEFAULT_SCALE
+    savedTranslateX.value = 0
+    savedTranslateY.value = 0
+  }
+
+  const handleCloseModal = () => {
+    setModalVisible(false)
+    resetAllGestures()
+  }
+
+  /* ============================
+   UTILITY FUNCTIONS
+   'worklet' runs functions on the UI thread, instead of the JS thread for better performance
+  ============================ */
+  const getImageContainedToWindowDimensions = () => {
+    'worklet'
+
+    if (!imageWidth || !imageHeight) {
+      return { width: availableWindowWidth, height: availableWindowHeight }
+    }
+
+    const imageAspectRatio = imageWidth / imageHeight
+    const windowAspectRatio = availableWindowWidth / availableWindowHeight
+
+    // Constrain image width if its wider than window
+    if (imageAspectRatio > windowAspectRatio) {
+      return {
+        width: availableWindowWidth,
+        height: availableWindowWidth / imageAspectRatio,
+      }
+    }
+
+    // Constrain image height if its taller than window
+    return {
+      width: availableWindowHeight * imageAspectRatio,
+      height: availableWindowHeight,
+    }
+  }
+
+  const zoomToFocalPoint = ({
+    focalPointX,
+    focalPointY,
+    targetScale,
+    currentSavedScale,
+    currentSavedTranslateX,
+    currentSavedTranslateY,
+  }: {
+    focalPointX: number
+    focalPointY: number
+    targetScale: number
+    currentSavedScale: number
+    currentSavedTranslateX: number
+    currentSavedTranslateY: number
+  }) => {
+    'worklet'
+
+    // How far the focal point is from the center of the window
+    const windowCenterX = WINDOW_WIDTH / 2
+    const windowCenterY = WINDOW_HEIGHT / 2
+
+    // Position of focal point relative to current image position
+    const focalRelativeX = focalPointX - windowCenterX - currentSavedTranslateX
+    const focalRelativeY = focalPointY - windowCenterY - currentSavedTranslateY
+
+    // Calculate new translation to keep focal point under fingers
+    const scaleRatio = targetScale / currentSavedScale
+    const newTranslateX = currentSavedTranslateX + focalRelativeX * (1 - scaleRatio)
+    const newTranslateY = currentSavedTranslateY + focalRelativeY * (1 - scaleRatio)
+
+    return {
+      translateX: newTranslateX,
+      translateY: newTranslateY,
+    }
+  }
+
+  const clampTranslation = ({
+    x,
+    y,
+    currentScale,
+    allowGestureOvershoot = false,
+  }: {
+    x: number
+    y: number
+    currentScale: number
+    allowGestureOvershoot?: boolean
+  }) => {
+    'worklet'
+
+    const { width: containedImageWidth, height: containedImageHeight } =
+      getImageContainedToWindowDimensions()
+
+    // Image dimensions after scaling / zooming
+    const scaledWidth = containedImageWidth * currentScale
+    const scaledHeight = containedImageHeight * currentScale
+
+    // How much the scaled image exceeds the window container
+    const excessWidth = scaledWidth - availableWindowWidth
+    const excessHeight = scaledHeight - availableWindowHeight
+
+    // How far the image can move in each direction
+    const maxTranslateX = Math.max(0, excessWidth / 2)
+    const maxTranslateY = Math.max(0, excessHeight / 2)
+
+    if (allowGestureOvershoot) {
+      const overshoot = 20
+      return {
+        x: Math.min(maxTranslateX + overshoot, Math.max(-maxTranslateX - overshoot, x)),
+        y: Math.min(maxTranslateY + overshoot, Math.max(-maxTranslateY - overshoot, y)),
+      }
+    }
+
+    return {
+      x: Math.min(maxTranslateX, Math.max(-maxTranslateX, x)),
+      y: Math.min(maxTranslateY, Math.max(-maxTranslateY, y)),
+    }
+  }
+
+  const isImageAtVerticalBoundry = (currentScale: number) => {
+    'worklet'
+
+    const { height: containedImageHeight } = getImageContainedToWindowDimensions()
+
+    // Calculate how much the image can exceed the window container
+    const scaledHeight = containedImageHeight * currentScale
+    const excessHeight = scaledHeight - availableWindowHeight
+    const maxTranslateY = Math.max(0, excessHeight / 2)
+
+    const currentTranslateY = translateY.value
+    const panPositionTolerance = 1 // buffer to account for translateY being at a subpixel position
+
+    const atTopBoundry = currentTranslateY >= maxTranslateY - panPositionTolerance
+    const atBottomBoundry = currentTranslateY <= -maxTranslateY + panPositionTolerance
+
+    return atTopBoundry || atBottomBoundry
+  }
+
+  /* ============================
+   GESTURES
+  ============================ */
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onStart(e => {
+      const isZoomedIn = scale.value > DEFAULT_SCALE
+      if (isZoomedIn) {
+        runOnJS(resetAllGestures)()
+      } else {
+        // Zoom to 2x at tap location
+        const newTranslation = zoomToFocalPoint({
+          focalPointX: e.x,
+          focalPointY: e.y,
+          targetScale: DOUBLE_TAP_ZOOM_SCALE,
+          currentSavedScale: savedScale.value,
+          currentSavedTranslateX: savedTranslateX.value,
+          currentSavedTranslateY: savedTranslateY.value,
+        })
+
+        // Apply clamping to ensure image edges remain within window boundaries
+        const clampedTranslate = clampTranslation({
+          x: newTranslation.translateX,
+          y: newTranslation.translateY,
+          currentScale: DOUBLE_TAP_ZOOM_SCALE,
+        })
+
+        // Animate to new scale and translation
+        scale.value = withSpring(DOUBLE_TAP_ZOOM_SCALE, RESET_SPRING_CONFIG)
+        translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG)
+        translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG)
+
+        // Update saved state for next gesture
+        savedScale.value = DOUBLE_TAP_ZOOM_SCALE
+        savedTranslateX.value = clampedTranslate.x
+        savedTranslateY.value = clampedTranslate.y
+      }
+    })
+
+  const pinchGesture = Gesture.Pinch()
+    .onStart(e => {
+      focalX.value = e.focalX
+      focalY.value = e.focalY
+    })
+    .onUpdate(e => {
+      // Zoom image in/out within scale limits
+      const newScale = savedScale.value * e.scale
+      const newScaleClamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale))
+      scale.value = newScaleClamped
+
+      // Calculate new translation to keep focal point under fingers
+      const newTranslation = zoomToFocalPoint({
+        focalPointX: focalX.value,
+        focalPointY: focalY.value,
+        targetScale: newScaleClamped,
+        currentSavedScale: savedScale.value,
+        currentSavedTranslateX: savedTranslateX.value,
+        currentSavedTranslateY: savedTranslateY.value,
+      })
+
+      // Apply translation without clamping to ensure focal point doesn't jump during gesture
+      translateX.value = newTranslation.translateX
+      translateY.value = newTranslation.translateY
+    })
+    .onEnd(() => {
+      const currentScale = scale.value
+
+      // Dismiss modal if fully zoomed out
+      if (currentScale <= MIN_SCALE) {
+        runOnJS(handleCloseModal)()
+        return
+      }
+
+      // Reset all gestures if image is near default scale
+      const isNearDefaultScale = currentScale <= DEFAULT_SCALE + 0.1
+      if (isNearDefaultScale) {
+        runOnJS(resetAllGestures)()
+        return
+      }
+
+      // Ensure image edges remain within window boundaries
+      const clampedTranslate = clampTranslation({
+        x: translateX.value,
+        y: translateY.value,
+        currentScale: currentScale,
+      })
+      translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG)
+      translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG)
+
+      // Save state for next gesture
+      savedScale.value = currentScale
+      savedTranslateX.value = clampedTranslate.x
+      savedTranslateY.value = clampedTranslate.y
+    })
+
+  const panGesture = Gesture.Pan()
+    .onUpdate(e => {
+      // Only pan if image is zoomed in
+      if (scale.value <= DEFAULT_SCALE) return
+
+      const newTranslateX = savedTranslateX.value + e.translationX
+      const newTranslateY = savedTranslateY.value + e.translationY
+
+      // Ensure image edges remain within window boundaries
+      const clampedTranslate = clampTranslation({
+        x: newTranslateX,
+        y: newTranslateY,
+        currentScale: scale.value,
+        allowGestureOvershoot: true,
+      })
+      translateX.value = clampedTranslate.x
+      translateY.value = clampedTranslate.y
+    })
+    .onEnd(() => {
+      // Prevents saving pan position if image is zoomed out while panning
+      if (scale.value <= DEFAULT_SCALE) return
+
+      // Spring image back to window boundaries if overshot
+      const clampedTranslate = clampTranslation({
+        x: translateX.value,
+        y: translateY.value,
+        currentScale: scale.value,
+      })
+      translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG)
+      translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG)
+
+      // Save the current position for the next gesture
+      savedTranslateX.value = clampedTranslate.x
+      savedTranslateY.value = clampedTranslate.y
+    })
+
+  const panToDismissModalGesture = Gesture.Pan()
+    .onUpdate(e => {
+      const atDefaultScale = scale.value === DEFAULT_SCALE
+
+      // Calculate zoom conditions for dismissing modal
+      const atVerticalBoundry = isImageAtVerticalBoundry(scale.value)
+      const panDirectionIsPrimarilyVertical = Math.abs(e.translationY) > Math.abs(e.translationX)
+      const canDismissWhileZoomed = atVerticalBoundry && panDirectionIsPrimarilyVertical
+
+      if (atDefaultScale || canDismissWhileZoomed) {
+        const panDistance = Math.abs(e.translationY)
+        const fadeProgress = panDistance / DISMISS_PAN_THRESHOLD
+
+        opacity.value = Math.max(0, DEFAULT_OPACITY - fadeProgress)
+        dismissY.value = e.translationY
+      }
+    })
+    .onEnd(() => {
+      const exceededDismissThreshold = Math.abs(dismissY.value) > DISMISS_PAN_THRESHOLD
+
+      if (exceededDismissThreshold) {
+        runOnJS(handleCloseModal)()
+      } else {
+        runOnJS(resetDismissGestures)()
+      }
+    })
+
+  /* ==============================
+   IMPLEMENT GESTURES & ANIMATIONS
+  ================================= */
+  // Race between pinch and pan ensures only one is active at a time, preventing issues with zooming to focal point between fingers
+  const pinchOrPanGestures = Gesture.Race(pinchGesture, panGesture)
+
+  // Race between double-tap and pinch/pan ensures that pinch/pan can't interrupt double-tap
+  const transformImageGestures = Gesture.Race(doubleTapGesture, pinchOrPanGestures)
+
+  // Dismiss can work simultaneously with all gestures
+  const composedGesture = Gesture.Simultaneous(transformImageGestures, panToDismissModalGesture)
+
+  const animatedImageStyles = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value + dismissY.value },
+      { scale: scale.value },
+    ],
+    opacity: opacity.value,
+  }))
+
   return (
     <Modal visible={visible} transparent animationType="fade" onRequestClose={handleCloseModal}>
       <SafeAreaView style={styles.modal}>
         <GestureHandlerRootView>
-          <GestureDetector gesture={panGesture}>
+          <GestureDetector gesture={composedGesture}>
             <Image
               source={{ uri }}
               loadingBackgroundStyles={styles.lightboxImageLoading}
               style={styles.lightboxImage}
-              animatedImageStyle={animatedImageStyle}
+              animatedImageStyle={animatedImageStyles}
               resizeMode="contain"
               animated={true}
               alt=""
@@ -187,7 +498,6 @@ interface UseStylesProps {
 }
 
 const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {}) => {
-  const { width: windowWidth } = useWindowDimensions()
   const backgroundColor = tokens.colorNeutral7
   const transparentBackgroundColor = useMemo(
     () => colorFunction(backgroundColor).alpha(0.8).toString(),
@@ -214,7 +524,7 @@ const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {})
     },
     lightboxImage: {
       height: '100%',
-      width: windowWidth,
+      width: WINDOW_WIDTH,
       backgroundColor,
     },
     lightboxImageLoading: {