Skip to content

Commit

Permalink
Video redux store (#118)
Browse files Browse the repository at this point in the history 
* redux store

* fixed redux?
  • Loading branch information
Aliya Petranik authored Apr 19, 2020
1 parent fc4898d commit 544d952
Show file tree
Hide file tree
Showing 8 changed files with 155 additions and 105 deletions.
104 changes: 56 additions & 48 deletions App.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,57 @@
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import React, { useState } from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { AppLoading } from 'expo'
import { Asset } from 'expo-asset'
import * as Font from 'expo-font'
import React, { useState } from 'react'
import { Platform, StatusBar, StyleSheet, View } from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import { Provider } from 'react-redux'
import store from './src/redux/store'

import AppNavigator from './src/navigation/AppNavigator';
import AppNavigator from './src/navigation/AppNavigator'

export default function App(props) {
const [isLoadingComplete, setLoadingComplete] = useState(false);


async function loadResourcesAsync() {
await Promise.all([
Asset.loadAsync([
require('./assets/images/robot-dev.png'),
require('./assets/images/robot-prod.png'),
]),
Font.loadAsync({
// This is the font that we are using for our tab bar
...Ionicons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free to
// remove this if you are not using it in your app
'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
'montserrat-regular': require('./assets/fonts/Montserrat/Montserrat-Regular.ttf'),
'montserrat-bold': require('./assets/fonts/Montserrat/Montserrat-Bold.ttf'),
'montserrat-semibold': require('./assets/fonts/Montserrat/Montserrat-SemiBold.ttf'),
'roboto-regular': require('./assets/fonts/Roboto/Roboto-Regular.ttf'),
'roboto-bold': require('./assets/fonts/Roboto/Roboto-Bold.ttf'),
}),
])
}


function handleLoadingError(error) {
// In this case, you might want to report the error to your error reporting
// service, for example Sentry
console.warn(error)
}

function handleFinishLoading(setLoadingComplete) {
setLoadingComplete(true)
}


const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
})
const [isLoadingComplete, setLoadingComplete] = useState(false)

if (!isLoadingComplete && !props.skipLoadingScreen) {
return (
Expand All @@ -17,51 +60,16 @@ export default function App(props) {
onError={handleLoadingError}
onFinish={() => handleFinishLoading(setLoadingComplete)}
/>
);
)
} else {
return (
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
<AppNavigator />
<Provider store = { store }>
<AppNavigator />
</Provider>
</View>
);
)
}
}

async function loadResourcesAsync() {
await Promise.all([
Asset.loadAsync([
require('./assets/images/robot-dev.png'),
require('./assets/images/robot-prod.png'),
]),
Font.loadAsync({
// This is the font that we are using for our tab bar
...Ionicons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free to
// remove this if you are not using it in your app
'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
'montserrat-regular': require('./assets/fonts/Montserrat/Montserrat-Regular.ttf'),
'montserrat-bold': require('./assets/fonts/Montserrat/Montserrat-Bold.ttf'),
'montserrat-semibold': require('./assets/fonts/Montserrat/Montserrat-SemiBold.ttf'),
'roboto-regular': require('./assets/fonts/Roboto/Roboto-Regular.ttf'),
'roboto-bold': require('./assets/fonts/Roboto/Roboto-Bold.ttf'),
}),
]);
}

function handleLoadingError(error) {
// In this case, you might want to report the error to your error reporting
// service, for example Sentry
console.warn(error);
}

function handleFinishLoading(setLoadingComplete) {
setLoadingComplete(true);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"dotenv": "^8.2.0",
"expo": "^36.0.0",
"expo-asset": "~8.0.0",
"expo-av": "~8.0.0",
"expo-av": "^8.1.0",
"expo-camera": "~8.0.0",
"expo-constants": "~8.0.0",
"expo-font": "~8.0.0",
Expand All @@ -76,7 +76,7 @@
"react-navigation": "^4.0.10",
"react-navigation-stack": "^2.0.13",
"react-navigation-tabs": "^2.7.0",
"react-redux": "^7.1.3",
"react-redux": "^7.2.0",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"reselect": "^4.0.0",
Expand Down
4 changes: 4 additions & 0 deletions src/redux/actions/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@

export function saveVideo(payload) {
return { type: 'SAVE_VIDEO', payload }
}
15 changes: 15 additions & 0 deletions src/redux/reducers/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const initialState = {
videos: []
}

function rootReducer(state = initialState, action) {
if (action.type === 'SAVE_VIDEO') {
return {
...state,
videos: state.videos.concat(action.payload)
}
}
return state
}

export default rootReducer
6 changes: 6 additions & 0 deletions src/redux/store/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { createStore } from 'redux'
import rootReducer from '../reducers/index'

const store = createStore(rootReducer)

export default store
4 changes: 4 additions & 0 deletions src/screens/Main/RecordStack/QuestionsScreen/QuestionsScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ import {
import styles from './styles'
import { NavigationScreenProp, NavigationState } from 'react-navigation'
import { BASE_PATH } from 'react-native-dotenv'
import { connect } from 'react-redux'
import { saveVideo } from '../../../../redux/actions'
import { bindActionCreators } from 'redux'

interface Question {
ID: number,
Expand All @@ -30,6 +33,7 @@ export default function QuestionsScreen(props: Props) {
const [modalVisibility, setModalVisibility] = useState(false)

useEffect(() => {

fetch(`${BASE_PATH}/api/user/questions`)
.then(res => res.json())
.then(data => {
Expand Down
113 changes: 63 additions & 50 deletions src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { useState, useEffect } from 'react'
import { Text, View, TouchableOpacity, Image, StatusBar} from 'react-native'
import { Camera } from 'expo-camera'
import { Video } from 'expo-av'

import styles from './styles'
import * as Permissions from 'expo-permissions'
import * as MediaLibrary from 'expo-media-library'
Expand Down Expand Up @@ -49,6 +51,7 @@ export default function RecordScreen(props: Props) {
}

useEffect(() => {

(async () => {
const { status } = await Permissions.getAsync(Permissions.CAMERA_ROLL, Permissions.CAMERA, Permissions.AUDIO_RECORDING)
setHasPermission(status === 'granted')
Expand All @@ -62,62 +65,72 @@ export default function RecordScreen(props: Props) {
return <Text>No access to camera</Text>
}
return (
<Camera
style={styles.camera}
ref={(ref: Camera) => {
setCamera(ref)
}}
type={cameraDirection}
>
<StatusBar hidden/>
<View style={styles.bottomSection}>
{video && (
<TouchableOpacity
onPress={()=>saveVideo()}
style={styles.saveButton}
>
<Text style={styles.saveText}>save</Text>
</TouchableOpacity>
)}
</View>
// <Camera
// style={styles.camera}
// ref={(ref: Camera) => {
// setCamera(ref)
// }}
// type={cameraDirection}
// >
// <StatusBar hidden/>
// <View style={styles.bottomSection}>
// {video && (
// <TouchableOpacity
// onPress={()=>saveVideo()}
// style={styles.saveButton}
// >
// <Text style={styles.saveText}>save</Text>
// </TouchableOpacity>
// )}
// </View>

{!video && (<View style={styles.middleSection}>
// {!video && (<View style={styles.middleSection}>

<View style={styles.overlay}>
<Text style={styles.infoText}>Create a 3-4 Minute Video</Text>
</View>
<View style={styles.overlay}>
<Text style={styles.question}>{question}</Text>
</View>
// <View style={styles.overlay}>
// <Text style={styles.infoText}>Create a 3-4 Minute Video</Text>
// </View>
// <View style={styles.overlay}>
// <Text style={styles.question}>{question}</Text>
// </View>

</View>)}
// </View>)}

<View style={styles.topSection}>
{!video && (<TouchableOpacity
onPress={() => goBack()}
style={styles.whiteButtonOutline}
>
<View style={styles.whiteButton}>
</View>
</TouchableOpacity>)}
// <View style={styles.topSection}>
// {!video && (<TouchableOpacity
// onPress={() => goBack()}
// style={styles.whiteButtonOutline}
// >
// <View style={styles.whiteButton}>
// </View>
// </TouchableOpacity>)}

{!video && (<TouchableOpacity
onPress={()=>toogleRecord()}
style={styles.recordOutline}
>
<View style={isRecording ? styles.isRecordingButton : styles.recordButton}>
</View>
</TouchableOpacity>)}
// {!video && (<TouchableOpacity
// onPress={()=>toogleRecord()}
// style={styles.recordOutline}
// >
// <View style={isRecording ? styles.isRecordingButton : styles.recordButton}>
// </View>
// </TouchableOpacity>)}

{!video && (<TouchableOpacity
onPress={() => {
setCameraDirection(cameraDirection === Camera.Constants.Type.front ? Camera.Constants.Type.back : Camera.Constants.Type.front)
}}
>
<Image style={styles.flipCamera} resizeMode='contain' source={require('../../../../../assets/images/flip_camera.png')} />
</TouchableOpacity>)}
</View>
// {!video && (<TouchableOpacity
// onPress={() => {
// setCameraDirection(cameraDirection === Camera.Constants.Type.front ? Camera.Constants.Type.back : Camera.Constants.Type.front)
// }}
// >
// <Image style={styles.flipCamera} resizeMode='contain' source={require('../../../../../assets/images/flip_camera.png')} />
// </TouchableOpacity>)}
// </View>

</Camera>
// </Camera>
<Video
source={{ uri: 'file:///storage/emulated/0/DCIM/f6337ecd-6286-4fbb-b047-9c368b80b381.mp4' }}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
shouldPlay
isLooping
style={{ width: 300, height: 300 }}
/>
)
}
10 changes: 5 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4128,10 +4128,10 @@ expo-asset@~8.0.0:
path-browserify "^1.0.0"
url-parse "^1.4.4"

expo-av@~8.0.0:
version "8.0.0"
resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-8.0.0.tgz#fc892a0e4ff7e1eff630002e0652da3125d18113"
integrity sha512-n1qOXi0jk6stY4q5RZqmQS90Rg9HDDGWE7EfLABhcyUA1EGJJbrupjpn75sxzNYMksad+oiGp0NULTHlKfa01A==
expo-av@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-8.1.0.tgz#376e2a821168cd83e997c6dd84350fab6b293f10"
integrity sha512-owWxOCyK+dPyT3pF4rDOf2W8Sn8LSEvfw1HvU9xM0wzH7xF0bw3Zs3wcXxvtfhnXAZ5dCDQfvZI5cXk+lml+IQ==
dependencies:
lodash "^4.17.15"
nullthrows "^1.1.0"
Expand Down Expand Up @@ -8177,7 +8177,7 @@ react-proxy@^1.1.7:
lodash "^4.6.1"
react-deep-force-update "^1.0.0"

react-redux@^7.1.3:
react-redux@^7.2.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==
Expand Down

0 comments on commit 544d952

Please sign in to comment.