update

client/app/plugins/sfx-listener.ts

@@ -0,0 +1,57 @@
+export default defineNuxtPlugin(() => {
+  const { on } = useEventBus()
+  const sfx = useSfx()
+
+  // Connection sounds
+  on('socket:authenticated', ({ socketId }) => {
+    sfx.playRandomConnectionSound(socketId)
+  })
+
+  // Client events
+  on('client:added', (client) => {
+    sfx.playRandomConnectionSound(client.socketId)
+  })
+
+  on('client:removed', () => {
+    sfx.playEvent('stream-off')
+  })
+
+  // Audio mute/unmute
+  on('audio:muted', () => {
+    sfx.playEvent('mic-off')
+  })
+
+  on('audio:unmuted', () => {
+    sfx.playEvent('mic-on')
+  })
+
+  // Video/share toggle
+  on('video:enabled', () => {
+    sfx.playEvent('stream-on')
+  })
+
+  on('video:disabled', () => {
+    sfx.playEvent('stream-off')
+  })
+
+  on('share:enabled', () => {
+    sfx.playEvent('stream-on')
+  })
+
+  on('share:disabled', () => {
+    sfx.playEvent('stream-off')
+  })
+
+  // Consumer video streams
+  on('consumer:added', (consumer) => {
+    if (consumer.raw.kind === 'video') {
+      sfx.playEvent('stream-on')
+    }
+  })
+
+  on('consumer:removed', (consumer) => {
+    if (consumer.raw.kind === 'video') {
+      sfx.playEvent('stream-off')
+    }
+  })
+})

client/app/plugins/toast-listener.ts

@@ -0,0 +1,62 @@
+export default defineNuxtPlugin(() => {
+  const { on } = useEventBus()
+  const toast = useToast()
+
+  // Socket events
+  on('socket:connected', () => {
+    toast.add({ severity: 'success', summary: 'Connected', life: 1000 })
+  })
+
+  on('socket:disconnected', () => {
+    toast.add({ severity: 'error', summary: 'Disconnected', life: 1000 })
+  })
+
+  on('socket:authenticated', () => {
+    toast.add({ severity: 'success', summary: 'Joined', life: 1000 })
+  })
+
+  // Client events
+  on('client:added', (client) => {
+    toast.add({
+      severity: 'info',
+      summary: `${client.displayName} connected`,
+      life: 1000,
+    })
+  })
+
+  on('client:removed', (client) => {
+    toast.add({
+      severity: 'info',
+      summary: `${client.displayName} disconnected`,
+      life: 1000,
+    })
+  })
+
+  on('client:updated', ({ oldClient, updatedClient }) => {
+    if (oldClient.displayName !== updatedClient.displayName) {
+      toast.add({
+        severity: 'info',
+        summary: `${oldClient.displayName} is now ${updatedClient.displayName}`,
+        life: 1000,
+      })
+    }
+  })
+
+  // Audio control
+  on('audio:muted', () => {
+    toast.add({ severity: 'info', summary: 'Microphone muted', life: 1000 })
+  })
+
+  on('audio:unmuted', () => {
+    toast.add({ severity: 'info', summary: 'Microphone activated', life: 1000 })
+  })
+
+  // Output mute control
+  on('output:muted', () => {
+    toast.add({ severity: 'info', summary: 'Sound muted', life: 1000 })
+  })
+
+  on('output:unmuted', () => {
+    toast.add({ severity: 'info', summary: 'Sound resumed', life: 1000 })
+  })
+})