add camera mode prompt

tjikaljedy · May 28, 2022 · 198a671 · 198a671
1 parent fd8161f
commit 198a671
Show file tree

Hide file tree

Showing 12 changed files with 318 additions and 114 deletions.
diff --git a/App.tsx b/App.tsx
@@ -39,16 +39,14 @@ const App = () => {
   React.useEffect(() => {
     const subscription = AppState.addEventListener('change', (nextAppState) => {
       console.log('>> 0' + appStateVisible);
-      console.log('>> 1' + nextAppState);
     });
     return () => {
-      console.log('>> 2' + appStateVisible);
+      console.log('>> 1' + appStateVisible);
       subscription.remove();
     };
   }, []);
 
   React.useEffect(() => {
-    console.log('>> 3' + appStateVisible);
     if (appStateVisible !== 'active') {
       return;
     }

diff --git a/src/components/elements/SnapCamera/SnapCamera.tsx b/src/components/elements/SnapCamera/SnapCamera.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {StyleSheet, StatusBar} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {
   PinchGestureHandler,
   PinchGestureHandlerGestureEvent,
@@ -38,16 +38,12 @@ import {
   SCALE_FULL_ZOOM,
   BUTTON_SIZE,
 } from '../../../constants';
-import PermissionContext from '../../../context/permission-context';
-import {PermissionCamera} from './PermissionCamera';
-import changeNavigationBarColor from 'react-native-navigation-bar-color-fix-behavior-status-bar';
+
 import Icon from '../Icon';
-import {useAppDispatch} from '@src/redux/useRedux';
-import {resetSelectionArts} from '@src/redux/slices/artSlice';
 
 type SnapCameraProps = {
   children?: React.ReactNode;
-  onSwitchToAR: () => void;
+  onSwitchToAR?: () => void;
 };
 
 const ReanimatedCamera = Reanimated.createAnimatedComponent(Camera);
@@ -56,9 +52,11 @@ Reanimated.addWhitelistedNativeProps({
 });
 
 //Construct Component
-const SnapCamera: React.FC<SnapCameraProps> = ({children, ...rest}) => {
-  const dispatch = useAppDispatch();
-  const {isPass} = React.useContext(PermissionContext);
+const SnapCamera: React.FC<SnapCameraProps> = ({
+  children,
+  onSwitchToAR,
+  ...rest
+}) => {
   const navigation = useNavigation();
   const camera = React.useRef<Camera>(null);
   const [isCameraInitialized, setIsCameraInitialized] = React.useState(false);
@@ -283,11 +281,6 @@ const SnapCamera: React.FC<SnapCameraProps> = ({children, ...rest}) => {
     // ImagePicker.launchImageLibrary({mediaType: 'mixed'}, setResponse);
   }, []);
 
-  const _onSwitchToAR = React.useCallback((type?: any, options?: any) => {
-    dispatch(resetSelectionArts());
-    navigation.navigate('AcquireARScreen' as any);
-  }, []);
-
   React.useEffect(() => {
     navigation.addListener('beforeRemove', (e) => {
       setIsCameraInitialized(false);
@@ -299,7 +292,7 @@ const SnapCamera: React.FC<SnapCameraProps> = ({children, ...rest}) => {
 
   return (
     <>
-      {device != null && isPass ? (
+      {device != null && (
         <Container style={[styles.cameraContainer]}>
           <PinchGestureHandler
             onGestureEvent={onPinchGesture}
@@ -361,7 +354,7 @@ const SnapCamera: React.FC<SnapCameraProps> = ({children, ...rest}) => {
           <Container style={styles.bottomRightRow}>
             <PressableOpacity
               style={styles.squre}
-              onPress={_onSwitchToAR}
+              onPress={onSwitchToAR}
               disabledOpacity={0.4}>
               <Icon name="vr-cardboard" color="white" size={24} />
             </PressableOpacity>
@@ -438,8 +431,6 @@ const SnapCamera: React.FC<SnapCameraProps> = ({children, ...rest}) => {
             </PressableOpacity>
           </Container>
         </Container>
-      ) : (
-        <PermissionCamera />
       )}
     </>
   );

diff --git a/src/redux/rootReducers.ts b/src/redux/rootReducers.ts
@@ -3,17 +3,18 @@ import {persistCombineReducers} from 'redux-persist';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import theme from './slices/themeSlice';
 import artSlice from './slices/artSlice';
-
+import camera from './slices/cameraSlice';
 //Reducer
 const reducers = {
   theme,
+  camera,
   artSlice,
 };
 
 const persistConfig = {
   key: 'root',
   storage: AsyncStorage,
-  whitelist: ['theme'],
+  whitelist: ['theme', 'camera'],
 };
 
 export const persistedRootReducer = persistCombineReducers(

diff --git a/src/redux/slices/cameraSlice.ts b/src/redux/slices/cameraSlice.ts
@@ -0,0 +1,41 @@
+import {createSlice} from '@reduxjs/toolkit';
+import {RootState} from '../useRedux';
+
+const sliceName = 'camera';
+
+const slice = createSlice({
+  name: sliceName,
+  initialState: {
+    label: 'Prompt',
+    value: 'prompt',
+  } as CameraState,
+  reducers: {
+    changeDefault: (state: CameraState, action: CameraLoad) => {
+      state.label =
+        typeof action.payload.label !== 'undefined'
+          ? action.payload.label
+          : 'Prompt';
+      state.value =
+        typeof action.payload.value !== 'undefined'
+          ? action.payload.value
+          : 'prompt';
+    },
+  },
+});
+
+export const {changeDefault} = slice.actions;
+export const fetchDefault = (state: RootState) => state.camera;
+
+export default slice.reducer;
+
+export type CameraState = {
+  label: 'Device' | 'AR' | 'Prompt';
+  value: 'device' | 'ar' | 'prompt';
+};
+
+type CameraLoad = {
+  payload: {
+    label: 'Device' | 'AR' | 'Prompt';
+    value: 'device' | 'ar' | 'prompt';
+  };
+};
diff --git a/src/screens/Acquire/Acquire.tsx b/src/screens/Acquire/Acquire.tsx
@@ -1,17 +1,28 @@
 import * as React from 'react';
-import {useTheme, useNavigation} from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/native';
+
+import {useAppDispatch} from '@src/redux/useRedux';
+import {resetSelectionArts} from '@src/redux/slices/artSlice';
 import {Container, SnapCamera} from '@src/components/elements';
 import NavProvider from '@src/components/common/NavProvider/NavProvider';
+import PermissionContext from '@src/context/permission-context';
+import {PermissionCamera} from '@src/components/elements/SnapCamera/PermissionCamera';
 import AuthContext from '@src/context/auth-context';
 import {profile} from '@src/data/mock-profile';
 import styles from './styles';
 
 type AcquireProps = {};
 
 const Acquire: React.FC<AcquireProps> = () => {
+  const dispatch = useAppDispatch();
+  const {isPass} = React.useContext(PermissionContext);
   const navigation = useNavigation();
   const {userToken} = React.useContext(AuthContext);
 
+  const _onSwitchToAR = React.useCallback((type?: any, options?: any) => {
+    dispatch(resetSelectionArts());
+    navigation.navigate('AcquireARScreen' as any);
+  }, []);
   return (
     <>
       <NavProvider
@@ -21,7 +32,11 @@ const Acquire: React.FC<AcquireProps> = () => {
         }}
       />
       <Container style={styles.acquireContainer}>
-        <SnapCamera />
+        {isPass ? (
+          <SnapCamera onSwitchToAR={_onSwitchToAR} />
+        ) : (
+          <PermissionCamera />
+        )}
       </Container>
     </>
   );

diff --git a/src/screens/AcquireAR/AcquireAR.tsx b/src/screens/AcquireAR/AcquireAR.tsx
@@ -3,8 +3,10 @@ import {useNavigation} from '@react-navigation/core';
 import {Image, Animated} from 'react-native';
 import LottieView from 'lottie-react-native';
 import {PressableOpacity} from 'react-native-pressable-opacity';
-import {ViroARSceneNavigator, ViroConstants} from '@viro-community/react-viro';
+import {ViroConstants} from '@viro-community/react-viro';
 //Default
+import PermissionContext from '@src/context/permission-context';
+import {PermissionCamera} from '@src/components/elements/SnapCamera/PermissionCamera';
 import NavProvider from '@src/components/common/NavProvider/NavProvider';
 import {
   Container,
@@ -25,13 +27,12 @@ import {
 } from '@src/redux/slices/artSlice';
 import {selectSortedArts} from '@src/redux/combinedSelector';
 import {useAppDispatch, useAppSelector} from '@src/redux/useRedux';
-import {mockItemArt} from '@src/data/mock-arts';
 
 type AcquireARProps = {};
 
 const AcquireAR: React.FC<AcquireARProps> = () => {
   const dispatch = useAppDispatch();
-
+  const {isPass} = React.useContext(PermissionContext);
   const {userToken} = React.useContext(AuthContext);
   const allArts = useAppSelector(selectSortedArts);
   const planReady = useAppSelector(fetchPlanStatus);
@@ -108,81 +109,91 @@ const AcquireAR: React.FC<AcquireARProps> = () => {
         }}
       />
       <Container style={[styles.cameraContainer]}>
-        <SnapCameraAR onInitialScene={_renderScreen} />
-
-        <Container style={styles.topCenterRow}>
-          {!planReady ? (
-            <Animated.View
-              style={{
-                flex: 1,
-                flexDirection: 'column',
-                alignItems: 'center',
-                marginTop: 50,
-                opacity: fadeIn,
-              }}>
-              <LottieView
-                style={{
-                  alignSelf: 'center',
-                  width: '45%',
-                  marginBottom: 10,
-                }}
-                source={require('@src/assets/animations/load-ar-screen.json')}
-                autoPlay
-                loop={true}
-                onAnimationFinish={() => {}}
-              />
-              <Image
-                style={{
-                  flex: 1,
-                  resizeMode: 'contain',
-                  height: 30,
-                }}
-                source={require('@src/assets/arts/icon_initializing_text.png')}
-              />
-            </Animated.View>
-          ) : (
-            <Animated.View
-              style={{
-                flex: 1,
-                flexDirection: 'column',
-                alignItems: 'center',
-                marginTop: 50,
-                opacity: fadeOut,
-              }}>
-              <Image
-                style={{
-                  flex: 1,
-                  height: 80,
-                  marginBottom: 10,
-                  resizeMode: 'contain',
-                }}
-                source={require('@src/assets/arts/icon_initializing_device.png')}
-              />
-              <Image
-                style={{
-                  flex: 1,
-                  resizeMode: 'contain',
-                  height: 30,
-                }}
-                source={require('@src/assets/arts/icon_initializing_text_done.png')}
+        {isPass ? (
+          <>
+            <SnapCameraAR onInitialScene={_renderScreen} />
+            <Container style={styles.topCenterRow}>
+              {!planReady ? (
+                <Animated.View
+                  style={{
+                    flex: 1,
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    marginTop: 50,
+                    opacity: fadeIn,
+                  }}>
+                  <LottieView
+                    style={{
+                      alignSelf: 'center',
+                      width: '45%',
+                      marginBottom: 10,
+                    }}
+                    source={require('@src/assets/animations/load-ar-screen.json')}
+                    autoPlay
+                    loop={true}
+                    onAnimationFinish={() => {}}
+                  />
+                  <Image
+                    style={{
+                      flex: 1,
+                      resizeMode: 'contain',
+                      height: 30,
+                    }}
+                    source={require('@src/assets/arts/icon_initializing_text.png')}
+                  />
+                </Animated.View>
+              ) : (
+                <Animated.View
+                  style={{
+                    flex: 1,
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    marginTop: 50,
+                    opacity: fadeOut,
+                  }}>
+                  <Image
+                    style={{
+                      flex: 1,
+                      height: 80,
+                      marginBottom: 10,
+                      resizeMode: 'contain',
+                    }}
+                    source={require('@src/assets/arts/icon_initializing_device.png')}
+                  />
+                  <Image
+                    style={{
+                      flex: 1,
+                      resizeMode: 'contain',
+                      height: 30,
+                    }}
+                    source={require('@src/assets/arts/icon_initializing_text_done.png')}
+                  />
+                </Animated.View>
+              )}
+            </Container>
+            <Container style={styles.topRightRow}>
+              <PressableOpacity style={styles.button} disabledOpacity={0.4}>
+                <Icon
+                  name="camera-reverse"
+                  useIonicons
+                  color="white"
+                  size={24}
+                />
+              </PressableOpacity>
+            </Container>
+            <Container style={[styles.bottomRow]}>
+              <Carousel
+                data={allArts}
+                renderContent={_renderItem}
+                itemWidth={60}
+                enableSnap={false}
+                hasPagination={false}
               />
-            </Animated.View>
-          )}
-        </Container>
-        <Container style={styles.topRightRow}>
-          <PressableOpacity style={styles.button} disabledOpacity={0.4}>
-            <Icon name="camera-reverse" useIonicons color="white" size={24} />
-          </PressableOpacity>
-        </Container>
-        <Container style={[styles.bottomRow]}>
-          <Carousel
-            data={allArts}
-            renderContent={_renderItem}
-            itemWidth={60}
-            enableSnap={false}
-            hasPagination={false}
-          />
-        </Container>
+            </Container>
+          </>
+        ) : (
+          <PermissionCamera />
+        )}
       </Container>
     </>
   );