diff --git a/native/avatars/avatar-hooks.js b/native/avatars/avatar-hooks.js index 5bccde1b9..98d12ccbb 100644 --- a/native/avatars/avatar-hooks.js +++ b/native/avatars/avatar-hooks.js @@ -1,59 +1,121 @@ // @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, UploadMultimediaResult, } 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'; import { useStaffCanSee } from '../utils/staff-utils.js'; function useUploadProcessedMedia(): MediaResult => Promise { const callUploadMultimedia = useServerCall(uploadMultimedia); const uploadProcessedMultimedia: MediaResult => Promise = React.useCallback( processedMedia => { const { uploadURI, filename, mime, dimensions } = processedMedia; return callUploadMultimedia( { uri: uploadURI, name: filename, type: mime, }, dimensions, ); }, [callUploadMultimedia], ); return uploadProcessedMultimedia; } function useProcessSelectedMedia(): MediaLibrarySelection => Promise< MediaMissionFailure | MediaResult, > { const hasWiFi = useSelector(state => state.connectivity.hasWiFi); const staffCanSee = useStaffCanSee(); const processSelectedMedia = React.useCallback( async (selection: MediaLibrarySelection) => { const { resultPromise } = processMedia(selection, { hasWiFi, finalFileHeaderCheck: staffCanSee, }); return await resultPromise; }, [hasWiFi, staffCanSee], ); 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 index 1a539840d..d0f38fa69 100644 --- a/native/avatars/edit-thread-avatar.react.js +++ b/native/avatars/edit-thread-avatar.react.js @@ -1,203 +1,160 @@ // @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 = { +children: React.Node, +onPressEmojiAvatarFlow: () => mixed, +disabled?: boolean, }; function EditThreadAvatar(props: Props): React.Node { const { onPressEmojiAvatarFlow, children, disabled } = props; const { showActionSheetWithOptions } = useActionSheet(); 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 = [ { id: 'emoji', text: 'Use Emoji', onPress: onPressEmojiAvatarFlow, icon: ( ), }, + { + id: 'image', + text: 'Select image', + onPress: selectAndUploadFromGallery, + icon: ( + + ), + }, ]; if (Platform.OS === 'ios') { options.push({ id: 'cancel', text: 'Cancel', isCancel: true, }); } return options; - }, [onPressEmojiAvatarFlow, styles.bottomSheetIcon]); + }, [ + onPressEmojiAvatarFlow, + selectAndUploadFromGallery, + styles.bottomSheetIcon, + ]); const insets = useSafeAreaInsets(); const onPressEditAvatar = React.useCallback(() => { const texts = editAvatarOptions.map(option => option.text); const cancelButtonIndex = editAvatarOptions.findIndex( option => option.isCancel, ); const containerStyle = { paddingBottom: insets.bottom, }; const icons = editAvatarOptions.map(option => option.icon); const onPressAction = (selectedIndex: ?number) => { if ( selectedIndex === null || selectedIndex === undefined || selectedIndex < 0 ) { return; } const option = editAvatarOptions[selectedIndex]; if (option.onPress) { option.onPress(); } }; showActionSheetWithOptions( { options: texts, cancelButtonIndex, containerStyle, icons, }, onPressAction, ); }, [editAvatarOptions, insets.bottom, showActionSheetWithOptions]); const editBadge = React.useMemo(() => { if (disabled) { return null; } return ( ); }, [ colors.floatingButtonLabel, disabled, styles.editAvatarIcon, styles.editAvatarIconContainer, ]); return ( {children} {editBadge} ); } const unboundStyles = { editAvatarIconContainer: { position: 'absolute', bottom: 0, right: 0, borderWidth: 2, borderColor: 'panelForeground', borderRadius: 18, width: 36, height: 36, backgroundColor: 'purpleButton', justifyContent: 'center', }, editAvatarIcon: { textAlign: 'center', }, bottomSheetIcon: { color: '#000000', }, }; export default EditThreadAvatar; diff --git a/native/avatars/edit-user-avatar.react.js b/native/avatars/edit-user-avatar.react.js index e61c2a179..08234f890 100644 --- a/native/avatars/edit-user-avatar.react.js +++ b/native/avatars/edit-user-avatar.react.js @@ -1,203 +1,160 @@ // @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 = { +children: React.Node, +onPressEmojiAvatarFlow: () => mixed, +disabled?: boolean, }; function EditUserAvatar(props: Props): React.Node { const { onPressEmojiAvatarFlow, children, disabled } = props; const { showActionSheetWithOptions } = useActionSheet(); 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 = [ { id: 'emoji', text: 'Use Emoji', onPress: onPressEmojiAvatarFlow, icon: ( ), }, + { + id: 'image', + text: 'Select image', + onPress: selectAndUploadFromGallery, + icon: ( + + ), + }, ]; if (Platform.OS === 'ios') { options.push({ id: 'cancel', text: 'Cancel', isCancel: true, }); } return options; - }, [onPressEmojiAvatarFlow, styles.bottomSheetIcon]); + }, [ + onPressEmojiAvatarFlow, + selectAndUploadFromGallery, + styles.bottomSheetIcon, + ]); const insets = useSafeAreaInsets(); const onPressEditAvatar = React.useCallback(() => { const texts = editAvatarOptions.map(option => option.text); const cancelButtonIndex = editAvatarOptions.findIndex( option => option.isCancel, ); const containerStyle = { paddingBottom: insets.bottom, }; const icons = editAvatarOptions.map(option => option.icon); const onPressAction = (selectedIndex: ?number) => { if ( selectedIndex === null || selectedIndex === undefined || selectedIndex < 0 ) { return; } const option = editAvatarOptions[selectedIndex]; if (option.onPress) { option.onPress(); } }; showActionSheetWithOptions( { options: texts, cancelButtonIndex, containerStyle, icons, }, onPressAction, ); }, [editAvatarOptions, insets.bottom, showActionSheetWithOptions]); const editBadge = React.useMemo(() => { if (disabled) { return null; } return ( ); }, [ colors.floatingButtonLabel, disabled, styles.editAvatarIcon, styles.editAvatarIconContainer, ]); return ( {children} {editBadge} ); } const unboundStyles = { editAvatarIconContainer: { position: 'absolute', bottom: 0, right: 0, borderWidth: 2, borderColor: 'panelForeground', borderRadius: 18, width: 36, height: 36, backgroundColor: 'purpleButton', justifyContent: 'center', }, editAvatarIcon: { textAlign: 'center', }, bottomSheetIcon: { color: '#000000', }, }; export default EditUserAvatar;