Add zustand (#30)

* Make room code required

* Make the app data object more convenient

* Fix bug with enable/disable second model button

* Fix bug with model names on scale slider

* Save template

* Start switching to Zustand

* Convert theme changed signal to use state store

* Remove renderer from app data

* Refactor model registry state stuff

* Refactor canLoadModel to use store

* Refactor modelInScene to use store

* Refactor scenesWithModel to use store

* Remove dead code

* Refactor isSecondScene to use store

* Refactor isConnecting to use store

* Refactor config to use store

* Refactor selected to use store*

* Refactor arCube to use store*

* Add a clean up method when stopping presentation

* Small fixes to get working again

* lint

* Clean up cube file

Author: gjmooney

RELEASE.md

@@ -82,7 +82,6 @@ Here is a summary of the steps to cut a new release:
 - If the repo generates PyPI release(s), create a scoped PyPI [token](https://packaging.python.org/guides/publishing-package-distribution-releases-using-github-actions-ci-cd-workflows/#saving-credentials-on-github). We recommend using a scoped token for security reasons.
 
 - You can store the token as `PYPI_TOKEN` in your fork's `Secrets`.
-
   - Advanced usage: if you are releasing multiple repos, you can create a secret named `PYPI_TOKEN_MAP` instead of `PYPI_TOKEN` that is formatted as follows:
 
     ```text

package.json

@@ -80,7 +80,8 @@
         "three": "^0.162.0",
         "ts-xor": "^1.3.0",
         "unique-names-generator": "^4.7.1",
-        "use-file-picker": "^2.1.2"
+        "use-file-picker": "^2.1.2",
+        "zustand": "^4.5.2"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",

src/arCube.ts

@@ -1,7 +1,4 @@
-import {
-  selectAppData,
-  selectIsSomeoneScreenSharing
-} from '@100mslive/react-sdk';
+import { selectIsSomeoneScreenSharing } from '@100mslive/react-sdk';
 //@ts-expect-error AR.js doesn't have type definitions
 import * as THREEx from '@ar-js-org/ar.js/three.js/build/ar-threex.js';
 import { IThemeManager } from '@jupyterlab/apputils';
@@ -10,9 +7,9 @@ import { ISignal, Signal } from '@lumino/signaling';
 import * as THREE from 'three';
 import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry';
 import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { APP_DATA } from './constants';
-import { hmsActions, hmsStore } from './hms';
+import { hmsStore } from './hms';
 import { IModelRegistryData } from './registry';
+import { useCubeStore } from './store';
 
 const FIRST_SCENE = 0;
 const SECOND_SCENE = 1;
@@ -29,19 +26,9 @@ class ArCube {
    * Construct a new JupyterLab-Gather widget.
    */
   constructor() {
-    this.secondSceneSignal = new Signal(this);
     this.scaleSignal = new Signal(this);
     this.bgCubeCenter = new THREE.Vector3();
     this.initialize();
-
-    // this.animate();
-    // window.addEventListener('markerFound', () => {
-    //   console.log('Marker found');
-    // });
-
-    // window.addEventListener('markerLost', () => {
-    //   console.log('Marker lost');
-    // });
   }
 
   modelInScene: string[];
@@ -66,59 +53,45 @@ class ArCube {
   resolve: any;
   deltaTime: number;
   totalTime: number;
-  okToLoadModel: boolean;
   renderTarget: THREE.WebGLRenderTarget;
   sceneGroups: THREE.Group[];
   isSecondScene: boolean;
   bgCubeBoundingBox: THREE.Box3;
   readonly existingWebcam: HTMLVideoElement | null;
   readonly newWebcam: HTMLVideoElement | undefined;
-  readonly secondSceneSignal: Signal<this, boolean>;
   readonly scaleSignal: Signal<this, IScaleSignal>;
   bgCubeCenter: THREE.Vector3;
   arjsVid: HTMLElement | null;
-  // sceneGroup: THREE.Group;
-  // sceneGroupArray: THREE.Group[];
-  // edgeGroup: THREE.Group;
-  // gltfModel: THREE.Group;
-  // observer: IntersectionObserver;
-  // readonly markerControls: any;
-  // readonly ambientLight: THREE.AmbientLight;
-  // readonly rotationArray: THREE.Vector3[];
-  // readonly markerRoot: THREE.Group;
-  // readonly markerGroup: THREE.Group;
-  // readonly pointLight: THREE.PointLight;
-  // readonly loader: THREE.TextureLoader;
-  // readonly stageMesh: THREE.MeshBasicMaterial;
-  // readonly stage: THREE.Mesh;
-  // readonly edgeGeometry: THREE.CylinderGeometry;
-  // readonly edgeCenters: THREE.Vector3[];
-  // readonly edgeRotations: THREE.Vector3[];
-  // readonly animationRequestId: number | undefined;
-  // readonly now: number;
-  // readonly then: number;
-  // readonly elapsed: number;
-  // readonly fpsInterval: number;
-  // readonly webcamFromArjs: HTMLElement | null;
-  // model: IModelRegistryData;
+  videoDeviceIdUnsub: () => void;
+  isSecondSceneUnsub: () => void;
   themeChangedSignal: ISignal<
     IThemeManager,
     IChangedArgs<string, string | null>
-  >;
+  > | null;
 
   initialize() {
     this.sceneGroups = [];
     this.modelInScene = new Array(2);
     this.scenesWithModel = {};
-    hmsStore.subscribe(
-      this.setupSource.bind(this),
-      selectAppData(APP_DATA.videoDeviceId)
+
+    this.videoDeviceIdUnsub = useCubeStore.subscribe(
+      state => state.videoDeviceId,
+      videoDeviceId => {
+        console.log('dev - videoDeviceId', videoDeviceId);
+        this.setupSource();
+      }
     );
 
-    this.themeChangedSignal = hmsStore.getState(
-      selectAppData(APP_DATA.themeChanged)
+    this.isSecondSceneUnsub = useCubeStore.subscribe(
+      state => state.isSecondScene,
+      isSecondScene => (this.isSecondScene = isSecondScene)
     );
-    this.themeChangedSignal.connect(this.handleThemeChange.bind(this));
+
+    this.themeChangedSignal = useCubeStore.getState().themeChangedSignal;
+
+    this.themeChangedSignal
+      ? this.themeChangedSignal.connect(this.handleThemeChange.bind(this))
+      : console.log('Theme change signal not found');
 
     this.setupThreeStuff();
 
@@ -131,10 +104,21 @@ class ArCube {
     this.setupScene(FIRST_SCENE);
   }
 
+  cleanUp() {
+    this.videoDeviceIdUnsub();
+    this.isSecondSceneUnsub();
+
+    useCubeStore.setState({
+      canLoadModel: true,
+      modelInScene: [],
+      scenesWithModel: {},
+      isSecondScene: false
+    });
+  }
+
   setupThreeStuff() {
     console.log('setting up three stuff');
 
-    this.okToLoadModel = true;
     this.scene = new THREE.Scene();
 
     // promise to track if AR.js has loaded the webcam
@@ -199,13 +183,11 @@ class ArCube {
     this.clock = new THREE.Clock();
     this.deltaTime = 0;
     this.totalTime = 0;
-
-    hmsActions.setAppData(APP_DATA.renderer, this.renderer);
   }
 
   setupSource() {
     console.log('setting up source');
-    const deviceId = hmsStore.getState(selectAppData(APP_DATA.videoDeviceId));
+    const deviceId = useCubeStore.getState().videoDeviceId;
 
     this.arToolkitSource = new THREEx.ArToolkitSource({
       sourceType: 'webcam',
@@ -228,22 +210,6 @@ class ArCube {
     return cubeColorValue;
   }
 
-  // updateSource() {
-  //   const deviceId = hmsStore.getState(selectAppData('videoDeviceId'));
-
-  //   this.arToolkitSource = new THREEx.ArToolkitSource({
-  //     sourceType: 'webcam',
-  //     deviceId
-  //   });
-
-  //   this.arjsVid = document.getElementById('arjs-video');
-
-  //   if (this.arjsVid) {
-  //     this.arjsVid.remove();
-  //   }
-  //   this.arToolkitSource.init();
-  // }
-
   setupContext() {
     console.log('setting up context');
 
@@ -390,10 +356,9 @@ class ArCube {
     // }
 
     // load model
-    this.okToLoadModel = false;
-    hmsActions.setAppData(APP_DATA.canLoadModel, false);
+    useCubeStore.setState({ canLoadModel: false });
 
-    if ('url' in model) {
+    if ('url' in model!) {
       this.gltfLoader.load(
         model.url,
         gltf => {
@@ -406,7 +371,7 @@ class ArCube {
           console.log('Error loading model url', error);
         }
       );
-    } else if ('gltf' in model) {
+    } else if ('gltf' in model!) {
       // const data = JSON.stringify(model.gltf);
       const data = model.gltf;
       this.gltfLoader.parse(
@@ -462,7 +427,6 @@ class ArCube {
 
     // add model to scene
     this.sceneGroups[sceneNumber].add(gltfModel);
-    this.okToLoadModel = true;
 
     // Track which scenes a model is loaded in
     // This is mostly to reflect changes to a model in JupyterCAD if it's loaded in multiple scenes
@@ -484,10 +448,11 @@ class ArCube {
     // Track which model is loaded in which scene
     // This is to get model names on the scale sliders
     this.modelInScene[sceneNumber] = modelName;
+    useCubeStore.setState({ modelInScene: this.modelInScene });
 
     // update app data state
-    hmsActions.setAppData(APP_DATA.loadedModels, updatedScenesWithModel);
-    hmsActions.setAppData(APP_DATA.canLoadModel, true);
+    useCubeStore.setState({ canLoadModel: true });
+    useCubeStore.setState({ scenesWithModel: updatedScenesWithModel });
 
     // Send scale value to right sidebar
     this.scaleSignal.emit({ sceneNumber, scale: minRatio });
@@ -522,15 +487,14 @@ class ArCube {
   }
 
   findModelByName(name: string) {
-    const modelRegistry = hmsStore.getState(
-      selectAppData(APP_DATA.modelRegistry)
-    );
+    const modelRegistry = useCubeStore.getState().modelRegistry;
     return modelRegistry.find(
       (model: IModelRegistryData) => model.name === name
     );
   }
 
   changeModelInScene(sceneNumber: number, modelName: string) {
+    console.log('dev - change model in scene', sceneNumber, modelName);
     // update tracking stuff
     const modelNameToRemove = this.modelInScene[sceneNumber];
     const updatedModels = { ...this.scenesWithModel };
@@ -558,14 +522,12 @@ class ArCube {
 
   enableSecondScene() {
     console.log('enabling second');
-    this.isSecondScene = true;
     this.setupScene(SECOND_SCENE);
-    this.secondSceneSignal.emit(true);
+    useCubeStore.setState({ isSecondScene: true });
   }
 
   disableSecondScene() {
     console.log('disabling second');
-    this.isSecondScene = false;
     //TODO this won't work with more than two scenes but it's fine for now
     this.sceneGroups.pop();
 
@@ -575,7 +537,7 @@ class ArCube {
       }
     });
 
-    this.secondSceneSignal.emit(false);
+    useCubeStore.setState({ isSecondScene: false });
   }
 
   resizeCanvasToDisplaySize() {

src/arCubePlugin.ts

@@ -6,8 +6,7 @@ import {
 } from '@100mslive/hms-video-store';
 import * as THREE from 'three';
 import ArCube from './arCube';
-import { APP_DATA } from './constants';
-import { hmsActions } from './hms';
+import { useCubeStore } from './store';
 
 class ArCubePlugin implements HMSVideoPlugin {
   input: HTMLCanvasElement | null;
@@ -147,7 +146,7 @@ class ArCubePlugin implements HMSVideoPlugin {
 
   async init() {
     this.arCube = new ArCube();
-    hmsActions.setAppData(APP_DATA.arCube, this.arCube);
+    useCubeStore.setState({ arCube: this.arCube });
 
     this.arCube.animate();
   }
@@ -161,6 +160,8 @@ class ArCubePlugin implements HMSVideoPlugin {
   }
 
   stop() {
+    useCubeStore.setState({ arCube: null });
+
     // Remove video element added by AR.js
     const video = document.getElementById('arjs-video') as HTMLVideoElement;
 

src/components/MainDisplay.tsx

@@ -1,5 +1,4 @@
 import {
-  selectAppData,
   selectIsConnectedToRoom,
   selectSessionStore,
   useHMSActions,
@@ -8,11 +7,12 @@ import {
 import { IStateDB } from '@jupyterlab/statedb';
 import React, { useEffect } from 'react';
 
-import { APP_DATA, SESSION_STORE } from '../constants';
+import { SESSION_STORE } from '../constants';
 import GridView from '../layouts/GridView';
 import JoinFormView from '../layouts/JoinFormView';
 import PresenterView from '../layouts/PresenterView';
 import PreviewView from '../layouts/PreviewView';
+import { useCubeStore } from '../store';
 import ControlBar from './ControlBar';
 
 interface IMainDisplayProps {
@@ -22,14 +22,16 @@ interface IMainDisplayProps {
 export const MainDisplay = ({ state }: IMainDisplayProps) => {
   const hmsActions = useHMSActions();
   const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const isConnecting = useHMSStore(selectAppData(APP_DATA.isConnecting));
   const isPresenting = useHMSStore(
     selectSessionStore(SESSION_STORE.isPresenting)
   );
 
+  const isConnecting = useCubeStore.use.isConnecting();
+  const updateIsConnecting = useCubeStore.use.updateIsConnecting();
+
   useEffect(() => {
     if (isConnected) {
-      hmsActions.setAppData(APP_DATA.isConnecting, false);
+      updateIsConnecting(false);
     }
   }, [isConnected]);
 

src/components/buttons/PluginButton.tsx

@@ -13,6 +13,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useEffect, useState } from 'react';
 import ArCubePlugin from '../../arCubePlugin';
 import { SESSION_STORE } from '../../constants';
+import { useCubeStore } from '../../store';
 
 const PluginButton = () => {
   const hmsActions = useHMSActions();
@@ -33,6 +34,8 @@ const PluginButton = () => {
   const [isDisabled, setIsDisabled] = useState(false);
   const [prevRole, setPrevRole] = useState<HMSRole>();
 
+  const arCube = useCubeStore.use.arCube();
+
   useEffect(() => {
     hmsActions.sessionStore.observe(SESSION_STORE.isPresenting);
     hmsActions.sessionStore.observe(SESSION_STORE.presenterId);
@@ -62,6 +65,7 @@ const PluginButton = () => {
       // togglePresenterRole(prevRole?.name);
       hmsActions.sessionStore.set(SESSION_STORE.isPresenting, false);
       hmsActions.sessionStore.set(SESSION_STORE.presenterId, '');
+      arCube?.cleanUp();
 
       await hmsActions.removePluginFromVideoTrack(arPlugin);
     }

src/components/modals/AddNewFileModal.tsx

@@ -5,6 +5,7 @@ import {
   uniqueNamesGenerator
 } from 'unique-names-generator';
 import { useFilePicker } from 'use-file-picker';
+//@ts-expect-error no types
 import { FileTypeValidator } from 'use-file-picker/validators';
 import { IModelRegistryData } from '../../registry';
 import Modal from './Modal';