diff options
Diffstat (limited to 'src/view/com/util')
-rw-r--r-- | src/view/com/util/images/Gallery.tsx | 33 | ||||
-rw-r--r-- | src/view/com/util/post-embeds/index.tsx | 47 |
2 files changed, 18 insertions, 62 deletions
diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index 5b6c3384d..1a29b4530 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -1,8 +1,7 @@ import {AppBskyEmbedImages} from '@atproto/api' -import React, {ComponentProps, FC, useCallback} from 'react' -import {Pressable, StyleSheet, Text, TouchableOpacity, View} from 'react-native' +import React, {ComponentProps, FC} from 'react' +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {Image} from 'expo-image' -import {useStores} from 'state/index' type EventFunction = (index: number) => void @@ -26,22 +25,14 @@ export const GalleryItem: FC<GalleryItemProps> = ({ onLongPress, }) => { const image = images[index] - const store = useStores() - - const onPressAltText = useCallback(() => { - store.shell.openModal({ - name: 'alt-text-image-read', - altText: image.alt, - }) - }, [image.alt, store.shell]) return ( <View> <TouchableOpacity delayPressIn={DELAY_PRESS_IN} - onPress={() => onPress?.(index)} - onPressIn={() => onPressIn?.(index)} - onLongPress={() => onLongPress?.(index)} + onPress={onPress ? () => onPress(index) : undefined} + onPressIn={onPressIn ? () => onPressIn(index) : undefined} + onLongPress={onLongPress ? () => onLongPress(index) : undefined} accessibilityRole="button" accessibilityLabel="View image" accessibilityHint=""> @@ -54,15 +45,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({ accessibilityIgnoresInvertColors /> </TouchableOpacity> - {image.alt === '' ? null : ( - <Pressable - onPress={onPressAltText} - accessibilityRole="button" - accessibilityLabel="View alt text" - accessibilityHint="Opens modal with alt text"> - <Text style={styles.alt}>ALT</Text> - </Pressable> - )} + {image.alt === '' ? null : <Text style={styles.alt}>ALT</Text>} </View> ) } @@ -78,8 +61,8 @@ const styles = StyleSheet.create({ paddingHorizontal: 10, paddingVertical: 3, position: 'absolute', - left: 10, - top: -26, + left: 6, + bottom: 6, width: 46, }, }) diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index 929c85adc..2dda9069e 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -1,11 +1,10 @@ -import React, {useCallback} from 'react' +import React from 'react' import { StyleSheet, StyleProp, View, ViewStyle, Image as RNImage, - Pressable, Text, } from 'react-native' import { @@ -20,7 +19,6 @@ import {ImageLayoutGrid} from '../images/ImageLayoutGrid' import {ImagesLightbox} from 'state/models/ui/shell' import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' -import {saveImageModal} from 'lib/media/manip' import {YoutubeEmbed} from './YoutubeEmbed' import {ExternalLinkEmbed} from './ExternalLinkEmbed' import {getYoutubeVideoId} from 'lib/strings/url-helpers' @@ -44,16 +42,6 @@ export function PostEmbeds({ const pal = usePalette('default') const store = useStores() - const onPressAltText = useCallback( - (alt: string) => { - store.shell.openModal({ - name: 'alt-text-image-read', - altText: alt, - }) - }, - [store.shell], - ) - if ( AppBskyEmbedRecordWithMedia.isView(embed) && AppBskyEmbedRecord.isViewRecord(embed.record.record) && @@ -103,20 +91,17 @@ export function PostEmbeds({ const {images} = embed if (images.length > 0) { - const uris = embed.images.map(img => img.fullsize) + const items = embed.images.map(img => ({uri: img.fullsize, alt: img.alt})) const openLightbox = (index: number) => { - store.shell.openLightbox(new ImagesLightbox(uris, index)) - } - const onLongPress = (index: number) => { - saveImageModal({uri: uris[index]}) + store.shell.openLightbox(new ImagesLightbox(items, index)) } const onPressIn = (index: number) => { - const firstImageToShow = uris[index] + const firstImageToShow = items[index].uri RNImage.prefetch(firstImageToShow) - uris.forEach(uri => { - if (firstImageToShow !== uri) { + items.forEach(item => { + if (firstImageToShow !== item.uri) { // First image already prefeched above - RNImage.prefetch(uri) + RNImage.prefetch(item.uri) } }) } @@ -129,20 +114,9 @@ export function PostEmbeds({ alt={alt} uri={thumb} onPress={() => openLightbox(0)} - onLongPress={() => onLongPress(0)} onPressIn={() => onPressIn(0)} style={styles.singleImage}> - {alt === '' ? null : ( - <Pressable - onPress={() => { - onPressAltText(alt) - }} - accessibilityRole="button" - accessibilityLabel="View alt text" - accessibilityHint="Opens modal with alt text"> - <Text style={styles.alt}>ALT</Text> - </Pressable> - )} + {alt === '' ? null : <Text style={styles.alt}>ALT</Text>} </AutoSizedImage> </View> ) @@ -153,7 +127,6 @@ export function PostEmbeds({ <ImageLayoutGrid images={embed.images} onPress={openLightbox} - onLongPress={onLongPress} onPressIn={onPressIn} style={embed.images.length === 1 ? styles.singleImage : undefined} /> @@ -209,8 +182,8 @@ const styles = StyleSheet.create({ paddingHorizontal: 10, paddingVertical: 3, position: 'absolute', - left: 10, - top: -26, + left: 6, + bottom: 6, width: 46, }, }) |