From 1cda8579a5c80ef2885b0b471bb42e1e6f6c25ed Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Mon, 8 Feb 2021 21:39:30 -0800 Subject: [PATCH] Added job select & safe view to camera. --- App.js | 10 +- babel-translations.babel | 47 +++++++ .../camera-select-job.component.jsx | 5 +- components/screen-camera/screen-camera.jsx | 15 +- .../screen-main/screen-main.component.jsx | 7 +- .../screen-media-cache.component.jsx | 129 +++++++++--------- package-lock.json | 9 ++ package.json | 3 +- translations/en-US/common.json | 4 + translations/es-MX/common.json | 4 + translations/fr-CA/common.json | 4 + 11 files changed, 155 insertions(+), 82 deletions(-) diff --git a/App.js b/App.js index 4adc3a4..f55182a 100644 --- a/App.js +++ b/App.js @@ -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 { - + - + diff --git a/babel-translations.babel b/babel-translations.babel index 995b4d5..86eecca 100644 --- a/babel-translations.babel +++ b/babel-translations.babel @@ -1018,6 +1018,53 @@ mediacache + + actions + + + deleteall + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + uploadall + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + titles diff --git a/components/camera-select-job/camera-select-job.component.jsx b/components/camera-select-job/camera-select-job.component.jsx index d793e35..3f2e5f1 100644 --- a/components/camera-select-job/camera-select-job.component.jsx +++ b/components/camera-select-job/camera-select-job.component.jsx @@ -41,13 +41,10 @@ export function CameraSelectJob({ if (loading) return ; if (error) return ; + console.log("Picker Render"); return ( { (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, diff --git a/components/screen-main/screen-main.component.jsx b/components/screen-main/screen-main.component.jsx index dd55b26..26ceb3c 100644 --- a/components/screen-main/screen-main.component.jsx +++ b/components/screen-main/screen-main.component.jsx @@ -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 }) => ( - + ); diff --git a/components/screen-media-cache/screen-media-cache.component.jsx b/components/screen-media-cache/screen-media-cache.component.jsx index 6b1563c..00018ac 100644 --- a/components/screen-media-cache/screen-media-cache.component.jsx +++ b/components/screen-media-cache/screen-media-cache.component.jsx @@ -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 ( - - - - - - {`${photos.length} Photos`} - item.id} - numColumns={5} - renderItem={(object) => - object.item.video ? ( - Video - ) : ( - { - setImgIndex(object.index); - setPreviewVisible(true); - }} - > - - - ) - } - /> - - + + + + + + item.id} + numColumns={4} + renderItem={(object) => + object.item.video ? ( + Video + ) : ( + { + setImgIndex(object.index); + setPreviewVisible(true); + }} + > + + + ) + } + /> + + {`${photos.length} Photos`} ); } @@ -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", }, }); diff --git a/package-lock.json b/package-lock.json index 59707da..702e0ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 3ed0dd6..3e1ae13 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/translations/en-US/common.json b/translations/en-US/common.json index ae22691..c284e86 100644 --- a/translations/en-US/common.json +++ b/translations/en-US/common.json @@ -73,6 +73,10 @@ } }, "mediacache": { + "actions": { + "deleteall": "Delete All", + "uploadall": "Upload All" + }, "titles": { "mediacachetab": "Media" } diff --git a/translations/es-MX/common.json b/translations/es-MX/common.json index bcab7d5..eac291d 100644 --- a/translations/es-MX/common.json +++ b/translations/es-MX/common.json @@ -73,6 +73,10 @@ } }, "mediacache": { + "actions": { + "deleteall": "", + "uploadall": "" + }, "titles": { "mediacachetab": "" } diff --git a/translations/fr-CA/common.json b/translations/fr-CA/common.json index dca7ae7..4519d5a 100644 --- a/translations/fr-CA/common.json +++ b/translations/fr-CA/common.json @@ -73,6 +73,10 @@ } }, "mediacache": { + "actions": { + "deleteall": "", + "uploadall": "" + }, "titles": { "mediacachetab": "" }