acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

fix reply image preview and covert to atoms

Browse Source
This commit is contained in:
Samuel Newman
2024-09-19 14:36:23 +01:00
parent 30706328c5
commit 0e41cb8f33
1 changed files with 67 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/composer/ComposerReplyTo.tsx
+67 -90
View File
@@ -16,7 +16,7 @@ import {ComposerOptsPostRef} from 'state/shell/composer'
import {QuoteEmbed} from 'view/com/util/post-embeds/QuoteEmbed' import {QuoteEmbed} from 'view/com/util/post-embeds/QuoteEmbed'
import {Text} from 'view/com/util/text/Text' import {Text} from 'view/com/util/text/Text'
import {PreviewableUserAvatar} from 'view/com/util/UserAvatar' import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
import {useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) { export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
const t = useTheme() const t = useTheme()
@@ -122,94 +122,87 @@ function ComposerReplyToImages({
showFull: boolean showFull: boolean
}) { }) {
return ( return (
<View <View style={[styles.imagesContainer, a.mx_xs]}>
style={{ {(images.length === 1 && (
width: 65, <Image
flexDirection: 'column', source={{uri: images[0].thumb}}
alignItems: 'center', style={[a.flex_1]}
}}> cachePolicy="memory-disk"
<View style={styles.imagesContainer}> accessibilityIgnoresInvertColors
{(images.length === 1 && ( />
<Image )) ||
source={{uri: images[0].thumb}} (images.length === 2 && (
style={styles.singleImage} <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
cachePolicy="memory-disk" <Image
accessibilityIgnoresInvertColors source={{uri: images[0].thumb}}
/> style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[1].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
)) || )) ||
(images.length === 2 && ( (images.length === 3 && (
<View style={[styles.imagesInner, styles.imagesRow]}> <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
<Image
source={{uri: images[0].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<View style={[a.flex_1, a.gap_2xs]}>
<Image
source={{uri: images[1].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[2].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
</View>
)) ||
(images.length === 4 && (
<View style={[a.flex_1, a.gap_2xs]}>
<View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
<Image <Image
source={{uri: images[0].thumb}} source={{uri: images[0].thumb}}
style={styles.doubleImageTall} style={[a.flex_1]}
cachePolicy="memory-disk" cachePolicy="memory-disk"
accessibilityIgnoresInvertColors accessibilityIgnoresInvertColors
/> />
<Image <Image
source={{uri: images[1].thumb}} source={{uri: images[1].thumb}}
style={styles.doubleImageTall} style={[a.flex_1]}
cachePolicy="memory-disk" cachePolicy="memory-disk"
accessibilityIgnoresInvertColors accessibilityIgnoresInvertColors
/> />
</View> </View>
)) || <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
(images.length === 3 && (
<View style={[styles.imagesInner, styles.imagesRow]}>
<Image <Image
source={{uri: images[0].thumb}} source={{uri: images[2].thumb}}
style={styles.doubleImageTall} style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[3].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk" cachePolicy="memory-disk"
accessibilityIgnoresInvertColors accessibilityIgnoresInvertColors
/> />
<View style={styles.imagesInner}>
<Image
source={{uri: images[1].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[2].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
</View> </View>
)) || </View>
(images.length === 4 && ( ))}
<View style={styles.imagesInner}>
<View style={[styles.imagesInner, styles.imagesRow]}>
<Image
source={{uri: images[0].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[1].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
<View style={[styles.imagesInner, styles.imagesRow]}>
<Image
source={{uri: images[2].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[3].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
</View>
))}
</View>
</View> </View>
) )
} }
@@ -240,23 +233,7 @@ const styles = StyleSheet.create({
borderRadius: 6, borderRadius: 6,
overflow: 'hidden', overflow: 'hidden',
marginTop: 2, marginTop: 2,
}, height: 64,
imagesInner: { width: 64,
gap: 2,
},
imagesRow: {
flexDirection: 'row',
},
singleImage: {
width: 65,
height: 65,
},
doubleImageTall: {
width: 32.5,
height: 65,
},
doubleImage: {
width: 32.5,
height: 32.5,
}, },
}) })