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

added camera controls component and updated camera ui

Browse Source
This commit is contained in:
Patrick Fic
2020-11-12 21:45:57 -08:00
parent e31f621a8f
commit 79ec14fe53
6 changed files with 203 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
components/screen-camera/screen-camera.component.jsx
View File

@@ -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,56 +151,34 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
</Text>
<Text>{cameraJobId}</Text>
</TouchableOpacity>
<View
<TouchableOpacity
onPress={() => {
navigation.push("MediaCache");
}}
style={{
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
margin: 20,
alignSelf: "flex-start",
alignItems: "center",
fontSize: 20,
fontWeight: "bold",
}}
>
<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",
alignItems: "center",
backgroundColor: "transparent",
}}
>
<Ionicons
name="ios-photos"
style={{ color: "#fff", fontSize: 40 }}
/>
</TouchableOpacity>
</View>
<Ionicons
name="ios-photos"
style={{ color: "#fff", fontSize: 40 }}
/>
</TouchableOpacity>
<CameraControls
capturing={capturing}
flashMode={flashMode}
cameraType={cameraType}
setFlashMode={setFlashMode}
setCameraType={setCameraType}
onCaptureIn={handleCaptureIn}
onCaptureOut={handleCaptureOut}
onLongCapture={handleLongCapture}
onShortCapture={handleShortCapture}
/>
</SafeAreaView>
</Camera>
</View>