Deep-Codes/clubhouse.md

## clubhouse.md

      
    Raw
  

              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('');
 };