diff --git a/src/lib/media/alt-text.ts b/src/lib/media/alt-text.ts index 77b0be44..4109f667 100644 --- a/src/lib/media/alt-text.ts +++ b/src/lib/media/alt-text.ts @@ -1,20 +1,12 @@ import {RootStoreModel} from 'state/index' +import {ImageModel} from 'state/models/media/image' export async function openAltTextModal( store: RootStoreModel, - prevAltText: string, -): Promise { - return new Promise((resolve, reject) => { - store.shell.openModal({ - name: 'alt-text-image', - prevAltText, - onAltTextSet: (altText?: string) => { - if (altText) { - resolve(altText) - } else { - reject(new Error('Canceled')) - } - }, - }) + image: ImageModel, +) { + store.shell.openModal({ + name: 'alt-text-image', + image, }) } diff --git a/src/state/models/media/image.ts b/src/state/models/media/image.ts index d989380d..dcd47665 100644 --- a/src/state/models/media/image.ts +++ b/src/state/models/media/image.ts @@ -5,7 +5,6 @@ import {makeAutoObservable, runInAction} from 'mobx' import {openCropper} from 'lib/media/picker' import {POST_IMG_MAX} from 'lib/constants' import {scaleDownDimensions} from 'lib/media/util' -import {openAltTextModal} from 'lib/media/alt-text' // TODO: EXIF embed // Cases to consider: ExternalEmbed @@ -43,16 +42,8 @@ export class ImageModel implements RNImage { this.scaledHeight = height } - async setAltText() { - try { - const altText = await openAltTextModal(this.rootStore, this.altText) - - runInAction(() => { - this.altText = altText - }) - } catch (err) { - this.rootStore.log.error('Failed to set alt text', err) - } + async setAltText(altText: string) { + this.altText = altText } async crop() { diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts index 98e98ef8..5942ec10 100644 --- a/src/state/models/ui/shell.ts +++ b/src/state/models/ui/shell.ts @@ -4,6 +4,7 @@ import {makeAutoObservable} from 'mobx' import {ProfileModel} from '../content/profile' import {isObj, hasProp} from 'lib/type-guards' import {Image as RNImage} from 'react-native-image-crop-picker' +import {ImageModel} from '../media/image' export interface ConfirmModal { name: 'confirm' @@ -43,8 +44,7 @@ export interface CropImageModal { export interface AltTextImageModal { name: 'alt-text-image' - prevAltText: string - onAltTextSet: (altText?: string) => void + image: ImageModel } export interface AltTextImageReadModal { diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx index e2d95b2a..1aa0aef7 100644 --- a/src/view/com/composer/photos/Gallery.tsx +++ b/src/view/com/composer/photos/Gallery.tsx @@ -9,12 +9,15 @@ import {ImageModel} from 'state/models/media/image' import {Image} from 'expo-image' import {Text} from 'view/com/util/text/Text' import {isDesktopWeb} from 'platform/detection' +import {openAltTextModal} from 'lib/media/alt-text' +import {useStores} from 'state/index' interface Props { gallery: GalleryModel } export const Gallery = observer(function ({gallery}: Props) { + const store = useStores() const getImageStyle = useCallback(() => { let side: number @@ -34,9 +37,9 @@ export const Gallery = observer(function ({gallery}: Props) { const handleAddImageAltText = useCallback( (image: ImageModel) => { Keyboard.dismiss() - gallery.setAltText(image) + openAltTextModal(store, image) }, - [gallery], + [store], ) const handleRemovePhoto = useCallback( (image: ImageModel) => { diff --git a/src/view/com/modals/AltImage.tsx b/src/view/com/modals/AltImage.tsx index ba05a7d6..ce0a675a 100644 --- a/src/view/com/modals/AltImage.tsx +++ b/src/view/com/modals/AltImage.tsx @@ -11,24 +11,25 @@ import {TouchableOpacity} from 'react-native-gesture-handler' import LinearGradient from 'react-native-linear-gradient' import {useStores} from 'state/index' import {isDesktopWeb} from 'platform/detection' +import {ImageModel} from 'state/models/media/image' export const snapPoints = ['80%'] interface Props { - prevAltText: string - onAltTextSet: (altText?: string | undefined) => void + image: ImageModel } -export function Component({prevAltText, onAltTextSet}: Props) { +export function Component({image}: Props) { const pal = usePalette('default') const store = useStores() const theme = useTheme() - const [altText, setAltText] = useState(prevAltText) + const [altText, setAltText] = useState(image.altText) const onPressSave = useCallback(() => { - onAltTextSet(altText) + setAltText(altText) + image.setAltText(altText) store.shell.closeModal() - }, [store, altText, onAltTextSet]) + }, [store, image, altText]) const onPressCancel = () => { store.shell.closeModal()