3 files changed, 42 insertions, 128 deletions
diff --git a/src/view/com/composer/PhotoCarouselPicker.tsx b/src/view/com/composer/PhotoCarouselPicker.tsx
index 64f34a0b7..440e7d38f 100644
--- a/src/view/com/composer/PhotoCarouselPicker.tsx
+++ b/src/view/com/composer/PhotoCarouselPicker.tsx
@@ -16,6 +16,7 @@ import {useStores} from '../../../state'
 
 const MAX_WIDTH = 1000
 const MAX_HEIGHT = 1000
+const MAX_SIZE = 300000
 
 const IMAGE_PARAMS = {
   width: 1000,
@@ -43,7 +44,7 @@ export const PhotoCarouselPicker = ({
         cropping: true,
         ...IMAGE_PARAMS,
       })
-      const img = await compressIfNeeded(cameraRes, 300000)
+      const img = await compressIfNeeded(cameraRes, MAX_SIZE)
       onSelectPhotos([...selectedPhotos, img.path])
     } catch (err: any) {
       // ignore
@@ -67,7 +68,7 @@ export const PhotoCarouselPicker = ({
           width,
           height,
         })
-        const img = await compressIfNeeded(cropperRes, 300000)
+        const img = await compressIfNeeded(cropperRes, MAX_SIZE)
         onSelectPhotos([...selectedPhotos, img.path])
       } catch (err: any) {
         // ignore
@@ -99,7 +100,7 @@ export const PhotoCarouselPicker = ({
           width,
           height,
         })
-        const finalImg = await compressIfNeeded(cropperRes, 300000)
+        const finalImg = await compressIfNeeded(cropperRes, MAX_SIZE)
         result.push(finalImg.path)
       }
       onSelectPhotos([...selectedPhotos, ...result])
diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx
index 849354aea..3369c2770 100644
--- a/src/view/com/lightbox/Lightbox.tsx
+++ b/src/view/com/lightbox/Lightbox.tsx
@@ -1,139 +1,43 @@
-import React, {useState} from 'react'
-import {
-  Animated,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  useWindowDimensions,
-  View,
-} from 'react-native'
+import React from 'react'
+import {View} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {SwipeAndZoom, Dir} from '../util/gestures/SwipeAndZoom'
+import ImageView from 'react-native-image-viewing'
 import {useStores} from '../../../state'
-import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
 
 import * as models from '../../../state/models/shell-ui'
 
-import * as ProfileImageLightbox from './ProfileImage'
-import * as ImageLightbox from './Image'
-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 = () => {
+    console.log('hit')
     store.shell.closeLightbox()
   }
-  const onSwipeStartDirection = (dir: Dir) => {
-    setIsZooming(dir === Dir.Zoom)
-  }
-  const onSwipeEnd = (dir: Dir) => {
-    if (dir === Dir.Up || dir === Dir.Down) {
-      onClose()
-    } else if (dir === Dir.Left) {
-      store.shell.activeLightbox?.onSwipeLeft()
-    } else if (dir === Dir.Right) {
-      store.shell.activeLightbox?.onSwipeRight()
-    }
-  }
 
   if (!store.shell.isLightboxActive) {
     return <View />
   }
 
-  let element
   if (store.shell.activeLightbox?.name === 'profile-image') {
-    element = (
-      <ProfileImageLightbox.Component
-        {...(store.shell.activeLightbox as models.ProfileImageLightbox)}
-      />
-    )
-  } else if (store.shell.activeLightbox?.name === 'image') {
-    element = (
-      <ImageLightbox.Component
-        {...(store.shell.activeLightbox as models.ImageLightbox)}
+    const opts = store.shell.activeLightbox as models.ProfileImageLightbox
+    return (
+      <ImageView
+        images={[{uri: opts.profileView.avatar}]}
+        imageIndex={0}
+        visible
+        onRequestClose={onClose}
       />
     )
   } else if (store.shell.activeLightbox?.name === 'images') {
-    element = (
-      <ImagesLightbox.Component
-        isZooming={isZooming}
-        {...(store.shell.activeLightbox as models.ImagesLightbox)}
+    const opts = store.shell.activeLightbox as models.ImagesLightbox
+    return (
+      <ImageView
+        images={opts.uris.map(uri => ({uri}))}
+        imageIndex={opts.index}
+        visible
+        onRequestClose={onClose}
       />
     )
   } else {
     return <View />
   }
-
-  const translateX = Animated.multiply(panX, winDim.width * -1)
-  const translateY = Animated.multiply(panY, winDim.height * -1)
-  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],
-      outputRange: [0, 1, 0],
-    }),
-  }
-
-  return (
-    <View style={StyleSheet.absoluteFill}>
-      <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]} />
-        </TouchableWithoutFeedback>
-        <TouchableWithoutFeedback onPress={onClose}>
-          <View style={styles.xIcon}>
-            <FontAwesomeIcon icon="x" size={24} style={{color: '#fff'}} />
-          </View>
-        </TouchableWithoutFeedback>
-        <Animated.View style={swipeTransform}>{element}</Animated.View>
-      </SwipeAndZoom>
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  bg: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    backgroundColor: '#000',
-    opacity: 0.9,
-  },
-  xIcon: {
-    position: 'absolute',
-    top: 30,
-    right: 30,
-  },
-  container: {
-    position: 'absolute',
-  },
 })
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index d9151afd0..52a4400a5 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {ProfileViewModel} from '../../../state/models/profile-view'
@@ -33,7 +38,9 @@ export const ProfileHeader = observer(function ProfileHeader({
   const store = useStores()
 
   const onPressAvi = () => {
-    store.shell.openLightbox(new ProfileImageLightbox(view))
+    if (view.avatar) {
+      store.shell.openLightbox(new ProfileImageLightbox(view))
+    }
   }
   const onPressToggleFollow = () => {
     view?.toggleFollowing().then(
@@ -254,17 +261,19 @@ export const ProfileHeader = observer(function ProfileHeader({
           </View>
         ) : undefined}
       </View>
-      <TouchableOpacity
+      <TouchableWithoutFeedback
         testID="profileHeaderAviButton"
-        style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}
         onPress={onPressAvi}>
-        <UserAvatar
-          size={80}
-          handle={view.handle}
-          displayName={view.displayName}
-          avatar={view.avatar}
-        />
-      </TouchableOpacity>
+        <View
+          style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
+          <UserAvatar
+            size={80}
+            handle={view.handle}
+            displayName={view.displayName}
+            avatar={view.avatar}
+          />
+        </View>
+      </TouchableWithoutFeedback>
     </View>
   )
 })