Skip to content

Commit 8cb78aa

Browse files
gjmooneygjmooney
authored
Improve type safety (#26)
1 parent caded6e commit 8cb78aa

File tree

13 files changed

+97
-47
lines changed

13 files changed

+97
-47
lines changed

‎src/arCube.ts‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { ISignal, Signal } from '@lumino/signaling';
1010
import * as THREE from 'three';
1111
import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry';
1212
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
13+
import { APP_DATA } from './constants';
1314
import { hmsActions, hmsStore } from './hms';
1415
import { IModelRegistryData } from './registry';
1516

@@ -111,10 +112,12 @@ class ArCube {
111112
this.scenesWithModel = {};
112113
hmsStore.subscribe(
113114
this.setupSource.bind(this),
114-
selectAppData('videoDeviceId')
115+
selectAppData(APP_DATA.videoDeviceId)
115116
);
116117

117-
this.themeChangedSignal = hmsStore.getState(selectAppData('themeChanged'));
118+
this.themeChangedSignal = hmsStore.getState(
119+
selectAppData(APP_DATA.themeChanged)
120+
);
118121
this.themeChangedSignal.connect(this.handleThemeChange.bind(this));
119122

120123
this.setupThreeStuff();
@@ -197,12 +200,12 @@ class ArCube {
197200
this.deltaTime = 0;
198201
this.totalTime = 0;
199202

200-
hmsActions.setAppData('renderer', this.renderer);
203+
hmsActions.setAppData(APP_DATA.renderer, this.renderer);
201204
}
202205

203206
setupSource() {
204207
console.log('setting up source');
205-
const deviceId = hmsStore.getState(selectAppData('videoDeviceId'));
208+
const deviceId = hmsStore.getState(selectAppData(APP_DATA.videoDeviceId));
206209

207210
this.arToolkitSource = new THREEx.ArToolkitSource({
208211
sourceType: 'webcam',
@@ -388,7 +391,7 @@ class ArCube {
388391

389392
// load model
390393
this.okToLoadModel = false;
391-
hmsActions.setAppData('canLoadModel', false);
394+
hmsActions.setAppData(APP_DATA.canLoadModel, false);
392395

393396
if ('url' in model) {
394397
this.gltfLoader.load(
@@ -483,8 +486,8 @@ class ArCube {
483486
this.modelInScene[sceneNumber] = modelName;
484487

485488
// update app data state
486-
hmsActions.setAppData('loadedModels', updatedScenesWithModel);
487-
hmsActions.setAppData('canLoadModel', true);
489+
hmsActions.setAppData(APP_DATA.loadedModels, updatedScenesWithModel);
490+
hmsActions.setAppData(APP_DATA.canLoadModel, true);
488491

489492
// Send scale value to right sidebar
490493
this.scaleSignal.emit({ sceneNumber, scale: minRatio });
@@ -519,7 +522,9 @@ class ArCube {
519522
}
520523

521524
findModelByName(name: string) {
522-
const modelRegistry = hmsStore.getState(selectAppData('modelRegistry'));
525+
const modelRegistry = hmsStore.getState(
526+
selectAppData(APP_DATA.modelRegistry)
527+
);
523528
return modelRegistry.find(
524529
(model: IModelRegistryData) => model.name === name
525530
);

‎src/arCubePlugin.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
} from '@100mslive/hms-video-store';
77
import * as THREE from 'three';
88
import ArCube from './arCube';
9+
import { APP_DATA } from './constants';
910
import { hmsActions } from './hms';
1011

1112
class ArCubePlugin implements HMSVideoPlugin {
@@ -146,7 +147,7 @@ class ArCubePlugin implements HMSVideoPlugin {
146147

147148
async init() {
148149
this.arCube = new ArCube();
149-
hmsActions.setAppData('arCube', this.arCube);
150+
hmsActions.setAppData(APP_DATA.arCube, this.arCube);
150151

151152
this.arCube.animate();
152153
}

‎src/components/ControlBar.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
import { faPersonThroughWindow } from '@fortawesome/free-solid-svg-icons';
1111
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
1212
import React, { useEffect } from 'react';
13+
import { SESSION_STORE } from '../constants';
1314
import AudioToggleButton from './buttons/AudioToggleButton';
1415
import PluginButton from './buttons/PluginButton';
1516
import RaiseHandButton from './buttons/RaiseHandButton';
@@ -22,17 +23,19 @@ const ControlBar = () => {
2223
const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeer!.id));
2324
const { toggleAudio } = useAVToggle();
2425

25-
const presenterId = useHMSStore<HMSPeer>(selectSessionStore('presenterId'));
26+
const presenterId = useHMSStore<HMSPeer>(
27+
selectSessionStore(SESSION_STORE.presenterId)
28+
);
2629

2730
useEffect(() => {
28-
hmsActions.sessionStore.observe('presenterId');
31+
hmsActions.sessionStore.observe(SESSION_STORE.presenterId);
2932
}, [hmsActions]);
3033

3134
const handleLeave = async () => {
3235
// Stop presentation if presenter leaves
3336
if (localPeer?.id === presenterId?.id) {
34-
await hmsActions.sessionStore.set('isPresenting', false);
35-
await hmsActions.sessionStore.set('presenterId', '');
37+
await hmsActions.sessionStore.set(SESSION_STORE.isPresenting, false);
38+
await hmsActions.sessionStore.set(SESSION_STORE.presenterId, '');
3639
}
3740

3841
hmsActions.leave();

‎src/components/MainDisplay.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
import { IStateDB } from '@jupyterlab/statedb';
99
import React, { useEffect } from 'react';
1010

11+
import { APP_DATA, SESSION_STORE } from '../constants';
1112
import GridView from '../layouts/GridView';
1213
import JoinFormView from '../layouts/JoinFormView';
1314
import PresenterView from '../layouts/PresenterView';
@@ -21,19 +22,21 @@ interface IMainDisplayProps {
2122
export const MainDisplay = ({ state }: IMainDisplayProps) => {
2223
const hmsActions = useHMSActions();
2324
const isConnected = useHMSStore(selectIsConnectedToRoom);
24-
const isConnecting = useHMSStore(selectAppData('isConnecting'));
25-
const isPresenting = useHMSStore(selectSessionStore('isPresenting'));
25+
const isConnecting = useHMSStore(selectAppData(APP_DATA.isConnecting));
26+
const isPresenting = useHMSStore(
27+
selectSessionStore(SESSION_STORE.isPresenting)
28+
);
2629

2730
useEffect(() => {
2831
if (isConnected) {
29-
hmsActions.setAppData('isConnecting', false);
32+
hmsActions.setAppData(APP_DATA.isConnecting, false);
3033
}
3134
}, [isConnected]);
3235

3336
useEffect(() => {
3437
if (isConnected) {
35-
hmsActions.sessionStore.observe('isPresenting');
36-
hmsActions.sessionStore.observe('presenterId');
38+
hmsActions.sessionStore.observe(SESSION_STORE.isPresenting);
39+
hmsActions.sessionStore.observe(SESSION_STORE.presenterId);
3740
}
3841

3942
window.onunload = () => {

‎src/components/buttons/PluginButton.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,17 @@ import { faBan, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
1212
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
1313
import React, { useEffect, useState } from 'react';
1414
import ArCubePlugin from '../../arCubePlugin';
15+
import { SESSION_STORE } from '../../constants';
1516

1617
const PluginButton = () => {
1718
const hmsActions = useHMSActions();
1819
const localPeer = useHMSStore(selectLocalPeer);
19-
const isPresenting = useHMSStore<boolean>(selectSessionStore('isPresenting'));
20-
const presenterId = useHMSStore<HMSPeer>(selectSessionStore('presenterId'));
20+
const isPresenting = useHMSStore<boolean>(
21+
selectSessionStore(SESSION_STORE.isPresenting)
22+
);
23+
const presenterId = useHMSStore<HMSPeer>(
24+
selectSessionStore(SESSION_STORE.presenterId)
25+
);
2126
const role = useHMSStore(selectLocalPeerRole);
2227

2328
const arPlugin = new ArCubePlugin();
@@ -29,8 +34,8 @@ const PluginButton = () => {
2934
const [prevRole, setPrevRole] = useState<HMSRole>();
3035

3136
useEffect(() => {
32-
hmsActions.sessionStore.observe('isPresenting');
33-
hmsActions.sessionStore.observe('presenterId');
37+
hmsActions.sessionStore.observe(SESSION_STORE.isPresenting);
38+
hmsActions.sessionStore.observe(SESSION_STORE.presenterId);
3439

3540
if (role) {
3641
setPrevRole(role);
@@ -48,15 +53,15 @@ const PluginButton = () => {
4853
if (!isPluginLoaded && !isPresenting) {
4954
console.log('adding');
5055
togglePresenterRole('presenter');
51-
hmsActions.sessionStore.set('isPresenting', true);
52-
hmsActions.sessionStore.set('presenterId', localPeer);
56+
hmsActions.sessionStore.set(SESSION_STORE.isPresenting, true);
57+
hmsActions.sessionStore.set(SESSION_STORE.presenterId, localPeer);
5358

5459
await hmsActions.addPluginToVideoTrack(arPlugin);
5560
} else {
5661
console.log('removing');
5762
togglePresenterRole(prevRole?.name);
58-
hmsActions.sessionStore.set('isPresenting', false);
59-
hmsActions.sessionStore.set('presenterId', '');
63+
hmsActions.sessionStore.set(SESSION_STORE.isPresenting, false);
64+
hmsActions.sessionStore.set(SESSION_STORE.presenterId, '');
6065

6166
await hmsActions.removePluginFromVideoTrack(arPlugin);
6267
}

‎src/components/modals/DeviceSettingModal.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { DeviceType, useDevices } from '@100mslive/react-sdk';
22
import React, { ChangeEvent, useEffect, useRef } from 'react';
33

4+
import { APP_DATA } from '../../constants';
45
import { hmsActions } from '../../hms';
56
import Modal from './Modal';
67

@@ -26,7 +27,7 @@ const DeviceSettingModal = ({ isOpen, onClose }: IAddNewModelModalProps) => {
2627
const updateDeviceOnChange = (deviceId: string, deviceType: DeviceType) => {
2728
updateDevice({ deviceId, deviceType });
2829
if (deviceType === DeviceType.videoInput) {
29-
hmsActions.setAppData('videoDeviceId', deviceId);
30+
hmsActions.setAppData(APP_DATA.videoDeviceId, deviceId);
3031
}
3132
};
3233

‎src/constants.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,21 @@ export const ROLES = {
1717
host: 'host',
1818
presenter: 'presenter'
1919
};
20+
21+
export const APP_DATA = {
22+
arCube: 'arCube',
23+
canLoadModel: 'canLoadModel',
24+
config: 'config',
25+
isConnecting: 'isConnecting',
26+
loadedModels: 'loadedModels',
27+
modelRegistry: 'modelRegistry',
28+
selectedModel: 'selectedModel',
29+
renderer: 'renderer',
30+
themeChanged: 'themeChanged',
31+
videoDeviceId: 'videoDeviceId'
32+
};
33+
34+
export const SESSION_STORE = {
35+
isPresenting: 'isPresenting',
36+
presenterId: 'presenterId'
37+
};

‎src/layouts/JoinFormView.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
colors,
99
uniqueNamesGenerator
1010
} from 'unique-names-generator';
11+
import { APP_DATA } from '../constants';
1112

1213
interface IJoinFormViewProps {
1314
state: IStateDB;
@@ -58,7 +59,7 @@ const JoinFormView = ({ state }: IJoinFormViewProps) => {
5859
e.preventDefault();
5960

6061
console.log('clicking join');
61-
hmsActions.setAppData('isConnecting', true);
62+
hmsActions.setAppData(APP_DATA.isConnecting, true);
6263

6364
const { userName = '', roomCode = '' } = inputValues;
6465

@@ -77,7 +78,7 @@ const JoinFormView = ({ state }: IJoinFormViewProps) => {
7778
},
7879
metaData: ''
7980
};
80-
hmsActions.setAppData('config', config);
81+
hmsActions.setAppData(APP_DATA.config, config);
8182

8283
try {
8384
await hmsActions.preview({ ...config });

‎src/layouts/PresenterView.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import React, { useEffect } from 'react';
77
import Peer from '../components/Peer';
88
import PeerSidePane from '../components/PeerSidePane';
99
import {
10+
SESSION_STORE,
1011
SIDEPANE_PEER_LIST_MARGIN,
1112
SIDEPANE_PEER_LIST_PADDING,
1213
SIDEPANE_PEER_LIST_TILE,
@@ -17,7 +18,7 @@ import { useResizeObserver } from '../hooks/useResizeObserver';
1718

1819
const PresenterView = () => {
1920
const peers = useHMSStore(selectPeers);
20-
const presenter = useHMSStore(selectSessionStore('presenterId'));
21+
const presenter = useHMSStore(selectSessionStore(SESSION_STORE.presenterId));
2122
const rootDimensions = useResizeObserver();
2223

2324
const sidepaneWidth =

‎src/layouts/PreviewView.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import AudioToggleButton from '../components/buttons/AudioToggleButton';
1212
import SettingsButton from '../components/buttons/SettingsButton';
1313
import VideoToggleButton from '../components/buttons/VideoToggleButton';
1414
import {
15+
APP_DATA,
1516
TILE_VIEW_GRID_HORIZONTAL_MARGIN,
1617
TILE_VIEW_GRID_VERTICAL_MARGIN
1718
} from '../constants';
@@ -23,7 +24,7 @@ const PreviewView = () => {
2324
const [isJoining, setIsJoining] = useState(false);
2425

2526
const localPeer = useHMSStore(selectLocalPeer);
26-
const config = useHMSStore(selectAppData('config'));
27+
const config = useHMSStore(selectAppData(APP_DATA.config));
2728
const rootDimensions = useResizeObserver();
2829

2930
const handleClick = () => {
@@ -33,7 +34,8 @@ const PreviewView = () => {
3334
};
3435

3536
const handleBack = () => {
36-
hmsActions.setAppData('isConnecting', false);
37+
hmsActions.setAppData(APP_DATA.isConnecting, false);
38+
hmsActions.leave();
3739
};
3840

3941
return (

0 commit comments

Comments
 (0)