diff --git a/native/avatars/avatar-hooks.js b/native/avatars/avatar-hooks.js --- a/native/avatars/avatar-hooks.js +++ b/native/avatars/avatar-hooks.js @@ -1,8 +1,13 @@ // @flow +import * as ImagePicker from 'expo-image-picker'; import * as React from 'react'; import { uploadMultimedia } from 'lib/actions/upload-actions.js'; +import { + extensionFromFilename, + filenameFromPathOrURI, +} from 'lib/media/file-utils.js'; import type { MediaLibrarySelection, MediaMissionFailure, @@ -10,6 +15,7 @@ } from 'lib/types/media-types.js'; import { useServerCall } from 'lib/utils/action-utils.js'; +import { getCompatibleMediaURI } from '../media/identifier-utils.js'; import type { MediaResult } from '../media/media-utils.js'; import { processMedia } from '../media/media-utils.js'; import { useSelector } from '../redux/redux-utils.js'; @@ -56,4 +62,60 @@ return processSelectedMedia; } -export { useUploadProcessedMedia, useProcessSelectedMedia }; +function useSelectAndUploadFromGallery(): () => Promise { + const processSelectedMedia = useProcessSelectedMedia(); + const uploadProcessedMedia = useUploadProcessedMedia(); + + const selectAndUploadFromGallery = React.useCallback(async () => { + try { + const { assets, canceled } = await ImagePicker.launchImageLibraryAsync({ + mediaTypes: ImagePicker.MediaTypeOptions.Images, + allowsEditing: true, + allowsMultipleSelection: false, + quality: 1, + }); + + if (canceled || assets.length === 0) { + return; + } + + const asset = assets.pop(); + const { width, height, assetId: mediaNativeID } = asset; + const assetFilename = + asset.fileName || filenameFromPathOrURI(asset.uri) || ''; + const uri = getCompatibleMediaURI( + asset.uri, + extensionFromFilename(assetFilename), + ); + + const currentTime = Date.now(); + const selection: MediaLibrarySelection = { + step: 'photo_library', + dimensions: { height, width }, + uri, + filename: assetFilename, + mediaNativeID, + selectTime: currentTime, + sendTime: currentTime, + retries: 0, + }; + + const processedMedia = await processSelectedMedia(selection); + if (!processedMedia.success) { + return; + } + await uploadProcessedMedia(processedMedia); + } catch (e) { + console.log(e); + return; + } + }, [processSelectedMedia, uploadProcessedMedia]); + + return selectAndUploadFromGallery; +} + +export { + useUploadProcessedMedia, + useProcessSelectedMedia, + useSelectAndUploadFromGallery, +}; diff --git a/native/avatars/edit-thread-avatar.react.js b/native/avatars/edit-thread-avatar.react.js --- a/native/avatars/edit-thread-avatar.react.js +++ b/native/avatars/edit-thread-avatar.react.js @@ -1,24 +1,13 @@ // @flow import { useActionSheet } from '@expo/react-native-action-sheet'; -import * as ImagePicker from 'expo-image-picker'; import * as React from 'react'; import { View, TouchableOpacity, Platform } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { - extensionFromFilename, - filenameFromPathOrURI, -} from 'lib/media/file-utils.js'; -import type { MediaLibrarySelection } from 'lib/types/media-types.js'; - -import { - useProcessSelectedMedia, - useUploadProcessedMedia, -} from './avatar-hooks.js'; +import { useSelectAndUploadFromGallery } from './avatar-hooks.js'; import CommIcon from '../components/comm-icon.react.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; -import { getCompatibleMediaURI } from '../media/identifier-utils.js'; import { useColors, useStyles } from '../themes/colors.js'; type Props = { @@ -33,55 +22,7 @@ const colors = useColors(); const styles = useStyles(unboundStyles); - const uploadProcessedMedia = useUploadProcessedMedia(); - - const processSelectedMedia = useProcessSelectedMedia(); - - // eslint-disable-next-line no-unused-vars - const openPhotoGallery = React.useCallback(async () => { - try { - const { assets, canceled } = await ImagePicker.launchImageLibraryAsync({ - mediaTypes: ImagePicker.MediaTypeOptions.Images, - allowsEditing: true, - allowsMultipleSelection: false, - quality: 1, - }); - - if (canceled || assets.length === 0) { - return; - } - - const asset = assets.pop(); - const { width, height, assetId: mediaNativeID } = asset; - const assetFilename = - asset.fileName || filenameFromPathOrURI(asset.uri) || ''; - const uri = getCompatibleMediaURI( - asset.uri, - extensionFromFilename(assetFilename), - ); - - const currentTime = Date.now(); - const selection: MediaLibrarySelection = { - step: 'photo_library', - dimensions: { height, width }, - uri, - filename: assetFilename, - mediaNativeID, - selectTime: currentTime, - sendTime: currentTime, - retries: 0, - }; - - const processedMedia = await processSelectedMedia(selection); - if (!processedMedia.success) { - return; - } - await uploadProcessedMedia(processedMedia); - } catch (e) { - console.log(e); - return; - } - }, [processSelectedMedia, uploadProcessedMedia]); + const selectAndUploadFromGallery = useSelectAndUploadFromGallery(); const editAvatarOptions = React.useMemo(() => { const options = [ @@ -97,6 +38,18 @@ /> ), }, + { + id: 'image', + text: 'Select image', + onPress: selectAndUploadFromGallery, + icon: ( + + ), + }, ]; if (Platform.OS === 'ios') { @@ -107,7 +60,11 @@ }); } return options; - }, [onPressEmojiAvatarFlow, styles.bottomSheetIcon]); + }, [ + onPressEmojiAvatarFlow, + selectAndUploadFromGallery, + styles.bottomSheetIcon, + ]); const insets = useSafeAreaInsets(); diff --git a/native/avatars/edit-user-avatar.react.js b/native/avatars/edit-user-avatar.react.js --- a/native/avatars/edit-user-avatar.react.js +++ b/native/avatars/edit-user-avatar.react.js @@ -1,24 +1,13 @@ // @flow import { useActionSheet } from '@expo/react-native-action-sheet'; -import * as ImagePicker from 'expo-image-picker'; import * as React from 'react'; import { View, TouchableOpacity, Platform } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { - extensionFromFilename, - filenameFromPathOrURI, -} from 'lib/media/file-utils.js'; -import type { MediaLibrarySelection } from 'lib/types/media-types.js'; - -import { - useProcessSelectedMedia, - useUploadProcessedMedia, -} from './avatar-hooks.js'; +import { useSelectAndUploadFromGallery } from './avatar-hooks.js'; import CommIcon from '../components/comm-icon.react.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; -import { getCompatibleMediaURI } from '../media/identifier-utils.js'; import { useColors, useStyles } from '../themes/colors.js'; type Props = { @@ -33,55 +22,7 @@ const colors = useColors(); const styles = useStyles(unboundStyles); - const uploadProcessedMedia = useUploadProcessedMedia(); - - const processSelectedMedia = useProcessSelectedMedia(); - - // eslint-disable-next-line no-unused-vars - const openPhotoGallery = React.useCallback(async () => { - try { - const { assets, canceled } = await ImagePicker.launchImageLibraryAsync({ - mediaTypes: ImagePicker.MediaTypeOptions.Images, - allowsEditing: true, - allowsMultipleSelection: false, - quality: 1, - }); - - if (canceled || assets.length === 0) { - return; - } - - const asset = assets.pop(); - const { width, height, assetId: mediaNativeID } = asset; - const assetFilename = - asset.fileName || filenameFromPathOrURI(asset.uri) || ''; - const uri = getCompatibleMediaURI( - asset.uri, - extensionFromFilename(assetFilename), - ); - - const currentTime = Date.now(); - const selection: MediaLibrarySelection = { - step: 'photo_library', - dimensions: { height, width }, - uri, - filename: assetFilename, - mediaNativeID, - selectTime: currentTime, - sendTime: currentTime, - retries: 0, - }; - - const processedMedia = await processSelectedMedia(selection); - if (!processedMedia.success) { - return; - } - await uploadProcessedMedia(processedMedia); - } catch (e) { - console.log(e); - return; - } - }, [processSelectedMedia, uploadProcessedMedia]); + const selectAndUploadFromGallery = useSelectAndUploadFromGallery(); const editAvatarOptions = React.useMemo(() => { const options = [ @@ -97,6 +38,18 @@ /> ), }, + { + id: 'image', + text: 'Select image', + onPress: selectAndUploadFromGallery, + icon: ( + + ), + }, ]; if (Platform.OS === 'ios') { @@ -107,7 +60,11 @@ }); } return options; - }, [onPressEmojiAvatarFlow, styles.bottomSheetIcon]); + }, [ + onPressEmojiAvatarFlow, + selectAndUploadFromGallery, + styles.bottomSheetIcon, + ]); const insets = useSafeAreaInsets();