diff --git a/App.tsx b/App.tsx
index 6a47ac6..c0f99ca 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,14 +1,9 @@
import React from "react";
-import { Text } from "react-native";
-import ClientProvider from "./graphql/client";
-import ShotsContainer from "./component/shot";
+import CameraScreen from "./component/video/camera";
const App: React.FC = () => {
return (
-
-
- test
-
+
);
};
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 1eb663c..2a7abf2 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,4 +1,5 @@
+
diff --git a/babel.config.js b/babel.config.js
index 46e0f89..cf6bd4c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -10,6 +10,7 @@ module.exports = function(api) {
"allowUndefined": true,
"verbose": false,
}],
+ 'react-native-reanimated/plugin',
],
};
};
diff --git a/component/video/camera.tsx b/component/video/camera.tsx
new file mode 100644
index 0000000..a954d97
--- /dev/null
+++ b/component/video/camera.tsx
@@ -0,0 +1,83 @@
+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 { RecordingButton } from './capture-button'
+import { useIsForeground } from './is-foreground'
+
+export default function CameraScreen(): React.ReactElement {
+ const camera = useRef(null)
+ const { hasPermission, requestPermission } = useCameraPermission()
+ const [isCameraInitialized, setIsCameraInitialized] = useState(false)
+
+ const isForeground = useIsForeground()
+ const isActive = isForeground
+
+ const onError = useCallback((error: CameraRuntimeError) => {
+ console.error(error)
+ }, [])
+
+ const onInitialized = useCallback(() => {
+ console.log('Camera initialized!')
+ setIsCameraInitialized(true)
+ }, [])
+
+ const onMediaCaptured = useCallback(
+ (media: PhotoFile | VideoFile) => {
+ console.log(`Media captured! ${JSON.stringify(media)}`)
+ },
+ [],
+ )
+
+ if (!hasPermission) {
+ requestPermission()
+ // Error handling in case they refuse to give permission
+ }
+
+ const device = useCameraDevice('back')
+ const format = useCameraFormat(device, [
+ { videoResolution: { width: 3048, height: 2160 } },
+ { fps: 60 }
+ ])
+
+ if (device === null) {
+ return Camera not available. Does user have permissions: {hasPermission}
+ }
+
+ return (
+ hasPermission && (
+
+
+
+
+
+ )
+ )
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: 'black',
+ },
+ captureButton: {
+ position: 'absolute',
+ alignSelf: 'center',
+ bottom: 20, // Should come from SafeAreaProvider
+ },
+})
\ No newline at end of file
diff --git a/component/video/capture-button.tsx b/component/video/capture-button.tsx
new file mode 100644
index 0000000..dd8afd7
--- /dev/null
+++ b/component/video/capture-button.tsx
@@ -0,0 +1,103 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { TouchableOpacity, StyleSheet, View } from 'react-native';
+import { CameraRoll } from "@react-native-camera-roll/camera-roll";
+
+
+export const RecordingButton = ({ style, camera, onMediaCaptured, enabled }) => {
+
+ const isRecording = useRef(false)
+ // UseRef won't trigger a re-render
+ const [, setRecordingState] = useState(false);
+
+ const onStoppedRecording = useCallback(() => {
+ isRecording.current = false
+ setRecordingState(false)
+ console.log('stopped recording video!')
+ }, [])
+
+ const stopRecording = useCallback(async () => {
+ try {
+ if (camera.current === null) {
+ throw new Error('Camera ref is null!') // Error handling could be more graceful
+ }
+ console.log('calling stopRecording()...')
+ await camera.current.stopRecording()
+ console.log('called stopRecording()!')
+ } catch (e) {
+ console.error('failed to stop recording!', e)
+ }
+ }, [camera])
+
+const startRecording = useCallback(() => {
+ try {
+ if (camera.current === null) {
+ throw new Error('Camera ref is null!') // Error handling could be more graceful
+ }
+ console.log('calling startRecording()...')
+ camera.current.startRecording({
+ onRecordingError: (error) => {
+ console.error('Recording failed!', error)
+ onStoppedRecording()
+ },
+ onRecordingFinished: async (video) => {
+ onMediaCaptured(video, 'video')
+ const path = video.path
+ await CameraRoll.saveAsset(`file://${path}`, {
+ type: 'video',
+ })
+ onStoppedRecording()
+ },
+ })
+ console.log('called startRecording()!')
+ isRecording.current = true
+ setRecordingState(true)
+ } catch (e) {
+ console.error('failed to start recording!', e, 'camera')
+ }
+}, [camera, onMediaCaptured, onStoppedRecording])
+
+const handlePress = () => {
+ if (isRecording.current) {
+ stopRecording();
+ } else {
+ startRecording();
+ }
+};
+
+ return (
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ captureButton: {
+ height: 80,
+ width: 80,
+ borderRadius: 40,
+ borderWidth: 3,
+ borderColor: 'white',
+ backgroundColor: 'transparent',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ innerCircle: {
+ height: 70,
+ width: 70,
+ borderRadius: 35,
+ backgroundColor: '#FF3B30',
+ },
+ recordingSquare: {
+ height: 40,
+ width: 40,
+ borderRadius: 10,
+ backgroundColor: '#FF3B30',
+ },
+});
+
+export default RecordingButton;
\ No newline at end of file
diff --git a/component/video/constants.ts b/component/video/constants.ts
new file mode 100644
index 0000000..c4d8155
--- /dev/null
+++ b/component/video/constants.ts
@@ -0,0 +1,31 @@
+import { Dimensions, Platform } from 'react-native'
+import StaticSafeAreaInsets from 'react-native-static-safe-area-insets'
+
+export const CONTENT_SPACING = 15
+
+const SAFE_BOTTOM =
+ Platform.select({
+ ios: StaticSafeAreaInsets.safeAreaInsetsBottom,
+ }) ?? 0
+
+export const SAFE_AREA_PADDING = {
+ paddingLeft: StaticSafeAreaInsets.safeAreaInsetsLeft + CONTENT_SPACING,
+ paddingTop: StaticSafeAreaInsets.safeAreaInsetsTop + CONTENT_SPACING,
+ paddingRight: StaticSafeAreaInsets.safeAreaInsetsRight + CONTENT_SPACING,
+ paddingBottom: SAFE_BOTTOM + CONTENT_SPACING,
+}
+
+// The maximum zoom _factor_ you should be able to zoom in
+export const MAX_ZOOM_FACTOR = 10
+
+export const SCREEN_WIDTH = Dimensions.get('window').width
+export const SCREEN_HEIGHT = Platform.select({
+ android: Dimensions.get('screen').height - StaticSafeAreaInsets.safeAreaInsetsBottom,
+ ios: Dimensions.get('window').height,
+}) as number
+
+// Capture Button
+export const CAPTURE_BUTTON_SIZE = 78
+
+// Control Button like Flash
+export const CONTROL_BUTTON_SIZE = 40
\ No newline at end of file
diff --git a/component/video/is-foreground.tsx b/component/video/is-foreground.tsx
new file mode 100644
index 0000000..56e69ef
--- /dev/null
+++ b/component/video/is-foreground.tsx
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react'
+import { AppState, AppStateStatus } from 'react-native'
+
+export const useIsForeground = (): boolean => {
+ const [isForeground, setIsForeground] = useState(true)
+
+ useEffect(() => {
+ const onChange = (state: AppStateStatus): void => {
+ setIsForeground(state === 'active')
+ }
+ const listener = AppState.addEventListener('change', onChange)
+ return () => listener.remove()
+ }, [setIsForeground])
+
+ return isForeground
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 4c16d41..9c75b19 100644
--- a/package.json
+++ b/package.json
@@ -1,61 +1,64 @@
{
- "name": "railbird-rn",
- "version": "1.0.0",
- "main": "node_modules/expo/AppEntry.js",
- "scripts": {
- "start": "cp .env.development .env && expo start",
- "android": "expo start --android",
- "ios": "expo start --ios",
- "run:android": "expo run:android",
- "run:ios": "expo run:ios",
- "web": "expo start --web",
- "lint": "eslint . --ext .js,.ts,.tsx",
- "lint:fix": "eslint . --ext .ts,.tsx --fix",
- "test": "jest --forceExit"
- },
- "jest": {
- "preset": "jest-expo",
- "transformIgnorePatterns": [
- "node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|react-native-svg-charts|d3-path)/)"
- ]
- },
- "dependencies": {
- "@apollo/client": "^3.8.8",
- "@react-native-firebase/app": "^18.8.0",
- "@react-native-firebase/auth": "^18.8.0",
- "@types/react": "~18.2.14",
- "@typescript-eslint/eslint-plugin": "^6.17.0",
- "@typescript-eslint/parser": "^6.17.0",
- "babel-plugin-inline-dotenv": "^1.7.0",
- "d3-path": "^3.1.0",
- "d3-scale": "^1.0.6",
- "eslint": "^8.56.0",
- "eslint-plugin-react": "^7.33.2",
- "eslint-plugin-react-hooks": "^4.6.0",
- "eslint-plugin-react-native": "^4.1.0",
- "expo": "~49.0.15",
- "expo-build-properties": "^0.11.0",
- "expo-splash-screen": "~0.20.5",
- "expo-status-bar": "~1.6.0",
- "graphql": "^16.8.1",
- "jest": "^29.2.1",
- "jest-expo": "~49.0.0",
- "react": "18.2.0",
- "react-native": "0.72.6",
- "react-native-dotenv": "^3.4.9",
- "react-native-svg": "13.9.0",
- "react-native-svg-charts": "^5.4.0",
- "typescript": "^5.3.3"
- },
- "devDependencies": {
- "@babel/core": "^7.20.0",
- "@testing-library/jest-native": "^5.4.3",
- "@testing-library/react-native": "^12.4.3",
- "@types/d3-path": "^3.0.2",
- "@types/jest": "^29.5.11",
- "@types/react-native-svg-charts": "^5.0.16",
- "eslint-config-prettier": "^9.1.0"
- },
- "private": true
+ "name": "railbird-rn",
+ "version": "1.0.0",
+ "main": "node_modules/expo/AppEntry.js",
+ "scripts": {
+ "start": "cp .env.development .env && expo start",
+ "android": "expo start --android",
+ "ios": "expo start --ios",
+ "run:android": "expo run:android",
+ "run:ios": "expo run:ios",
+ "web": "expo start --web",
+ "lint": "eslint . --ext .js,.ts,.tsx",
+ "lint:fix": "eslint . --ext .ts,.tsx --fix",
+ "test": "jest --forceExit"
+ },
+ "jest": {
+ "preset": "jest-expo",
+ "transformIgnorePatterns": [
+ "node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|react-native-svg-charts|d3-path)/)"
+ ]
+ },
+ "dependencies": {
+ "@apollo/client": "^3.8.8",
+ "@react-native-camera-roll/camera-roll": "^7.4.0",
+ "@react-native-firebase/app": "^18.8.0",
+ "@react-native-firebase/auth": "^18.8.0",
+ "@types/react": "~18.2.14",
+ "@typescript-eslint/eslint-plugin": "^6.17.0",
+ "@typescript-eslint/parser": "^6.17.0",
+ "babel-plugin-inline-dotenv": "^1.7.0",
+ "d3-path": "^3.1.0",
+ "d3-scale": "^1.0.6",
+ "eslint": "^8.56.0",
+ "eslint-plugin-react": "^7.33.2",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-native": "^4.1.0",
+ "expo": "~49.0.15",
+ "expo-build-properties": "^0.11.0",
+ "expo-splash-screen": "~0.20.5",
+ "expo-status-bar": "~1.6.0",
+ "graphql": "^16.8.1",
+ "jest": "^29.2.1",
+ "jest-expo": "~49.0.0",
+ "react": "18.2.0",
+ "react-native": "0.72.6",
+ "react-native-dotenv": "^3.4.9",
+ "react-native-reanimated": "^3.6.2",
+ "react-native-static-safe-area-insets": "^2.2.0",
+ "react-native-svg": "13.9.0",
+ "react-native-svg-charts": "^5.4.0",
+ "react-native-vision-camera": "^3.8.2",
+ "typescript": "^5.3.3"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.20.0",
+ "@testing-library/jest-native": "^5.4.3",
+ "@testing-library/react-native": "^12.4.3",
+ "@types/d3-path": "^3.0.2",
+ "@types/jest": "^29.5.11",
+ "@types/react-native-svg-charts": "^5.0.16",
+ "eslint-config-prettier": "^9.1.0"
+ },
+ "private": true
}
-
diff --git a/yarn.lock b/yarn.lock
index dabfbd6..a31f8e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -857,6 +857,13 @@
"@babel/helper-plugin-utils" "^7.22.5"
"@babel/plugin-syntax-numeric-separator" "^7.10.4"
+"@babel/plugin-transform-object-assign@^7.16.7":
+ version "7.23.3"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.23.3.tgz#64177e8cf943460c7f0e1c410277546804f59625"
+ integrity sha512-TPJ6O7gVC2rlQH2hvQGRH273G1xdoloCj9Pc07Q7JbIZYDi+Sv5gaE2fu+r5E7qK4zyt6vj0FbZaZTRU5C3OMA==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.22.5"
+
"@babel/plugin-transform-object-rest-spread@^7.23.4":
version "7.23.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz#2b9c2d26bf62710460bdc0d1730d4f1048361b83"
@@ -1165,7 +1172,7 @@
"@babel/types" "^7.4.4"
esutils "^2.0.2"
-"@babel/preset-typescript@^7.13.0":
+"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
version "7.23.3"
resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz#14534b34ed5b6d435aa05f1ae1c5e7adcc01d913"
integrity sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==
@@ -1984,6 +1991,11 @@
resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+"@react-native-camera-roll/camera-roll@^7.4.0":
+ version "7.4.0"
+ resolved "https://registry.yarnpkg.com/@react-native-camera-roll/camera-roll/-/camera-roll-7.4.0.tgz#931e25b076b40dc57ca6d380f0a85d494a120f06"
+ integrity sha512-y0bVpMJLaFphYvMMx1BsqgMA0kXq9CKxKYNnt4ocUvwJj5Rp4TZ233rzJoDqz1oxd56Tz5f1g+yhYN5RImKl8Q==
+
"@react-native-community/cli-clean@11.3.7":
version "11.3.7"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-11.3.7.tgz#cb4c2f225f78593412c2d191b55b8570f409a48f"
@@ -8362,6 +8374,21 @@ react-native-dotenv@^3.4.9:
dependencies:
dotenv "^16.3.1"
+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"
+ integrity sha512-IIMREMOrxhtK35drfpzh2UhxNqAOHnuvGgtMofj7yHcMj16tmWZR2zFvMUf6z2MfmXv+aVgFQ6TRZ6yKYf7LNA==
+ dependencies:
+ "@babel/plugin-transform-object-assign" "^7.16.7"
+ "@babel/preset-typescript" "^7.16.7"
+ convert-source-map "^2.0.0"
+ invariant "^2.2.4"
+
+react-native-static-safe-area-insets@^2.2.0:
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/react-native-static-safe-area-insets/-/react-native-static-safe-area-insets-2.2.0.tgz#dd86b6a38f43964fac8df8c0e6bc8e062527786c"
+ integrity sha512-TLTW2e2kRK3COSK8gMZzwp4wHguFCtcO18itDLn5av/xQblXt9ylu84o+qD9aKJCBfvtNzGOvqqTKqC5GJRZ/g==
+
react-native-svg-charts@^5.4.0:
version "5.4.0"
resolved "https://registry.yarnpkg.com/react-native-svg-charts/-/react-native-svg-charts-5.4.0.tgz#3817a4714c276b7024e60ae5c9f13191614aecc8"
@@ -8390,6 +8417,11 @@ react-native-svg@^6.2.1:
lodash "^4.16.6"
pegjs "^0.10.0"
+react-native-vision-camera@^3.8.2:
+ version "3.8.2"
+ resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-3.8.2.tgz#f4f75f84c6a19e1c3474ddc0f7f785b5a526739b"
+ integrity sha512-MY39l2e3hNRPUefn2JPShOFExcw0PblbAcUGvJrIfS9pMzdIyceo0umRAx8lOGXzDUAdb+xy/tFWb8zGxKimCQ==
+
react-native@*:
version "0.73.2"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.73.2.tgz#74ee163c8189660d41d1da6560411da7ce41a608"