111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { StyleSheet, View, Text, Linking } from 'react-native';
|
|
import { Navigation, NavigationFunctionComponent } from 'react-native-navigation';
|
|
import Slider from '@react-native-community/slider';
|
|
import { useState } from 'react';
|
|
import { useEffect } from 'react';
|
|
import { Camera } from 'react-native-vision-camera';
|
|
import { SAFE_AREA_PADDING } from './Constants';
|
|
import { useSelector } from 'pipestate';
|
|
import { FpsSelector } from './state/selectors';
|
|
|
|
export const Settings: NavigationFunctionComponent = ({ componentId }) => {
|
|
const [fpsSelector, setFpsSelector] = useSelector(FpsSelector);
|
|
const [fps, setFps] = useState(fpsSelector);
|
|
|
|
const [minFps, setMinFps] = useState<number>();
|
|
const [maxFps, setMaxFps] = useState<number>();
|
|
|
|
const onCuventPressed = useCallback(() => {
|
|
Linking.openURL('https://cuvent.com');
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const loadFormats = async (): Promise<void> => {
|
|
const devices = await Camera.getAvailableCameraDevices();
|
|
const formats = devices.flatMap((d) => d.formats);
|
|
let max = 0,
|
|
min = 0;
|
|
formats.forEach((format) => {
|
|
const frameRates = format.frameRateRanges.map((f) => f.maxFrameRate).sort((left, right) => left - right);
|
|
const highest = frameRates[frameRates.length - 1] as number;
|
|
const lowest = frameRates[0] as number;
|
|
if (highest > max) max = highest;
|
|
if (lowest < min) min = lowest;
|
|
});
|
|
setMaxFps(max);
|
|
setMinFps(min);
|
|
};
|
|
loadFormats();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const listener = Navigation.events().registerScreenPoppedListener((event) => {
|
|
if (event.componentId === componentId) setFpsSelector(Math.round(fps));
|
|
});
|
|
return () => {
|
|
listener.remove();
|
|
};
|
|
}, [componentId, fps, setFpsSelector]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.vControl}>
|
|
<Text>Frame Rate (FPS): {Math.round(fps)}</Text>
|
|
{minFps != null && maxFps != null && <Slider minimumValue={minFps} maximumValue={maxFps} value={fps} onValueChange={setFps} />}
|
|
</View>
|
|
|
|
<View style={styles.spacer} />
|
|
|
|
<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,
|
|
alignItems: 'stretch',
|
|
justifyContent: 'center',
|
|
backgroundColor: 'white',
|
|
...SAFE_AREA_PADDING,
|
|
},
|
|
aboutText: {
|
|
alignSelf: 'center',
|
|
fontSize: 14,
|
|
fontWeight: 'bold',
|
|
color: '#A9A9A9',
|
|
maxWidth: '50%',
|
|
textAlign: 'center',
|
|
},
|
|
hyperlink: {
|
|
color: '#007aff',
|
|
fontWeight: 'bold',
|
|
},
|
|
vControl: {
|
|
width: '100%',
|
|
},
|
|
spacer: {
|
|
flex: 1,
|
|
},
|
|
});
|