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

Added job select & safe view to camera.

Browse Source
This commit is contained in:
Patrick Fic
2021-02-08 21:39:30 -08:00
parent 3a0c8b9a5a
commit 1cda8579a5
11 changed files with 155 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
App.js
View File

@@ -4,7 +4,11 @@ import AppLoading from "expo-app-loading";
import * as FileSystem from "expo-file-system";
import * as Font from "expo-font";
import React from "react";
import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
import {
SafeAreaView,
StatusBar as rnStatusBar,
StyleSheet,
} from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
@@ -56,9 +60,9 @@ export default class App extends React.Component {
<Provider store={store}>
<PersistGate persistor={persistor}>
<ApolloProvider client={client}>
<SafeAreaProvider>
<SafeAreaView style={{ flex: 1, backgroundColor: "dodgerblue" }}>
<ScreenMainComponent />
</SafeAreaProvider>
</SafeAreaView>
</ApolloProvider>
</PersistGate>
</Provider>

47
babel-translations.babel
View File

@@ -1018,6 +1018,53 @@
<folder_node>
<name>mediacache</name>
<children>
<folder_node>
<name>actions</name>
<children>
<concept_node>
<name>deleteall</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>uploadall</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
<name>titles</name>
<children>

5
components/camera-select-job/camera-select-job.component.jsx
View File

@@ -41,13 +41,10 @@ export function CameraSelectJob({
if (loading) return <LoadingDisplay />;
if (error) return <ErrorDisplay errorMessage={error.message} />;
console.log("Picker Render");
return (
<View
style={{
// display: "flex",
// width: "100%",
// alignSelf: "flex-start",
// alignItems: "center",
backgroundColor: "rgba(35,35,35, 0.4)",
paddingTop: 30,
//textShadow: "tomato 0px 0px 10px",

15
components/screen-camera/screen-camera.jsx
View File

@@ -47,8 +47,10 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === "granted");
const { status: cameraStatus } = await Camera.requestPermissionsAsync();
setHasPermission(cameraStatus === "granted");
console.log("Camera Perms:", await Camera.getPermissionsAsync());
})();
}, []);
@@ -68,7 +70,6 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
skipProcessing: true,
};
console.log("Taking a picture!");
let photo = await cameraRef.current.takePictureAsync(options);
const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1);
const newUri = FileSystem.documentDirectory + "photos/" + filename;
@@ -78,7 +79,13 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
to: newUri,
});
setState({ ...state, capturing: false });
console.log("Adding photo to cache...");
console.log("Add Photo Object", {
...photo,
id: filename,
uri: newUri,
jobId: cameraJobId,
video: false,
});
addPhoto({
...photo,
id: filename,

7
components/screen-main/screen-main.component.jsx
View File

@@ -8,7 +8,6 @@ import i18n from "i18next";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
@@ -102,7 +101,11 @@ const CameraStackNavigator = ({ navigation }) => (
const MediaCacheStackNavigator = ({ navigation }) => (
<CameraStack.Navigator initialRouteName="TabMediaCache">
<CameraStack.Screen name="MediaCache" component={ScreenMediaCache} />
<CameraStack.Screen
name="MediaCache"
options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
component={ScreenMediaCache}
/>
</CameraStack.Navigator>
);

129
components/screen-media-cache/screen-media-cache.component.jsx
View File

@@ -1,15 +1,13 @@
import * as FileSystem from "expo-file-system";
import { Button, Container, Spinner, Text as NBText, View } from "native-base";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import {
Button,
Container,
Content,
Spinner,
Text as NBText,
Thumbnail,
View,
} from "native-base";
import React, { useEffect, useState } from "react";
import { FlatList, StyleSheet, Text, TouchableOpacity } from "react-native";
FlatList,
Image,
StyleSheet,
Text,
TouchableOpacity,
} from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
@@ -37,63 +35,61 @@ export function ScreenMediaCache({
uploadAllphotos,
uploadInProgress,
}) {
const { t } = useTranslation();
const [previewVisible, setPreviewVisible] = useState(false);
const [imgIndex, setImgIndex] = useState(0);
const [imagesInDir, setImagesInDir] = useState([]);
useEffect(() => {
const check = async () => {
setImagesInDir(
await FileSystem.readDirectoryAsync(
FileSystem.documentDirectory + "photos"
)
);
};
photos.length;
check();
}, [photos]);
console.log("upinprog", uploadInProgress);
console.log("Photos", photos);
return (
<Container>
<Content>
<View style={styles.actions}>
<Button onPress={() => removeAllPhotos()}>
<NBText>Delete all</NBText>
</Button>
<Button onPress={() => uploadAllphotos()}>
<NBText>Upload all </NBText>
{uploadInProgress && <Spinner />}
</Button>
</View>
<Text>{`${photos.length} Photos`}</Text>
<FlatList
data={photos}
style={{ flex: 5 }}
contentContainerStyle={styles.listContentContainer}
keyExtractor={(item) => item.id}
numColumns={5}
renderItem={(object) =>
object.item.video ? (
<Text>Video</Text>
) : (
<TouchableOpacity
onPress={() => {
setImgIndex(object.index);
setPreviewVisible(true);
}}
>
<Thumbnail square large source={{ uri: object.item.uri }} />
</TouchableOpacity>
)
}
/>
<MediaCacheOverlay
imgIndex={imgIndex}
setImgIndex={setImgIndex}
previewVisible={previewVisible}
setPreviewVisible={setPreviewVisible}
/>
</Content>
<View style={styles.actions}>
<Button onPress={() => removeAllPhotos()}>
<NBText>{t("mediacache.actions.deleteall")}</NBText>
</Button>
<Button onPress={() => uploadAllphotos()}>
<NBText>{t("mediacache.actions.uploadall")}</NBText>
{uploadInProgress && <Spinner />}
</Button>
</View>
<FlatList
data={photos}
style={{ flex: 1 }}
contentContainerStyle={styles.listContentContainer}
keyExtractor={(item) => item.id}
numColumns={4}
renderItem={(object) =>
object.item.video ? (
<Text>Video</Text>
) : (
<TouchableOpacity
style={{
flex: 1 / 4, //here you can use flex:1 also
aspectRatio: 1,
}}
onPress={() => {
setImgIndex(object.index);
setPreviewVisible(true);
}}
>
<Image
source={{ uri: object.item.uri }}
style={{ flex: 1 }}
resizeMode="cover"
/>
</TouchableOpacity>
)
}
/>
<MediaCacheOverlay
imgIndex={imgIndex}
setImgIndex={setImgIndex}
previewVisible={previewVisible}
setPreviewVisible={setPreviewVisible}
/>
<Text>{`${photos.length} Photos`}</Text>
</Container>
);
}
@@ -108,12 +104,9 @@ const styles = StyleSheet.create({
justifyContent: "space-evenly",
},
listContentContainer: {
flex: 1,
},
thumbnail: {
width: 10,
height: 10,
// backgroundColor: "tomato",
//flex: 1,
justifyContent: "flex-start",
//flexDirection: "row",
},
});

9
package-lock.json generated
View File

@@ -5781,6 +5781,15 @@
"url-parse": "^1.4.4"
}
},
"expo-av": {
"version": "8.7.0",
"resolved": "https://registry.npmjs.org/expo-av/-/expo-av-8.7.0.tgz",
"integrity": "sha512-tYw0z//UZm9THicOsu4w0A7Olq/JauTy7kcBR15Fhyppd9wd8Jtq7QYNtf2igd1R+byS2L0AGwE0nazlbQR+Qw==",
"requires": {
"lodash": "^4.17.15",
"nullthrows": "^1.1.0"
}
},
"expo-camera": {
"version": "9.1.1",
"resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-9.1.1.tgz",

3
package.json
View File

@@ -55,7 +55,8 @@
"redux-saga": "^1.1.3",
"reselect": "^4.0.0",
"sentry-expo": "^3.0.4",
"subscriptions-transport-ws": "^0.9.18"
"subscriptions-transport-ws": "^0.9.18",
"expo-av": "~8.7.0"
},
"devDependencies": {
"@babel/core": "^7.12.13",

4
translations/en-US/common.json
View File

@@ -73,6 +73,10 @@
}
},
"mediacache": {
"actions": {
"deleteall": "Delete All",
"uploadall": "Upload All"
},
"titles": {
"mediacachetab": "Media"
}

4
translations/es-MX/common.json
View File

@@ -73,6 +73,10 @@
}
},
"mediacache": {
"actions": {
"deleteall": "",
"uploadall": ""
},
"titles": {
"mediacachetab": ""
}

4
translations/fr-CA/common.json
View File

@@ -73,6 +73,10 @@
}
},
"mediacache": {
"actions": {
"deleteall": "",
"uploadall": ""
},
"titles": {
"mediacachetab": ""
}