Resolve upload issues.

components/job-documents/job-documents.component.jsx

@@ -1,3 +1,4 @@
+import { Video } from "expo-av";
 import React, { useMemo, useState } from "react";
 import {
   FlatList,
@@ -13,6 +14,13 @@ import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.compon
 
 export default function JobDocumentsComponent({ job, loading, refetch }) {
   const [previewVisible, setPreviewVisible] = useState(false);
+  const [videoUri, setVideoUri] = useState(null);
+  const [status, setStatus] = React.useState({});
+  console.log(
+    "🚀  ~ file: job-documents.component.jsx  ~ line 19  ~ status",
+    status
+  );
+
   const [imgIndex, setImgIndex] = useState(0);
   const onRefresh = async () => {
     return refetch();
@@ -41,33 +49,43 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
         style={{ flex: 1 }}
         keyExtractor={(item) => item.id}
         renderItem={(object) => (
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "column",
-              justifyContent: "center",
-              alignItems: "center",
-              margin: 5,
-            }}
-          >
-            <TouchableOpacity
-              onPress={() => {
+          <TouchableOpacity
+            style={{ flex: 1 / 4, aspectRatio: 1 }}
+            onPress={() => {
+              if (DetermineFileType(object.item.type) === "image") {
+                //If image
                 setImgIndex(object.index);
                 setPreviewVisible(true);
+              } else {
+                //If Video
+                setVideoUri(GenerateSrcUrl(object.item));
+              }
+            }}
+          >
+            <Image
+              style={{ flex: 1 }}
+              resizeMode="cover"
+              source={{
+                uri: GenerateThumbUrl(object.item),
+                aspectRatio: 1,
               }}
-            >
-              <Image
-                source={{
-                  width: 100,
-                  height: 100,
-                  uri: GenerateThumbUrl(object.item),
-                }}
-              />
-            </TouchableOpacity>
-          </View>
+            />
+          </TouchableOpacity>
         )}
       />
       <Text>{job.documents.length}</Text>
+      <Video
+        source={
+          videoUri
+            ? {
+                uri: videoUri,
+              }
+            : null
+        }
+        useNativeControls
+        isLooping
+        onPlaybackStatusUpdate={(status) => setStatus(() => status)}
+      />
       <MediaCacheOverlay
         photos={fullphotos}
         imgIndex={imgIndex}
@@ -88,7 +106,18 @@ export const GenerateSrcUrl = (value) => {
   )}/upload/${value.key}${extension ? `.${extension}` : ""}`;
 };
 
-export const GenerateThumbUrl = (value) =>
-  `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+export const GenerateThumbUrl = (value) => {
+  let extension = value.extension;
+  if (extension && extension.includes("heic")) extension = "jpg";
+  else if (
+    DetermineFileType(value.type) !== "image" ||
+    (value.type && value.type.includes("application"))
+  )
+    extension = "jpg";
+
+  return `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
     value.type
-  )}/upload/${env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`;
+  )}/upload/${env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}${
+    extension ? `.${extension}` : ""
+  }`;
+};

components/screen-media-browser/screen-media-browser.component.jsx

@@ -26,7 +26,7 @@ export function ImageBrowserScreen({ selectedCameraJobId }) {
 
   const onDone = (data) => {
     logImEXEvent("imexmobile_upload_documents", { count: data.length });
-    setUploads(data);
+    if (data.length !== 0) setUploads(data);
   };
 
   return (

components/upload-progress/upload-progress.component.jsx

@@ -152,40 +152,25 @@ export function UploadProgress({
     }
 
     //Sequentially await the proms.
-    for (const p of data) {
-      let filename;
-      filename = p.filename || p.uri.split("/").pop();
 
-      await handleUpload(
-        {
-          filename,
-          mediaId: p.id,
-          onError: handleOnError,
-          onProgress: ({ percent, loaded }) =>
-            handleOnProgress(p.id, percent, loaded),
-          onSuccess: () => handleOnSuccess(p.id),
-        },
-        {
-          bodyshop: bodyshop,
-          jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
-          uploaded_by: currentUser.email,
-          photo: p,
-        }
-      );
-
-      //Set the state to mark that it's done.
-      setProgress((progress) => ({
-        ...progress,
-        action: null,
-        speed: 0,
-        files: {
-          ...progress.files,
-          [p.id]: {
-            ...progress.files[p.id],
-            action: null,
-          },
-        },
-      }));
+    for (var i = 0; i < data.length + 4; i = i + 4) {
+      console.log("i :>> ", i);
+      let proms = [];
+      if (data[i]) {
+        proms.push(CreateUploadProm(data[i]));
+      }
+      if (data[i + 1]) {
+        proms.push(CreateUploadProm(data[i + 1]));
+      }
+      if (data[i + 2]) {
+        proms.push(CreateUploadProm(data[i + 2]));
+      }
+      if (data[i + 3]) {
+        proms.push(CreateUploadProm(data[i + 3]));
+      }
+      console.log("Proms Length", proms.length);
+      await Promise.all(proms);
+      console.log("Await done.");
     }
 
     if (deleteAfterUpload) {
@@ -208,6 +193,43 @@ export function UploadProgress({
     forceRerender();
   };
 
+  const CreateUploadProm = async (p) => {
+    let filename;
+    filename = p.filename || p.uri.split("/").pop();
+    console.log("Start upping.", p.id);
+
+    await handleUpload(
+      {
+        filename,
+        mediaId: p.id,
+        onError: handleOnError,
+        onProgress: ({ percent, loaded }) =>
+          handleOnProgress(p.id, percent, loaded),
+        onSuccess: () => handleOnSuccess(p.id),
+      },
+      {
+        bodyshop: bodyshop,
+        jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
+        uploaded_by: currentUser.email,
+        photo: p,
+      }
+    );
+    console.log("Done upping.", p.id);
+    //Set the state to mark that it's done.
+    setProgress((progress) => ({
+      ...progress,
+      action: null,
+      speed: 0,
+      files: {
+        ...progress.files,
+        [p.id]: {
+          ...progress.files[p.id],
+          action: null,
+        },
+      },
+    }));
+  };
+
   return (
     <Modal
       visible={progress.uploadInProgress}