client volumes

client/app/components/ClientRow.vue

@@ -7,7 +7,12 @@
     }"
   >
     <div class="p-3 flex items-center gap-3" @click="toggleExpand">
-      <PrimeAvatar size="small">
+      <PrimeAvatar
+        size="small"
+        :class="{
+          'outline-1 outline-primary outline-offset-2': speaking,
+        }"
+      >
         <template #icon>
           <User :size="20" />
         </template>
@@ -61,7 +66,7 @@ const props = defineProps<{
 }>()
 
 const { outputMuted } = useApp()
-const { consumers: allConsumers, micProducer } = useMediasoup()
+const { consumers: allConsumers, micProducer, speakingClients } = useMediasoup()
 const { me } = useClients()
 const { show } = useFullscreenVideo()
 
@@ -94,6 +99,10 @@ const audioTrack = computed(() => {
   return audioConsumer.value?.track
 })
 
+const speaking = computed(() => {
+  return speakingClients.value.find(speaker => speaker.clientId === props.client.socketId)
+})
+
 const audioConsumerPaused = ref(false)
 
 const inputMuted = computed(() => {