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

47
babel-translations.babel
View File

@@ -1018,6 +1018,53 @@
<folder_node> <folder_node>
<name>mediacache</name> <name>mediacache</name>
<children> <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> <folder_node>
<name>titles</name> <name>titles</name>
<children> <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 (loading) return <LoadingDisplay />;
if (error) return <ErrorDisplay errorMessage={error.message} />; if (error) return <ErrorDisplay errorMessage={error.message} />;
console.log("Picker Render");
return ( return (
<View <View
style={{ style={{
// display: "flex",
// width: "100%",
// alignSelf: "flex-start",
// alignItems: "center",
backgroundColor: "rgba(35,35,35, 0.4)", backgroundColor: "rgba(35,35,35, 0.4)",
paddingTop: 30, paddingTop: 30,
//textShadow: "tomato 0px 0px 10px", //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(() => { useEffect(() => {
(async () => { (async () => {
const { status } = await Camera.requestPermissionsAsync(); const { status: cameraStatus } = await Camera.requestPermissionsAsync();
setHasPermission(status === "granted"); setHasPermission(cameraStatus === "granted");
console.log("Camera Perms:", await Camera.getPermissionsAsync());
})(); })();
}, []); }, []);
@@ -68,7 +70,6 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
skipProcessing: true, skipProcessing: true,
}; };
console.log("Taking a picture!");
let photo = await cameraRef.current.takePictureAsync(options); let photo = await cameraRef.current.takePictureAsync(options);
const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1); const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1);
const newUri = FileSystem.documentDirectory + "photos/" + filename; const newUri = FileSystem.documentDirectory + "photos/" + filename;
@@ -78,7 +79,13 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
to: newUri, to: newUri,
}); });
setState({ ...state, capturing: false }); 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({ addPhoto({
...photo, ...photo,
id: filename, 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 React, { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { StatusBar as rnStatusBar, StyleSheet } from "react-native"; import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { import {
@@ -102,7 +101,11 @@ const CameraStackNavigator = ({ navigation }) => (
const MediaCacheStackNavigator = ({ navigation }) => ( const MediaCacheStackNavigator = ({ navigation }) => (
<CameraStack.Navigator initialRouteName="TabMediaCache"> <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> </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 { import {
Button, FlatList,
Container, Image,
Content, StyleSheet,
Spinner, Text,
Text as NBText, TouchableOpacity,
Thumbnail, } from "react-native";
View,
} from "native-base";
import React, { useEffect, useState } from "react";
import { FlatList, StyleSheet, Text, TouchableOpacity } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { import {
@@ -37,63 +35,61 @@ export function ScreenMediaCache({
uploadAllphotos, uploadAllphotos,
uploadInProgress, uploadInProgress,
}) { }) {
const { t } = useTranslation();
const [previewVisible, setPreviewVisible] = useState(false); const [previewVisible, setPreviewVisible] = useState(false);
const [imgIndex, setImgIndex] = useState(0); const [imgIndex, setImgIndex] = useState(0);
const [imagesInDir, setImagesInDir] = useState([]); const [imagesInDir, setImagesInDir] = useState([]);
useEffect(() => { console.log("Photos", photos);
const check = async () => {
setImagesInDir(
await FileSystem.readDirectoryAsync(
FileSystem.documentDirectory + "photos"
)
);
};
photos.length;
check();
}, [photos]);
console.log("upinprog", uploadInProgress);
return ( return (
<Container> <Container>
<Content> <View style={styles.actions}>
<View style={styles.actions}> <Button onPress={() => removeAllPhotos()}>
<Button onPress={() => removeAllPhotos()}> <NBText>{t("mediacache.actions.deleteall")}</NBText>
<NBText>Delete all</NBText> </Button>
</Button> <Button onPress={() => uploadAllphotos()}>
<Button onPress={() => uploadAllphotos()}> <NBText>{t("mediacache.actions.uploadall")}</NBText>
<NBText>Upload all </NBText> {uploadInProgress && <Spinner />}
{uploadInProgress && <Spinner />} </Button>
</Button> </View>
</View>
<Text>{`${photos.length} Photos`}</Text> <FlatList
<FlatList data={photos}
data={photos} style={{ flex: 1 }}
style={{ flex: 5 }} contentContainerStyle={styles.listContentContainer}
contentContainerStyle={styles.listContentContainer} keyExtractor={(item) => item.id}
keyExtractor={(item) => item.id} numColumns={4}
numColumns={5} renderItem={(object) =>
renderItem={(object) => object.item.video ? (
object.item.video ? ( <Text>Video</Text>
<Text>Video</Text> ) : (
) : ( <TouchableOpacity
<TouchableOpacity style={{
onPress={() => { flex: 1 / 4, //here you can use flex:1 also
setImgIndex(object.index); aspectRatio: 1,
setPreviewVisible(true); }}
}} onPress={() => {
> setImgIndex(object.index);
<Thumbnail square large source={{ uri: object.item.uri }} /> setPreviewVisible(true);
</TouchableOpacity> }}
) >
} <Image
/> source={{ uri: object.item.uri }}
<MediaCacheOverlay style={{ flex: 1 }}
imgIndex={imgIndex} resizeMode="cover"
setImgIndex={setImgIndex} />
previewVisible={previewVisible} </TouchableOpacity>
setPreviewVisible={setPreviewVisible} )
/> }
</Content> />
<MediaCacheOverlay
imgIndex={imgIndex}
setImgIndex={setImgIndex}
previewVisible={previewVisible}
setPreviewVisible={setPreviewVisible}
/>
<Text>{`${photos.length} Photos`}</Text>
</Container> </Container>
); );
} }
@@ -108,12 +104,9 @@ const styles = StyleSheet.create({
justifyContent: "space-evenly", justifyContent: "space-evenly",
}, },
listContentContainer: { listContentContainer: {
flex: 1, //flex: 1,
}, justifyContent: "flex-start",
thumbnail: { //flexDirection: "row",
width: 10,
height: 10,
// backgroundColor: "tomato",
}, },
}); });

9
package-lock.json generated
View File

@@ -5781,6 +5781,15 @@
"url-parse": "^1.4.4" "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": { "expo-camera": {
"version": "9.1.1", "version": "9.1.1",
"resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-9.1.1.tgz", "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", "redux-saga": "^1.1.3",
"reselect": "^4.0.0", "reselect": "^4.0.0",
"sentry-expo": "^3.0.4", "sentry-expo": "^3.0.4",
"subscriptions-transport-ws": "^0.9.18" "subscriptions-transport-ws": "^0.9.18",
"expo-av": "~8.7.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.13", "@babel/core": "^7.12.13",

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

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

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

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

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

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