front update

client/app/components/AppHeader.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="flex items-center justify-between gap-2 border-b-2 border-surface-800 px-3 py-3"
+    :class="{
+      'bg-surface-950': !secondary,
+      'bg-surface-900': secondary,
+    }"
+    style="height: 75px;"
+  >
+    <slot name="left">
+      <h1>
+        {{ title }}
+      </h1>
+    </slot>
+
+    <slot name="right" />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  secondary?: boolean
+}>()
+</script>

client/app/components/ClientRow.vue

@@ -1,31 +1,39 @@
 <template>
-  <div class="flex items-center gap-3 py-3">
-    <PrimeAvatar icon="pi pi-user" size="small" />
+  <div class="py-3">
+    <div class="flex items-center gap-3 ">
+      <PrimeAvatar
+        icon="pi pi-user"
+        size="small"
+      />
 
-    <div class="flex-1">
-      <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
-        {{ client.username }}
-      </div>
-      <div class="mt-1 text-xs leading-5 text-muted-color">
-        {{ client.id }}
-      </div>
-    </div>
-
-    <PrimeBadge severity="secondary" value="Muted" />
-
-    <PrimeButton icon="pi pi-ellipsis-h" text size="small" @click="menuRef?.toggle" />
-
-    <PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
-      <template #start>
-        <div class="px-4 py-3">
-          <div class="flex justify-between">
-            <span>Volume</span>
-            <span>{{ volume }}</span>
-          </div>
-          <PrimeSlider v-model="volume" class="mt-4" :min="0" :max="100" :step="5" />
+      <div class="flex-1">
+        <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
+          {{ client.username }}
         </div>
+        <div class="mt-1 text-xs leading-5 text-muted-color">
+          {{ client.id }}
+        </div>
+      </div>
+
+      <PrimeBadge v-if="client.isMe && inputMuted" severity="info" value="Muted" />
+      <PrimeBadge v-if="client.isMe" severity="secondary" value="You" />
+
+      <template v-if="!client.isMe">
+        <PrimeButton icon="pi pi-ellipsis-h" text size="small" severity="contrast" @click="menuRef?.toggle" />
+
+        <PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
+          <template #start>
+            <div class="px-4 py-3">
+              <div class="flex justify-between">
+                <span>Volume</span>
+                <span>{{ volume }}</span>
+              </div>
+              <PrimeSlider v-model="volume" class="mt-4" :min="0" :max="300" :step="5" />
+            </div>
+          </template>
+        </PrimeMenu>
       </template>
-    </PrimeMenu>
+    </div>
   </div>
 </template>
 
@@ -33,11 +41,15 @@
 import type { ChadClient } from '#shared/types'
 import type { MenuItem } from 'primevue/menuitem'
 
-defineProps<{
+const props = defineProps<{
   client: ChadClient
 }>()
 
-const menuRef = useTemplateRef('menu')
+const { inputMuted, outputMuted } = useApp()
+const { getClientConsumers } = useMediasoup()
+
+const menuRef = useTemplateRef<HTMLAudioElement>('menu')
+
 const volume = ref(100)
 
 const menuItems: MenuItem[] = [
@@ -51,4 +63,27 @@ const menuItems: MenuItem[] = [
     disabled: true,
   },
 ]
+
+const audioConsumer = computed(() => {
+  const consumers = getClientConsumers(props.client.id)
+
+  return consumers.find(consumer => consumer.track.kind === 'audio')
+})
+
+const audioTrack = computed(() => {
+  return audioConsumer.value?.track
+})
+
+const { setGain } = useAudioContext(audioTrack)
+
+watch(volume, (volume) => {
+  if (outputMuted)
+    return
+
+  setGain(volume * 0.01)
+})
+
+watch(outputMuted, (outputMuted) => {
+  setGain(outputMuted ? 0 : (volume.value * 0.01))
+})
 </script>