adding portal

README.md

@@ -44,6 +44,7 @@ https://github.com/PSPatel5/react-native-boilerplate
 
 ## Others
 
+ViroTrackingStateConstants
 "@viro-community/react-viro": "file:../rn-repo/@viro-community/react-viro/viro-community-react-viro-2.23.0.tgz",
 
 - source={{
@@ -55,6 +56,7 @@ https://github.com/PSPatel5/react-native-boilerplate
   position={[0, -2, -2]}
 
   ## Viro
+
   Render models added to the scene.
   modelItems - list of models added by user; comes from redux, see js/redux/reducers/arobjects.js
   startingBitMask - used for adding shadows for each of the, for each new object added to the scene,

package.json

@@ -22,7 +22,7 @@
     "@react-navigation/native-stack": "^6.6.2",
     "@react-navigation/stack": "^6.2.1",
     "@reduxjs/toolkit": "^1.8.1",
-    "@viro-community/react-viro": "^2.22.0",
+    "@viro-community/react-viro": "2.22.0",
     "accounting": "^0.4.1",
     "dayjs": "^1.10.4",
     "lottie-ios": "^3.2.3",

src/components/elements/SnapCamera/SnapCamera.tsx

@@ -43,10 +43,11 @@ 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/storiesARSlice';
+import {resetSelectionArts} from '@src/redux/slices/artSlice';
 
 type SnapCameraProps = {
   children?: React.ReactNode;
+  onSwitchToAR: () => void;
 };
 
 const ReanimatedCamera = Reanimated.createAnimatedComponent(Camera);

src/components/elements/SnapCameraAR/ArtItemRender.tsx

@@ -6,8 +6,8 @@ import {
   ViroQuad,
   ViroSpotLight,
 } from '@viro-community/react-viro';
-import {ArtRowItem} from '../../../redux/ArtRowItem';
-import * as LoadConstants from './LoadingStateConstants';
+import {ArtRowItem, LOADING, LOADED} from '../../../redux/ArtRowItem';
+
 const faker = require('@faker-js/faker');
 interface IProps {
   modelIDProps?: ArtRowItem;
@@ -140,13 +140,13 @@ export default class ArtItemRender extends React.PureComponent<IProps, IState> {
 
   _onObjectLoadStart = (uuid: any) => {
     return () => {
-      this.props.onLoadCallback(uuid, LoadConstants.LOADING);
+      this.props.onLoadCallback(uuid, LOADING);
     };
   };
 
   _onObjectLoadEnd = (uuid: any) => {
     return () => {
-      this.props.onLoadCallback(uuid, LoadConstants.LOADED);
+      this.props.onLoadCallback(uuid, LOADED);
       if (!this.state.nodeIsVisible) {
         this.setState({
           nodeIsVisible: true,

src/components/elements/SnapCameraAR/SnapCameraAR.tsx

@@ -1,28 +1,42 @@
 import * as React from 'react';
+import {StyleSheet} from 'react-native';
 import {ViroARSceneNavigator} from '@viro-community/react-viro';
 
 interface IProps {
-  initialScene: any;
+  bloomEnabled?: boolean;
+  hdrEnabled?: boolean;
   autoFocus?: boolean;
-  onInitialized: (state: any, reason: any) => void;
-  //modelItems?: ArtRowItem;
+  onInitialScene: () => void;
 }
 
-interface IState {}
+interface IState {
+  bloomEnabled?: boolean;
+  hdrEnabled?: boolean;
+  autoFocus?: boolean;
+}
 
 export default class SnapCameraAR extends React.PureComponent<IProps, IState> {
+  state: IState = {
+    bloomEnabled: this.props.bloomEnabled ? this.props.bloomEnabled : false,
+    hdrEnabled: this.props.hdrEnabled ? this.props.hdrEnabled : false,
+    autoFocus: this.props.autoFocus ? this.props.autoFocus : false,
+  };
   render() {
     return (
       <ViroARSceneNavigator
-        bloomEnabled={true}
-        hdrEnabled={true}
-        style={{flex: 1}}
+        bloomEnabled={this.state.bloomEnabled}
+        hdrEnabled={this.state.hdrEnabled}
+        autofocus={this.state.autoFocus}
+        style={styles.screenNavContainer}
         initialScene={{
-          scene: () => {
-            return this.props.initialScene;
-          },
+          scene: this.props.onInitialScene,
         }}
       />
     );
   }
 }
+const styles = StyleSheet.create({
+  screenNavContainer: {
+    flex: 1,
+  },
+});

src/data/mock-portals.ts

@@ -0,0 +1,38 @@
+import {ImageSourcePropType} from 'react-native';
+const faker = require('@faker-js/faker');
+import {
+  PortalRowItem,
+  LOADED,
+  LOADING,
+  LOAD_ERROR,
+  NONE,
+  POSITION_OFFSET,
+} from '@src/redux/PortalRowItem';
+
+export const mockPortals: PortalRowItem[] = [
+  {
+    name: 'portal_window_frame',
+    selected: false,
+    loading: NONE,
+    icon_img: require('../res/icon_portal_windowframe.png'),
+    obj: require('../res/portal_window_frame/portal_window_frame.vrx'),
+    materials: null,
+    portal360Image: {
+      source: require('../res/360_guadalupe.jpg'),
+      width: 2,
+      height: 1,
+    },
+    animation: null,
+    scale: [1, 1, 1],
+    portalScale: [0.275, 0.275, 0.275],
+    position: [0, 0, 0],
+    frameType: 'VRX',
+    physics: undefined,
+    ref_pointer: undefined,
+    resources: [
+      require('../res/portal_window_frame/portal_window_frame_specular.png'),
+      require('../res/portal_window_frame/portal_window_frame_diffuse.png'),
+      require('../res/portal_window_frame/portal_window_frame_normal.png'),
+    ],
+  },
+];

src/redux/PortalRowItem.ts

@@ -0,0 +1,33 @@
+import {ImageSourcePropType} from 'react-native';
+
+export interface Image360 {
+  source: ImageSourcePropType;
+  width: number;
+  height: number;
+}
+
+export interface PortalRowItem {
+  id?: string;
+  name?: string;
+  seq?: number;
+  icon_img: ImageSourcePropType;
+  obj?: ImageSourcePropType;
+  portal360Image?: Image360;
+  resources?: Array<ImageSourcePropType>;
+  frameType?: string;
+  scale?: any;
+  portalScale?: any;
+  position?: any;
+  materials?: any;
+  animation?: any;
+  loading?: string;
+  physics?: any;
+  ref_pointer?: any;
+  selected?: boolean;
+}
+
+export const NONE = 'NONE';
+export const LOADING = 'LOADING';
+export const LOAD_ERROR = 'ERROR';
+export const LOADED = 'LOADED';
+export const POSITION_OFFSET = 0.05;

src/redux/combinedSelector.ts

@@ -1,6 +1,6 @@
 import {createSelector} from '@reduxjs/toolkit';
 import {ArtRowItem} from './ArtRowItem';
-import {selectArts} from './slices/storiesARSlice';
+import {selectArts} from './slices/artSlice';
 
 /**
  * Filters out users that are NOT in the follow list

src/redux/rootReducers.ts

@@ -2,12 +2,12 @@ import {combineReducers} from '@reduxjs/toolkit';
 import {persistCombineReducers} from 'redux-persist';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import theme from './slices/themeSlice';
-import storiesAR from './slices/storiesARSlice';
+import artSlice from './slices/artSlice';
 
 //Reducer
 const reducers = {
   theme,
-  storiesAR,
+  artSlice,
 };
 
 const persistConfig = {

src/redux/slices/storiesARSlice.ts → src/redux/slices/artSlice.ts

@@ -9,7 +9,7 @@ import {mockArts} from '@src/data/mock-arts';
 import {ArtRowItem} from '@src/redux/ArtRowItem';
 import {RootState} from '../useRedux';
 
-const sliceName = 'storiesAR';
+const sliceName = 'artSlice';
 type arts = ArtRowItem;
 
 export type ArtState = {
@@ -81,11 +81,11 @@ const {actions, reducer} = slice;
 export const {updatePlanStatus, updateSelectedArt, resetSelectionArts} =
   actions;
 export const fetchAllSelectionArts = (state: RootState) =>
-  state.storiesAR.allArts;
-export const selectedArt = (state: RootState) => state.storiesAR.selectedArt;
-export const fetchPlanStatus = (state: RootState) => state.storiesAR.planReady;
+  state.artSlice.allArts;
+export const selectedArt = (state: RootState) => state.artSlice.selectedArt;
+export const fetchPlanStatus = (state: RootState) => state.artSlice.planReady;
 
 export const {selectAll: selectArts} = artsAdapter.getSelectors(
-  (state: RootState) => state.storiesAR,
+  (state: RootState) => state.artSlice,
 );
 export default reducer;

src/redux/slices/portalSlice.ts

@@ -0,0 +1,91 @@
+import {
+  createAsyncThunk,
+  createSlice,
+  createEntityAdapter,
+  PayloadAction,
+} from '@reduxjs/toolkit';
+
+import {mockArts} from '@src/data/mock-arts';
+import {ArtRowItem} from '@src/redux/ArtRowItem';
+import {RootState} from '../useRedux';
+
+const sliceName = 'portalSlice';
+type arts = ArtRowItem;
+
+export type ArtState = {
+  loading?: boolean | null | undefined;
+  planReady?: boolean | null | undefined;
+  allArts?: Array<ArtRowItem>;
+  selectedArt?: ArtRowItem;
+};
+
+type ArtPayload = {
+  payload: {
+    loading?: boolean | null | undefined;
+    planReady?: boolean | null | undefined;
+    allArts?: Array<ArtRowItem>;
+    selectedArt?: ArtRowItem;
+  };
+};
+
+//Sample from ts-rn
+export const fetchArtsAPI = createAsyncThunk(
+  `${sliceName}/fetchArts-api`,
+  async () => {
+    return mockArts;
+  },
+);
+//Source from modern-redux
+const artsAdapter = createEntityAdapter<arts>({
+  selectId: (arts: ArtRowItem) => arts.id as any,
+});
+
+const slice = createSlice({
+  name: sliceName,
+  initialState: artsAdapter.getInitialState({
+    loading: false,
+    planReady: false,
+    allArts: [],
+    selectedArt: undefined,
+  } as ArtState),
+  reducers: {
+    updatePlanStatus(state: ArtState, {payload: {planReady}}: ArtPayload) {
+      state.planReady = planReady;
+    },
+    updateSelectedArt(state: ArtState, action: PayloadAction<ArtRowItem>) {
+      state.allArts?.push(action.payload);
+      state.selectedArt = action.payload;
+    },
+    resetSelectionArts(state: ArtState) {
+      state.allArts = [];
+      state.selectedArt = undefined;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchArtsAPI.pending, (state) => {
+      state.loading = true;
+    });
+    builder.addCase(fetchArtsAPI.fulfilled, (state, action) => {
+      artsAdapter.setAll(state, action.payload);
+      state.loading = false;
+    });
+    builder.addCase(fetchArtsAPI.rejected, (state) => {
+      state.loading = false;
+    });
+  },
+});
+
+//Sample from ts-rn
+const {actions, reducer} = slice;
+
+export const {updatePlanStatus, updateSelectedArt, resetSelectionArts} =
+  actions;
+export const fetchAllSelectionArts = (state: RootState) =>
+  state.artSlice.allArts;
+export const selectedArt = (state: RootState) => state.artSlice.selectedArt;
+export const fetchPlanStatus = (state: RootState) => state.artSlice.planReady;
+
+export const {selectAll: selectArts} = artsAdapter.getSelectors(
+  (state: RootState) => state.artSlice,
+);
+export default reducer;

src/screens/AcquireAR/AcquireAR.tsx

@@ -22,7 +22,7 @@ import {
   fetchPlanStatus,
   updateSelectedArt,
   updatePlanStatus,
-} from '@src/redux/slices/storiesARSlice';
+} 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';
@@ -108,12 +108,7 @@ const AcquireAR: React.FC<AcquireARProps> = () => {
         }}
       />
       <Container style={[styles.cameraContainer]}>
-        <ViroARSceneNavigator
-          style={styles.screenNavContainer}
-          initialScene={{
-            scene: _renderScreen,
-          }}
-        />
+        <SnapCameraAR onInitialScene={_renderScreen} />
 
         <Container style={styles.topCenterRow}>
           {!planReady ? (

src/screens/AcquireAR/scene/ReviewScene.tsx

@@ -4,7 +4,6 @@ import {
   ViroAmbientLight,
   ViroDirectionalLight,
   ViroSpotLight,
-  ViroConstants,
 } from '@viro-community/react-viro';
 import {ArtRowItem} from '@src/redux/ArtRowItem';
 import ArtItemRender from '@src/components/elements/SnapCameraAR/ArtItemRender';
@@ -13,8 +12,8 @@ import {RootState} from '@src/redux/useRedux';
 const faker = require('@faker-js/faker');
 
 const mapStateToProps = (state: RootState) => ({
-  allArts: state.storiesAR.allArts,
-  selectArt: state.storiesAR.selectedArt,
+  allArts: state.artSlice.allArts,
+  selectArt: state.artSlice.selectedArt,
 });
 const mapDispatchToProps = () => ({});
 
@@ -35,7 +34,6 @@ class ReviewScene extends React.PureComponent<
   private renderedObjects: any = [];
   private defaultBitMask = 2;
   _onLoadCallback = (uuid: any, state: any) => {};
-
   _onHitTestMethod = (callback: any) => {
     this.arSceneRef.current
       .getCameraOrientationAsync()
@@ -72,7 +70,7 @@ class ReviewScene extends React.PureComponent<
     let models = this._renderModels();
     return (
       <ViroARScene
-        ref={this.arSceneRef}
+        ref={this.arSceneRef as any}
         physicsWorld={{gravity: [0, -9.81, 0]} as any}
         onTrackingUpdated={this.props.onInitialized}>
         <ViroAmbientLight color="#ffffff" intensity={20} />