102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
import React, { useMemo, useState } from "react";
|
|
import {
|
|
FlatList,
|
|
Image,
|
|
RefreshControl,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import env from "../../env";
|
|
import { DetermineFileType } from "../../util/document-upload.utility";
|
|
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
|
|
export default function JobDocumentsComponent({ job, loading, refetch }) {
|
|
const [previewVisible, setPreviewVisible] = useState(false);
|
|
|
|
const [imgIndex, setImgIndex] = useState(0);
|
|
const onRefresh = async () => {
|
|
return refetch();
|
|
};
|
|
|
|
const fullphotos = useMemo(
|
|
() =>
|
|
job.documents.map((doc) => {
|
|
return {
|
|
videoUrl:
|
|
DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc),
|
|
source:
|
|
DetermineFileType(doc.type) === "video"
|
|
? { uri: GenerateThumbUrl(doc) }
|
|
: { uri: GenerateSrcUrl(doc) },
|
|
};
|
|
}),
|
|
[job.documents]
|
|
);
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<FlatList
|
|
refreshControl={
|
|
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
|
|
}
|
|
data={job.documents}
|
|
numColumns={4}
|
|
style={{ flex: 1 }}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={(object) => (
|
|
<TouchableOpacity
|
|
style={{ flex: 1 / 4, aspectRatio: 1, margin: 4 }}
|
|
onPress={async () => {
|
|
setImgIndex(object.index);
|
|
setPreviewVisible(true);
|
|
}}
|
|
>
|
|
<Image
|
|
style={{ flex: 1 }}
|
|
resizeMode="cover"
|
|
source={{
|
|
uri: GenerateThumbUrl(object.item),
|
|
aspectRatio: 1,
|
|
}}
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
<Text>{job.documents.length}</Text>
|
|
|
|
<MediaCacheOverlay
|
|
photos={fullphotos}
|
|
imgIndex={imgIndex}
|
|
setImgIndex={setImgIndex}
|
|
previewVisible={previewVisible}
|
|
setPreviewVisible={setPreviewVisible}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export const GenerateSrcUrl = (value) => {
|
|
let extension = value.extension;
|
|
if (extension && extension.toLowerCase().includes("heic")) extension = "jpg";
|
|
|
|
return `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
|
|
value.type
|
|
)}/upload/${value.key}${extension ? `.${extension}` : ""}`;
|
|
};
|
|
|
|
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}${
|
|
extension ? `.${extension}` : ""
|
|
}`;
|
|
};
|