diff --git a/src/lib/media/picker.shared.ts b/src/lib/media/picker.shared.ts index 9146cd7787..1a368e3175 100644 --- a/src/lib/media/picker.shared.ts +++ b/src/lib/media/picker.shared.ts @@ -27,8 +27,12 @@ export async function openPicker(opts?: ImagePickerOptions) { Toast.show('Only image files are supported', 'exclamation-circle') return false }) - .map(image => ({ - mime: 'image/jpeg', + .map((image, _, arr) => ({ + // Unsure why mimeType is forced to be image/jpeg - let's keep it that way unless it's a single gif + mime: + arr.length === 1 && image.mimeType === 'image/gif' + ? 'image/gif' + : 'image/jpeg', height: image.height, width: image.width, path: image.uri, diff --git a/src/state/models/media/gallery.ts b/src/state/models/media/gallery.ts index 9c8c13010d..acb25cd373 100644 --- a/src/state/models/media/gallery.ts +++ b/src/state/models/media/gallery.ts @@ -1,8 +1,10 @@ -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 {makeAutoObservable, runInAction} from 'mobx' + +import {isNative} from '#/platform/detection' import {getImageDim} from 'lib/media/manip' +import {openPicker} from 'lib/media/picker' +import {ImageModel} from './image' interface InitialImageUri { uri: string @@ -84,12 +86,24 @@ export class GalleryModel { image.previous() } - async pick() { + async pick( + onPickGif?: (gif: Awaited>[number]) => void, + ) { const images = await openPicker({ selectionLimit: 4 - this.size, allowsMultipleSelection: true, }) + if ( + isNative && + onPickGif && + images.length === 1 && + images[0]?.mime === 'image/gif' + ) { + onPickGif(images[0]) + return + } + return await Promise.all( images.map(image => { this.add(image) diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index a637b59966..42bd02a0cd 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -798,7 +798,11 @@ export const ComposePost = observer(function ComposePost({ ) : ( - + {gate('video_upload') && ( void } -export function SelectPhotoBtn({gallery, disabled}: Props) { +export function SelectPhotoBtn({gallery, disabled, onSelectVideo}: Props) { const {track} = useAnalytics() const {_} = useLingui() const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission() @@ -29,8 +31,16 @@ export function SelectPhotoBtn({gallery, disabled}: Props) { return } - gallery.pick() - }, [track, requestPhotoAccessIfNeeded, gallery]) + gallery.pick(gif => { + onSelectVideo({ + uri: gif.path, + fileSize: gif.size, + height: gif.height, + width: gif.width, + mimeType: 'image/gif', + }) + }) + }, [track, requestPhotoAccessIfNeeded, gallery, onSelectVideo]) return (