zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Merge branch 'improved-lightbox' into main

Browse source
This commit is contained in:
Paul Frazee 2023-01-17 21:18:25 -06:00
commit df4acbd683
5 changed files with 13 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/view/com/lightbox/Image.tsx
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,
},
})

64
src/view/com/lightbox/Images.tsx
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,
},
})

42
src/view/com/lightbox/ProfileImage.tsx
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',
},
})