update

client/app/components/AppHeader.vue

@@ -8,7 +8,7 @@
     style="height: 75px;"
   >
     <slot name="left">
-      <h1>
+      <h1 v-if="!!title">
         {{ title }}
       </h1>
     </slot>
@@ -19,7 +19,12 @@
 
 <script setup lang="ts">
 defineProps<{
-  title: string
+  title?: string
   secondary?: boolean
 }>()
+
+defineSlots<{
+  left: () => unknown
+  right: () => unknown
+}>()
 </script>

client/app/components/ClientRow.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="py-3">
     <div class="flex items-center gap-3 ">
-      <PrimeAvatar
-        icon="pi pi-user"
-        size="small"
-      />
+      <PrimeAvatar size="small">
+        <template #icon>
+          <User :size="20" />
+        </template>
+      </PrimeAvatar>
 
       <div class="flex-1">
         <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
@@ -15,7 +16,8 @@
         </div>
       </div>
 
-      <PrimeBadge v-if="audioConsumerPaused" severity="info" value="Muted" />
+      <PrimeBadge v-if="inputMuted" severity="info" value="Muted" />
+      <!--      <PrimeBadge v-if="outputMuted" severity="info" value="No sound" /> -->
       <PrimeBadge v-if="isMe" severity="secondary" value="You" />
 
       <template v-if="!isMe">
@@ -40,13 +42,14 @@
 <script setup lang="ts">
 import type { ChadClient } from '#shared/types'
 import type { MenuItem } from 'primevue/menuitem'
+import { User } from 'lucide-vue-next'
 
 const props = defineProps<{
   client: ChadClient
 }>()
 
-const { inputMuted, outputMuted } = useApp()
-const { getClientConsumers } = useMediasoup()
+const { outputMuted } = useApp()
+const { getClientConsumers, micProducer } = useMediasoup()
 const { me } = useClients()
 
 const menuRef = useTemplateRef<HTMLAudioElement>('menu')
@@ -78,9 +81,9 @@ const audioConsumer = computed(() => {
   return consumers.find(consumer => consumer.track.kind === 'audio')
 })
 
-const audioConsumerPaused = computed(() => {
+const inputMuted = computed(() => {
   if (isMe.value)
-    return false
+    return micProducer.value?.paused ?? false
 
   const consumers = getClientConsumers(props.client.socketId)
 
@@ -94,13 +97,13 @@ const audioTrack = computed(() => {
 const { setGain } = useAudioContext(audioTrack)
 
 watch(volume, (volume) => {
-  if (outputMuted.value)
-    return
+  // if (outputMuted.value)
+  //   return
 
   setGain(volume * 0.01)
 })
 
-watch(outputMuted, (outputMuted) => {
-  setGain(outputMuted ? 0 : (volume.value * 0.01))
-})
+// watch(outputMuted, (outputMuted) => {
+//   setGain(outputMuted ? 0 : (volume.value * 0.01))
+// })
 </script>