[GIFs] Restore default alt text (#3893)

* restore default alt text

* factor out gif alt logic + enable require alt text setting

* rm console.log

* don't prefill input + esc handling

* typo

* Nits

* shorten user alt prefix

* Remove unnecessary condition, rename for clarity

* Add comment

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

src/view/com/composer/Composer.tsx

@@ -18,6 +18,10 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {observer} from 'mobx-react-lite'
 
+import {
+  createGIFDescription,
+  parseAltFromGIFDescription,
+} from '#/lib/gif-alt-text'
 import {LikelyType} from '#/lib/link-meta/link-meta'
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
@@ -211,11 +215,25 @@ export const ComposePost = observer(function ComposePost({
     [gallery, track],
   )
 
+  const isAltTextRequiredAndMissing = useMemo(() => {
+    if (!requireAltTextEnabled) return false
+
+    if (gallery.needsAltText) return true
+    if (extGif) {
+      if (!extLink?.meta?.description) return true
+
+      const parsedAlt = parseAltFromGIFDescription(extLink.meta.description)
+      if (!parsedAlt.isPreferred) return true
+    }
+    return false
+  }, [gallery.needsAltText, extLink, extGif, requireAltTextEnabled])
+
   const onPressPublish = async () => {
     if (isProcessing || graphemeLength > MAX_GRAPHEME_LENGTH) {
       return
     }
-    if (requireAltTextEnabled && gallery.needsAltText) {
+
+    if (isAltTextRequiredAndMissing) {
       return
     }
 
@@ -298,10 +316,8 @@ export const ComposePost = observer(function ComposePost({
   }
 
   const canPost = useMemo(
-    () =>
-      graphemeLength <= MAX_GRAPHEME_LENGTH &&
-      (!requireAltTextEnabled || !gallery.needsAltText),
-    [graphemeLength, requireAltTextEnabled, gallery.needsAltText],
+    () => graphemeLength <= MAX_GRAPHEME_LENGTH && !isAltTextRequiredAndMissing,
+    [graphemeLength, isAltTextRequiredAndMissing],
   )
   const selectTextInputPlaceholder = replyTo
     ? _(msg`Write your reply`)
@@ -328,7 +344,7 @@ export const ComposePost = observer(function ComposePost({
           image: gif.media_formats.preview.url,
           likelyType: LikelyType.HTML,
           title: gif.content_description,
-          description: '',
+          description: createGIFDescription(gif.content_description),
         },
       })
       setExtGif(gif)
@@ -343,11 +359,11 @@ export const ComposePost = observer(function ComposePost({
           ? {
               ...ext,
               meta: {
-                ...ext?.meta,
-                description:
-                  altText.trim().length === 0
-                    ? ''
-                    : `Alt text: ${altText.trim()}`,
+                ...ext.meta,
+                description: createGIFDescription(
+                  ext.meta.title ?? '',
+                  altText,
+                ),
               },
             }
           : ext,
@@ -433,7 +449,7 @@ export const ComposePost = observer(function ComposePost({
             </>
           )}
         </View>
-        {requireAltTextEnabled && gallery.needsAltText && (
+        {isAltTextRequiredAndMissing && (
           <View style={[styles.reminderLine, pal.viewLight]}>
             <View style={styles.errorIcon}>
               <FontAwesomeIcon

src/view/com/composer/GifAltText.tsx

@@ -6,6 +6,7 @@ import {useLingui} from '@lingui/react'
 
 import {ExternalEmbedDraft} from '#/lib/api'
 import {HITSLOP_10, MAX_ALT_TEXT} from '#/lib/constants'
+import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
 import {
   EmbedPlayerParams,
   parseEmbedPlayerFromUrl,
@@ -59,6 +60,7 @@ export function GifAltText({
 
   if (!gif || !params) return null
 
+  const parsedAlt = parseAltFromGIFDescription(link.description)
   return (
     <>
       <TouchableOpacity
@@ -80,7 +82,7 @@ export function GifAltText({
           a.align_center,
           {backgroundColor: 'rgba(0, 0, 0, 0.75)'},
         ]}>
-        {link.description ? (
+        {parsedAlt.isPreferred ? (
           <Check size="xs" fill={t.palette.white} style={a.ml_xs} />
         ) : (
           <Plus size="sm" fill={t.palette.white} />
@@ -102,7 +104,7 @@ export function GifAltText({
           onSubmit={onPressSubmit}
           link={link}
           params={params}
-          initalValue={link.description.replace('Alt text: ', '')}
+          initialValue={parsedAlt.isPreferred ? parsedAlt.alt : ''}
           key={link.uri}
         />
       </Dialog.Outer>
@@ -114,15 +116,16 @@ function AltTextInner({
   onSubmit,
   link,
   params,
-  initalValue,
+  initialValue: initalValue,
 }: {
   onSubmit: (text: string) => void
   link: AppBskyEmbedExternal.ViewExternal
   params: EmbedPlayerParams
-  initalValue: string
+  initialValue: string
 }) {
   const {_} = useLingui()
   const [altText, setAltText] = useState(initalValue)
+  const control = Dialog.useDialogContext()
 
   const onPressSubmit = useCallback(() => {
     onSubmit(altText)
@@ -147,6 +150,11 @@ function AltTextInner({
                 multiline
                 numberOfLines={3}
                 autoFocus
+                onKeyPress={({nativeEvent}) => {
+                  if (nativeEvent.key === 'Escape') {
+                    control.close()
+                  }
+                }}
               />
             </TextField.Root>
           </View>