clubhouse.md

• Show the GitHub repo / blog -> git clone -> template branch
• Explain folder structure
• components -> have all dumb react components most of them are stateless, some of them need props which we will look into when we are using them
• Icons -> have all our icons as a react svg component
• Utils -> have all our utility functions
• Show example.env

Add env variables in .env file

---

• yarn start and show them what it looks like open Join.jsx & Room.jsx explain what is happening

• We need to initialize 100ms SDK to harness the power of data store , hmsActions and selector functions

• wrap our entire App component around <HMSRoomProvider />

• Now we have access to the Store , actions and the selector functions

---

• Toggle the isSelected by changing boolean and show <Room/> being rendered
• Now we will use selectIsConnectedToRoom hover and explain
• Try to join it won’t work because we have added the join function yet

Open Join.jsx

• We can see our inputs and buttons being created here , all these inputs are controlled by their states.
• To join the room we will call hmsAction.join() which takes a config
• The config has userName and authToken
• We can get the username from the input to get the authtoken we will use the getToken function
• Show the implementation of getToken makes a POST request to our token endpoint takes role as an param
• Now if i click on join -> this token would be generated and it would be passed in the config and if it’s a success selectIsConnectedToRoom would become true and hence rendering Room.jsx
• Now let’s work on rendering the users or peers.

---

• Open Room.jsx Now that we are able to join in the Room , let's work on displaying the peers who have joined the Room. To get all peers we will use selectPeers selector function.

• This will return us an array of all peers in the room. Each peer object stores the details of individual participants in the room you can refer to the interface of HMSPeer in our api-reference docs.

• We will map these list of Peers were each peer would render <User /> component. This component takes peer as a prop which would display Peer's : username , role.

• Now if i save i should be able to see myself

• We will also import another component <Footer /> for now it's primary use would to display the number of peers in the room. We will pass peers.length in it's count prop which is total of no of peers in the room.

• Now i can see the no of peers in the room

---

• But if i click on these audio controls and leave room nothing works

Open Footer.jsx

• Add hmsActions.leave() click and isConnectedRoom becomes false and Join.jsx is rendered

• Now let’s work on audio controls we have hardcoded here it as false but there’s a way we can know peers audio status we will use selectIsLocalAudioEnabled to know that

• to get peer's audio status we use selectIsLocalAudioEnabled selector function from the store. Now if we want to toggle this audio status we will use the method setLocalAudioEnabled from hmsActions which takes boolean value as param.

---

• when i click on audio controls the controls changes and i am mute but the audio indicator in the Tile isn't changing

Open User.jsx

• show audioEnabled is hardcoded try chaning boolean value to prove open the comp maybe
• we will use selectIsPeerAudioEnabled which takes peer.id as argument
• you might have seen on Zoom , meet , 100ms that when you speak you get audio levels let's try to have it here too
• get levels from selectPeerAudioByID which takes peer.id as argument

---

• Suppose you invite someone to speak in your audio room and then things get out of hands the person starts speaking about something really absurd. This is when muting the speaker or demoting it to listener role comes in action.

open User.jsx render <Permission />

<Permission id={peer.id} audioTrack={peer.audioTrack} />

• Render and show nothing happens

Open Permission.jsx

• Suppose you invite someone to speak in your audio room and then things get out of hands the person starts speaking about something really absurd. This is when muting the speaker or demoting it to listener role comes in action.

• To invoke the changeRole API we need the following things:

• remotePeerId : The remote peer ID whose role you want to change.

• toRoleName : The target role name.

• force : Whether you want to change their role without asking them or give them a chance to accept/reject.

• hmsActions.changeRole(id, role, true)

• hmsActions.setRemoteTrackEnabled(audioTrack, false)

• But permission is rendered for every peer

 const localPeer = useHMSStore(selectLocalPeer);
 const isModerator = localPeer.roleName === 'moderator';

---

Chat.

const hmsActions = useHMSActions();
 const storeMessages = useHMSStore(selectHMSMessages);
 const [chatInput, setChatInput] = React.useState('');
 const sendMessage = () => {
   hmsActions.sendBroadcastMessage(chatInput);
   setChatInput('');
 };