screen sharing

client/app/composables/use-app.ts

@@ -10,78 +10,94 @@ export const useApp = createGlobalState(() => {
   const toast = useToast()
 
   const ready = ref(false)
-
-  const inputMuted = ref(false)
-  const outputMuted = ref(false)
-
-  const previousInputMuted = ref(inputMuted.value)
-
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
-
   const commitSha = __COMMIT_SHA__
-
   const version = computedAsync(() => isTauri.value ? getVersion() : 'web', '-')
 
-  watch(inputMuted, async (inputMuted) => {
-    if (inputMuted) {
-      await mediasoup.pauseProducer('microphone')
-    }
-    else {
-      if (outputMuted.value) {
-        outputMuted.value = false
-      }
-      await mediasoup.resumeProducer('microphone')
-    }
+  const inputMuted = computed(() => {
+    return !!mediasoup.micProducer.value?.paused
+  })
+  const previousInputMuted = ref(inputMuted.value)
 
-    const toastText = inputMuted ? 'Microphone muted' : 'Microphone activated'
-    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
+  const outputMuted = ref(false)
+
+  const sharingEnabled = computed(() => {
+    return !!mediasoup.shareProducer.value
   })
 
-  watch(outputMuted, async (outputMuted) => {
-    if (outputMuted) {
-      previousInputMuted.value = inputMuted.value
-      muteInput()
-    }
-    else {
-      inputMuted.value = previousInputMuted.value
+  async function muteInput() {
+    if (inputMuted.value)
+      return
+
+    await mediasoup.pauseProducer('microphone')
+
+    toast.add({ severity: 'info', summary: 'Microphone muted', closable: false, life: 1000 })
+  }
+
+  async function unmuteInput() {
+    if (!inputMuted.value)
+      return
+
+    if (outputMuted.value) {
+      await unmuteOutput()
     }
 
-    const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
-      outputMuted,
+    await mediasoup.resumeProducer('microphone')
+
+    toast.add({ severity: 'info', summary: 'Microphone activated', closable: false, life: 1000 })
+  }
+
+  async function toggleInput() {
+    if (inputMuted.value)
+      await unmuteInput()
+    else
+      await muteInput()
+  }
+
+  async function muteOutput() {
+    if (outputMuted.value)
+      return
+
+    outputMuted.value = true
+
+    previousInputMuted.value = inputMuted.value
+
+    await muteInput()
+
+    await signaling.socket.value?.emitWithAck('updateClient', {
+      outputMuted: false,
     })
 
-    const toastText = outputMuted ? 'Sound muted' : 'Sound resumed'
-    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
-  })
-
-  function muteInput() {
-    inputMuted.value = true
+    toast.add({ severity: 'info', summary: 'Sound muted', closable: false, life: 1000 })
   }
 
-  function unmuteInput() {
-    inputMuted.value = false
-  }
-
-  function toggleInput() {
-    if (inputMuted.value)
-      unmuteInput()
-    else
-      muteInput()
-  }
-
-  function muteOutput() {
-    outputMuted.value = true
-  }
-
-  function unmuteOutput() {
+  async function unmuteOutput() {
     outputMuted.value = false
+
+    if (!previousInputMuted.value)
+      await unmuteInput()
+
+    await signaling.socket.value?.emitWithAck('updateClient', {
+      outputMuted: false,
+    })
+
+    toast.add({ severity: 'info', summary: 'Sound resumed', closable: false, life: 1000 })
   }
 
-  function toggleOutput() {
+  async function toggleOutput() {
     if (outputMuted.value)
-      unmuteOutput()
+      await unmuteOutput()
     else
-      muteOutput()
+      await muteOutput()
+  }
+
+  async function toggleShare() {
+    if (!mediasoup.shareProducer.value) {
+      await mediasoup.enableShare()
+    }
+    else {
+      await mediasoup.disableProducer('share')
+    }
   }
 
   return {
@@ -98,5 +114,7 @@ export const useApp = createGlobalState(() => {
     version,
     isTauri,
     commitSha,
+    toggleShare,
+    sharingEnabled,
   }
 })