From 3231097b29ddc917c253de1d758cfc24e6b9ff5d Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 11 Feb 2021 15:38:59 -0800
Subject: [PATCH] Improved uploads & handling for temp jobs. IO-399 IO-398
 IO-69

---
 App.js                                        |  17 +-
 babel-translations.babel                      | 122 ++++++++++++++-
 .../camera-select-job.component.jsx           |  18 ++-
 .../job-list-item/job-list-item.component.jsx |  62 ++++----
 .../screen-main/screen-main.component.jsx     | 114 ++++++++------
 .../screen-media-browser-top.component.jsx    |  40 +++++
 .../screen-media-browser.component.jsx        | 146 +++++++++++-------
 .../upload-delete-switch.component.jsx        |   3 +-
 env.js                                        |  24 +--
 translations/en-US/common.json                |  13 +-
 translations/es-MX/common.json                |  13 +-
 translations/fr-CA/common.json                |  13 +-
 util/document-upload.utility.js               |  29 +++-
 13 files changed, 441 insertions(+), 173 deletions(-)
 create mode 100644 components/screen-media-browser/screen-media-browser-top.component.jsx

diff --git a/App.js b/App.js
index f587127..232615f 100644
--- a/App.js
+++ b/App.js
@@ -1,10 +1,9 @@
 import { ApolloProvider } from "@apollo/client";
 import { Ionicons } from "@expo/vector-icons";
 import AppLoading from "expo-app-loading";
-import * as FileSystem from "expo-file-system";
+//import * as FileSystem from "expo-file-system";
 import * as Font from "expo-font";
 import React from "react";
-import { SafeAreaView } from "react-native";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import * as Sentry from "sentry-expo";
@@ -39,11 +38,11 @@ export default class App extends React.Component {
       ...Ionicons.font,
     });
     this.setState({ isReady: true });
-    await FileSystem.makeDirectoryAsync(
-      FileSystem.documentDirectory + "photos"
-    ).catch((e) => {
-      console.log(e, "Directory already exists");
-    });
+    // await FileSystem.makeDirectoryAsync(
+    //   FileSystem.documentDirectory + "photos"
+    // ).catch((e) => {
+    //   console.log(e, "Directory already exists");
+    // });
   }
 
   render() {
@@ -55,9 +54,7 @@ export default class App extends React.Component {
       <Provider store={store}>
         <PersistGate persistor={persistor}>
           <ApolloProvider client={client}>
-            <SafeAreaView style={{ flex: 1 }}>
-              <ScreenMainComponent />
-            </SafeAreaView>
+            <ScreenMainComponent />
           </ApolloProvider>
         </PersistGate>
       </Provider>
diff --git a/babel-translations.babel b/babel-translations.babel
index f97c667..8e8c114 100644
--- a/babel-translations.babel
+++ b/babel-translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -1089,6 +1089,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>nomedia</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>selectjob</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -1110,6 +1131,74 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>selectjobassetselector</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>temporarystorage</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                        </children>
+                                    </folder_node>
+                                    <folder_node>
+                                        <name>titles</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>mediabrowsertab</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                         </children>
                                     </folder_node>
                                 </children>
@@ -1223,6 +1312,37 @@
                                     </folder_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>more</name>
+                                <children>
+                                    <folder_node>
+                                        <name>titles</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>moretab</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                        </children>
+                                    </folder_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>objects</name>
                                 <children>
diff --git a/components/camera-select-job/camera-select-job.component.jsx b/components/camera-select-job/camera-select-job.component.jsx
index b1e8a47..2e311f0 100644
--- a/components/camera-select-job/camera-select-job.component.jsx
+++ b/components/camera-select-job/camera-select-job.component.jsx
@@ -1,7 +1,8 @@
 import { useQuery } from "@apollo/client";
 import { Picker } from "native-base";
 import React from "react";
-import { Text, View } from "react-native";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
@@ -10,7 +11,6 @@ import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ErrorDisplay from "../error-display/error-display.component";
 import LoadingDisplay from "../loading-display/loading-display.component";
-import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -42,11 +42,9 @@ export function CameraSelectJob({
   return (
     <View
       style={{
-        fontSize: 20,
-        fontWeight: "bold",
+        marginHorizontal: 10,
       }}
     >
-      {!cameraJobId && <Text>{t("mediabrowser.labels.selectjob")}</Text>}
       <Picker
         selectedValue={cameraJobId}
         onValueChange={(value, idx) => {
@@ -54,6 +52,16 @@ export function CameraSelectJob({
           setCameraJob(data.jobs[idx]);
         }}
       >
+        <Picker.Item
+          label={t("mediabrowser.labels.selectjob")}
+          value={null}
+          key="null"
+        />
+        <Picker.Item
+          label={t("mediabrowser.labels.temporarystorage")}
+          value="temp"
+          key="temp"
+        />
         {data.jobs.map((j) => {
           return (
             <Picker.Item
diff --git a/components/job-list-item/job-list-item.component.jsx b/components/job-list-item/job-list-item.component.jsx
index d162240..46917b1 100644
--- a/components/job-list-item/job-list-item.component.jsx
+++ b/components/job-list-item/job-list-item.component.jsx
@@ -64,7 +64,7 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
         onPress={() => {
           setCameraJobId(item.id);
           setCameraJob(item);
-          navigation.navigate("CameraTab");
+          navigation.navigate("MediaBrowserTab");
         }}
       >
         <Animated.View
@@ -80,36 +80,36 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
       </TouchableOpacity>
     );
   };
-  const RenderLeftAction = (progress, dragX) => {
-    const scale = dragX.interpolate({
-      inputRange: [0, 100],
-      outputRange: [0, 1],
-      extrapolate: "clamp",
-    });
+  // const RenderLeftAction = (progress, dragX) => {
+  //   const scale = dragX.interpolate({
+  //     inputRange: [0, 100],
+  //     outputRange: [0, 1],
+  //     extrapolate: "clamp",
+  //   });
 
-    return (
-      <TouchableOpacity
-        style={[styles.swipe_view, styles.swipe_view_blue]}
-        onPress={() => {
-          setCameraJobId(item.id);
-          setCameraJob(item);
-          navigation.push("MediaBrowser");
-          //pickImage(item.id);
-        }}
-      >
-        <Animated.Text
-          style={{
-            // color: "white",
-            // paddingHorizontal: 10,
-            // fontWeight: "600",
-            transform: [{ scale }],
-          }}
-        >
-          Add
-        </Animated.Text>
-      </TouchableOpacity>
-    );
-  };
+  //   return (
+  //     <TouchableOpacity
+  //       style={[styles.swipe_view, styles.swipe_view_blue]}
+  //       onPress={() => {
+  //         setCameraJobId(item.id);
+  //         setCameraJob(item);
+  //         navigation.push("MediaBrowser");
+  //         //pickImage(item.id);
+  //       }}
+  //     >
+  //       <Animated.Text
+  //         style={{
+  //           // color: "white",
+  //           // paddingHorizontal: 10,
+  //           // fontWeight: "600",
+  //           transform: [{ scale }],
+  //         }}
+  //       >
+  //         Add
+  //       </Animated.Text>
+  //     </TouchableOpacity>
+  //   );
+  // };
 
   const onPress = () => {
     navigation.push("JobDetail", {
@@ -120,7 +120,7 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
 
   return (
     <Swipeable
-      renderLeftActions={RenderLeftAction}
+      //  renderLeftActions={RenderLeftAction}
       renderRightActions={RenderRightAction}
     >
       <TouchableOpacity onPress={onPress}>
diff --git a/components/screen-main/screen-main.component.jsx b/components/screen-main/screen-main.component.jsx
index 863400d..d70dd79 100644
--- a/components/screen-main/screen-main.component.jsx
+++ b/components/screen-main/screen-main.component.jsx
@@ -4,7 +4,6 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import i18n from "i18next";
 import React, { useEffect } from "react";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -16,23 +15,24 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
-import ScreenCamera from "../screen-camera/screen-camera";
+//import ScreenCamera from "../screen-camera/screen-camera";
 import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component";
 import ScreenJobList from "../screen-job-list/screen-job-list.component";
-import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component";
-import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
-import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component";
+import ScreenMediaBrowser from "../screen-media-browser/screen-media-browser.component";
+//import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component";
+//import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
+//import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component";
 import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
 import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
-import ScreenMediaBrowser from "../screen-media-browser/screen-media-browser.component";
 
 const JobStack = createStackNavigator();
-const CameraStack = createStackNavigator();
-const MessagingStack = createStackNavigator();
-const MediaCacheStack = createStackNavigator();
+//const CameraStack = createStackNavigator();
+//const MessagingStack = createStackNavigator();
+//const MediaCacheStack = createStackNavigator();
 const MoreStack = createStackNavigator();
 const BottomTabs = createBottomTabNavigator();
+const MediaBrowserStack = createStackNavigator();
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -51,7 +51,7 @@ const JobStackNavigator = () => (
     <JobStack.Screen
       name="JobList"
       options={() => ({
-        title: `${i18n.t("joblist.labels.activejobs")}`,
+        title: i18n.t("joblist.labels.activejobs"),
       })}
       component={ScreenJobList}
     />
@@ -64,7 +64,7 @@ const JobStackNavigator = () => (
           i18n.t("joblist.labels.detail"),
       })}
     />
-    <JobStack.Screen
+    {/* <JobStack.Screen
       name="MediaBrowser"
       component={ScreenMediaBrowser}
       // options={({ route }) => ({
@@ -72,42 +72,53 @@ const JobStackNavigator = () => (
       //     (route.params && route.params.title) ||
       //     i18n.t("joblist.labels.detail"),
       // })}
-    />
+    /> */}
   </JobStack.Navigator>
 );
 
-const CameraStackNavigator = () => (
-  <CameraStack.Navigator initialRouteName="TabCameraScreen">
-    <CameraStack.Screen
-      name="TabCameraScreen"
-      options={{ headerShown: false }}
-      component={ScreenCamera}
+// const CameraStackNavigator = () => (
+//   <CameraStack.Navigator initialRouteName="TabCameraScreen">
+//     <CameraStack.Screen
+//       name="TabCameraScreen"
+//       options={{ headerShown: false }}
+//       component={ScreenCamera}
+//     />
+//   </CameraStack.Navigator>
+// );
+
+// const MediaCacheStackNavigator = () => (
+//   <MediaCacheStack.Navigator initialRouteName="TabMediaCache">
+//     <MediaCacheStack.Screen
+//       name="MediaCache"
+//       options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
+//       component={ScreenMediaCache}
+//     />
+//   </MediaCacheStack.Navigator>
+// );
+
+const MediaBrowserStackNavigator = () => (
+  <MediaBrowserStack.Navigator initialRouteName="MediaBrowser">
+    <MediaBrowserStack.Screen
+      name="MediaBrowser"
+      options={{ title: i18n.t("mediabrowser.titles.mediabrowsertab") }}
+      component={ScreenMediaBrowser}
     />
-  </CameraStack.Navigator>
+  </MediaBrowserStack.Navigator>
 );
 
-const MediaCacheStackNavigator = () => (
-  <MediaCacheStack.Navigator initialRouteName="TabMediaCache">
-    <MediaCacheStack.Screen
-      name="MediaCache"
-      options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
-      component={ScreenMediaCache}
-    />
-  </MediaCacheStack.Navigator>
-);
+// const MessagingStackNavigator = () => (
+//   <MessagingStack.Navigator>
+//     <MessagingStack.Screen
+//       name="MessagingList"
+//       component={ScreenMessagingList}
+//     />
+//     <MessagingStack.Screen
+//       name="MessagingConversation"
+//       component={ScreenMessagingConversation}
+//     />
+//   </MessagingStack.Navigator>
+// );
 
-const MessagingStackNavigator = () => (
-  <MessagingStack.Navigator>
-    <MessagingStack.Screen
-      name="MessagingList"
-      component={ScreenMessagingList}
-    />
-    <MessagingStack.Screen
-      name="MessagingConversation"
-      component={ScreenMessagingConversation}
-    />
-  </MessagingStack.Navigator>
-);
 const MoreStackNavigator = () => (
   <MoreStack.Navigator>
     <MoreStack.Screen
@@ -132,7 +143,10 @@ const BottomTabsNavigator = () => (
           iconName = "ios-chatboxes";
         } else if (route.name === "CameraTab") {
           iconName = "ios-camera";
-        } else if (route.name === "MediaCacheTab") {
+        } else if (
+          route.name === "MediaCacheTab" ||
+          route.name === "MediaBrowserTab"
+        ) {
           iconName = "ios-photos";
         } else {
           //iconName = "customerservice";
@@ -152,20 +166,24 @@ const BottomTabsNavigator = () => (
       component={JobStackNavigator}
     />
     <BottomTabs.Screen
-      name="CameraTab"
-      options={{ title: i18n.t("camera.titles.cameratab") }}
-      component={CameraStackNavigator}
+      name="MediaBrowserTab"
+      options={{ title: i18n.t("mediabrowser.titles.mediabrowsertab") }}
+      component={MediaBrowserStackNavigator}
     />
-    <BottomTabs.Screen
+    {/* <BottomTabs.Screen
       name="MediaCacheTab"
       options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
       component={MediaCacheStackNavigator}
-    />
-    <BottomTabs.Screen
+    /> */}
+    {/* <BottomTabs.Screen
+      name="CameraTab"
+      options={{ title: i18n.t("camera.titles.cameratab") }}
+      component={CameraStackNavigator}
+    />   <BottomTabs.Screen
       name="MessagingTab"
       options={{ title: i18n.t("messaging.titles.messagingtab") }}
       component={MessagingStackNavigator}
-    />
+    /> */}
     <BottomTabs.Screen
       name="MoreTab"
       options={{ title: i18n.t("more.titles.moretab") }}
diff --git a/components/screen-media-browser/screen-media-browser-top.component.jsx b/components/screen-media-browser/screen-media-browser-top.component.jsx
new file mode 100644
index 0000000..093d94c
--- /dev/null
+++ b/components/screen-media-browser/screen-media-browser-top.component.jsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { Text, View } from "react-native";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
+import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  cameraJobId: selectCurrentCameraJobId,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setCameraJobId: (id) => dispatch(setCameraJobId(id)),
+  setCameraJob: (job) => dispatch(setCameraJob(job)),
+});
+
+export function ScreenMediaBrowserTop({
+  bodyshop,
+  cameraJobId,
+  onFinish,
+  ...props
+}) {
+  console.log("Props", props);
+  return (
+    <View
+      style={{
+        marginHorizontal: 10,
+      }}
+    >
+      <Text>Test</Text>
+    </View>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScreenMediaBrowserTop);
diff --git a/components/screen-media-browser/screen-media-browser.component.jsx b/components/screen-media-browser/screen-media-browser.component.jsx
index 4157633..b6443ec 100644
--- a/components/screen-media-browser/screen-media-browser.component.jsx
+++ b/components/screen-media-browser/screen-media-browser.component.jsx
@@ -1,11 +1,12 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useNavigation } from "@react-navigation/native";
 import { AssetsSelector } from "expo-images-picker";
 import * as MediaLibrary from "expo-media-library";
 import _ from "lodash";
+import { H3 } from "native-base";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { StyleSheet, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -36,7 +37,6 @@ export function ImageBrowserScreen({
   deleteAfterUpload,
 }) {
   const { t } = useTranslation();
-  const navigation = useNavigation();
   const [uploads, setUploads] = useState({});
   function handleOnProgress(uri, percent) {
     setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } }));
@@ -72,7 +72,7 @@ export function ImageBrowserScreen({
           },
           {
             bodyshop: bodyshop,
-            jobId: selectedCameraJobId,
+            jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
             uploaded_by: currentUser.email,
             photo: p,
           }
@@ -85,63 +85,93 @@ export function ImageBrowserScreen({
   };
 
   return (
-    <View style={[styles.flex, styles.container]}>
-      <CameraSelectJob />
-      <UploadDeleteSwitch />
-      {selectedCameraJobId && (
-        <AssetsSelector
-          style={{ flex: 1 }}
-          key={tick}
-          options={{
-            // manipulate: {
-            //   //width: 512,
-            //   compress: 0.7,
-            //   base64: false,
-            //   saveTo: "jpeg",
-            // },
-            assetsType: ["photo", "video"],
-            //maxSelections: 5,
-            margin: 3,
-            portraitCols: 4,
-            landscapeCols: 5,
-            widgetWidth: 100,
-            widgetBgColor: "white",
-            selectedBgColor: "#adadad",
-            spinnerColor: "#c8c8c8",
-            videoIcon: {
-              Component: Ionicons,
-              iconName: "ios-videocam",
-              color: "white",
-              size: 20,
-            },
-            selectedIcon: {
-              Component: Ionicons,
-              iconName: "ios-checkmark-circle-outline",
-              color: "white",
-              bg: "rgba(35,35,35, 0.75)",
-              size: 32,
-            },
-            defaultTopNavigator: {
-              continueText: t("mediabrowser.actions.upload"),
-              goBackText: t("mediabrowser.actions.refresh"),
-              buttonStyle: styles.buttonStyle,
-              textStyle: styles.textStyle,
+    <SafeAreaView style={[styles.flex, styles.container]}>
+      <View style={[styles.flex, styles.container]}>
+        <CameraSelectJob />
+        <UploadDeleteSwitch />
+        {!selectedCameraJobId && (
+          <View
+            style={{
+              flex: 1,
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <H3>{t("mediabrowser.labels.selectjobassetselector")}</H3>
+          </View>
+        )}
+        {selectedCameraJobId && (
+          <AssetsSelector
+            style={{ flex: 1 }}
+            key={tick}
+            options={{
+              // manipulate: {
+              //   //width: 512,
+              //   compress: 0.7,
+              //   base64: false,
+              //   saveTo: "jpeg",
+              // },
+              assetsType: ["photo", "video"],
+              //maxSelections: 5,
+              margin: 3,
+              portraitCols: 4,
+              landscapeCols: 5,
+              widgetWidth: 100,
+              widgetBgColor: "white",
+              selectedBgColor: "#adadad",
+              spinnerColor: "#c8c8c8",
+              videoIcon: {
+                Component: Ionicons,
+                iconName: "ios-videocam",
+                color: "white",
+                size: 20,
+              },
+              selectedIcon: {
+                Component: Ionicons,
+                iconName: "ios-checkmark-circle-outline",
+                color: "white",
+                bg: "rgba(35,35,35, 0.75)",
+                size: 32,
+              },
+              defaultTopNavigator: {
+                continueText: t("mediabrowser.actions.upload"),
+                goBackText: t("mediabrowser.actions.refresh"),
+                buttonStyle: styles.buttonStyle,
+                textStyle: styles.textStyle,
+                backFunction: () => {
+                  forceRerender();
+                },
+                doneFunction: onDone,
+              },
 
-              backFunction: () => {
-                forceRerender();
+              noAssets: {
+                Component: function NoAsset() {
+                  return (
+                    <View
+                      style={{
+                        display: "flex",
+                        flex: 1,
+                        height: 200,
+                        marginHorizontal: 20,
+
+                        alignItems: "center",
+                        justifyContent: "center",
+                      }}
+                    >
+                      <Ionicons name="ios-photos" size={72} />
+                      <Text style={{ textAlign: "center", marginTop: 10 }}>
+                        {t("mediabrowser.labels.nomedia")}
+                      </Text>
+                    </View>
+                  );
+                },
               },
-              doneFunction: onDone,
-            },
-            noAssets: {
-              Component: function NoAsset() {
-                return <Text>{`Looks like there's nothing here...`}</Text>;
-              },
-            },
-          }}
-        />
-      )}
-      <UploadProgress uploads={uploads} />
-    </View>
+            }}
+          />
+        )}
+        <UploadProgress uploads={uploads} />
+      </View>
+    </SafeAreaView>
   );
 }
 
diff --git a/components/upload-delete-switch/upload-delete-switch.component.jsx b/components/upload-delete-switch/upload-delete-switch.component.jsx
index d1607d6..0c33aa4 100644
--- a/components/upload-delete-switch/upload-delete-switch.component.jsx
+++ b/components/upload-delete-switch/upload-delete-switch.component.jsx
@@ -27,7 +27,7 @@ export function UploadDeleteSwitch({
       </Text>
       <Switch
         trackColor={{ false: "#767577", true: "#81b0ff" }}
-        thumbColor={deleteAfterUpload ? "#f5dd4b" : "#f4f3f4"}
+        thumbColor={deleteAfterUpload ? "tomato" : "#f4f3f4"}
         ios_backgroundColor="#3e3e3e"
         onValueChange={() => toggleDeleteAfterUpload()}
         value={deleteAfterUpload}
@@ -40,6 +40,7 @@ const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
+    margin: 10,
   },
 
   text: {
diff --git a/env.js b/env.js
index 8042b8d..335f011 100644
--- a/env.js
+++ b/env.js
@@ -4,10 +4,10 @@ export const prodUrl = "https://someapp.herokuapp.com";
 
 const ENV = {
   dev: {
-    REACT_APP_CLOUDINARY_ENDPOINT:
-      "https://api.cloudinary.com/v1_1/bodyshop/image",
-    REACT_APP_CLOUDINARY_IMAGE_ENDPOINT:
-      "https://res.cloudinary.com/bodyshop/image/upload",
+    API_URL: "https://api.imex.online",
+    REACT_APP_CLOUDINARY_ENDPOINT_API:
+      "https://api.cloudinary.com/v1_1/bodyshop",
+    REACT_APP_CLOUDINARY_ENDPOINT: "https://res.cloudinary.com/bodyshop",
     REACT_APP_CLOUDINARY_API_KEY: "473322739956866",
     REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "h_200,w_200,c_thumb",
     firebase: {
@@ -22,10 +22,10 @@ const ENV = {
     },
   },
   staging: {
-    REACT_APP_CLOUDINARY_ENDPOINT:
-      "https://api.cloudinary.com/v1_1/bodyshop/image",
-    REACT_APP_CLOUDINARY_IMAGE_ENDPOINT:
-      "https://res.cloudinary.com/bodyshop/image/upload",
+    API_URL: "https://api.imex.online",
+    REACT_APP_CLOUDINARY_ENDPOINT_API:
+      "https://api.cloudinary.com/v1_1/bodyshop",
+    REACT_APP_CLOUDINARY_ENDPOINT: "https://res.cloudinary.com/bodyshop",
     REACT_APP_CLOUDINARY_API_KEY: "473322739956866",
     REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "h_200,w_200,c_thumb",
     firebase: {
@@ -40,10 +40,10 @@ const ENV = {
     },
   },
   prod: {
-    REACT_APP_CLOUDINARY_ENDPOINT:
-      "https://api.cloudinary.com/v1_1/bodyshop/image",
-    REACT_APP_CLOUDINARY_IMAGE_ENDPOINT:
-      "https://res.cloudinary.com/bodyshop/image/upload",
+    API_URL: "https://api.imex.online",
+    REACT_APP_CLOUDINARY_ENDPOINT_API:
+      "https://api.cloudinary.com/v1_1/bodyshop",
+    REACT_APP_CLOUDINARY_ENDPOINT: "https://res.cloudinary.com/bodyshop",
     REACT_APP_CLOUDINARY_API_KEY: "473322739956866",
     REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "h_200,w_200,c_thumb",
     firebase: {
diff --git a/translations/en-US/common.json b/translations/en-US/common.json
index 36ec278..5239a08 100644
--- a/translations/en-US/common.json
+++ b/translations/en-US/common.json
@@ -79,7 +79,13 @@
 			},
 			"labels": {
 				"deleteafterupload": "Delete After Upload",
-				"selectjob": "Please select a job."
+				"nomedia": "Look's like there's no media on your device. Take some photos or videos and they will appear here.",
+				"selectjob": "--- Select a job ---",
+				"selectjobassetselector": "Please select a job to upload media. ",
+				"temporarystorage": "* Temporary Storage *"
+			},
+			"titles": {
+				"mediabrowsertab": "Media Browser"
 			}
 		},
 		"mediacache": {
@@ -96,6 +102,11 @@
 				"messagingtab": "Messaging"
 			}
 		},
+		"more": {
+			"titles": {
+				"moretab": "More"
+			}
+		},
 		"objects": {
 			"jobs": {
 				"fields": {
diff --git a/translations/es-MX/common.json b/translations/es-MX/common.json
index fe7bda2..d428ad2 100644
--- a/translations/es-MX/common.json
+++ b/translations/es-MX/common.json
@@ -79,7 +79,13 @@
 			},
 			"labels": {
 				"deleteafterupload": "",
-				"selectjob": ""
+				"nomedia": "",
+				"selectjob": "",
+				"selectjobassetselector": "",
+				"temporarystorage": ""
+			},
+			"titles": {
+				"mediabrowsertab": ""
 			}
 		},
 		"mediacache": {
@@ -96,6 +102,11 @@
 				"messagingtab": ""
 			}
 		},
+		"more": {
+			"titles": {
+				"moretab": ""
+			}
+		},
 		"objects": {
 			"jobs": {
 				"fields": {
diff --git a/translations/fr-CA/common.json b/translations/fr-CA/common.json
index cc97a60..82db3fc 100644
--- a/translations/fr-CA/common.json
+++ b/translations/fr-CA/common.json
@@ -79,7 +79,13 @@
 			},
 			"labels": {
 				"deleteafterupload": "",
-				"selectjob": ""
+				"nomedia": "",
+				"selectjob": "",
+				"selectjobassetselector": "",
+				"temporarystorage": ""
+			},
+			"titles": {
+				"mediabrowsertab": ""
 			}
 		},
 		"mediacache": {
@@ -96,6 +102,11 @@
 				"messagingtab": ""
 			}
 		},
+		"more": {
+			"titles": {
+				"moretab": ""
+			}
+		},
 		"objects": {
 			"jobs": {
 				"fields": {
diff --git a/util/document-upload.utility.js b/util/document-upload.utility.js
index d0bb9fa..5c510f2 100644
--- a/util/document-upload.utility.js
+++ b/util/document-upload.utility.js
@@ -14,6 +14,7 @@ export const handleUpload = async (ev, context) => {
   const { bodyshop, jobId } = context;
 
   const newFile = await (await fetch(ev.uri)).blob();
+  let extension = ev.uri.split(".").pop();
 
   let key = `${bodyshop.id}/${jobId}/${newFile.data.name.replace(
     /\.[^/.]+$/,
@@ -21,6 +22,7 @@ export const handleUpload = async (ev, context) => {
   )}`;
   return uploadToCloudinary(
     key,
+    extension,
     newFile.type,
     newFile,
     onError,
@@ -32,6 +34,7 @@ export const handleUpload = async (ev, context) => {
 
 export const uploadToCloudinary = async (
   key,
+  extension,
   fileType,
   file,
   onError,
@@ -56,15 +59,19 @@ export const uploadToCloudinary = async (
     tagsArray ? tagsArray.map((tag) => `${tag},`) : ""
   }`;
   //  let eager = process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS;
+  console.log("fileType", fileType);
+  const upload_preset = fileType.startsWith("video")
+    ? "incoming_upload_video"
+    : "incoming_upload";
 
   //Get the signed url.
   let signedURLResponse;
   try {
-    signedURLResponse = await axios.post("https://api.imex.online/media/sign", {
+    signedURLResponse = await axios.post(`${env.API_URL}/media/sign`, {
       public_id: public_id,
       tags: tags,
       timestamp: timestamp,
-      upload_preset: "incoming_upload",
+      upload_preset: upload_preset,
     });
   } catch (error) {
     console.log("ERROR GETTING SIGNED URL", error);
@@ -94,7 +101,7 @@ export const uploadToCloudinary = async (
     name: file.data.name,
   });
 
-  formData.append("upload_preset", "incoming_upload");
+  formData.append("upload_preset", upload_preset);
 
   formData.append("api_key", env.REACT_APP_CLOUDINARY_API_KEY);
   formData.append("public_id", public_id);
@@ -106,7 +113,9 @@ export const uploadToCloudinary = async (
   let cloudinaryUploadResponse;
   try {
     cloudinaryUploadResponse = await cleanAxios.post(
-      `${env.REACT_APP_CLOUDINARY_ENDPOINT}/upload`,
+      `${env.REACT_APP_CLOUDINARY_ENDPOINT_API}/${DetermineFileType(
+        fileType
+      )}/upload`,
       formData,
       {
         ...options,
@@ -139,6 +148,7 @@ export const uploadToCloudinary = async (
           key: key,
           billid: billId,
           type: fileType,
+          extension: extension,
         },
       ],
     },
@@ -168,3 +178,14 @@ export const uploadToCloudinary = async (
   }
   return { success: true };
 };
+
+export function DetermineFileType(filetype) {
+  console.log("Checking Type", filetype, filetype.startsWith("video"));
+  if (!filetype) return "auto";
+  else if (filetype.startsWith("image")) return "image";
+  else if (filetype.startsWith("video")) return "video";
+  else if (filetype.startsWith("application/pdf")) return "image";
+  else if (filetype.startsWith("application")) return "raw";
+
+  return "auto";
+}