[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>

src/view/com/modals/AltImageRead.tsx

@@ -1,80 +0,0 @@
-import React, {useCallback} from 'react'
-import {StyleSheet, View} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {gradients, s} from 'lib/styles'
-import {Text} from '../util/text/Text'
-import {TouchableOpacity} from 'react-native-gesture-handler'
-import LinearGradient from 'react-native-linear-gradient'
-import {useStores} from 'state/index'
-import {isDesktopWeb} from 'platform/detection'
-
-export const snapPoints = ['70%']
-
-interface Props {
-  altText: string
-}
-
-export function Component({altText}: Props) {
-  const pal = usePalette('default')
-  const store = useStores()
-
-  const onPress = useCallback(() => {
-    store.shell.closeModal()
-  }, [store])
-
-  return (
-    <View
-      testID="altTextImageModal"
-      style={[pal.view, styles.container, s.flex1]}>
-      <Text style={[styles.title, pal.text]}>Image description</Text>
-      <View style={[styles.text, pal.viewLight]}>
-        <Text style={pal.text}>{altText}</Text>
-      </View>
-      <TouchableOpacity
-        testID="altTextImageSaveBtn"
-        onPress={onPress}
-        accessibilityRole="button"
-        accessibilityLabel="Done"
-        accessibilityHint="Closes alt text modal">
-        <LinearGradient
-          colors={[gradients.blueLight.start, gradients.blueLight.end]}
-          start={{x: 0, y: 0}}
-          end={{x: 1, y: 1}}
-          style={[styles.button]}>
-          <Text type="button-lg" style={[s.white, s.bold]}>
-            Done
-          </Text>
-        </LinearGradient>
-      </TouchableOpacity>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: 18,
-    paddingVertical: isDesktopWeb ? 0 : 18,
-    paddingHorizontal: isDesktopWeb ? 0 : 12,
-    height: '100%',
-    width: '100%',
-  },
-  title: {
-    textAlign: 'center',
-    fontWeight: 'bold',
-    fontSize: 24,
-  },
-  text: {
-    borderRadius: 5,
-    marginVertical: 18,
-    paddingHorizontal: 18,
-    paddingVertical: 16,
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: 32,
-    padding: 10,
-  },
-})

src/view/com/modals/Modal.tsx

@@ -13,7 +13,6 @@ import * as ServerInputModal from './ServerInput'
 import * as ReportPostModal from './ReportPost'
 import * as RepostModal from './Repost'
 import * as AltImageModal from './AltImage'
-import * as AltImageReadModal from './AltImageRead'
 import * as ReportAccountModal from './ReportAccount'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as ChangeHandleModal from './ChangeHandle'
@@ -76,9 +75,6 @@ export const ModalsContainer = observer(function ModalsContainer() {
   } else if (activeModal?.name === 'alt-text-image') {
     snapPoints = AltImageModal.snapPoints
     element = <AltImageModal.Component {...activeModal} />
-  } else if (activeModal?.name === 'alt-text-image-read') {
-    snapPoints = AltImageReadModal.snapPoints
-    element = <AltImageReadModal.Component {...activeModal} />
   } else if (activeModal?.name === 'change-handle') {
     snapPoints = ChangeHandleModal.snapPoints
     element = <ChangeHandleModal.Component {...activeModal} />

src/view/com/modals/Modal.web.tsx

@@ -15,7 +15,6 @@ import * as DeleteAccountModal from './DeleteAccount'
 import * as RepostModal from './Repost'
 import * as CropImageModal from './crop-image/CropImage.web'
 import * as AltTextImageModal from './AltImage'
-import * as AltTextImageReadModal from './AltImageRead'
 import * as ChangeHandleModal from './ChangeHandle'
 import * as WaitlistModal from './Waitlist'
 import * as InviteCodesModal from './InviteCodes'
@@ -89,8 +88,6 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <ContentLanguagesSettingsModal.Component />
   } else if (modal.name === 'alt-text-image') {
     element = <AltTextImageModal.Component {...modal} />
-  } else if (modal.name === 'alt-text-image-read') {
-    element = <AltTextImageReadModal.Component {...modal} />
   } else {
     return null
   }