Add zooming to the lightbox

1 files changed, 23 insertions, 5 deletions

diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx
index f6c89b69b..36c51764f 100644
--- a/src/view/com/lightbox/Lightbox.tsx
+++ b/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>
   )
 })