diff --git a/src/logger/metrics.ts b/src/logger/metrics.ts index cbdb442e95..788d9a5b42 100644 --- a/src/logger/metrics.ts +++ b/src/logger/metrics.ts @@ -203,6 +203,9 @@ export type MetricEvents = { 'composer:gif:open': {} 'composer:gif:select': {} 'postComposer:click': {} + 'composerPrompt:press': {} + 'composerPrompt:camera:press': {} + 'composerPrompt:gallery:press': {} 'composer:threadgate:open': { nudged: boolean diff --git a/src/state/shell/composer/index.tsx b/src/state/shell/composer/index.tsx index 1d0973add1..8449847770 100644 --- a/src/state/shell/composer/index.tsx +++ b/src/state/shell/composer/index.tsx @@ -43,6 +43,7 @@ export interface ComposerOpts { text?: string imageUris?: {uri: string; width: number; height: number; altText?: string}[] videoUri?: {uri: string; width: number; height: number} + openGallery?: boolean } type StateContext = ComposerOpts | undefined diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 7746d93c30..2b2eaed64e 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -172,6 +172,7 @@ export const ComposePost = ({ text: initText, imageUris: initImageUris, videoUri: initVideoUri, + openGallery, cancelRef, }: Props & { cancelRef?: React.RefObject @@ -721,6 +722,7 @@ export const ComposePost = ({ }} currentLanguages={currentLanguages} onSelectLanguage={onSelectLanguage} + openGallery={openGallery} /> ) @@ -1334,6 +1336,7 @@ function ComposerFooter({ onAddPost, currentLanguages, onSelectLanguage, + openGallery, }: { post: PostDraft dispatch: (action: PostAction) => void @@ -1344,6 +1347,7 @@ function ComposerFooter({ onAddPost: () => void currentLanguages: string[] onSelectLanguage?: (language: string) => void + openGallery?: boolean }) { const t = useTheme() const {_} = useLingui() @@ -1463,6 +1467,7 @@ function ComposerFooter({ allowedAssetTypes={selectedAssetsType} selectedAssetsCount={selectedAssetsCount} onSelectAssets={onSelectAssets} + autoOpen={openGallery} /> void + /** + * If true, automatically open the media picker when the component mounts. + */ + autoOpen?: boolean } /** @@ -358,12 +362,14 @@ export function SelectMediaButton({ allowedAssetTypes, selectedAssetsCount, onSelectAssets, + autoOpen, }: SelectMediaButtonProps) { const {_} = useLingui() const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission() const {requestVideoAccessIfNeeded} = useVideoLibraryPermission() const sheetWrapper = useSheetWrapper() const t = useTheme() + const hasAutoOpened = useRef(false) const selectionCountRemaining = MAX_IMAGES - selectedAssetsCount @@ -460,6 +466,13 @@ export function SelectMediaButton({ selectionCountRemaining, ]) + useEffect(() => { + if (autoOpen && !hasAutoOpened.current && !disabled) { + hasAutoOpened.current = true + onPressSelectMedia() + } + }, [autoOpen, disabled, onPressSelectMedia]) + return (