From 274b5b66aa65f0b2d48e3f5390cd1ee79c8cdbb6 Mon Sep 17 00:00:00 2001
From: Daniel Abramov <daniel.abramov@element.io>
Date: Fri, 2 Jun 2023 20:15:29 +0200
Subject: [PATCH] Add connection quality indicator to the tile

---
 src/video-grid/VideoTile.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index c58f8a0..4c3838f 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -19,7 +19,11 @@ import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 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 { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
@@ -73,6 +77,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
               {microphoneMuted && <MicMutedIcon />}
               {!sfuParticipant.isCameraEnabled && <VideoMutedIcon />}
               <span title={name}>{name}</span>
+              <ConnectionQualityIndicator participant={sfuParticipant} />
             </div>
           ))}
         <VideoTrack participant={sfuParticipant} source={Track.Source.Camera} />