Image alt text view modal (#551)

* Image alt text view modal

* Minor style tweaks

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/com/util/images/Gallery.tsx

@@ -0,0 +1,76 @@
+import {AppBskyEmbedImages} from '@atproto/api'
+import React, {ComponentProps, FC, useCallback} from 'react'
+import {Pressable, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {Image} from 'expo-image'
+import {useStores} from 'state/index'
+
+type EventFunction = (index: number) => void
+
+interface GalleryItemProps {
+  images: AppBskyEmbedImages.ViewImage[]
+  index: number
+  onPress?: EventFunction
+  onLongPress?: EventFunction
+  onPressIn?: EventFunction
+  imageStyle: ComponentProps<typeof Image>['style']
+}
+
+const DELAY_PRESS_IN = 500
+
+export const GalleryItem: FC<GalleryItemProps> = ({
+  images,
+  index,
+  imageStyle,
+  onPress,
+  onPressIn,
+  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)}>
+        <Image
+          source={{uri: image.thumb}}
+          style={imageStyle}
+          accessible={true}
+          accessibilityLabel={image.alt}
+        />
+      </TouchableOpacity>
+      {image.alt === '' ? null : (
+        <Pressable onPress={onPressAltText}>
+          <Text style={styles.alt}>ALT</Text>
+        </Pressable>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  alt: {
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    borderRadius: 6,
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold',
+    letterSpacing: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 3,
+    position: 'absolute',
+    left: 10,
+    top: -26,
+    width: 46,
+  },
+})

src/view/com/util/images/ImageLayoutGrid.tsx

@@ -3,15 +3,13 @@ import {
   LayoutChangeEvent,
   StyleProp,
   StyleSheet,
-  TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native'
-import {Image, ImageStyle} from 'expo-image'
+import {ImageStyle} from 'expo-image'
 import {Dimensions} from 'lib/media/types'
 import {AppBskyEmbedImages} from '@atproto/api'
-
-export const DELAY_PRESS_IN = 500
+import {GalleryItem} from './Gallery'
 
 interface ImageLayoutGridProps {
   images: AppBskyEmbedImages.ViewImage[]
@@ -21,32 +19,21 @@ interface ImageLayoutGridProps {
   style?: StyleProp<ViewStyle>
 }
 
-export function ImageLayoutGrid({
-  images,
-  onPress,
-  onLongPress,
-  onPressIn,
-  style,
-}: ImageLayoutGridProps) {
+export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
   const [containerInfo, setContainerInfo] = useState<Dimensions | undefined>()
 
   const onLayout = (evt: LayoutChangeEvent) => {
+    const {width, height} = evt.nativeEvent.layout
     setContainerInfo({
-      width: evt.nativeEvent.layout.width,
-      height: evt.nativeEvent.layout.height,
+      width,
+      height,
     })
   }
 
   return (
     <View style={style} onLayout={onLayout}>
       {containerInfo ? (
-        <ImageLayoutGridInner
-          images={images}
-          onPress={onPress}
-          onPressIn={onPressIn}
-          onLongPress={onLongPress}
-          containerInfo={containerInfo}
-        />
+        <ImageLayoutGridInner {...props} containerInfo={containerInfo} />
       ) : undefined}
     </View>
   )
@@ -61,13 +48,10 @@ interface ImageLayoutGridInnerProps {
 }
 
 function ImageLayoutGridInner({
-  images,
-  onPress,
-  onLongPress,
-  onPressIn,
   containerInfo,
+  ...props
 }: ImageLayoutGridInnerProps) {
-  const count = images.length
+  const count = props.images.length
   const size1 = useMemo<ImageStyle>(() => {
     if (count === 3) {
       const size = (containerInfo.width - 10) / 3
@@ -87,149 +71,43 @@ function ImageLayoutGridInner({
     }
   }, [count, containerInfo])
 
-  if (count === 2) {
-    return (
-      <View style={styles.flexRow}>
-        <TouchableOpacity
-          delayPressIn={DELAY_PRESS_IN}
-          onPress={() => onPress?.(0)}
-          onPressIn={() => onPressIn?.(0)}
-          onLongPress={() => onLongPress?.(0)}>
-          <Image
-            source={{uri: images[0].thumb}}
-            style={size1}
-            accessible={true}
-            accessibilityLabel={images[0].alt}
-          />
-        </TouchableOpacity>
-        <View style={styles.wSpace} />
-        <TouchableOpacity
-          delayPressIn={DELAY_PRESS_IN}
-          onPress={() => onPress?.(1)}
-          onPressIn={() => onPressIn?.(1)}
-          onLongPress={() => onLongPress?.(1)}>
-          <Image
-            source={{uri: images[1].thumb}}
-            style={size1}
-            accessible={true}
-            accessibilityLabel={images[1].alt}
-          />
-        </TouchableOpacity>
-      </View>
-    )
-  }
-  if (count === 3) {
-    return (
-      <View style={styles.flexRow}>
-        <TouchableOpacity
-          delayPressIn={DELAY_PRESS_IN}
-          onPress={() => onPress?.(0)}
-          onPressIn={() => onPressIn?.(0)}
-          onLongPress={() => onLongPress?.(0)}>
-          <Image
-            source={{uri: images[0].thumb}}
-            style={size2}
-            accessible={true}
-            accessibilityLabel={images[0].alt}
-          />
-        </TouchableOpacity>
-        <View style={styles.wSpace} />
-        <View>
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(1)}
-            onPressIn={() => onPressIn?.(1)}
-            onLongPress={() => onLongPress?.(1)}>
-            <Image
-              source={{uri: images[1].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[1].alt}
-            />
-          </TouchableOpacity>
-          <View style={styles.hSpace} />
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(2)}
-            onPressIn={() => onPressIn?.(2)}
-            onLongPress={() => onLongPress?.(2)}>
-            <Image
-              source={{uri: images[2].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[2].alt}
-            />
-          </TouchableOpacity>
+  switch (count) {
+    case 2:
+      return (
+        <View style={styles.flexRow}>
+          <GalleryItem index={0} {...props} imageStyle={size1} />
+          <GalleryItem index={1} {...props} imageStyle={size1} />
         </View>
-      </View>
-    )
-  }
-  if (count === 4) {
-    return (
-      <View style={styles.flexRow}>
-        <View>
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(0)}
-            onPressIn={() => onPressIn?.(0)}
-            onLongPress={() => onLongPress?.(0)}>
-            <Image
-              source={{uri: images[0].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[0].alt}
-            />
-          </TouchableOpacity>
-          <View style={styles.hSpace} />
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(2)}
-            onPressIn={() => onPressIn?.(2)}
-            onLongPress={() => onLongPress?.(2)}>
-            <Image
-              source={{uri: images[2].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[2].alt}
-            />
-          </TouchableOpacity>
+      )
+    case 3:
+      return (
+        <View style={styles.flexRow}>
+          <GalleryItem index={0} {...props} imageStyle={size2} />
+          <View style={styles.flexColumn}>
+            <GalleryItem index={1} {...props} imageStyle={size1} />
+            <GalleryItem index={2} {...props} imageStyle={size1} />
+          </View>
         </View>
-        <View style={styles.wSpace} />
-        <View>
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(1)}
-            onPressIn={() => onPressIn?.(1)}
-            onLongPress={() => onLongPress?.(1)}>
-            <Image
-              source={{uri: images[1].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[1].alt}
-            />
-          </TouchableOpacity>
-          <View style={styles.hSpace} />
-          <TouchableOpacity
-            delayPressIn={DELAY_PRESS_IN}
-            onPress={() => onPress?.(3)}
-            onPressIn={() => onPressIn?.(3)}
-            onLongPress={() => onLongPress?.(3)}>
-            <Image
-              source={{uri: images[3].thumb}}
-              style={size1}
-              accessible={true}
-              accessibilityLabel={images[3].alt}
-            />
-          </TouchableOpacity>
+      )
+    case 4:
+      return (
+        <View style={styles.flexRow}>
+          <View style={styles.flexColumn}>
+            <GalleryItem index={0} {...props} imageStyle={size1} />
+            <GalleryItem index={2} {...props} imageStyle={size1} />
+          </View>
+          <View style={styles.flexColumn}>
+            <GalleryItem index={1} {...props} imageStyle={size1} />
+            <GalleryItem index={3} {...props} imageStyle={size1} />
+          </View>
         </View>
-      </View>
-    )
+      )
+    default:
+      return null
   }
-  return <View />
 }
 
 const styles = StyleSheet.create({
-  flexRow: {flexDirection: 'row'},
-  wSpace: {width: 5},
-  hSpace: {height: 5},
+  flexRow: {flexDirection: 'row', gap: 5},
+  flexColumn: {flexDirection: 'column', gap: 5},
 })

src/view/com/util/post-embeds/index.tsx

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, {useCallback} from 'react'
 import {
   StyleSheet,
   StyleProp,
   View,
   ViewStyle,
   Image as RNImage,
+  Pressable,
+  Text,
 } from 'react-native'
 import {
   AppBskyEmbedImages,
@@ -14,7 +16,6 @@ import {
   AppBskyFeedPost,
 } from '@atproto/api'
 import {Link} from '../Link'
-import {AutoSizedImage} from '../images/AutoSizedImage'
 import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
 import {ImagesLightbox} from 'state/models/ui/shell'
 import {useStores} from 'state/index'
@@ -24,6 +25,7 @@ import {YoutubeEmbed} from './YoutubeEmbed'
 import {ExternalLinkEmbed} from './ExternalLinkEmbed'
 import {getYoutubeVideoId} from 'lib/strings/url-helpers'
 import QuoteEmbed from './QuoteEmbed'
+import {AutoSizedImage} from '../images/AutoSizedImage'
 
 type Embed =
   | AppBskyEmbedRecord.View
@@ -42,6 +44,16 @@ 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) &&
@@ -88,7 +100,9 @@ export function PostEmbeds({
   }
 
   if (AppBskyEmbedImages.isView(embed)) {
-    if (embed.images.length > 0) {
+    const {images} = embed
+
+    if (images.length > 0) {
       const uris = embed.images.map(img => img.fullsize)
       const openLightbox = (index: number) => {
         store.shell.openLightbox(new ImagesLightbox(uris, index))
@@ -107,32 +121,42 @@ export function PostEmbeds({
         })
       }
 
-      switch (embed.images.length) {
-        case 1:
-          return (
-            <View style={[styles.imagesContainer, style]}>
-              <AutoSizedImage
-                alt={embed.images[0].alt}
-                uri={embed.images[0].thumb}
-                onPress={() => openLightbox(0)}
-                onLongPress={() => onLongPress(0)}
-                onPressIn={() => onPressIn(0)}
-                style={styles.singleImage}
-              />
-            </View>
-          )
-        default:
-          return (
-            <View style={[styles.imagesContainer, style]}>
-              <ImageLayoutGrid
-                images={embed.images}
-                onPress={openLightbox}
-                onLongPress={onLongPress}
-                onPressIn={onPressIn}
-              />
-            </View>
-          )
+      if (images.length === 1) {
+        const {alt, thumb} = images[0]
+        return (
+          <View style={[styles.imagesContainer, style]}>
+            <AutoSizedImage
+              alt={alt}
+              uri={thumb}
+              onPress={() => openLightbox(0)}
+              onLongPress={() => onLongPress(0)}
+              onPressIn={() => onPressIn(0)}
+              style={styles.singleImage}>
+              {alt === '' ? null : (
+                <Pressable
+                  onPress={() => {
+                    onPressAltText(alt)
+                  }}>
+                  <Text style={styles.alt}>ALT</Text>
+                </Pressable>
+              )}
+            </AutoSizedImage>
+          </View>
+        )
       }
+
+      return (
+        <View style={[styles.imagesContainer, style]}>
+          <ImageLayoutGrid
+            images={embed.images}
+            onPress={openLightbox}
+            onLongPress={onLongPress}
+            onPressIn={onPressIn}
+            style={embed.images.length === 1 ? styles.singleImage : undefined}
+          />
+        </View>
+      )
+      // }
     }
   }
 
@@ -172,4 +196,18 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     marginTop: 4,
   },
+  alt: {
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    borderRadius: 6,
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold',
+    letterSpacing: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 3,
+    position: 'absolute',
+    left: 10,
+    top: -26,
+    width: 46,
+  },
 })