Merge branch 'improved-lightbox' into main

zio/stable
Paul Frazee 2023-01-17 21:18:25 -06:00
commit df4acbd683
5 changed files with 13 additions and 144 deletions

View File

@ -99,11 +99,7 @@ export class ShellUiModel {
| ReportAccountModal
| undefined
isLightboxActive = false
activeLightbox:
| ProfileImageLightbox
| ImageLightbox
| ImagesLightbox
| undefined
activeLightbox: ProfileImageLightbox | ImagesLightbox | undefined
isComposerActive = false
composerOpts: ComposerOpts | undefined

View File

@ -1,24 +0,0 @@
import React from 'react'
import {Image, StyleSheet, useWindowDimensions, View} from 'react-native'
export function Component({uri}: {uri: string}) {
const winDim = useWindowDimensions()
const top = winDim.height / 2 - (winDim.width - 40) / 2 - 100
return (
<View style={[styles.container, {top}]}>
<Image style={styles.image} source={{uri}} />
</View>
)
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
left: 0,
},
image: {
resizeMode: 'contain',
width: '100%',
aspectRatio: 1,
},
})

View File

@ -1,64 +0,0 @@
import React from 'react'
import {
ActivityIndicator,
Image,
StyleSheet,
useWindowDimensions,
View,
} from 'react-native'
export function Component({
uris,
index,
isZooming,
}: {
uris: string[]
index: number
isZooming: boolean
}) {
const winDim = useWindowDimensions()
const left = index * winDim.width * -1
const spinnerStyle = React.useMemo(
() => ({
left: winDim.width / 2 - 20,
top: winDim.height / 2 - 50,
}),
[winDim.width, winDim.height],
)
return (
<View style={[styles.container, {left}]}>
<ActivityIndicator style={[styles.loading, spinnerStyle]} size="large" />
{uris.map((uri, i) => (
<Image
key={i}
style={[
styles.image,
{left: i * winDim.width},
isZooming && i !== index ? {opacity: 0} : undefined,
]}
source={{uri}}
/>
))}
</View>
)
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
},
loading: {
position: 'absolute',
},
image: {
position: 'absolute',
top: 200,
left: 0,
resizeMode: 'contain',
width: '100%',
aspectRatio: 1,
},
})

View File

@ -1,42 +0,0 @@
import React from 'react'
import {
ActivityIndicator,
StyleSheet,
useWindowDimensions,
View,
} from 'react-native'
import {UserAvatar} from '../util/UserAvatar'
import {ProfileViewModel} from '../../../state/models/profile-view'
export function Component({profileView}: {profileView: ProfileViewModel}) {
const winDim = useWindowDimensions()
const top = winDim.height / 2 - (winDim.width - 40) / 2 - 100
const spinnerStyle = React.useMemo(
() => ({
left: winDim.width / 2 - 30,
top: winDim.height / 2 - (winDim.width - 40) / 2 - 80,
}),
[winDim.width, winDim.height],
)
return (
<View style={[styles.container, {top}]}>
<ActivityIndicator style={[styles.loading, spinnerStyle]} size="large" />
<UserAvatar
handle={profileView.handle}
displayName={profileView.displayName}
avatar={profileView.avatar}
size={winDim.width - 40}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
left: 20,
},
loading: {
position: 'absolute',
},
})

View File

@ -127,6 +127,7 @@ export const MobileShell: React.FC = observer(() => {
const scrollElRef = useRef<FlatList | undefined>()
const winDim = useWindowDimensions()
const [menuSwipingDirection, setMenuSwipingDirection] = useState(0)
const constZeroInterp = useAnimatedValue(0)
const swipeGestureInterp = useAnimatedValue(0)
const minimalShellInterp = useAnimatedValue(0)
const tabMenuInterp = useAnimatedValue(0)
@ -279,20 +280,20 @@ export const MobileShell: React.FC = observer(() => {
const swipeTransform = store.nav.tab.canGoBack
? {transform: [{translateX: swipeTranslateX}]}
: undefined
let shouldRenderMenu = false
let menuTranslateX
const menuDrawerWidth = winDim.width - 100
if (isMenuActive) {
// menu is active, interpret swipes as closes
menuTranslateX = Animated.multiply(swipeGestureInterp, menuDrawerWidth * -1)
shouldRenderMenu = true
} else if (!store.nav.tab.canGoBack) {
// at back of history, interpret swipes as opens
menuTranslateX = Animated.subtract(
menuDrawerWidth * -1,
Animated.multiply(swipeGestureInterp, menuDrawerWidth),
)
} else {
// not at back of history, leave off screen
menuTranslateX = menuDrawerWidth * -1
shouldRenderMenu = true
}
const menuSwipeTransform = {
transform: [{translateX: menuTranslateX}],
@ -425,12 +426,14 @@ export const MobileShell: React.FC = observer(() => {
<Animated.View style={[styles.screenMask, menuSwipeOpacity]} />
</TouchableWithoutFeedback>
) : undefined}
<Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
<Menu
visible={isMenuActive}
onClose={() => store.shell.setMainMenuOpen(false)}
/>
</Animated.View>
{shouldRenderMenu && (
<Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
<Menu
visible={isMenuActive}
onClose={() => store.shell.setMainMenuOpen(false)}
/>
</Animated.View>
)}
</HorzSwipe>
</View>
{isTabsSelectorActive ? (