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}` : ""
+  }`;
+};