Peers Store States

Peer are the connected users on the same roomId as the current user. They are stored in the peers state. Every peer has a peerId and some metadata asscoiated with it.

Peers Store

It is an object that maps peerId with its own asscoiated metadata.

type IPeersState = {
    peers: {
        [peerId: string]: IPeerStoreState
    }
}
 
type IPeerStoreState = {
    peerId: string;
    displayName: string;
    avatarUrl: string;
    isMicPaused: boolean;
    isCamPaused: boolean;
    isSharePaused: boolean;
    isHandRaised: boolean;
    reaction: Reaction;
}

NOTE: peerId is the unique identifier for a peer. It is generated by the server and is unique for every peer.

Example

You can access the room state using the useHuddleStore hook.

To access the data of each peer in the room, you must have access to the peerId of that peer.

import { useHuddleStore, usePeerCamTrack } from "huddle01-client/hooks";
 
interface Props {
    peerId: string;
}
 
const Component = ({ peerId }) => {
    const isCamPaused = useHuddleStore(state => state.peers[peerId].isCamPaused);
    const peerCamTrack = usePeerCamTrack(peerId);
 
    const getStream = (_track: MediaStreamTrack) => {
        const stream = new MediaStream();
        stream.addTrack(_track);
        return stream;
    };
 
    useEffect(() => {
        const videoObj = videoRef.current;
 
        if (videoObj && peerCamTrack) {
        videoObj.load();
        videoObj.srcObject = getStream(peerCamTrack);
        videoObj.play().catch(err => {
            logger.error({
            message: 'Error playing video',
            meta: {
                err,
            },
            });
        });
        }
 
        if (isCamPaused && videoObj) {
        videoObj.pause();
        } else if (!isCamPaused && videoObj) {
        videoObj.play();
        }
 
        return () => {
            if (videoObj) {
                videoObj?.pause();
                videoObj.srcObject = null;
            }
        };
    }, [peerCamTrack, isCamPaused]);
 
    return (
        <div>
            {isCamPaused ? "Paused" : "Not Paused"}
            {isCamPaused ? <video
                ref={videoRef}
                id="peer-video-elem"
                muted
                autoPlay
                playsInline
            /> : null}
            ...
        <div />
    )
}

NOTE: Doing this will subscribe isCamPaused and Peer Camera Track 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.