Network States

You are provided with the NetworkStats of all the peers in the room. The data is stored with last updated timestamp, with NetworkStats of peerId mapped with the quality of the Network.

Store States

type INetworkState {
  networkStats: TNetStats;
  bandwidthSaver: boolean;
}
 
type TNetStats = {
  last_updated: number;
  data: {
    [peerId: string]: number; // stores value from 1 to 4 , 1 indicates poor netwrk, 4 indicates good network
  };
};

networkStats - This is the object that stores the network stats of all the peers in the room. The data is stored with last updated timestamp, with NetworkStats of peerId mapped with the quality of the Network.
bandwidthSaver - This is a boolean value that indicates whether the bandwidth saver mode is enabled or not.

**Note: ** Network quality is calculated based on the following parameters:

Packet loss

Round trip time

Jitter

Bandwidth

CPU load

Network type, etc.

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 networkStat = useHuddleStore((state) => state.networkStats.data[peerId]);
 
    return (
        <div>
            {networkStat === 4 && <div>Awesome</div>}
            ...
        <div />
    )
}

NOTE: Doing this will subscribe networkStat 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.