124 lines
3.3 KiB
JavaScript
124 lines
3.3 KiB
JavaScript
import { Video } from "expo-av";
|
|
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 [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();
|
|
};
|
|
|
|
const fullphotos = useMemo(
|
|
() =>
|
|
job.documents.map((doc) => {
|
|
return {
|
|
source: {
|
|
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 }}
|
|
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,
|
|
}}
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
<Text>{job.documents.length}</Text>
|
|
<Video
|
|
source={
|
|
videoUri
|
|
? {
|
|
uri: videoUri,
|
|
}
|
|
: null
|
|
}
|
|
useNativeControls
|
|
isLooping
|
|
onPlaybackStatusUpdate={(status) => setStatus(() => status)}
|
|
/>
|
|
<MediaCacheOverlay
|
|
photos={fullphotos}
|
|
imgIndex={imgIndex}
|
|
setImgIndex={setImgIndex}
|
|
previewVisible={previewVisible}
|
|
setPreviewVisible={setPreviewVisible}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export const GenerateSrcUrl = (value) => {
|
|
let extension = value.extension;
|
|
if (extension && extension.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}` : ""
|
|
}`;
|
|
};
|