update

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', () => {