connection quality indicator for compose sample app

+<!-- drawable/wifi_strength_1.xml -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path android:fillColor="#000" android:pathData="M12,3C7.79,3 3.7,4.41 0.38,7C4.41,12.06 7.89,16.37 12,21.5C16.08,16.42 20.24,11.24 23.65,7C20.32,4.41 16.22,3 12,3M12,5C15.07,5 18.09,5.86 20.71,7.45L15.61,13.81C14.5,13.28 13.25,13 12,13C10.75,13 9.5,13.28 8.39,13.8L3.27,7.44C5.91,5.85 8.93,5 12,5Z" />
+</vector>

+<!-- drawable/wifi_strength_2.xml -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path android:fillColor="#000" android:pathData="M12,3C7.79,3 3.7,4.41 0.38,7C4.41,12.06 7.89,16.37 12,21.5C16.08,16.42 20.24,11.24 23.65,7C20.32,4.41 16.22,3 12,3M12,5C15.07,5 18.09,5.86 20.71,7.45L17.5,11.43C16.26,10.74 14.37,10 12,10C9.62,10 7.74,10.75 6.5,11.43L3.27,7.44C5.91,5.85 8.93,5 12,5Z" />
+</vector>

+<!-- drawable/wifi_strength_3.xml -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path android:fillColor="#000" android:pathData="M12,3C7.79,3 3.7,4.41 0.38,7C4.41,12.06 7.89,16.37 12,21.5C16.08,16.42 20.24,11.24 23.65,7C20.32,4.41 16.22,3 12,3M12,5C15.07,5 18.09,5.86 20.71,7.45L18.77,9.88C17.26,9 14.88,8 12,8C9,8 6.68,9 5.21,9.84L3.27,7.44C5.91,5.85 8.93,5 12,5Z" />
+</vector>

+<!-- drawable/wifi_strength_4.xml -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path android:fillColor="#000" android:pathData="M12,3C7.79,3 3.7,4.41 0.38,7C4.41,12.06 7.89,16.37 12,21.5C16.08,16.42 20.24,11.24 23.65,7C20.32,4.41 16.22,3 12,3Z" />
+</vector>

+<!-- drawable/wifi_strength_alert_outline.xml -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path android:fillColor="#000" android:pathData="M12 3C7.8 3 3.7 4.4 .4 7C4.3 11.8 8.2 16.7 12 21.5C14.3 18.6 16.7 15.7 19 12.8V9.6L12 18.3L3.3 7.4C5.9 5.8 8.9 5 12 5C15.1 5 18.1 5.9 20.7 7.4L20.3 8H22.9C23.2 7.7 23.4 7.3 23.7 7C20.3 4.4 16.2 3 12 3M21 10V16H23V10M21 18V20H23V18" />
+</vector>

@@ -10,6 +10,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.dp
@@ -18,6 +19,7 @@ import androidx.constraintlayout.compose.Dimension
 import io.livekit.android.composesample.ui.theme.BlueMain
 import io.livekit.android.composesample.ui.theme.BlueMain
 import io.livekit.android.composesample.ui.theme.NoVideoBackground
 import io.livekit.android.composesample.ui.theme.NoVideoBackground
 import io.livekit.android.room.Room
 import io.livekit.android.room.Room
+import io.livekit.android.room.participant.ConnectionQuality
 import io.livekit.android.room.participant.Participant
 import io.livekit.android.room.participant.Participant
 import io.livekit.android.room.track.Track
 import io.livekit.android.room.track.Track
 import io.livekit.android.room.track.VideoTrack
 import io.livekit.android.room.track.VideoTrack
@@ -48,7 +50,7 @@ fun ParticipantItem(
                 }
                 }
             }
             }
     ) {
     ) {
-        val (videoCamOff, identityBar, identityText, muteIndicator) = createRefs()
+        val (videoCamOff, identityBar, identityText, muteIndicator, connectionIndicator) = createRefs()
         val videoTrack = participant.getTrackPublication(Track.Source.SCREEN_SHARE)?.track as? VideoTrack
         val videoTrack = participant.getTrackPublication(Track.Source.SCREEN_SHARE)?.track as? VideoTrack
             ?: participant.getTrackPublication(Track.Source.CAMERA)?.track as? VideoTrack
             ?: participant.getTrackPublication(Track.Source.CAMERA)?.track as? VideoTrack
             ?: videoTracks.values.firstOrNull()?.track as? VideoTrack
             ?: videoTracks.values.firstOrNull()?.track as? VideoTrack
@@ -114,5 +116,28 @@ fun ParticipantItem(
                 }
                 }
             )
             )
         }
         }
+
+        val connectionQuality by participant::connectionQuality.flow.collectAsState()
+
+        val connectionIcon = when (connectionQuality) {
+            ConnectionQuality.EXCELLENT -> R.drawable.wifi_strength_4
+            ConnectionQuality.GOOD -> R.drawable.wifi_strength_3
+            ConnectionQuality.POOR -> R.drawable.wifi_strength_alert_outline
+            ConnectionQuality.UNKNOWN -> R.drawable.wifi_strength_alert_outline
+        }
+
+        if (connectionQuality == ConnectionQuality.POOR) {
+            Icon(
+                painter = painterResource(id = connectionIcon),
+                contentDescription = "",
+                tint = Color.Red,
+                modifier = Modifier
+                    .constrainAs(connectionIndicator) {
+                        top.linkTo(parent.top, margin = identityBarPadding)
+                        end.linkTo(parent.end, margin = identityBarPadding)
+                    }
+                    .alpha(0.5f)
+            )
+        }
     }
     }
 }
 }