Active Speaker States
You can access the volume of every user in the room. In store, peerId
is mapped to the volume of the user. You can use this to show the volume of the user in the room. We have also added a new state called activeSpeaker
which will be updated with the peerId
of the active speaker in the room.
States
type IActiveSpeakerState {
dominantSpeaker: string;
peerIdToVolume: Record<string, number>;
}
dominantSpeaker
-peerId
of the active speaker in the room.peerIdToVolume
-peerId
mapped with the volume of the user.
Example
You can access the room state using the useHuddleStore
hook.
import { useHuddleStore } from "huddle01-client/hooks";
interface Props {
peerId: string;
}
const Component = ({ peerId }) => {
const activeSpeakerPeerId = useHuddleStore((state) => state.activeSpeaker);
return (
<div>
{peerId === activeSpeakerPeerId && <div>Active Speaker</div>}
...
<div />
)
}
NOTE: Doing this will subscribe activeSpeaker state to that component and will re-render the component when the state changes. Pro Tip: You dont need to add useEffect to subscribe to the state and change certains states based on this, it is already done for you.