Merge pull request #108 from ctcusc/yq-record-save-video

Yq record save video

package.json

@@ -54,6 +54,8 @@
     "expo-camera": "~8.0.0",
     "expo-constants": "~8.0.0",
     "expo-font": "~8.0.0",
+    "expo-media-library": "~8.0.0",
+    "expo-permissions": "~8.0.0",
     "expo-web-browser": "~8.0.0",
     "express-session": "^1.17.0",
     "mem": "^6.0.1",

src/screens/Main/RecordStack/RecordScreen/RecordScreen.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react'
-import { Text, View, TouchableOpacity, Image, StatusBar, Alert } from 'react-native'
+import { Text, View, TouchableOpacity, Image, StatusBar} from 'react-native'
 import { Camera } from 'expo-camera'
 import styles from './styles'
+import * as Permissions from 'expo-permissions'
+import * as MediaLibrary from 'expo-media-library'
 import { NavigationScreenProp, NavigationState, NavigationParams } from 'react-navigation'
 
 interface Props {
@@ -16,12 +18,41 @@ export default function RecordScreen(props: Props) {
   const [camera, setCamera] = useState()
   const [isRecording, setIsRecording] = useState(false)
   const [cameraDirection, setCameraDirection] = useState(Camera.Constants.Type.front)
+  const [video, setVideo] = useState(null)
+
+  async function saveVideo(){
+    const asset = await MediaLibrary.createAssetAsync(video.uri)
+    if (asset) {
+      setVideo(null)
+    }
+  }
+
+  async function stopRecord(){
+    setIsRecording(false)
+    camera.stopRecording()
+  }
+
+  async function startRecord(){
+    if (camera) {
+      setIsRecording(true)
+      const data = await camera.recordAsync()
+      setVideo(data)
+    }
+  }
+
+  async function toogleRecord(){
+    if (isRecording) {
+      stopRecord()
+    } else {
+      startRecord()
+    }
+  }
 
   useEffect(() => {
     (async () => {
-      const { status } = await Camera.requestPermissionsAsync()
-      setHasPermission(status === 'granted')
-
+      const { status: cameraPermission } = await Camera.requestPermissionsAsync()
+      const { status: cameraRollPermission } = await Permissions.askAsync(Permissions.CAMERA_ROLL)
+      setHasPermission(cameraPermission === 'granted' && cameraRollPermission === 'granted')
     })()
   }, [])
 
@@ -41,53 +72,51 @@ export default function RecordScreen(props: Props) {
     >
       <StatusBar hidden/>
       <View style={styles.bottomSection}>
-
+        {video && (
+          <TouchableOpacity
+            onPress={()=>saveVideo()}
+            style={styles.saveButton}
+          >
+            <Text style={styles.saveText}>save</Text>
+          </TouchableOpacity>
+        )}
       </View>
-      <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>
+      </View>)}
 
       <View style={styles.topSection}>
-        <TouchableOpacity
+        {!video && (<TouchableOpacity
           onPress={() => goBack()}
           style={styles.whiteButtonOutline}
         >
           <View style={styles.whiteButton}>
           </View> 
-        </TouchableOpacity>
+        </TouchableOpacity>)}
 
-        <TouchableOpacity
-          onPress={ () => {
-            if(camera) {
-              if (isRecording) {
-                setIsRecording(false)
-                camera.stopRecording()
-              } else {
-                const video = camera.recordAsync()
-                setIsRecording(true)
-              }
-            }
-          }}
+        {!video && (<TouchableOpacity
+          onPress={()=>toogleRecord()}
           style={styles.recordOutline}
         >
-          <View style={styles.recordButton}>
+          <View style={isRecording ? styles.isRecordingButton : styles.recordButton}>
           </View>
-        </TouchableOpacity>
+        </TouchableOpacity>)}
 
-        <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>
+        </TouchableOpacity>)}
       </View>
 
     </Camera>

src/screens/Main/RecordStack/RecordScreen/styles.tsx

@@ -23,6 +23,13 @@ const styles = StyleSheet.create({
     borderRadius: 48,
     alignSelf: 'center',
   },
+  isRecordingButton: {
+    backgroundColor: '#FF3B30',
+    width: 16,
+    height: 16,
+    borderRadius: 4,
+    alignSelf: 'center',
+  },
   recordOutline: {
     display: 'flex',
     justifyContent: 'center',
@@ -50,19 +57,16 @@ const styles = StyleSheet.create({
     borderWidth: 4,
     borderColor: '#fff',
   },
-
   middleSection: {
     display: 'flex',
     flexDirection: 'column',
     flex: 4,
     justifyContent: 'center',
     alignItems: 'flex-start',
     alignSelf: 'center',
-
   },
   overlay: {
     position: 'absolute',
-
   },
   infoText: {
     backgroundColor: 'rgba(51,51,51,0.4)',
@@ -94,6 +98,24 @@ const styles = StyleSheet.create({
   bottomSection: {
     flex: 1,
   },
+  saveButton: {
+    backgroundColor: '#E5186E',
+    transform: [ { rotateZ: '270deg'}],
+    width: 79,
+    height: 48,
+    justifyContent: 'center',
+    left: '75%',
+    top: '15%',
+    borderRadius: 24,
+    right: -Dimensions.get('window').width + (Dimensions.get('window').width * 0.25)
+  },
+  saveText: {
+    textAlign: 'center', 
+    color: '#fff', 
+    fontSize: 18,
+    lineHeight: 21,
+    fontFamily: 'roboto-regular'
+  }
 })
 
 export default styles

yarn.lock

@@ -4238,6 +4238,11 @@ expo-location@~8.0.0:
   dependencies:
     invariant "^2.2.4"
 
+expo-media-library@~8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/expo-media-library/-/expo-media-library-8.0.0.tgz#d763a2f39a81348d357171be5ea486679c2edb86"
+  integrity sha512-7TIcJjmQq+sH3deIVjwyQYa3nVsLZZUj6fQYA3R+DrFNRT6ehmd1Lai0klTa7ma3pflPEC4Uv2zOyf53alvD2w==
+
 expo-permissions@~8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/expo-permissions/-/expo-permissions-8.0.0.tgz#5a45e8451dd7ff37c9e6ce5e2447818372547813"