Switch to a better lightbox implementation (close #42)

zio/stable
Paul Frazee 2023-01-17 19:34:12 -06:00
parent 61682d5846
commit b449ab842f
5 changed files with 46 additions and 167 deletions

View File

@ -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",

View File

@ -52,55 +52,22 @@ export class ReportAccountModal {
}
}
interface LightboxModel {
canSwipeLeft: boolean
canSwipeRight: boolean
onSwipeLeft: () => void
onSwipeRight: () => void
}
interface LightboxModel {}
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() {
if (this.canSwipeLeft) {
this.index = this.index - 1
}
}
onSwipeRight() {
if (this.canSwipeRight) {
this.index = this.index + 1
}
setIndex(index: number) {
this.index = index
}
}
@ -187,9 +154,7 @@ export class ShellUiModel {
this.activeModal = undefined
}
openLightbox(
lightbox: ProfileImageLightbox | ImageLightbox | ImagesLightbox,
) {
openLightbox(lightbox: ProfileImageLightbox | ImagesLightbox) {
this.isLightboxActive = true
this.activeLightbox = lightbox
}

View File

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

View File

@ -1,139 +1,42 @@
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 = () => {
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',
},
})

View File

@ -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>
)
})