This commit is contained in:
Marc Rousavy 2021-02-19 20:05:02 +01:00
parent ba32595b01
commit c09ee2b8af
3 changed files with 75 additions and 26 deletions

View File

@ -25,6 +25,12 @@ Navigation.registerComponent('Home', () => gestureHandlerRootHOC(App), () => App
Navigation.registerComponent('Media', () => gestureHandlerRootHOC(Media), () => Media);
Navigation.registerComponent('Settings', () => gestureHandlerRootHOC(Settings), () => Settings);
Navigation.events().registerNavigationButtonPressedListener((event) => {
if (event.buttonId === "back") {
Navigation.pop(event.componentId);
}
});
Navigation.events().registerAppLaunchedListener(async () => {
const [cameraPermission, microphonePermission] = await Promise.all([
Camera.getCameraPermissionStatus(),

View File

@ -171,6 +171,9 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
const onNightModePressed = useCallback(() => {
setEnableNightMode((n) => !n);
}, []);
const onSettingsPressed = useCallback(() => {
Navigation.push(componentId, { component: { name: 'Settings' } })
}, [componentId]);
//#endregion
//#region Tap Gesture
@ -245,6 +248,13 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
});
//#endregion
if (device != null && format != null) {
console.log(`Re-rendering camera page with ${isActive ? "active" : "inactive"} camera. `
+ `Device: "${device.name}" (${format.photoWidth}x${format.photoHeight} @ ${fps}fps)`);
} else {
console.log(`re-rendering camera page without active camera`);
}
// TODO: Implement camera flipping (back <-> front) while recording and stich the videos together
// TODO: iOS: Use custom video data stream output to manually process the data and write the MOV/MP4 for more customizability.
return (
@ -255,24 +265,24 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
<TapGestureHandler
onHandlerStateChange={onDoubleTapGesture}
numberOfTaps={2}>
<ReanimatedCamera
ref={camera}
style={StyleSheet.absoluteFill}
device={device}
format={format}
fps={fps}
hdr={enableHdr}
lowLightBoost={
device.supportsLowLightBoost && enableNightMode
}
isActive={isActive}
onInitialized={onInitialized}
onError={onError}
enableZoomGesture={false}
// TODO: Remove once https://github.com/software-mansion/react-native-reanimated/pull/1697 gets merged
// @ts-expect-error animatedProps should be Partial<P>
animatedProps={cameraAnimatedProps}
/>
<ReanimatedCamera
ref={camera}
style={StyleSheet.absoluteFill}
device={device}
format={format}
fps={fps}
hdr={enableHdr}
lowLightBoost={
device.supportsLowLightBoost && enableNightMode
}
isActive={isActive}
onInitialized={onInitialized}
onError={onError}
enableZoomGesture={false}
// TODO: Remove once https://github.com/software-mansion/react-native-reanimated/pull/1697 gets merged
// @ts-expect-error animatedProps should be Partial<P>
animatedProps={cameraAnimatedProps}
/>
</TapGestureHandler>
</Reanimated.View>
</PinchGestureHandler>
@ -336,6 +346,13 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
/>
</PressableOpacity>
)}
<PressableOpacity style={styles.button} onPress={onSettingsPressed}>
<IonIcon
name="settings-outline"
color="white"
size={24}
/>
</PressableOpacity>
</View>
</View>
);

View File

@ -1,16 +1,36 @@
import React from 'react';
import React, { useCallback } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { StyleSheet, View, Text, Linking } from 'react-native';
import type { NavigationFunctionComponent } from 'react-native-navigation';
export const Settings: NavigationFunctionComponent = ({ componentId }) => {
export const Settings: NavigationFunctionComponent = () => {
const onCuventPressed = useCallback(() => {
Linking.openURL('https://cuvent.com')
}, []);
return (
<View style={styles.container}>
<Text>powered by Cuvent</Text>
<Text style={styles.aboutText}>Vision Camera is powered by{" "}
<Text style={styles.hyperlink} onPress={onCuventPressed}>Cuvent</Text>.
</Text>
</View>
);
}
Settings.options = {
topBar: {
visible: true,
title: {
text: 'Settings'
},
backButton: {
id: 'back',
showTitle: true,
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
@ -18,9 +38,15 @@ const styles = StyleSheet.create({
justifyContent: 'center',
backgroundColor: 'white',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
aboutText: {
fontSize: 14,
fontWeight: 'bold',
color: '#A9A9A9',
maxWidth: '50%',
textAlign: 'center',
},
hyperlink: {
color: '#007aff',
fontWeight: 'bold',
},
});