feat: auto stop AR on dismount

Author: krsbx

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-ar-react",
-  "version": "0.1.0-beta2",
+  "version": "0.1.0-beta3",
   "main": "dist/index.js",
   "scripts": {
     "dev": "vite",
@@ -17,7 +17,7 @@
   "dependencies": {
     "aframe-react-component": "^0.1.0-beta2a",
     "lodash": "^4.17.21",
-    "mind-ar-ts": "^0.5.2-beta2a"
+    "mind-ar-ts": "^0.5.2-beta2b"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",

src/components/Scene.tsx

@@ -1,10 +1,13 @@
-import React, { useRef } from 'react';
-import { Scene as AScene } from 'aframe';
+import React, { useEffect, useRef } from 'react';
+import { Scene as AScene, SystemDefinition } from 'aframe';
 import { Scene as SceneComponent } from 'aframe-react-component';
 import { getAframeProps } from 'aframe-react-component/dist/utils/common';
+import { IMindARFaceSystem } from 'mind-ar-ts/types/face-target/aframe';
+import { IMindARImageSystem } from 'mind-ar-ts/types/image-target/aframe';
 import { generateFaceProps, generateImageProps } from '../utils/defaultprops';
 import { mergeRefs } from '../utils/common';
 import { Scene as _Scene } from '../utils/interfaces';
+import { AR_COMPONENT_NAME } from '../utils/constant';
 
 const Scene = React.forwardRef<AScene, _Scene>(({ children, ...props }, ref) => {
   const sceneRef = useRef<AScene>(null);
@@ -16,6 +19,22 @@ const Scene = React.forwardRef<AScene, _Scene>(({ children, ...props }, ref) =>
     ...rest
   } = props;
 
+  useEffect(() => {
+    if (!sceneRef.current) return;
+
+    if (!mindARImage || !mindARFace) return;
+
+    const arSystem = sceneRef.current.systems[
+      mindARImage ? AR_COMPONENT_NAME.IMAGE.IMAGE_SYSTEM : AR_COMPONENT_NAME.FACE.FACE_SYSTEM
+    ] as SystemDefinition<IMindARImageSystem | IMindARFaceSystem>;
+
+    return () => {
+      if (!arSystem) return;
+
+      arSystem.stop();
+    };
+  }, [sceneRef.current]);
+
   return (
     <SceneComponent
       {...rest}

src/utils/constant.ts

@@ -1,3 +1,18 @@
+export const AR_COMPONENT_NAME = {
+  FACE: {
+    FACE: 'mindar-face',
+    FACE_TARGET: 'mindar-face-target',
+    FACE_SYSTEM: 'mindar-face-system',
+    DEFAULT_OCCLUDER: 'mindar-face-default-face-occluder',
+    OCCULDER: 'mindar-face-occluder',
+  },
+  IMAGE: {
+    IMAGE: 'mindar-image',
+    IMAGE_TARGET: 'mindar-image-target',
+    IMAGE_SYSTEM: 'mindar-image-system',
+  },
+};
+
 export const COMPILER_STATE = {
   IDLE: 'IDLE',
   COMPILING: 'COMPILING',

src/utils/defaultprops.ts

@@ -1,13 +1,15 @@
 import { DefaultARProps, MindARFace, MindARImage } from './interfaces';
 
-const generateDefaultProps = (mindARDefault: DefaultARProps) => {
+const generateDefaultProps = (mindARDefault: DefaultARProps, isFace = false) => {
   if (mindARDefault?.autoStart === undefined) mindARDefault.autoStart = true;
   if (mindARDefault?.uiLoading === undefined) mindARDefault.uiLoading = 'yes';
   if (mindARDefault?.uiScanning === undefined) mindARDefault.uiScanning = 'yes';
   if (mindARDefault?.uiError === undefined) mindARDefault.uiError = 'yes';
   if (mindARDefault?.filterMinCF === undefined) mindARDefault.filterMinCF = -1;
   if (mindARDefault?.filterBeta === undefined) mindARDefault.filterBeta = -1;
-  if (mindARDefault?.shouldFaceUser === undefined) mindARDefault.shouldFaceUser = false;
+  if (mindARDefault?.shouldFaceUser === undefined) mindARDefault.shouldFaceUser = isFace;
+  if (mindARDefault?._positionSettings === undefined) mindARDefault._positionSettings = 'absolute';
+  if (mindARDefault?._positionZIndex === undefined) mindARDefault._positionZIndex = -2;
 
   return mindARDefault;
 };
@@ -25,7 +27,7 @@ export const generateImageProps = (mindARImage: MindARImage) => {
 };
 
 export const generateFaceProps = (mindARFace: MindARFace) => {
-  generateDefaultProps(mindARFace);
+  generateDefaultProps(mindARFace, true);
 
   if (mindARFace?.faceOccluder === undefined) mindARFace.faceOccluder = true;
 

src/utils/interfaces.ts

@@ -10,6 +10,8 @@ export type DefaultARProps = {
   filterMinCF?: number;
   filterBeta?: number;
   shouldFaceUser?: boolean;
+  _positionSettings?: string;
+  _positionZIndex?: number;
 };
 
 export type MindARImage = DefaultARProps & {