add record entry screen/modal and required nav flow
This commit is contained in:
parent
9e170380db
commit
56733c854c
@ -15,7 +15,15 @@ import { RecordingButton } from "./capture-button";
|
||||
import { useIsForeground } from "./is-foreground";
|
||||
import { useIsFocused } from "@react-navigation/native";
|
||||
|
||||
export default function CameraScreen(): React.ReactElement {
|
||||
export default function CameraScreen({ route, navigation }): React.ReactElement {
|
||||
// TODO: #73 Does this need to be passed to Camera component?
|
||||
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||||
const { gameType, tableSize, tags, location } = route.params
|
||||
// LOG for params -- Remove when no longer needed
|
||||
// Note: camelCased value being passed, change on record.tsx if you want a different value format
|
||||
console.log(gameType, tableSize, tags, location)
|
||||
|
||||
|
||||
const camera = useRef<Camera>(null);
|
||||
const { hasPermission, requestPermission } = useCameraPermission();
|
||||
const [isCameraInitialized, setIsCameraInitialized] =
|
||||
@ -63,6 +71,7 @@ export default function CameraScreen(): React.ReactElement {
|
||||
);
|
||||
};
|
||||
|
||||
// Replace with error handling
|
||||
if (device === null) {
|
||||
console.log(device);
|
||||
return (
|
||||
@ -86,6 +95,9 @@ export default function CameraScreen(): React.ReactElement {
|
||||
orientation={orientation} // TODO: #60
|
||||
isActive={isActive}
|
||||
/>
|
||||
<View style={orientation === "portrait" ? styles.goBackPortrait : styles.goBackLandscape}>
|
||||
<Button title="Go back" onPress={() => navigation.goBack()} />
|
||||
</View>
|
||||
<RecordingButton
|
||||
style={[
|
||||
styles.captureButton,
|
||||
@ -143,4 +155,15 @@ const styles = StyleSheet.create({
|
||||
bottom: "40%", // Should come from SafeAreaProvider
|
||||
left: 20, // needs refined
|
||||
},
|
||||
goBackPortrait: {
|
||||
position: 'absolute',
|
||||
top: 20, // or wherever you want the button to be positioned in portrait
|
||||
left: 20, // or wherever you want the button to be positioned in portrait
|
||||
},
|
||||
goBackLandscape: {
|
||||
position: 'absolute',
|
||||
top: 40,
|
||||
right: 20,
|
||||
transform: [{ rotate: '90deg' }],
|
||||
},
|
||||
});
|
||||
|
@ -2,18 +2,36 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||
import { Image } from 'react-native';
|
||||
import CameraScreen from '../component/video/camera';
|
||||
import Session from '../screens/session';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import RecordScreen from '../screens/video-stack/record';
|
||||
|
||||
// TODO: add ts support for assets folder to use imports
|
||||
const Icon = require('../assets/favicon.png')
|
||||
|
||||
const Tab = createBottomTabNavigator();
|
||||
const RecordStack = createNativeStackNavigator();
|
||||
|
||||
// tabBarIcon configuration should live on separate file and contain all logic/icons/rendering for the Tabs
|
||||
const tabIcons = {
|
||||
'Session': <Image source={Icon} style={{ width: 20, height: 20 }} />,
|
||||
'Camera': <Image source={Icon} style={{ width: 20, height: 20 }} />,
|
||||
'VideoStack': <Image source={Icon} style={{ width: 20, height: 20 }} />,
|
||||
};
|
||||
|
||||
function VideoTabStack() {
|
||||
return (
|
||||
<RecordStack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<RecordStack.Screen
|
||||
name="Record"
|
||||
component={RecordScreen}
|
||||
/>
|
||||
<RecordStack.Screen
|
||||
name="Camera"
|
||||
component={CameraScreen}
|
||||
/>
|
||||
</RecordStack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Functional component creating a tab navigator with called
|
||||
* Uses React Navigation's Tab.Navigator. Customizes tab bar appearance and icons.
|
||||
@ -34,8 +52,8 @@ export default function Tabs(): React.JSX.Element {
|
||||
}
|
||||
})}
|
||||
>
|
||||
<Tab.Screen name="Session" component={Session} />
|
||||
<Tab.Screen name="Camera" component={CameraScreen} />
|
||||
<Tab.Screen name="Session" component={Session} options={{ tabBarLabel: 'Session' }} />
|
||||
<Tab.Screen name="VideoStack" component={VideoTabStack} options={{ tabBarLabel: 'Record' }} />
|
||||
</Tab.Navigator>
|
||||
);
|
||||
}
|
@ -48,6 +48,7 @@
|
||||
"react": "18.2.0",
|
||||
"react-native": "0.72.6",
|
||||
"react-native-dotenv": "^3.4.9",
|
||||
"react-native-dropdown-picker": "^5.4.6",
|
||||
"react-native-reanimated": "^3.6.2",
|
||||
"react-native-safe-area-context": "^4.8.2",
|
||||
"react-native-screens": "~3.22.0",
|
||||
|
@ -1 +1 @@
|
||||
Subproject commit 0e05fc314fb759ec0944bf09c07aba9ad753fc2b
|
||||
Subproject commit fb425458904eb240466768be08352973fd2f78d8
|
145
screens/video-stack/record.tsx
Normal file
145
screens/video-stack/record.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { View, TextInput, TouchableWithoutFeedback, Text, TouchableOpacity, Keyboard } from 'react-native';
|
||||
import DropDownPicker from 'react-native-dropdown-picker';
|
||||
import { recordStyles as styles } from './styles';
|
||||
|
||||
interface CameraScreenParams {
|
||||
gameType: string;
|
||||
tableSize: string;
|
||||
tags: Array<string>;
|
||||
location: string;
|
||||
}
|
||||
|
||||
// Record Screen
|
||||
// Precedes Camera.tsx
|
||||
// Can be made into Modal when ready
|
||||
export default function RecordScreen({ navigation }): React.JSX.Element {
|
||||
|
||||
// Game type dropdown
|
||||
const [gameTypeOpen, setGameTypeOpen] = useState<boolean>(false)
|
||||
const [gameType, setGameType] = useState<string | null>(null) // This is a dropdown
|
||||
const [gameTypes, setGameTypes] = useState([
|
||||
{ label: 'Free Play', value: 'freePlay' },
|
||||
{ label: 'Straight Pool', value: 'straightPool' },
|
||||
{ label: 'Nine Ball', value: 'nineBall' }
|
||||
]);
|
||||
const onGameTypeOpen = useCallback(() => {
|
||||
setTableSizeOpen(false);
|
||||
setTagsOpen(false);
|
||||
}, []);
|
||||
|
||||
// Table size dropdown
|
||||
const [tableSizeOpen, setTableSizeOpen] = useState<boolean>(false)
|
||||
const [tableSize, setTableSize] = useState<string>('')
|
||||
const [tableSizes, setTableSizes] = useState([
|
||||
{ label: `9'`, value: 'nineFoot' },
|
||||
{ label: `8'`, value: 'eightFoot' },
|
||||
{ label: '7', value: 'sevenFoot' }
|
||||
]);
|
||||
const onTableSizeOpen = useCallback(() => {
|
||||
setGameTypeOpen(false);
|
||||
setTagsOpen(false);
|
||||
}, []);
|
||||
|
||||
// Tags multi-select dropdown
|
||||
const [tagsOpen, setTagsOpen] = useState<boolean>(false)
|
||||
const [tags, setTags] = useState<Array<string>>([])
|
||||
const [tagsList, setTagsList] = useState([
|
||||
{ label: `Tag1`, value: 'tag1' },
|
||||
{ label: `Tag2`, value: 'tag2' },
|
||||
{ label: 'Tag3', value: 'tag3' }
|
||||
]);
|
||||
const onTagsOpen = useCallback(() => {
|
||||
setTableSizeOpen(false);
|
||||
setGameTypeOpen(false);
|
||||
}, []);
|
||||
|
||||
// Location
|
||||
const [location, setLocation] = useState<string>('')
|
||||
|
||||
const handleSubmit = () => {
|
||||
// needs to pass info as params or store in a context/state provider
|
||||
const params: CameraScreenParams = {
|
||||
gameType: gameType,
|
||||
tableSize: tableSize,
|
||||
tags: tags,
|
||||
location: location
|
||||
};
|
||||
navigation.push('Camera', params)
|
||||
}
|
||||
|
||||
const dropDownStyles = {
|
||||
style: styles.dropdownStyle,
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
|
||||
<View style={styles.container}>
|
||||
|
||||
<View style={styles.dropdownContainer}>
|
||||
<Text style={styles.dropdownTitle}>Game Type</Text>
|
||||
<DropDownPicker
|
||||
zIndex={3000}
|
||||
zIndexInverse={1000}
|
||||
open={gameTypeOpen}
|
||||
value={gameType}
|
||||
items={gameTypes}
|
||||
setOpen={setGameTypeOpen}
|
||||
setValue={setGameType}
|
||||
setItems={setGameTypes}
|
||||
onOpen={onGameTypeOpen}
|
||||
{...dropDownStyles}
|
||||
/>
|
||||
<Text style={styles.dropdownTitle}>Table size</Text>
|
||||
<DropDownPicker
|
||||
zIndex={2000}
|
||||
zIndexInverse={2000}
|
||||
open={tableSizeOpen}
|
||||
value={tableSize}
|
||||
items={tableSizes}
|
||||
setOpen={setTableSizeOpen}
|
||||
setValue={setTableSize}
|
||||
setItems={setTableSizes}
|
||||
onOpen={onTableSizeOpen}
|
||||
{...dropDownStyles}
|
||||
|
||||
/>
|
||||
<Text style={styles.dropdownTitle}>Tags</Text>
|
||||
<DropDownPicker
|
||||
zIndex={1000}
|
||||
zIndexInverse={3000}
|
||||
multiple
|
||||
min={0}
|
||||
max={5}
|
||||
open={tagsOpen}
|
||||
value={tags}
|
||||
items={tagsList}
|
||||
setOpen={setTagsOpen}
|
||||
setValue={setTags}
|
||||
setItems={setTagsList}
|
||||
onOpen={onTagsOpen}
|
||||
{...dropDownStyles}
|
||||
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.dropdownTitle}>Location</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder='Location'
|
||||
value={location}
|
||||
onChangeText={(value) => setLocation(value)}
|
||||
/>
|
||||
|
||||
<View style={styles.buttonContainer}>
|
||||
<TouchableOpacity style={styles.buttonStyle} onPress={() => navigation.goBack()}>
|
||||
<Text style={styles.buttonText}>Back</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.buttonStyle} onPress={handleSubmit}>
|
||||
<Text style={styles.buttonText}>Next</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
)
|
||||
}
|
||||
|
57
screens/video-stack/styles.ts
Normal file
57
screens/video-stack/styles.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import { StyleSheet } from 'react-native'
|
||||
|
||||
export const recordStyles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
dropdownContainer: {
|
||||
width: '100%',
|
||||
marginBottom: 20,
|
||||
zIndex: 50
|
||||
},
|
||||
dropdownTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
marginBottom: 5,
|
||||
alignSelf: 'flex-start'
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
marginBottom: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: 'grey',
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
},
|
||||
buttonContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
},
|
||||
buttonStyle: {
|
||||
backgroundColor: 'lightblue',
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 20,
|
||||
margin: 10,
|
||||
},
|
||||
buttonText: {
|
||||
color: 'white',
|
||||
textAlign: 'center',
|
||||
},
|
||||
dropdownStyle: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#D1D1D1',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
},
|
||||
dropdownContainerStyle: {
|
||||
marginBottom: 10,
|
||||
borderColor: '#D1D1D1',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
},
|
||||
});
|
@ -8513,6 +8513,11 @@ react-native-dotenv@^3.4.9:
|
||||
dependencies:
|
||||
dotenv "^16.3.1"
|
||||
|
||||
react-native-dropdown-picker@^5.4.6:
|
||||
version "5.4.6"
|
||||
resolved "https://registry.yarnpkg.com/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz#3736fc468de4a295e4df8d1f65ed2eadaf9b445f"
|
||||
integrity sha512-T1XBHbE++M6aRU3wFYw3MvcOuabhWZ29RK/Ivdls2r1ZkZ62iEBZknLUPeVLMX3x6iUxj4Zgr3X2DGlEGXeHsA==
|
||||
|
||||
react-native-reanimated@^3.6.2:
|
||||
version "3.6.2"
|
||||
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.2.tgz#8a48c37251cbd3b665a659444fa9778f5b510356"
|
||||
|
Loading…
Reference in New Issue
Block a user