Merge pull request 'Camera Orientation Toggling' (#63) from loewy/camera-orientation-toggle into master
Reviewed-on: railbird/rn-playground#63 Reviewed-by: Ivan Malison <ivanmalison@gmail.com>
This commit is contained in:
commit
3a31135807
@ -1,16 +1,16 @@
|
||||
import React, { useCallback, useRef, useState } from 'react'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError } from 'react-native-vision-camera'
|
||||
import { Button, StyleSheet, Text, View } from 'react-native'
|
||||
import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError, Orientation } from 'react-native-vision-camera'
|
||||
import { RecordingButton } from './capture-button'
|
||||
import { useIsForeground } from './is-foreground'
|
||||
|
||||
export default function CameraScreen(): React.ReactElement {
|
||||
const camera = useRef<Camera>(null)
|
||||
const { hasPermission, requestPermission } = useCameraPermission()
|
||||
const [isCameraInitialized, setIsCameraInitialized] = useState(false)
|
||||
const [isCameraInitialized, setIsCameraInitialized] = useState<boolean>(false)
|
||||
|
||||
const isForeground = useIsForeground()
|
||||
const isActive = isForeground
|
||||
const isForeground: boolean = useIsForeground()
|
||||
const isActive: boolean = isForeground // Should be combined with isFocused hook
|
||||
|
||||
const onError = useCallback((error: CameraRuntimeError) => {
|
||||
console.error(error)
|
||||
@ -37,7 +37,16 @@ export default function CameraScreen(): React.ReactElement {
|
||||
const format = useCameraFormat(device, [
|
||||
{ videoResolution: { width: 3048, height: 2160 } },
|
||||
{ fps: 60 }
|
||||
])
|
||||
]) // this sets as a target
|
||||
|
||||
//Orientation detection
|
||||
const [orientation, setOrientation] = useState<Orientation>('portrait');
|
||||
|
||||
const toggleOrientation = () => {
|
||||
setOrientation(currentOrientation =>
|
||||
currentOrientation === 'landscape-left' ? 'portrait' : 'landscape-left' // Can adjust this and the type to match what we want
|
||||
);
|
||||
};
|
||||
|
||||
if (device === null) {
|
||||
return <Text>Camera not available. Does user have permissions: {hasPermission}</Text>
|
||||
@ -54,18 +63,24 @@ export default function CameraScreen(): React.ReactElement {
|
||||
onInitialized={onInitialized}
|
||||
onError={onError}
|
||||
video={true}
|
||||
photo={false}
|
||||
orientation='portrait' // TODO: #60
|
||||
orientation={orientation} // TODO: #60
|
||||
isActive={isActive}
|
||||
/>
|
||||
<RecordingButton
|
||||
style={styles.captureButton}
|
||||
style={[styles.captureButton, orientation === 'portrait' ? styles.portrait : styles.landscape ]}
|
||||
camera={camera}
|
||||
onMediaCaptured={onMediaCaptured}
|
||||
enabled={isCameraInitialized}
|
||||
/>
|
||||
<View style={[styles.button, orientation === 'portrait' ? styles.togglePortrait : styles.toggleLandscape ]}>
|
||||
<Button
|
||||
title="Toggle Orientation"
|
||||
onPress={toggleOrientation}
|
||||
color="#841584"
|
||||
accessibilityLabel="Toggle camera orientation"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
)
|
||||
)
|
||||
}
|
||||
@ -78,6 +93,24 @@ const styles = StyleSheet.create({
|
||||
captureButton: {
|
||||
position: 'absolute',
|
||||
alignSelf: 'center',
|
||||
bottom: 20, // Should come from SafeAreaProvider
|
||||
},
|
||||
button: {
|
||||
position: 'absolute',
|
||||
alignSelf: 'center',
|
||||
},
|
||||
togglePortrait: {
|
||||
bottom: 110, // needs refined
|
||||
},
|
||||
toggleLandscape: {
|
||||
transform: [{ rotate: '90deg' }],
|
||||
bottom: '43%', // Should come from SafeAreaProvider, hardcoded right now, should roughly appear above the button
|
||||
left: 50 // needs refined
|
||||
},
|
||||
portrait: {
|
||||
bottom: 20 // needs refined
|
||||
},
|
||||
landscape: {
|
||||
bottom: '40%', // Should come from SafeAreaProvider
|
||||
left: 20 // needs refined
|
||||
}
|
||||
})
|
@ -1,10 +1,19 @@
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { TouchableOpacity, StyleSheet, View } from 'react-native';
|
||||
import { TouchableOpacity, StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
|
||||
import { CameraRoll } from "@react-native-camera-roll/camera-roll";
|
||||
import { Camera } from 'react-native-vision-camera/lib/typescript/Camera';
|
||||
import { VideoFile } from 'react-native-vision-camera/lib/typescript/VideoFile';
|
||||
|
||||
interface RecordingButtonProps {
|
||||
style: StyleProp<ViewStyle>;
|
||||
camera: React.RefObject<Camera>;
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
onMediaCaptured: (media: VideoFile, mediaType: string) => void;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
|
||||
export const RecordingButton = ({ style, camera, onMediaCaptured, enabled }) => {
|
||||
|
||||
export const RecordingButton: React.FC<RecordingButtonProps> = ({ style, camera, onMediaCaptured, enabled }) => {
|
||||
const isRecording = useRef(false)
|
||||
// UseRef won't trigger a re-render
|
||||
const [, setRecordingState] = useState(false);
|
||||
|
Loading…
Reference in New Issue
Block a user