front update

client/app/composables/use-app.ts

@@ -0,0 +1,60 @@
+import { createGlobalState } from '@vueuse/core'
+
+export const useApp = createGlobalState(() => {
+  const mediasoup = useMediasoup()
+
+  const inputMuted = ref(false)
+  const outputMuted = ref(false)
+
+  const me = computed(() => mediasoup.clients.value.find(client => client.isMe))
+
+  function muteInput() {
+    inputMuted.value = true
+  }
+
+  function unmuteInput() {
+    inputMuted.value = false
+  }
+
+  function toggleInput() {
+    if (inputMuted.value)
+      unmuteInput()
+    else
+      muteInput()
+  }
+
+  function muteOutput() {
+    outputMuted.value = true
+  }
+
+  function unmuteOutput() {
+    outputMuted.value = false
+  }
+
+  function toggleOutput() {
+    if (outputMuted.value)
+      unmuteOutput()
+    else
+      muteOutput()
+  }
+
+  watch(inputMuted, async (state) => {
+    if (state)
+      await mediasoup.muteMic()
+    else
+      await mediasoup.unmuteMic()
+  })
+
+  return {
+    clients: mediasoup.clients,
+    me,
+    inputMuted,
+    muteInput,
+    unmuteInput,
+    toggleInput,
+    outputMuted,
+    muteOutput,
+    unmuteOutput,
+    toggleOutput,
+  }
+})