Merge pull request #508 from brian-tagg/tma987-crop-loading-indicator

[TMA-987] Crop Loading Indicator

3 files changed, 8 insertions, 18 deletions

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 6f8ff97c..3581168d 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -13,7 +13,7 @@ import {
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } from '../../utils';
-import {TaggSquareButton} from '../common';
+import {TaggSquareButton, TaggLoadingIndicator} from '../common';
 import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
 import Video from 'react-native-video';
 
@@ -36,6 +36,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   // width and height of video, if video
   const [origDimensions, setOrigDimensions] = useState<number[]>([0, 0]);
   const vidRef = useRef<View>(null);
+  const [cropLoading, setCropLoading] = useState<boolean>(false);
 
   // Stores the coordinates of the cropped image
   const [x0, setX0] = useState<number>();
@@ -136,9 +137,11 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           cropHeight: origDimensions[1],
         }));
       }
+      setCropLoading(true);
       cropVideo(
         media.uri,
         (croppedURL: string) => {
+          setCropLoading(false);
           navigation.navigate('CaptionScreen', {
             screenType,
             media: {
@@ -255,6 +258,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
 
   return (
     <View style={styles.container}>
+      {cropLoading && <TaggLoadingIndicator fullscreen />}
       <TouchableOpacity
         style={styles.closeButton}
         onPress={() => navigation.goBack()}>
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 9e37d62e..c0b0c6bf 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -9,7 +9,7 @@ import {
   TakePictureResponse,
 } from 'react-native-camera';
 import {ProcessingManager} from 'react-native-video-processing';
-import ImagePicker, {ImageOrVideo, Video} from 'react-native-image-crop-picker';
+import ImagePicker, {ImageOrVideo} from 'react-native-image-crop-picker';
 import {ERROR_UPLOAD} from '../constants/strings';
 
 /*
@@ -66,6 +66,7 @@ export const navigateToImagePicker = (
       'UserLibrary',
     ],
     mediaType: 'any',
+    compressVideoPreset: 'Passthrough',
   })
     .then((media) => {
       callback(media);
@@ -77,22 +78,6 @@ export const navigateToImagePicker = (
     });
 };
 
-export const navigateToVideoPicker = (callback: (vid: Video) => void) => {
-  ImagePicker.openPicker({
-    mediaType: 'video',
-  })
-    .then(async (vid) => {
-      if (vid.path) {
-        callback(vid);
-      }
-    })
-    .catch((err) => {
-      if (err.code && err.code !== 'E_PICKER_CANCELLED') {
-        Alert.alert(ERROR_UPLOAD);
-      }
-    });
-};
-
 export const showGIFFailureAlert = (onSuccess: () => void) =>
   Alert.alert(
     'Warning',
diff --git a/src/utils/users.ts b/src/utils/users.ts
index c1c3b8bc..992d7721 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -280,6 +280,7 @@ export const patchProfile = async (
       screenTitle = '';
       requestTitle = '';
       fileName = '';
+      imageSettings = {};
   }
 
   return await ImagePicker.openPicker(imageSettings)