admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-3092 Add imgproxy uploads and update expo version.

Browse Source
This commit is contained in:
Patrick Fic
2025-02-21 13:54:56 -08:00
parent 23fdb02375
commit dc6cd88e8c
12 changed files with 410 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/data-label/data-label.component.jsx
View File

@@ -16,7 +16,7 @@ export default function DataLabelComponent({
);
const { key, ...rest } = restProps;
return (
<View {...rest} style={{ margin: 4, ...restProps.style }}>
<View key={key} {...rest} style={{ margin: 4, ...restProps.style }}>
<Text style={{ color: "slategray" }}>{label}</Text>
<Text>{theContent}</Text>
</View>

114
components/job-documents/job-documents.component.jsx
View File

@@ -10,38 +10,93 @@ import {
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);
import { useEffect } from "react";
import axios from "axios";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(JobDocumentsComponent);
export function JobDocumentsComponent({ bodyshop, job, loading, refetch }) {
const [previewVisible, setPreviewVisible] = useState(false);
const [fullphotos, setFullPhotos] = useState([]);
const [imgIndex, setImgIndex] = useState(0);
const onRefresh = async () => {
return refetch();
};
const fullphotos = useMemo(
() =>
job.documents.map((doc, idx) => {
return {
id: idx,
videoUrl:
DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc),
source:
DetermineFileType(doc.type) === "video"
? { uri: GenerateThumbUrl(doc) }
: { uri: GenerateSrcUrl(doc) },
url:
DetermineFileType(doc.type) === "video"
? GenerateThumbUrl(doc)
: GenerateSrcUrl(doc),
uri:
DetermineFileType(doc.type) === "video"
? GenerateThumbUrl(doc)
: GenerateSrcUrl(doc),
thumbUrl: GenerateThumbUrl(doc),
};
}),
[job.documents]
);
useEffect(() => {
async function getPhotos() {
if (bodyshop.localmediatoken === "imgproxy") {
const result = await axios.post(
`${env.API_URL}/media/imgproxy/thumbnails`,
{
jobid: job.id,
}
);
setFullPhotos(
result.data.map((doc, idx) => {
return {
id: idx,
videoUrl:
DetermineFileType(doc.type) === "video" &&
doc.originalUrlViaProxyPath,
source:
DetermineFileType(doc.type) === "video"
? { uri: doc.thumbnailUrl }
: { uri: doc.originalUrl },
url:
DetermineFileType(doc.type) === "video"
? doc.thumbnailUrl
: doc.originalUrl,
uri:
DetermineFileType(doc.type) === "video"
? doc.originalUrlViaProxyPath
: doc.originalUrl,
thumbUrl: doc.thumbnailUrl,
};
})
);
} else {
setFullPhotos(
job.documents.map((doc, idx) => {
return {
id: idx,
videoUrl:
DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc),
source:
DetermineFileType(doc.type) === "video"
? { uri: GenerateThumbUrl(doc) }
: { uri: GenerateSrcUrl(doc) },
url:
DetermineFileType(doc.type) === "video"
? GenerateThumbUrl(doc)
: GenerateSrcUrl(doc),
uri:
DetermineFileType(doc.type) === "video"
? GenerateThumbUrl(doc)
: GenerateSrcUrl(doc),
thumbUrl: GenerateThumbUrl(doc),
};
})
);
}
}
getPhotos();
}, [job.documents]);
return (
<View style={{ flex: 1 }}>
@@ -49,7 +104,7 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
data={job.documents}
data={fullphotos}
numColumns={4}
style={{ flex: 1 }}
keyExtractor={(item) => item.id}
@@ -65,14 +120,15 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
style={{ flex: 1 }}
resizeMode="cover"
source={{
uri: GenerateThumbUrl(object.item),
uri: object.item.thumbUrl,
aspectRatio: 1,
}}
/>
</TouchableOpacity>
)}
/>
<Text>{job.documents.length}</Text>
<Text>{fullphotos.length}</Text>
<MediaCacheOverlay
photos={fullphotos}

1
components/loading-display/loading-display.component.jsx
View File

@@ -3,6 +3,7 @@ import { View } from "react-native";
import { BarIndicator } from "react-native-indicators";
export default function LoadingDisplay({ count = 5 }) {
//TODO: This is throwing an error per expo, but it appears to be happening inside the component itself.
return (
<View style={{ flex: 1, alignContent: "center", justifyContent: "center" }}>
<BarIndicator count={count} color="dodgerblue" />

88
components/screen-media-browser/screen-media-browser.component.jsx
View File

@@ -1,23 +1,23 @@
import { Ionicons } from '@expo/vector-icons';
import { AssetsSelector } from 'expo-images-picker';
import { MediaType } from 'expo-media-library';
import React, { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { logImEXEvent } from '../../firebase/firebase.analytics';
import { toggleDeleteAfterUpload } from '../../redux/app/app.actions';
import { Ionicons } from "@expo/vector-icons";
import { AssetsSelector } from "expo-images-picker";
import { MediaType } from "expo-media-library";
import React, { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.analytics";
import { toggleDeleteAfterUpload } from "../../redux/app/app.actions";
import {
selectCurrentCameraJobId,
selectDeleteAfterUpload,
} from '../../redux/app/app.selectors';
import { selectBodyshop } from '../../redux/user/user.selectors';
import CameraSelectJob from '../camera-select-job/camera-select-job.component';
import JobSpaceAvailable from '../job-space-available/job-space-available.component';
import LocalUploadProgress from '../local-upload-progress/local-upload-progress.component';
import UploadDeleteSwitch from '../upload-delete-switch/upload-delete-switch.component';
import UploadProgress from '../upload-progress/upload-progress.component';
} from "../../redux/app/app.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CameraSelectJob from "../camera-select-job/camera-select-job.component";
import JobSpaceAvailable from "../job-space-available/job-space-available.component";
import UploadProgressLocal from "../upload-progress-local/upload-progress-local.component";
import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
import UploadProgress from "../upload-progress/upload-progress.component";
const mapStateToProps = createStructuredSelector({
selectedCameraJobId: selectCurrentCameraJobId,
@@ -43,18 +43,18 @@ export function ImageBrowserScreen({
}, []);
const onDone = (data) => {
logImEXEvent('imexmobile_upload_documents', { count: data.length });
logImEXEvent("imexmobile_upload_documents", { count: data.length });
if (data.length !== 0) setUploads(data);
};
const widgetErrors = useMemo(
() => ({
errorTextColor: 'black',
errorTextColor: "black",
errorMessages: {
hasErrorWithPermissions: 'Please Allow media gallery permissions.',
hasErrorWithLoading: 'There was an error while loading images.',
hasErrorWithResizing: 'There was an error while loading images.',
hasNoAssets: 'No images found.',
hasErrorWithPermissions: "Please Allow media gallery permissions.",
hasErrorWithLoading: "There was an error while loading images.",
hasErrorWithResizing: "There was an error while loading images.",
hasNoAssets: "No images found.",
},
}),
[]
@@ -78,28 +78,28 @@ export function ImageBrowserScreen({
width: 50,
compress: 0.7,
base64: false,
saveTo: 'jpeg',
saveTo: "jpeg",
}),
[]
);
const _textStyle = {
color: 'white',
color: "white",
};
const _buttonStyle = {
backgroundColor: 'orange',
backgroundColor: "orange",
borderRadius: 5,
};
const widgetNavigator = useMemo(
() => ({
Texts: {
finish: t('mediabrowser.actions.upload'),
back: t('mediabrowser.actions.refresh'),
selected: 'selected',
finish: t("mediabrowser.actions.upload"),
back: t("mediabrowser.actions.refresh"),
selected: "selected",
},
midTextColor: 'black',
midTextColor: "black",
minSelection: 1,
buttonTextStyle: styles.textStyle,
buttonStyle: styles.buttonStyle,
@@ -114,20 +114,20 @@ export function ImageBrowserScreen({
const widgetStyles = useMemo(
() => ({
margin: 2,
bgColor: 'white',
spinnerColor: 'blue',
bgColor: "white",
spinnerColor: "blue",
widgetWidth: 99,
videoIcon: {
Component: Ionicons,
iconName: 'videocam',
color: 'white',
iconName: "videocam",
color: "white",
size: 20,
},
selectedIcon: {
Component: Ionicons,
iconName: 'checkmark-circle-outline',
color: 'white',
bg: 'rgba(35,35,35, 0.75)',
iconName: "checkmark-circle-outline",
color: "white",
bg: "rgba(35,35,35, 0.75)",
size: 32,
},
}),
@@ -139,7 +139,7 @@ export function ImageBrowserScreen({
<CameraSelectJob />
{bodyshop.uselocalmediaserver ? (
<Text style={{ margin: 10 }}>
{t('mediabrowser.labels.localserver', {
{t("mediabrowser.labels.localserver", {
url: bodyshop.localmediaserverhttp,
})}
</Text>
@@ -161,11 +161,11 @@ export function ImageBrowserScreen({
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
justifyContent: "center",
alignItems: "center",
}}
>
<Text>{t('mediabrowser.labels.selectjobassetselector')}</Text>
<Text>{t("mediabrowser.labels.selectjobassetselector")}</Text>
</View>
)}
{selectedCameraJobId && (
@@ -179,7 +179,7 @@ export function ImageBrowserScreen({
/>
)}
{bodyshop.uselocalmediaserver ? (
<LocalUploadProgress
<UploadProgressLocal
uploads={uploads}
setUploads={setUploads}
forceRerender={forceRerender}
@@ -200,7 +200,7 @@ const styles = StyleSheet.create({
flex: 1,
},
container: {
display: 'flex',
display: "flex",
// position: "relative",
},
buttonStyle: {
@@ -208,7 +208,7 @@ const styles = StyleSheet.create({
},
// eslint-disable-next-line react-native/no-color-literals
textStyle: {
color: 'dodgerblue',
color: "dodgerblue",
},
});

0
components/local-upload-progress/local-upload-progress.component.jsx → components/upload-progress-local/upload-progress-local.component.jsx
View File

98
components/upload-progress/upload-progress.component.jsx
View File

@@ -1,8 +1,8 @@
import { useApolloClient } from '@apollo/client';
import * as FileSystem from 'expo-file-system';
import * as MediaLibrary from 'expo-media-library';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useApolloClient } from "@apollo/client";
import * as FileSystem from "expo-file-system";
import * as MediaLibrary from "expo-media-library";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
ActivityIndicator,
Alert,
@@ -11,23 +11,23 @@ import {
StyleSheet,
Text,
View,
} from 'react-native';
import { Divider, ProgressBar } from 'react-native-paper';
import Toast from 'react-native-toast-message';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import * as Sentry from '@sentry/react-native';
import { logImEXEvent } from '../../firebase/firebase.analytics';
import { GET_DOC_SIZE_TOTALS } from '../../graphql/documents.queries';
} from "react-native";
import { Divider, ProgressBar } from "react-native-paper";
import Toast from "react-native-toast-message";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import * as Sentry from "@sentry/react-native";
import { logImEXEvent } from "../../firebase/firebase.analytics";
import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
import {
selectCurrentCameraJobId,
selectDeleteAfterUpload,
} from '../../redux/app/app.selectors';
} from "../../redux/app/app.selectors";
import {
selectBodyshop,
selectCurrentUser,
} from '../../redux/user/user.selectors';
import { formatBytes, handleUpload } from '../../util/document-upload.utility';
} from "../../redux/user/user.selectors";
import { formatBytes, handleUpload } from "../../util/document-upload.utility";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
@@ -110,10 +110,10 @@ export function UploadProgress({
});
}
function handleOnError(error) {
logImEXEvent('imexmobile_upload_documents_error', { error });
logImEXEvent("imexmobile_upload_documents_error", { error });
Toast.show({
type: 'error',
text1: 'Unable to upload document.',
type: "error",
text1: "Unable to upload document.",
text2: error,
autoHide: false,
});
@@ -124,7 +124,7 @@ export function UploadProgress({
return {
...progress,
uploadInProgress: true,
statusText: 'Preparing upload...',
statusText: "Preparing upload...",
};
});
@@ -138,10 +138,10 @@ export function UploadProgress({
return (await acc) + info.size;
}, 0);
if (selectedCameraJobId !== 'temp') {
if (selectedCameraJobId !== "temp") {
const queryData = await client.query({
query: GET_DOC_SIZE_TOTALS,
fetchPolicy: 'network-only',
fetchPolicy: "network-only",
variables: {
jobId: selectedCameraJobId,
},
@@ -161,8 +161,8 @@ export function UploadProgress({
uploadInProgress: false,
}));
Alert.alert(
t('mediabrowser.labels.storageexceeded_title'),
t('mediabrowser.labels.storageexceeded')
t("mediabrowser.labels.storageexceeded_title"),
t("mediabrowser.labels.storageexceeded")
);
return;
}
@@ -203,14 +203,13 @@ export function UploadProgress({
//Everything is uploaded, delete the succesful ones.
if (deleteAfterUpload) {
try {
console.log('Trying to Delete', filesToDelete);
if (Platform.OS === 'android') {
if (Platform.OS === "android") {
//Create a new asset with the first file to delete.
// console.log('Trying new delete.');
await MediaLibrary.getPermissionsAsync(false);
const album = await MediaLibrary.createAlbumAsync(
'ImEX Mobile Deleted',
"ImEX Mobile Deleted",
filesToDelete.pop(),
false
);
@@ -231,13 +230,13 @@ export function UploadProgress({
await MediaLibrary.deleteAssetsAsync(filesToDelete.map((f) => f.id));
}
} catch (error) {
console.log('Unable to delete picture.', error);
console.log("Unable to delete picture.", error);
Sentry.Native.captureException(error);
}
}
filesToDelete = [];
Toast.show({
type: 'success',
type: "success",
text1: ` Upload completed.`,
//
// text2: duration,
@@ -269,22 +268,23 @@ export function UploadProgress({
},
{
bodyshop: bodyshop,
jobId: selectedCameraJobId !== 'temp' ? selectedCameraJobId : null,
jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
uploaded_by: currentUser.email,
photo: p,
}
},
bodyshop.localmediatoken === "imgproxy" ? "imgproxy" : "" //Choose which destination to use.
);
};
return (
<Modal
visible={progress.uploadInProgress}
animationType='slide'
animationType="slide"
transparent={true}
onRequestClose={() => {
Alert.alert('Cancel?', 'Do you want to abort the upload?', [
Alert.alert("Cancel?", "Do you want to abort the upload?", [
{
text: 'Yes',
text: "Yes",
onPress: () => {
setUploads(null);
setProgress({
@@ -299,7 +299,7 @@ export function UploadProgress({
});
},
},
{ text: 'No' },
{ text: "No" },
]);
}}
>
@@ -314,13 +314,13 @@ export function UploadProgress({
<ProgressBar
progress={progress.files[key].percent}
style={styles.progress}
color={progress.files[key].percent === 1 ? 'green' : 'blue'}
color={progress.files[key].percent === 1 ? "green" : "blue"}
/>
<View
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<Text>{`${formatBytes(
@@ -362,19 +362,19 @@ export function UploadProgress({
}
const styles = StyleSheet.create({
modalContainer: {
display: 'flex',
display: "flex",
flex: 1,
justifyContent: 'center',
justifyContent: "center",
},
modal: {
//flex: 1,
display: 'flex',
display: "flex",
marginLeft: 20,
marginRight: 20,
backgroundColor: 'white',
backgroundColor: "white",
borderRadius: 20,
padding: 18,
shadowColor: '#000',
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
@@ -384,14 +384,14 @@ const styles = StyleSheet.create({
elevation: 5,
},
centeredView: {
justifyContent: 'center',
alignItems: 'center',
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
progressItem: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
display: "flex",
flexDirection: "row",
alignItems: "center",
marginBottom: 12,
marginLeft: 12,
marginRight: 12,