Switch to a better lightbox implementation (close #42)

package.json

@@ -41,6 +41,7 @@
     "react-native-gesture-handler": "^2.5.0",
     "react-native-haptic-feedback": "^1.14.0",
     "react-native-image-crop-picker": "^0.38.1",
+    "react-native-image-viewing": "^0.2.2",
     "react-native-inappbrowser-reborn": "^3.6.3",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^6.0.2",

src/state/models/shell-ui.ts

@@ -52,55 +52,22 @@ export class ReportAccountModal {
   }
 }
 
-interface LightboxModel {
+interface LightboxModel {}
-  canSwipeLeft: boolean
-  canSwipeRight: boolean
-  onSwipeLeft: () => void
-  onSwipeRight: () => void
-}
 
 export class ProfileImageLightbox implements LightboxModel {
   name = 'profile-image'
-  canSwipeLeft = false
-  canSwipeRight = false
   constructor(public profileView: ProfileViewModel) {
     makeAutoObservable(this)
   }
-  onSwipeLeft() {}
-  onSwipeRight() {}
-}
-
-export class ImageLightbox implements LightboxModel {
-  name = 'image'
-  canSwipeLeft = true
-  canSwipeRight = true
-  constructor(public uri: string) {
-    makeAutoObservable(this)
-  }
-  onSwipeLeft() {}
-  onSwipeRight() {}
 }
 
 export class ImagesLightbox implements LightboxModel {
   name = 'images'
-  get canSwipeLeft() {
-    return this.index > 0
-  }
-  get canSwipeRight() {
-    return this.index < this.uris.length - 1
-  }
   constructor(public uris: string[], public index: number) {
     makeAutoObservable(this)
   }
-  onSwipeLeft() {
+  setIndex(index: number) {
-    if (this.canSwipeLeft) {
+    this.index = index
-      this.index = this.index - 1
-    }
-  }
-  onSwipeRight() {
-    if (this.canSwipeRight) {
-      this.index = this.index + 1
-    }
   }
 }
 
@@ -187,9 +154,7 @@ export class ShellUiModel {
     this.activeModal = undefined
   }
 
-  openLightbox(
+  openLightbox(lightbox: ProfileImageLightbox | ImagesLightbox) {
-    lightbox: ProfileImageLightbox | ImageLightbox | ImagesLightbox,
-  ) {
     this.isLightboxActive = true
     this.activeLightbox = lightbox
   }

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])

src/view/com/lightbox/Lightbox.tsx

@@ -1,139 +1,42 @@
-import React, {useState} from 'react'
+import React from 'react'
-import {
+import {View} from 'react-native'
-  Animated,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  useWindowDimensions,
-  View,
-} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import ImageView from 'react-native-image-viewing'
-import {SwipeAndZoom, Dir} from '../util/gestures/SwipeAndZoom'
 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 = () => {
     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 = (
+    const opts = store.shell.activeLightbox as models.ProfileImageLightbox
-      <ProfileImageLightbox.Component
+    return (
-        {...(store.shell.activeLightbox as models.ProfileImageLightbox)}
+      <ImageView
-      />
+        images={[{uri: opts.profileView.avatar}]}
-    )
+        imageIndex={0}
-  } else if (store.shell.activeLightbox?.name === 'image') {
+        visible
-    element = (
+        onRequestClose={onClose}
-      <ImageLightbox.Component
-        {...(store.shell.activeLightbox as models.ImageLightbox)}
       />
     )
   } else if (store.shell.activeLightbox?.name === 'images') {
-    element = (
+    const opts = store.shell.activeLightbox as models.ImagesLightbox
-      <ImagesLightbox.Component
+    return (
-        isZooming={isZooming}
+      <ImageView
-        {...(store.shell.activeLightbox as models.ImagesLightbox)}
+        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',
-  },
 })

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
+        <View
-          size={80}
+          style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
-          handle={view.handle}
+          <UserAvatar
-          displayName={view.displayName}
+            size={80}
-          avatar={view.avatar}
+            handle={view.handle}
-        />
+            displayName={view.displayName}
-      </TouchableOpacity>
+            avatar={view.avatar}
+          />
+        </View>
+      </TouchableWithoutFeedback>
     </View>
   )
 })