Connection Unstable

Besides showing the quality of user's network connection, another useful video call feature is to indicate unreliable participant's connection quality. The default ParticipantViewUI does this by rendering SDK's Notification component when the connection quality reaches poor level.

Our minimal custom unstable connection notification should look as follows:

import {
  SfuModels,
  useParticipantViewContext,
} from '@stream-io/video-react-sdk';

const PoorConnectionNotification = () => {
  const { participant } = useParticipantViewContext();
  const { connectionQuality, isLocalParticipant } = participant;

  if (
    isLocalParticipant &&
    connectionQuality === SfuModels.ConnectionQuality.POOR
  ) {
    return <div>Poor connection quality</div>;
  }
  return null;
};

export const CustomParticipantViewUI = () => {
  return (
    <>
      <PoorConnectionNotification />
      {/* your other custom UI elements */}
    </>
  );
};

Final steps

Now we can pass this custom ParticipantViewUI component down to our call layout components or directly to ParticipantView component in our custom call layout as described in the ParticipantView customizations guide.

import { useCallStateHooks, ParticipantView } from '@stream-io/video-react-sdk';

import { CustomParticipantViewUI } from '../ParticipantViewUI';
import { CustomVideoPlaceholder } from '../VideoPlaceholder';

export const CustomCallLayout = () => {
  const { useParticipants } = useCallStateHooks();
  const otherParticipants = useParticipants();

  return (
    <div>
      {/* your other custom UI elements */}
      {otherParticipants.map((participant) => (
        <div key={participant.sessionId}>
          <ParticipantView
            participant={participant}
            ParticipantViewUI={CustomParticipantViewUI}
            VideoPlaceholder={CustomVideoPlaceholder}
          />
        </div>
      ))}
    </div>
  );
};