update

client/app/composables/use-app.ts

@@ -7,8 +7,7 @@ export const useApp = createGlobalState(() => {
   const { clients } = useClients()
   const mediasoup = useMediasoup()
   const signaling = useSignaling()
-  const toast = useToast()
-  const sfx = useSfx()
+  const { emit } = useEventBus()
 
   const ready = ref(false)
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
@@ -53,8 +52,7 @@ export const useApp = createGlobalState(() => {
 
     await mediasoup.pauseProducer(mediasoup.micProducer.value)
 
-    sfx.playEvent('mic-off').then()
-    toast.add({ severity: 'info', summary: 'Microphone muted', closable: false, life: 1000 })
+    emit('audio:muted')
   }
 
   async function unmuteInput() {
@@ -67,8 +65,7 @@ export const useApp = createGlobalState(() => {
 
     await mediasoup.resumeProducer(mediasoup.micProducer.value)
 
-    sfx.playEvent('mic-on').then()
-    toast.add({ severity: 'info', summary: 'Microphone activated', closable: false, life: 1000 })
+    emit('audio:unmuted')
   }
 
   async function toggleInput() {
@@ -92,7 +89,7 @@ export const useApp = createGlobalState(() => {
       outputMuted: true,
     })
 
-    toast.add({ severity: 'info', summary: 'Sound muted', closable: false, life: 1000 })
+    emit('output:muted')
   }
 
   async function unmuteOutput() {
@@ -105,7 +102,7 @@ export const useApp = createGlobalState(() => {
       outputMuted: false,
     })
 
-    toast.add({ severity: 'info', summary: 'Sound resumed', closable: false, life: 1000 })
+    emit('output:unmuted')
   }
 
   async function toggleOutput() {
@@ -118,22 +115,22 @@ export const useApp = createGlobalState(() => {
   async function toggleVideo() {
     if (!mediasoup.videoProducer.value) {
       await mediasoup.enableVideo()
-      await sfx.playEvent('stream-on')
+      emit('video:enabled')
     }
     else {
       await mediasoup.disableProducer(mediasoup.videoProducer.value)
-      await sfx.playEvent('stream-off')
+      emit('video:disabled')
     }
   }
 
   async function toggleShare() {
     if (!mediasoup.shareProducer.value) {
       await mediasoup.enableShare()
-      await sfx.playEvent('stream-on')
+      emit('share:enabled')
     }
     else {
       await mediasoup.disableProducer(mediasoup.shareProducer.value)
-      await sfx.playEvent('stream-off')
+      emit('share:disabled')
     }
   }
 

client/app/composables/use-clients.ts

@@ -4,7 +4,7 @@ import { createGlobalState } from '@vueuse/core'
 export const useClients = createGlobalState(() => {
   const auth = useAuth()
   const signaling = useSignaling()
-  const toast = useToast()
+  const { emit } = useEventBus()
 
   const clients = shallowRef<ChadClient[]>([])
 
@@ -16,10 +16,17 @@ export const useClients = createGlobalState(() => {
 
     socket.on('clientChanged', (clientId: ChadClient['socketId'], updatedClient: UpdatedClient) => {
       const client = getClient(clientId)
+
+      if (!client)
+        return
+
       updateClient(clientId, updatedClient)
 
-      if (client && client.displayName !== updatedClient.displayName)
-        toast.add({ severity: 'info', summary: `${client.displayName} is now ${updatedClient.displayName}`, closable: false, life: 1000 })
+      emit('client:updated', {
+        socketId: clientId,
+        oldClient: client,
+        updatedClient,
+      })
     })
 
     socket.on('disconnect', () => {

client/app/composables/use-event-bus.ts

@@ -0,0 +1,42 @@
+import type { ChadClient, Consumer, Producer } from '#shared/types'
+import type { EventType } from 'mitt'
+import mitt from 'mitt'
+
+export interface AppEvents extends Record<EventType, unknown> {
+  'socket:connected': void
+  'socket:disconnected': void
+  'socket:authenticated': { socketId: string }
+
+  'client:added': ChadClient
+  'client:removed': ChadClient
+  'client:updated': { socketId: string, oldClient: ChadClient, updatedClient: Partial<ChadClient> }
+
+  'consumer:added': Consumer
+  'consumer:removed': Consumer
+  'consumer:paused': Consumer
+  'consumer:resumed': Consumer
+
+  'producer:added': Producer
+  'producer:removed': Producer
+  'producer:paused': Producer
+  'producer:resumed': Producer
+
+  'audio:muted': void
+  'audio:unmuted': void
+  'output:muted': void
+  'output:unmuted': void
+  'video:enabled': void
+  'video:disabled': void
+  'share:enabled': void
+  'share:disabled': void
+}
+
+const emitter = mitt<AppEvents>()
+
+export function useEventBus() {
+  return {
+    emit: emitter.emit,
+    on: emitter.on,
+    off: emitter.off,
+  }
+}

client/app/composables/use-mediasoup.ts

@@ -7,8 +7,6 @@ import { useDevices } from '~/composables/use-devices'
 import { usePreferences } from '~/composables/use-preferences'
 import { useSignaling } from '~/composables/use-signaling'
 
-type ProducerType = 'microphone' | 'video' | 'share'
-
 interface SpeakingClient {
   clientId: ChadClient['socketId']
   volume: number
@@ -28,8 +26,7 @@ const ICE_SERVERS: RTCIceServer[] = [
 ]
 
 export const useMediasoup = createSharedComposable(() => {
-  const toast = useToast()
-  const sfx = useSfx()
+  const { emit } = useEventBus()
 
   const signaling = useSignaling()
   const { addClient, removeClient, me } = useClients()
@@ -171,20 +168,24 @@ export const useMediasoup = createSharedComposable(() => {
       addClient(...joinedClients)
 
       if (me.value)
-        sfx.playRandomConnectionSound(me.value.socketId).then()
-
-      toast.add({ severity: 'success', summary: 'Joined', closable: false, life: 1000 })
+        emit('socket:authenticated', { socketId: me.value.socketId })
 
       await enableMic()
     })
 
     socket.on('newPeer', (client) => {
-      sfx.playRandomConnectionSound(client.socketId).then()
       addClient(client)
+      emit('client:added', client)
     })
 
     socket.on('peerClosed', (id) => {
+      const { getClient } = useClients()
+      const client = getClient(id)
+
       removeClient(id)
+
+      if (client)
+        emit('client:removed', client)
     })
 
     socket.on(
@@ -205,9 +206,6 @@ export const useMediasoup = createSharedComposable(() => {
           appData: { ...appData, socketId },
         })
 
-        if (kind === 'video')
-          sfx.playEvent('stream-on').then()
-
         if (producerPaused)
           consumer.pause()
 
@@ -218,19 +216,27 @@ export const useMediasoup = createSharedComposable(() => {
           raw: markRaw(consumer),
         }
 
+        emit('consumer:added', consumers.value[consumer.id]!)
+
         consumer.observer.on('resume', () => {
           consumers.value[consumer.id]!.paused = false
+
+          emit('consumer:resumed', consumers.value[consumer.id]!)
         })
 
         consumer.observer.on('pause', () => {
           consumers.value[consumer.id]!.paused = true
+
+          emit('consumer:paused', consumers.value[consumer.id]!)
         })
 
         consumer.observer.on('close', () => {
-          if (kind === 'video')
-            sfx.playEvent('stream-off').then()
+          const consumerData = consumers.value[consumer.id]
 
           delete consumers.value[consumer.id]
+
+          if (consumerData)
+            emit('consumer:removed', consumerData)
         })
 
         consumer.on('trackended', () => {
@@ -311,16 +317,27 @@ export const useMediasoup = createSharedComposable(() => {
       raw: markRaw(producer),
     }
 
+    emit('producer:added', producers.value[producer.id]!)
+
     producer.observer.on('pause', () => {
       producers.value[producer.id]!.paused = true
+
+      emit('producer:paused', producers.value[producer.id]!)
     })
 
     producer.observer.on('resume', () => {
       producers.value[producer.id]!.paused = false
+
+      emit('producer:resumed', producers.value[producer.id]!)
     })
 
     producer.observer.on('close', () => {
+      const producerData = producers.value[producer.id]
+
       delete producers.value[producer.id]
+
+      if (producerData)
+        emit('producer:removed', producerData)
     })
 
     producer.on('trackended', () => {

client/app/composables/use-sfx.ts

@@ -25,7 +25,10 @@ const EVENT_VOLUME: Record<SfxEvent, number> = {
   'connection': 0.1,
 }
 
+// TODO: refactor this shit
 export const useSfx = createSharedComposable(() => {
+  const { outputMuted } = useApp()
+
   async function play(src: string, volume = 0.2): Promise<void> {
     return new Promise((resolve) => {
       const howl = new Howl({
@@ -74,6 +77,10 @@ export const useSfx = createSharedComposable(() => {
 
   async function playRandomConnectionSound(seed: string) {
     await playEvent('stream-on')
+
+    if (outputMuted.value)
+      return
+
     await play(CONNECTION_SOUNDS[hashStringToNumber(seed, CONNECTION_SOUNDS.length)]!, 0.1)
   }
 

client/app/composables/use-signaling.ts

@@ -4,7 +4,7 @@ import { io } from 'socket.io-client'
 import { parseURL } from 'ufo'
 
 export const useSignaling = createSharedComposable(() => {
-  const toast = useToast()
+  const { emit } = useEventBus()
   const { me } = useAuth()
 
   const socket = shallowRef<Socket>()
@@ -41,9 +41,9 @@ export const useSignaling = createSharedComposable(() => {
 
   watch(connected, (connected) => {
     if (connected)
-      toast.add({ severity: 'success', summary: 'Connected', closable: false, life: 1000 })
+      emit('socket:connected')
     else
-      toast.add({ severity: 'error', summary: 'Disconnected', closable: false, life: 1000 })
+      emit('socket:disconnected')
   }, { immediate: true })
 
   watch(me, (me) => {