added camera controls component and updated camera ui

2020-11-12 21:45:57 -08:00
parent e31f621a8f
commit 79ec14fe53
6 changed files with 203 additions and 86 deletions
--- a/components/camera-controls/camera-controls.component.jsx
+++ b/components/camera-controls/camera-controls.component.jsx
@@ -0,0 +1,102 @@
+// src/toolbar.component.js file
+import { Ionicons } from "@expo/vector-icons";
+import { Camera } from "expo-camera";
+import React from "react";
+import {
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
+
+const styles = StyleSheet.create({
+  alignCenter: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  bottomToolbar: {
+    marginTop: "auto",
+    height: 100,
+    display: "flex",
+    justifyContent: "space-evenly",
+    alignItems: "center",
+    flexDirection: "row",
+  },
+  captureBtn: {
+    width: 60,
+    height: 60,
+    borderWidth: 2,
+    borderRadius: 60,
+    borderColor: "#FFFFFF",
+  },
+  captureBtnActive: {
+    width: 80,
+    height: 80,
+  },
+  captureBtnInternal: {
+    width: 76,
+    height: 76,
+    borderWidth: 2,
+    borderRadius: 76,
+    backgroundColor: "red",
+    borderColor: "transparent",
+  },
+});
+
+const { FlashMode: CameraFlashModes, Type: CameraTypes } = Camera.Constants;
+
+export default function CameraControls({
+  capturing = false,
+  cameraType = CameraTypes.back,
+  flashMode = CameraFlashModes.off,
+  setFlashMode,
+  setCameraType,
+  onCaptureIn,
+  onCaptureOut,
+  onLongCapture,
+  onShortCapture,
+}) {
+  return (
+    <View style={styles.bottomToolbar}>
+      <TouchableOpacity
+        onPress={() =>
+          setFlashMode(
+            flashMode === CameraFlashModes.on
+              ? CameraFlashModes.off
+              : CameraFlashModes.on
+          )
+        }
+      >
+        <Ionicons
+          name={flashMode == CameraFlashModes.on ? "md-flash" : "md-flash-off"}
+          color="white"
+          size={30}
+        />
+      </TouchableOpacity>
+
+      <TouchableWithoutFeedback
+        onPressIn={onCaptureIn}
+        onPressOut={onCaptureOut}
+        onLongPress={onLongCapture}
+        onPress={onShortCapture}
+      >
+        <View style={[styles.captureBtn, capturing && styles.captureBtnActive]}>
+          {capturing && <View style={styles.captureBtnInternal} />}
+        </View>
+      </TouchableWithoutFeedback>
+
+      <TouchableOpacity
+        onPress={() =>
+          setCameraType(
+            cameraType === CameraTypes.back
+              ? CameraTypes.front
+              : CameraTypes.back
+          )
+        }
+      >
+        <Ionicons name="md-reverse-camera" color="white" size={30} />
+      </TouchableOpacity>
+    </View>
+  );
+}
--- a/components/job-list-item/job-list-item.component.jsx
+++ b/components/job-list-item/job-list-item.component.jsx
@@ -9,6 +9,7 @@ import Swipeable from "react-native-gesture-handler/Swipeable";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
+import Dinero from "dinero.js";
 import styles from "../styles";

 const mapStateToProps = createStructuredSelector({
@@ -71,7 +72,11 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
          </View>
          <View style={[{ width: 150 }, localStyles.card_content_margin]}>
            <Text numberOfLines={1}>{item.ins_co_nm || ""}</Text>
-            <Text>{item.clm_total || ""}</Text>
+            <Text>
+              {Dinero({
+                amount: Math.round(item.clm_total * 100),
+              }).toFormat() || ""}
+            </Text>
          </View>
        </CardItem>
      </Card>
--- a/components/screen-camera/screen-camera.component.jsx
+++ b/components/screen-camera/screen-camera.component.jsx
@@ -1,12 +1,7 @@
-import {
-  FontAwesome,
-  Ionicons,
-  MaterialCommunityIcons,
-} from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import { Camera } from "expo-camera";
 import * as FileSystem from "expo-file-system";
-import * as Permissions from "expo-permissions";
 import React, { useEffect, useRef, useState } from "react";
 import { SafeAreaView, Text, TouchableOpacity, View } from "react-native";
 import { connect } from "react-redux";
@@ -16,6 +11,7 @@ import {
  selectCurrentCameraJobId,
 } from "../../redux/app/app.selectors";
 import { addPhoto } from "../../redux/photos/photos.actions";
+import CameraControls from "../camera-controls/camera-controls.component";

 const mapStateToProps = createStructuredSelector({
  cameraJobId: selectCurrentCameraJobId,
@@ -28,29 +24,29 @@ const mapDispatchToProps = (dispatch) => ({
 export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
  const navigation = useNavigation();
  const [hasPermission, setHasPermission] = useState(null);
-  const [rollPermision, setRollPermission] = useState(null);
-  const [type, setType] = useState(Camera.Constants.Type.back);
+  const [state, setState] = useState({
+    flashMode: Camera.Constants.FlashMode.off,
+    capturing: null,
+    cameraType: Camera.Constants.Type.back,
+  });
  const cameraRef = useRef(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === "granted");
-      // camera roll
-      const { cam_roll } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
-      setRollPermission(cam_roll === "granted");
    })();
  }, []);

-  const handleCameraType = () => {
-    setType(
-      type === Camera.Constants.Type.back
-        ? Camera.Constants.Type.front
-        : Camera.Constants.Type.back
-    );
+  const setFlashMode = (flashMode) => setState({ ...state, flashMode });
+  const setCameraType = (cameraType) => setState({ ...state, cameraType });
+  const handleCaptureIn = () => setState({ ...state, capturing: true });
+
+  const handleCaptureOut = () => {
+    if (state.capturing) cameraRef.current.stopRecording();
  };

-  const handleTakePicture = async () => {
+  const handleShortCapture = async () => {
    console.log("Taking the picture!");
    if (cameraRef.current) {
      const options = {
@@ -60,6 +56,7 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
      };

      let photo = await cameraRef.current.takePictureAsync(options);
+      setState({ ...state, capturing: false });
      console.log("ScreenCamera -> photo", photo);
      const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1);

@@ -70,24 +67,60 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
        to: newUri,
      });

-      addPhoto({ ...photo, id: filename, uri: newUri, jobId: cameraJobId });
+      addPhoto({
+        ...photo,
+        id: filename,
+        uri: newUri,
+        jobId: cameraJobId,
+        video: false,
+      });
+    }
+  };
+
+  const handleLongCapture = async () => {
+    console.log("Taking a video!");
+    if (cameraRef.current) {
+      let video = await cameraRef.current.recordAsync();
+      setState({ ...state, capturing: false });
+
+      const filename = video.uri.substring(video.uri.lastIndexOf("/") + 1);
+      const newUri = FileSystem.documentDirectory + "photos/" + filename;
+
+      await FileSystem.copyAsync({
+        from: video.uri,
+        to: newUri,
+      });
+
+      addPhoto({
+        ...video,
+        id: filename,
+        uri: newUri,
+        jobId: cameraJobId,
+        video: true,
+      });
    }
  };

  if (hasPermission === null) {
    return <View />;
  }
+
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
+
+  const { hasCameraPermission, flashMode, cameraType, capturing } = state;
+
  return (
    <View style={{ display: "flex", flex: 1 }}>
-      <Camera style={{ flex: 1 }} type={type} ref={cameraRef}>
+      <Camera
+        style={{ flex: 1, display: "flex" }}
+        type={state.cameraType}
+        ref={cameraRef}
+      >
        <SafeAreaView
          style={{
            flex: 1,
-            justifyContent: "space-between",
-            // marginTop: 40,
          }}
        >
          <TouchableOpacity
@@ -118,48 +151,15 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
            </Text>
            <Text>{cameraJobId}</Text>
          </TouchableOpacity>
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "row",
-              justifyContent: "space-between",
-              margin: 20,
-            }}
-          >
-            <TouchableOpacity
-              onPress={handleCameraType}
-              style={{
-                alignSelf: "flex-end",
-                alignItems: "center",
-                backgroundColor: "transparent",
-              }}
-            >
-              <MaterialCommunityIcons
-                name="camera-switch"
-                style={{ color: "#fff", fontSize: 40 }}
-              />
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={handleTakePicture}
-              style={{
-                alignSelf: "flex-end",
-                alignItems: "center",
-                backgroundColor: "transparent",
-              }}
-            >
-              <FontAwesome
-                name="camera"
-                style={{ color: "#fff", fontSize: 40 }}
-              />
-            </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              navigation.push("MediaCache");
            }}
            style={{
-                alignSelf: "flex-end",
+              alignSelf: "flex-start",
              alignItems: "center",
-                backgroundColor: "transparent",
+              fontSize: 20,
+              fontWeight: "bold",
            }}
          >
            <Ionicons
@@ -167,7 +167,18 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
              style={{ color: "#fff", fontSize: 40 }}
            />
          </TouchableOpacity>
-          </View>
+
+          <CameraControls
+            capturing={capturing}
+            flashMode={flashMode}
+            cameraType={cameraType}
+            setFlashMode={setFlashMode}
+            setCameraType={setCameraType}
+            onCaptureIn={handleCaptureIn}
+            onCaptureOut={handleCaptureOut}
+            onLongCapture={handleLongCapture}
+            onShortCapture={handleShortCapture}
+          />
        </SafeAreaView>
      </Camera>
    </View>
--- a/components/screen-media-cache/screen-media-cache.component.jsx
+++ b/components/screen-media-cache/screen-media-cache.component.jsx
@@ -1,11 +1,11 @@
 import { Button, Text as NBText, Thumbnail, View } from "native-base";
 import React from "react";
-import { SafeAreaView, Text } from "react-native";
-
+import { FlatList, SafeAreaView, Text } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { removeAllPhotos } from "../../redux/photos/photos.actions";
 import { selectPhotos } from "../../redux/photos/photos.selectors";
+
 const mapStateToProps = createStructuredSelector({
  photos: selectPhotos,
 });
@@ -22,22 +22,19 @@ export function ScreenMediaCache({ photos, removeAllPhotos }) {
        <NBText>Delete all</NBText>
      </Button>
      <Text>{photos.length}</Text>
-      <View
-        style={{
-          flex: 1,
-          display: "flex",
-          direction: "row",
-          backgroundColor: "tomato",
-        }}
-      >
-        <Text>The View</Text>
-        {photos.map((i, idx) => (
+
+      <FlatList
+        style={{ flex: 1, backgroundColor: "tomato" }}
+        data={photos}
+        keyExtractor={(item) => item.id}
+        renderItem={(object) => (
          <View>
-            <Text>{i.uri}</Text>
-            <Thumbnail square large key={idx} source={{ uri: i.uri }} />
-          </View>
-        ))}
+            <Text>{object.item.uri}</Text>
+            <Thumbnail square large source={{ uri: object.item.uri }} />
          </View>
+        )}
+        //ItemSeparatorComponent={FlatListItemSeparator}
+      />
    </SafeAreaView>
  );
 }
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
    "react-dom": "16.13.1",
    "react-i18next": "^11.7.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
+    "react-native-easy-grid": "^0.2.2",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-indicators": "^0.17.0",
    "react-native-reanimated": "~1.13.0",
--- a/redux/photos/photos.sagas.js
+++ b/redux/photos/photos.sagas.js
@@ -1,5 +1,6 @@
 import { all, call, takeLatest } from "redux-saga/effects";
 import PhotosActionTypes from "./photos.types";
+import * as FileSystem from "expo-file-system";

 export function* onRemoveAllPhotos() {
  yield takeLatest(PhotosActionTypes.REMOVE_ALL_PHOTOS, removeAllPhotosAction);