front update

client/app/composables/use-app.ts

@@ -1,12 +1,17 @@
 import { createGlobalState } from '@vueuse/core'
+import { useClients } from '~/composables/use-clients'
 
 export const useApp = createGlobalState(() => {
+  const { clients } = useClients()
   const mediasoup = useMediasoup()
+  const toast = useToast()
 
   const inputMuted = ref(false)
   const outputMuted = ref(false)
 
-  const me = computed(() => mediasoup.clients.value.find(client => client.isMe))
+  const previousInputMuted = ref(inputMuted.value)
+
+  const me = computed(() => clients.value.find(client => client.isMe))
 
   function muteInput() {
     inputMuted.value = true
@@ -38,15 +43,36 @@ export const useApp = createGlobalState(() => {
       muteOutput()
   }
 
-  watch(inputMuted, async (state) => {
-    if (state)
+  watch(inputMuted, async (inputMuted) => {
+    if (inputMuted) {
       await mediasoup.muteMic()
-    else
+    }
+    else {
+      if (outputMuted.value) {
+        outputMuted.value = false
+      }
       await mediasoup.unmuteMic()
+    }
+
+    const toastText = inputMuted ? 'Microphone muted' : 'Microphone activated'
+    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
+  })
+
+  watch(outputMuted, (outputMuted) => {
+    if (outputMuted) {
+      previousInputMuted.value = inputMuted.value
+      muteInput()
+    }
+    else {
+      inputMuted.value = previousInputMuted.value
+    }
+
+    const toastText = outputMuted ? 'Sound muted' : 'Sound resumed'
+    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
   })
 
   return {
-    clients: mediasoup.clients,
+    clients,
     me,
     inputMuted,
     muteInput,