front update

client/app/composables/use-mediasoup.ts

@@ -18,8 +18,11 @@ const ICE_SERVERS: RTCIceServer[] = [
 ]
 
 export const useMediasoup = createSharedComposable(() => {
-  const preferences = usePreferences()
+  const toast = useToast()
+
   const signaling = useSignaling()
+  const { addClient, removeClient } = useClients()
+  const preferences = usePreferences()
 
   const device = shallowRef<mediasoupClient.Device>()
   const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
@@ -30,8 +33,6 @@ export const useMediasoup = createSharedComposable(() => {
   const webcamProducer = shallowRef<mediasoupClient.types.Producer>()
   const shareProducer = shallowRef<mediasoupClient.types.Producer>()
 
-  const clients = shallowRef<ChadClient[]>([])
-
   const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
   const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(new Map())
 
@@ -121,21 +122,24 @@ export const useMediasoup = createSharedComposable(() => {
         })
       }
 
-      clients.value = (await signaling.socket.value.emitWithAck('join', {
+      const joinedClients = (await signaling.socket.value.emitWithAck('join', {
         username: preferences.username.value,
         rtpCapabilities: rtpCapabilities.value,
       })).map(transformClient)
 
+      addClient(...joinedClients)
+
+      toast.add({ severity: 'success', summary: 'Joined', closable: false, life: 1000 })
+
       await enableMic()
     })
 
     socket.on('newPeer', (client) => {
-      clients.value.push(transformClient(client))
-      triggerRef(clients)
+      addClient(transformClient(client))
     })
 
     socket.on('peerClosed', (id) => {
-      clients.value = clients.value.filter(client => client.id !== id)
+      removeClient(id)
     })
 
     socket.on(
@@ -317,7 +321,6 @@ export const useMediasoup = createSharedComposable(() => {
 
   return {
     init,
-    clients,
     consumers,
     producers,
     sendTransport,