Pre-fill alt text with 10-million card post (#5377)

src/components/dialogs/nuxs/TenMillion/index.tsx

@@ -241,6 +241,11 @@ export function TenMillionInner({
                 uri,
                 width: WIDTH,
                 height: HEIGHT,
+                altText: _(
+                  msg`A virtual card celebrating 10 million users on Bluesky for user #${i18n.number(
+                    userNumber,
+                  )}`,
+                ),
               },
             ],
           })

src/state/models/media/gallery.ts

@@ -1,19 +1,22 @@
 import {makeAutoObservable, runInAction} from 'mobx'
-import {ImageModel} from './image'
+
-import {Image as RNImage} from 'react-native-image-crop-picker'
-import {openPicker} from 'lib/media/picker'
 import {getImageDim} from 'lib/media/manip'
+import {openPicker} from 'lib/media/picker'
+import {ImageInitOptions, ImageModel} from './image'
 
 interface InitialImageUri {
   uri: string
   width: number
   height: number
+  altText?: string
 }
 
 export class GalleryModel {
   images: ImageModel[] = []
 
-  constructor(uris?: {uri: string; width: number; height: number}[]) {
+  constructor(
+    uris?: {uri: string; width: number; height: number; altText?: string}[],
+  ) {
     makeAutoObservable(this)
 
     if (uris) {
@@ -33,7 +36,7 @@ export class GalleryModel {
     return this.images.some(image => image.altText.trim() === '')
   }
 
-  *add(image_: Omit<RNImage, 'size'>) {
+  *add(image_: ImageInitOptions) {
     if (this.size >= 4) {
       return
     }
@@ -100,10 +103,10 @@ export class GalleryModel {
   async addFromUris(uris: InitialImageUri[]) {
     for (const uriObj of uris) {
       this.add({
-        mime: 'image/jpeg',
         height: uriObj.height,
         width: uriObj.width,
         path: uriObj.uri,
+        altText: uriObj.altText,
       })
     }
   }

src/state/models/media/image.ts

@@ -1,14 +1,15 @@
 import {Image as RNImage} from 'react-native-image-crop-picker'
-import {makeAutoObservable, runInAction} from 'mobx'
-import {POST_IMG_MAX} from 'lib/constants'
 import * as ImageManipulator from 'expo-image-manipulator'
-import {getDataUriSize} from 'lib/media/util'
-import {openCropper} from 'lib/media/picker'
 import {ActionCrop, FlipType, SaveFormat} from 'expo-image-manipulator'
+import {makeAutoObservable, runInAction} from 'mobx'
 import {Position} from 'react-avatar-editor'
-import {Dimensions} from 'lib/media/types'
+
-import {isIOS} from 'platform/detection'
 import {logger} from '#/logger'
+import {POST_IMG_MAX} from 'lib/constants'
+import {openCropper} from 'lib/media/picker'
+import {Dimensions} from 'lib/media/types'
+import {getDataUriSize} from 'lib/media/util'
+import {isIOS} from 'platform/detection'
 
 export interface ImageManipulationAttributes {
   aspectRatio?: '4:3' | '1:1' | '3:4' | 'None'
@@ -19,6 +20,13 @@ export interface ImageManipulationAttributes {
   flipVertical?: boolean
 }
 
+export interface ImageInitOptions {
+  path: string
+  width: number
+  height: number
+  altText?: string
+}
+
 const MAX_IMAGE_SIZE_IN_BYTES = 976560
 
 export class ImageModel implements Omit<RNImage, 'size'> {
@@ -41,12 +49,15 @@ export class ImageModel implements Omit<RNImage, 'size'> {
   }
   prevAttributes: ImageManipulationAttributes = {}
 
-  constructor(image: Omit<RNImage, 'size'>) {
+  constructor(image: ImageInitOptions) {
     makeAutoObservable(this)
 
     this.path = image.path
     this.width = image.width
     this.height = image.height
+    if (image.altText !== undefined) {
+      this.setAltText(image.altText)
+    }
   }
 
   setRatio(aspectRatio: ImageManipulationAttributes['aspectRatio']) {

src/state/shell/composer/index.tsx

@@ -36,7 +36,7 @@ export interface ComposerOpts {
   mention?: string // handle of user to mention
   openEmojiPicker?: (pos: DOMRect | undefined) => void
   text?: string
-  imageUris?: {uri: string; width: number; height: number}[]
+  imageUris?: {uri: string; width: number; height: number; altText?: string}[]
 }
 
 type StateContext = ComposerOpts | undefined