From b7a68d61ff40414e495907aa75ee756a23ebbc51 Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Date: Thu, 15 Sep 2022 14:31:14 -0300 Subject: [PATCH] remove react-native-image-crop-picker --- .../MessageBox/forceJpgExtension.test.ts | 107 ------------------ .../MessageBox/forceJpgExtension.ts | 13 --- app/containers/MessageBox/index.tsx | 4 +- app/lib/methods/mediaPicker.ts | 2 - app/views/ProfileView/index.tsx | 17 +-- app/views/RoomInfoEditView/index.tsx | 17 +-- ios/Podfile.lock | 16 --- package.json | 1 - yarn.lock | 4 - 9 files changed, 12 insertions(+), 169 deletions(-) delete mode 100644 app/containers/MessageBox/forceJpgExtension.test.ts delete mode 100644 app/containers/MessageBox/forceJpgExtension.ts diff --git a/app/containers/MessageBox/forceJpgExtension.test.ts b/app/containers/MessageBox/forceJpgExtension.test.ts deleted file mode 100644 index b1031c21c..000000000 --- a/app/containers/MessageBox/forceJpgExtension.test.ts +++ /dev/null @@ -1,107 +0,0 @@ -import { Image } from 'react-native-image-crop-picker'; - -import { forceJpgExtension } from './forceJpgExtension'; - -const attachment: Image = { - exif: null, - filename: 'IMG_0040.PNG', - path: 'tmp/temp', - height: 534, - width: 223, - data: null, - modificationDate: '1643984790', - localIdentifier: 'device/L0/001', - size: 16623, - sourceURL: '', - mime: 'image/jpeg', - cropRect: null, - creationDate: '1641490665' -}; - -describe('forceJpgExtension for iOS', () => { - jest.mock('react-native', () => ({ Platform: { OS: 'ios' } })); - describe('with mime as image/jpeg', () => { - test('filename.jpg should be filename.jpg', () => { - const newAttachment = attachment; - newAttachment.filename = 'filename.jpg'; - const file = forceJpgExtension(newAttachment); - - expect(file.filename).toBe('filename.jpg'); - }); - test('filename.png should be filename.jpg', () => { - const newAttachment = attachment; - newAttachment.filename = 'filename.png'; - const file = forceJpgExtension(newAttachment); - - expect(file.filename).toBe('filename.jpg'); - }); - test('filename.jpeg should be filename.jpg', () => { - const newAttachment = attachment; - newAttachment.filename = 'filename.jpeg'; - const file = forceJpgExtension(newAttachment); - - expect(file.filename).toBe('filename.jpg'); - }); - test('filename.heic should be filename.jpg', () => { - const newAttachment = attachment; - newAttachment.filename = 'filename.heic'; - const file = forceJpgExtension(newAttachment); - - expect(file.filename).toBe('filename.jpg'); - }); - }); - describe('with mime different', () => { - test('filename.jpg should be filename.jpg', () => { - const newAttachment = attachment; - newAttachment.filename = 'filename.png'; - newAttachment.mime = 'image/png'; - const file = forceJpgExtension(newAttachment); - - expect(file.filename).toBe('filename.png'); - }); - }); -}); - -describe('forceJpgExtension for android', () => { - jest.mock('react-native', () => ({ Platform: { OS: 'android' } })); - describe('with mime as image/jpeg', () => { - test('filename.jpg should be filename.jpg', () => { - const newAttachment = attachment; - newAttachment.filename = 'filename.jpg'; - const file = forceJpgExtension(newAttachment); - - expect(file.filename).toBe('filename.jpg'); - }); - test('filename.png should be filename.png', () => { - const newAttachment = attachment; - newAttachment.filename = 'filename.png'; - const file = forceJpgExtension(newAttachment); - - expect(file.filename).toBe('filename.png'); - }); - test('filename.jpeg should be filename.jpeg', () => { - const newAttachment = attachment; - newAttachment.filename = 'filename.jpeg'; - const file = forceJpgExtension(newAttachment); - - expect(file.filename).toBe('filename.jpeg'); - }); - test('filename.heic should be filename.heic', () => { - const newAttachment = attachment; - newAttachment.filename = 'filename.heic'; - const file = forceJpgExtension(newAttachment); - - expect(file.filename).toBe('filename.heic'); - }); - }); - describe('with mime different', () => { - test('filename.jpg should be filename.jpg', () => { - const newAttachment = attachment; - newAttachment.filename = 'filename.png'; - newAttachment.mime = 'image/png'; - const file = forceJpgExtension(newAttachment); - - expect(file.filename).toBe('filename.png'); - }); - }); -}); diff --git a/app/containers/MessageBox/forceJpgExtension.ts b/app/containers/MessageBox/forceJpgExtension.ts deleted file mode 100644 index dedbc7a7b..000000000 --- a/app/containers/MessageBox/forceJpgExtension.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { ImageOrVideo } from 'react-native-image-crop-picker'; - -import { isIOS } from '../../lib/methods/helpers'; - -const regex = new RegExp(/\.[^/.]+$/); // Check from last '.' of the string - -export const forceJpgExtension = (attachment: ImageOrVideo): ImageOrVideo => { - if (isIOS && attachment.mime === 'image/jpeg' && attachment.filename) { - // Replace files extension that mime type is 'image/jpeg' to .jpg; - attachment.filename = attachment.filename.replace(regex, '.jpg'); - } - return attachment; -}; diff --git a/app/containers/MessageBox/index.tsx b/app/containers/MessageBox/index.tsx index 0bbec4b44..f6a822eed 100644 --- a/app/containers/MessageBox/index.tsx +++ b/app/containers/MessageBox/index.tsx @@ -57,7 +57,7 @@ import { hasPermission, debounce, isAndroid, isIOS, isTablet, compareServerVersi import { Services } from '../../lib/services'; import { TSupportedThemes } from '../../theme'; import { ChatsStackParamList } from '../../stacks/types'; -import { pickImageAndVideoFromLibrary, pickImageFromCamera, pickVideoFromCamera } from '../../lib/methods/mediaPicker'; +import { pickMultipleImageAndVideoFromLibrary, pickImageFromCamera, pickVideoFromCamera } from '../../lib/methods/mediaPicker'; require('./EmojiKeyboard'); @@ -716,7 +716,7 @@ class MessageBox extends Component { chooseFromLibrary = async () => { logEvent(events.ROOM_BOX_ACTION_LIBRARY); try { - const attachments = await pickImageAndVideoFromLibrary(); + const attachments = await pickMultipleImageAndVideoFromLibrary(); if (attachments) { this.openShareView(attachments); } diff --git a/app/lib/methods/mediaPicker.ts b/app/lib/methods/mediaPicker.ts index 64aee7ff3..1a4b80259 100644 --- a/app/lib/methods/mediaPicker.ts +++ b/app/lib/methods/mediaPicker.ts @@ -107,8 +107,6 @@ export async function pickImageFromLibrary(base64?: boolean): Promise pickImageFromLibrary; - export const pickVideoFromCamera = (allowsEditing = false): Promise => pickFromCamera(allowsEditing, ImagePicker.MediaTypeOptions.Videos); diff --git a/app/views/ProfileView/index.tsx b/app/views/ProfileView/index.tsx index c428a0d4e..0f2eb6c15 100644 --- a/app/views/ProfileView/index.tsx +++ b/app/views/ProfileView/index.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Keyboard, ScrollView, TextInput, View } from 'react-native'; import { connect } from 'react-redux'; import { sha256 } from 'js-sha256'; -import ImagePicker, { Image } from 'react-native-image-crop-picker'; import RNPickerSelect from 'react-native-picker-select'; import { dequal } from 'dequal'; import omit from 'lodash/omit'; @@ -45,6 +44,7 @@ import { TwoFactorMethods } from '../../definitions/ITotp'; import { withActionSheet, IActionSheetProvider } from '../../containers/ActionSheet'; import { DeleteAccountActionSheetContent } from './components/DeleteAccountActionSheetContent'; import ActionSheetContentWithInputAndSubmit from '../../containers/ActionSheet/ActionSheetContentWithInputAndSubmit'; +import { pickImageFromLibrary } from '../../lib/methods/mediaPicker'; interface IProfileViewProps extends IActionSheetProvider, IBaseScreen { user: IUser; @@ -343,19 +343,12 @@ class ProfileView extends React.Component return; } - const options = { - cropping: true, - compressImageQuality: 0.8, - freeStyleCropEnabled: true, - cropperAvoidEmptySpaceAroundImage: false, - cropperChooseText: I18n.t('Choose'), - cropperCancelText: I18n.t('Cancel'), - includeBase64: true - }; try { logEvent(events.PROFILE_PICK_AVATAR); - const response: Image = await ImagePicker.openPicker(options); - this.setAvatar({ url: response.path, data: `data:image/jpeg;base64,${response.data}`, service: 'upload' }); + const response = await pickImageFromLibrary(true); + if (response) { + this.setAvatar({ url: response.path, data: `data:image/jpeg;base64,${response.data}`, service: 'upload' }); + } } catch (error) { logEvent(events.PROFILE_PICK_AVATAR_F); console.warn(error); diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx index a55bc2a3a..08871547a 100644 --- a/app/views/RoomInfoEditView/index.tsx +++ b/app/views/RoomInfoEditView/index.tsx @@ -4,7 +4,6 @@ import { BlockContext } from '@rocket.chat/ui-kit'; import { dequal } from 'dequal'; import isEmpty from 'lodash/isEmpty'; import { Alert, Keyboard, ScrollView, Text, TextInput, TouchableOpacity, View, StyleSheet } from 'react-native'; -import ImagePicker, { Image } from 'react-native-image-crop-picker'; import { connect } from 'react-redux'; import { Subscription } from 'rxjs'; @@ -51,6 +50,7 @@ import { random } from '../../lib/methods/helpers'; import { Services } from '../../lib/services'; +import { pickImageFromLibrary } from '../../lib/methods/mediaPicker'; interface IRoomInfoEditViewState { room: ISubscription; @@ -488,18 +488,11 @@ class RoomInfoEditView extends React.Component { - const options = { - cropping: true, - compressImageQuality: 0.8, - cropperAvoidEmptySpaceAroundImage: false, - cropperChooseText: I18n.t('Choose'), - cropperCancelText: I18n.t('Cancel'), - includeBase64: true - }; - try { - const response: Image = await ImagePicker.openPicker(options); - this.setState({ avatar: { url: response.path, data: `data:image/jpeg;base64,${response.data}`, service: 'upload' } }); + const response = await pickImageFromLibrary(true); + if (response) { + this.setState({ avatar: { url: response.path, data: `data:image/jpeg;base64,${response.data}`, service: 'upload' } }); + } } catch (e) { console.log(e); } diff --git a/ios/Podfile.lock b/ios/Podfile.lock index d323a99c3..8d11b9aae 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -527,15 +527,6 @@ PODS: - React-Core - RNGestureHandler (2.4.2): - React-Core - - RNImageCropPicker (0.36.3): - - React-Core - - React-RCTImage - - RNImageCropPicker/QBImagePickerController (= 0.36.3) - - TOCropViewController - - RNImageCropPicker/QBImagePickerController (0.36.3): - - React-Core - - React-RCTImage - - TOCropViewController - RNLocalize (2.1.1): - React-Core - RNMathView (1.0.0): @@ -583,7 +574,6 @@ PODS: - libwebp (~> 1.0) - SDWebImage/Core (~> 5.10) - simdjson (0.9.6-fix2) - - TOCropViewController (2.6.1) - WatermelonDB (0.23.0): - React - React-jsi @@ -673,7 +663,6 @@ DEPENDENCIES: - "RNFBCrashlytics (from `../node_modules/@react-native-firebase/crashlytics`)" - RNFileViewer (from `../node_modules/react-native-file-viewer`) - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`) - RNLocalize (from `../node_modules/react-native-localize`) - RNMathView (from `../node_modules/react-native-math-view/ios`) - RNReanimated (from `../node_modules/react-native-reanimated`) @@ -708,7 +697,6 @@ SPEC REPOS: - PromisesObjC - SDWebImage - SDWebImageWebPCoder - - TOCropViewController EXTERNAL SOURCES: boost: @@ -869,8 +857,6 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-file-viewer" RNGestureHandler: :path: "../node_modules/react-native-gesture-handler" - RNImageCropPicker: - :path: "../node_modules/react-native-image-crop-picker" RNLocalize: :path: "../node_modules/react-native-localize" RNMathView: @@ -996,7 +982,6 @@ SPEC CHECKSUMS: RNFBCrashlytics: 357955a1564721ca9001960e57b395c6a319f9be RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592 RNGestureHandler: 61628a2c859172551aa2100d3e73d1e57878392f - RNImageCropPicker: 97289cd94fb01ab79db4e5c92938be4d0d63415d RNLocalize: 82a569022724d35461e2dc5b5d015a13c3ca995b RNMathView: 4c8a3c081fa671ab3136c51fa0bdca7ffb708bd5 RNReanimated: 64573e25e078ae6bec03b891586d50b9ec284393 @@ -1007,7 +992,6 @@ SPEC CHECKSUMS: SDWebImage: 0905f1b7760fc8ac4198cae0036600d67478751e SDWebImageWebPCoder: f93010f3f6c031e2f8fb3081ca4ee6966c539815 simdjson: 85016870cd17207312b718ef6652eb6a1cd6a2b0 - TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863 WatermelonDB: 577c61fceff16e9f9103b59d14aee4850c0307b6 Yoga: 99652481fcd320aefa4a7ef90095b95acd181952 diff --git a/package.json b/package.json index dd6a3c94f..d142a2174 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,6 @@ "react-native-fast-image": "RocketChat/react-native-fast-image.git#bump-version", "react-native-file-viewer": "^2.1.4", "react-native-gesture-handler": "2.4.2", - "react-native-image-crop-picker": "RocketChat/react-native-image-crop-picker", "react-native-image-progress": "^1.1.1", "react-native-jitsi-meet": "RocketChat/react-native-jitsi-meet", "react-native-keycommands": "2.0.3", diff --git a/yarn.lock b/yarn.lock index d949a4ece..d1f89c8cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17153,10 +17153,6 @@ react-native-gradle-plugin@^0.0.6: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45" integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg== -react-native-image-crop-picker@RocketChat/react-native-image-crop-picker: - version "0.36.3" - resolved "https://codeload.github.com/RocketChat/react-native-image-crop-picker/tar.gz/f347776247afb5cbd1400dde215689d7ca8fd6f2" - react-native-image-progress@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/react-native-image-progress/-/react-native-image-progress-1.1.1.tgz#95bbe0875c7ebd54286df69cb37b598b94c54eb0"