Switch to a better lightbox implementation (close #42)
parent
61682d5846
commit
b449ab842f
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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])
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue