xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add connection quality indicator to the tile

Browse source
This commit is contained in:
Daniel Abramov 2023-06-02 20:15:29 +02:00
parent 786c584ae2
commit 274b5b66aa
1 changed files with 6 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/video-grid/VideoTile.tsx
View file

@ -19,7 +19,11 @@ import { animated } from "@react-spring/web";
import classNames from "classnames"; import classNames from "classnames";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { LocalParticipant, RemoteParticipant, Track } from "livekit-client"; import { LocalParticipant, RemoteParticipant, Track } from "livekit-client";
import { VideoTrack, useMediaTrack } from "@livekit/components-react"; import {
ConnectionQualityIndicator,
VideoTrack,
useMediaTrack,
} from "@livekit/components-react";
import styles from "./VideoTile.module.css"; import styles from "./VideoTile.module.css";
import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg"; import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
@ -73,6 +77,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
{microphoneMuted && <MicMutedIcon />} {microphoneMuted && <MicMutedIcon />}
{!sfuParticipant.isCameraEnabled && <VideoMutedIcon />} {!sfuParticipant.isCameraEnabled && <VideoMutedIcon />}
<span title={name}>{name}</span> <span title={name}>{name}</span>
<ConnectionQualityIndicator participant={sfuParticipant} />
</div> </div>
))} ))}
<VideoTrack participant={sfuParticipant} source={Track.Source.Camera} /> <VideoTrack participant={sfuParticipant} source={Track.Source.Camera} />