zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[GIFs] Restore default alt text (#3893)

Browse source 
* 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>
This commit is contained in:
Samuel Newman 2024-05-07 20:05:40 +01:00 • committed by GitHub
parent 77e6c75a2c
commit 7d72dfb1cb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 84 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/view/com/composer/Composer.tsx
View file

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