[APP-539] Rework lightbox and alt-image behaviors (#573)

* Replace the long press on the lightbox with footer controls

* Remove long-press from images in the feed

* Tune the lightbox footer control ui

* Replace the AltImageRead modal with the ability to view all alt text in the lightbox footer

* Tune lightbox footer for iOS

* Add alt text to the web lightbox

* Fix lint

* a11y slight changes

---------

Co-authored-by: renahlee <renahlee@outlook.com>

1 files changed, 14 insertions, 2 deletions

diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
index 3388b54b2..eff9af2d2 100644
--- a/src/view/com/lightbox/Lightbox.web.tsx
+++ b/src/view/com/lightbox/Lightbox.web.tsx
@@ -10,11 +10,13 @@ import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useStores} from 'state/index'
 import * as models from 'state/models/ui/shell'
-import {colors} from 'lib/styles'
+import {colors, s} from 'lib/styles'
 import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
+import {Text} from '../util/text/Text'
 
 interface Img {
   uri: string
+  alt?: string
 }
 
 export const Lightbox = observer(function Lightbox() {
@@ -37,7 +39,7 @@ export const Lightbox = observer(function Lightbox() {
     }
   } else if (activeLightbox instanceof models.ImagesLightbox) {
     const opts = activeLightbox
-    imgs = opts.uris.map(uri => ({uri}))
+    imgs = opts.images
   }
 
   if (!imgs) {
@@ -131,6 +133,11 @@ function LightboxInner({
           )}
         </View>
       </TouchableWithoutFeedback>
+      {imgs[index].alt ? (
+        <View style={styles.footer}>
+          <Text style={s.white}>{imgs[index].alt}</Text>
+        </View>
+      ) : null}
       <View style={styles.closeBtn}>
         <ImageDefaultHeader onRequestClose={onClose} />
       </View>
@@ -183,4 +190,9 @@ const styles = StyleSheet.create({
     right: 30,
     top: '50%',
   },
+  footer: {
+    paddingHorizontal: 32,
+    paddingVertical: 24,
+    backgroundColor: colors.black,
+  },
 })