Merge branch 'master' into channels

# Conflicts:
#	server/plugins/socket.ts
#	server/socket/webrtc.ts

client/app/composables/use-app.ts

@@ -7,7 +7,7 @@ export const useApp = createGlobalState(() => {
   const { clients } = useClients()
   const mediasoup = useMediasoup()
   const signaling = useSignaling()
-  const toast = useToast()
+  const { emit } = useEventBus()
 
   const ready = ref(false)
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
@@ -31,30 +31,41 @@ export const useApp = createGlobalState(() => {
 
   const outputMuted = ref(false)
 
+  const videoEnabled = computed(() => {
+    return !!mediasoup.videoProducer.value
+  })
+
   const sharingEnabled = computed(() => {
     return !!mediasoup.shareProducer.value
   })
 
+  const somebodyStreamingVideo = computed(() => {
+    return !!mediasoup.videoProducer.value
+      || !!mediasoup.shareProducer.value
+      || mediasoup.videoConsumers.value.length > 0
+      || mediasoup.shareConsumers.value.length > 0
+  })
+
   async function muteInput() {
-    if (inputMuted.value)
+    if (inputMuted.value || !mediasoup.micProducer.value)
       return
 
-    await mediasoup.pauseProducer('microphone')
+    await mediasoup.pauseProducer(mediasoup.micProducer.value)
 
-    toast.add({ severity: 'info', summary: 'Microphone muted', closable: false, life: 1000 })
+    emit('audio:muted')
   }
 
   async function unmuteInput() {
-    if (!inputMuted.value)
+    if (!inputMuted.value || !mediasoup.micProducer.value)
       return
 
     if (outputMuted.value) {
       await unmuteOutput()
     }
 
-    await mediasoup.resumeProducer('microphone')
+    await mediasoup.resumeProducer(mediasoup.micProducer.value)
 
-    toast.add({ severity: 'info', summary: 'Microphone activated', closable: false, life: 1000 })
+    emit('audio:unmuted')
   }
 
   async function toggleInput() {
@@ -78,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() {
@@ -91,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() {
@@ -101,12 +112,25 @@ export const useApp = createGlobalState(() => {
       await muteOutput()
   }
 
+  async function toggleVideo() {
+    if (!mediasoup.videoProducer.value) {
+      await mediasoup.enableVideo()
+      emit('video:enabled')
+    }
+    else {
+      await mediasoup.disableProducer(mediasoup.videoProducer.value)
+      emit('video:disabled')
+    }
+  }
+
   async function toggleShare() {
     if (!mediasoup.shareProducer.value) {
       await mediasoup.enableShare()
+      emit('share:enabled')
     }
     else {
-      await mediasoup.disableProducer('share')
+      await mediasoup.disableProducer(mediasoup.shareProducer.value)
+      emit('share:disabled')
     }
   }
 
@@ -121,10 +145,13 @@ export const useApp = createGlobalState(() => {
     muteOutput,
     unmuteOutput,
     toggleOutput,
+    toggleVideo,
     version,
     isTauri,
     commitSha,
     toggleShare,
+    videoEnabled,
     sharingEnabled,
+    somebodyStreamingVideo,
   }
 })

client/app/composables/use-client.ts

@@ -0,0 +1,52 @@
+import type { ChadClient } from '#shared/types'
+import { useLocalStorage } from '@vueuse/core'
+
+export function useClient(socketId: MaybeRef<ChadClient['socketId']>) {
+  const mediasoup = useMediasoup()
+  const { getClient } = useClients()
+
+  const client = computed(() => getClient(unref(socketId))!)
+
+  const volume = useLocalStorage<number>(computed(() => `CLIENT_VOLUME_${client.value.userId}`), 100, { writeDefaults: false })
+  const premuted = useLocalStorage<boolean>(computed(() => `CLIENT_PREMUTED_${client.value.userId}`), false, { writeDefaults: false })
+
+  const consumers = computed(() => {
+    return Object.values(mediasoup.consumers.value).filter(consumer => consumer.appData.socketId === client.value.socketId)
+  })
+
+  const audioConsumers = computed(() => {
+    return mediasoup.audioConsumers.value.filter(consumer => consumer.appData.socketId === client.value.socketId)
+  })
+
+  const videoConsumers = computed(() => {
+    return mediasoup.videoConsumers.value.filter(consumer => consumer.appData.socketId === client.value.socketId)
+  })
+
+  const shareConsumers = computed(() => {
+    return mediasoup.shareConsumers.value.filter(consumer => consumer.appData.socketId === client.value.socketId)
+  })
+
+  const producers = computed(() => {
+    return Object.values(mediasoup.producers.value).filter(producer => producer.appData.socketId === client.value.socketId)
+  })
+
+  const streaming = computed(() => {
+    return videoConsumers.value.length > 0 || shareConsumers.value.length > 0
+  })
+
+  const speaking = computed(() => {
+    return mediasoup.speakingClients.value.some(speaker => speaker.clientId === client.value.socketId)
+  })
+
+  return {
+    volume,
+    premuted,
+    consumers,
+    producers,
+    audioConsumers,
+    videoConsumers,
+    shareConsumers,
+    streaming,
+    speaking,
+  }
+}

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-devices.ts

@@ -19,7 +19,16 @@ export const useDevices = createGlobalState(() => {
     })
   }
 
+  ;(async () => {
+    if (permissionGranted.value)
+      return
+
+    await ensurePermissions()
+  })()
+
   return {
+    ensurePermissions,
+    permissionGranted,
     videoInputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(videoInputs.value))),
     audioInputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(audioInputs.value))),
     audioOutputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(audioOutputs.value))),

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-fullscreen-gallery.ts

@@ -0,0 +1,5 @@
+import { createSharedComposable } from '@vueuse/core'
+
+export const useFullscreenGallery = createSharedComposable(() => {
+  return {}
+})

client/app/composables/use-mediasoup.ts

@@ -1,11 +1,16 @@
+import type { ChadClient, Consumer, Producer } from '#shared/types'
 import type { MediaKind, ProducerOptions } from 'mediasoup-client/types'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
+import { shallowRef } from 'vue'
 import { useDevices } from '~/composables/use-devices'
 import { usePreferences } from '~/composables/use-preferences'
 import { useSignaling } from '~/composables/use-signaling'
 
-type ProducerType = 'microphone' | 'camera' | 'share'
+interface SpeakingClient {
+  clientId: ChadClient['socketId']
+  volume: number
+}
 
 const ICE_SERVERS: RTCIceServer[] = [
   { urls: 'stun:stun.l.google.com:19302' },
@@ -21,10 +26,10 @@ const ICE_SERVERS: RTCIceServer[] = [
 ]
 
 export const useMediasoup = createSharedComposable(() => {
-  const toast = useToast()
+  const { emit } = useEventBus()
 
   const signaling = useSignaling()
-  const { addClient, removeClient } = useClients()
+  const { addClient, removeClient, me } = useClients()
   const preferences = usePreferences()
   const { getShareStream } = useDevices()
 
@@ -33,12 +38,42 @@ export const useMediasoup = createSharedComposable(() => {
   const sendTransport = shallowRef<mediasoupClient.types.Transport>()
   const recvTransport = shallowRef<mediasoupClient.types.Transport>()
 
-  const micProducer = shallowRef<mediasoupClient.types.Producer>()
-  const cameraProducer = shallowRef<mediasoupClient.types.Producer>()
-  const shareProducer = shallowRef<mediasoupClient.types.Producer>()
+  const consumers = ref<Record<Consumer['id'], Consumer>>({})
+  const producers = ref<Record<Producer['id'], Producer>>({})
 
-  const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
-  const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(new Map())
+  const consumersArray = computed(() => {
+    return Object.values(consumers.value)
+  })
+
+  const audioConsumers = computed(() => {
+    return consumersArray.value.filter(consumer => consumer.raw.kind === 'audio')
+  })
+
+  const videoConsumers = computed(() => {
+    return consumersArray.value.filter(consumer => consumer.raw.kind === 'video' && consumer.appData.source !== 'share')
+  })
+
+  const shareConsumers = computed(() => {
+    return consumersArray.value.filter(consumer => consumer.raw.kind === 'video' && consumer.appData.source === 'share')
+  })
+
+  const producersArray = computed(() => {
+    return Object.values(producers.value)
+  })
+
+  const micProducer = computed(() => {
+    return producersArray.value.find(producer => producer.raw.kind === 'audio' && producer.raw.appData.source === 'mic-video')
+  })
+
+  const videoProducer = computed(() => {
+    return producersArray.value.find(producer => producer.raw.kind === 'video' && producer.raw.appData.source !== 'share')
+  })
+
+  const shareProducer = computed(() => {
+    return producersArray.value.find(producer => producer.raw.kind === 'video' && producer.raw.appData.source === 'share')
+  })
+
+  const speakingClients = shallowRef<SpeakingClient[]>([])
 
   watch(signaling.socket, (socket) => {
     if (!socket)
@@ -132,17 +167,25 @@ export const useMediasoup = createSharedComposable(() => {
 
       addClient(...joinedClients)
 
-      toast.add({ severity: 'success', summary: 'Joined', closable: false, life: 1000 })
+      if (me.value)
+        emit('socket:authenticated', { socketId: me.value.socketId })
 
       await enableMic()
     })
 
     socket.on('newPeer', (client) => {
       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(
@@ -159,20 +202,46 @@ export const useMediasoup = createSharedComposable(() => {
           producerId,
           kind,
           rtpParameters,
-          streamId: `${socketId}-${appData.source === 'share' ? 'share' : 'mic-webcam'}`,
+          streamId: `${socketId}-${appData.source || 'stream'}`,
           appData: { ...appData, socketId },
         })
 
         if (producerPaused)
           consumer.pause()
 
-        consumer.on('transportclose', () => {
-          if (consumers.value.delete(consumer.id))
-            triggerRef(consumers)
+        consumers.value[consumer.id] = {
+          id: consumer.id,
+          paused: consumer.paused,
+          appData: consumer.appData,
+          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]!)
         })
 
-        consumers.value.set(consumer.id, consumer)
-        triggerRef(consumers)
+        consumer.observer.on('pause', () => {
+          consumers.value[consumer.id]!.paused = true
+
+          emit('consumer:paused', consumers.value[consumer.id]!)
+        })
+
+        consumer.observer.on('close', () => {
+          const consumerData = consumers.value[consumer.id]
+
+          delete consumers.value[consumer.id]
+
+          if (consumerData)
+            emit('consumer:removed', consumerData)
+        })
+
+        consumer.on('trackended', () => {
+          consumer.close()
+        })
 
         cb()
       },
@@ -183,11 +252,37 @@ export const useMediasoup = createSharedComposable(() => {
       async (
         { consumerId },
       ) => {
-        if (consumers.value.delete(consumerId))
-          triggerRef(consumers)
+        const consumer = consumers.value[consumerId]
+
+        if (!consumer)
+          return
+
+        consumer.raw.close()
       },
     )
 
+    socket.on('consumerPaused', ({ consumerId }) => {
+      const consumer = consumers.value[consumerId]
+
+      if (!consumer)
+        return
+
+      consumer.raw.pause()
+    })
+
+    socket.on('consumerResumed', ({ consumerId }) => {
+      const consumer = consumers.value[consumerId]
+
+      if (!consumer)
+        return
+
+      consumer.raw.resume()
+    })
+
+    socket.on('speakingPeers', (value: SpeakingClient[]) => {
+      speakingClients.value = value
+    })
+
     socket.on('disconnect', () => {
       device.value = undefined
       rtpCapabilities.value = undefined
@@ -198,43 +293,12 @@ export const useMediasoup = createSharedComposable(() => {
       recvTransport.value?.close()
       recvTransport.value = undefined
 
-      micProducer.value = undefined
-      cameraProducer.value = undefined
-      shareProducer.value = undefined
-
-      consumers.value = new Map()
-      producers.value = new Map()
-    })
-
-    socket.on('consumerPaused', ({ consumerId }) => {
-      const consumer = consumers.value.get(consumerId)
-
-      if (!consumer)
-        return
-
-      consumer.pause()
-
-      triggerRef(consumers)
-    })
-
-    socket.on('consumerResumed', ({ consumerId }) => {
-      const consumer = consumers.value.get(consumerId)
-
-      if (!consumer)
-        return
-
-      consumer.resume()
-
-      triggerRef(consumers)
+      consumers.value = {}
+      producers.value = {}
     })
   }, { immediate: true, flush: 'sync' })
 
-  async function enableProducer(type: ProducerType, options: ProducerOptions) {
-    const producer = getProducerByType(type)
-
-    if (producer.value)
-      return
-
+  async function createProducer(options: ProducerOptions) {
     if (!device.value || !sendTransport.value)
       return
 
@@ -244,47 +308,65 @@ export const useMediasoup = createSharedComposable(() => {
     if (!device.value.canProduce(options.track.kind as MediaKind))
       return
 
-    producer.value = await sendTransport.value.produce(options)
+    const producer = await sendTransport.value.produce({ disableTrackOnPause: true, ...options })
 
-    producers.value.set(producer.value.id, producer.value)
-    triggerRef(producers)
-    triggerRef(producer)
+    producers.value[producer.id] = {
+      id: producer.id,
+      paused: producer.paused,
+      appData: producer.appData,
+      raw: markRaw(producer),
+    }
 
-    producer.value.on('transportclose', () => {
-      micProducer.value = undefined
+    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.value.on('trackended', () => {
-      disableProducer(type)
+    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', () => {
+      disableProducer(producers.value[producer.id]!)
     })
   }
 
-  async function disableProducer(type: ProducerType) {
-    const producer = getProducerByType(type)
-
-    if (!signaling.socket.value || !producer.value)
+  async function disableProducer(producer: Producer) {
+    if (!signaling.socket.value)
       return
 
-    producers.value.delete(producer.value.id)
-
     try {
-      producer.value.close()
+      producer.raw.close()
 
       await signaling.socket.value.emitWithAck('closeProducer', {
-        producerId: producer.value.id,
+        producerId: producer.id,
       })
     }
     catch {
     }
     finally {
-      triggerRef(producers)
-      triggerRef(producer)
+      delete producers.value[producer.id]
     }
-
-    producer.value = undefined
   }
 
   async function enableMic() {
+    if (micProducer.value)
+      return
+
     const stream = await navigator.mediaDevices.getUserMedia({
       audio: {
         deviceId: { exact: preferences.inputDeviceId.value },
@@ -299,21 +381,67 @@ export const useMediasoup = createSharedComposable(() => {
     if (!track)
       return
 
-    await enableProducer('microphone', {
+    await createProducer({
       track,
+      streamId: 'mic-video',
       codecOptions: {
         opusStereo: true,
         opusDtx: true, // Меньше пакетов летит когда тишина
         opusFec: false, // Фиксит пакет лос
       },
+      appData: {
+        source: 'mic-video',
+      },
     })
   }
 
   async function disableMic() {
-    await disableProducer('microphone')
+    if (!micProducer.value)
+      return
+
+    await disableProducer(micProducer.value)
+  }
+
+  async function enableVideo() {
+    if (videoProducer.value)
+      return
+
+    if (!device.value)
+      return
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: {
+        deviceId: { exact: preferences.videoDeviceId.value },
+        width: { ideal: 1920 },
+        height: { ideal: 1080 },
+        frameRate: { ideal: 60 },
+      },
+    })
+
+    const track = stream.getVideoTracks()[0]
+
+    if (!track)
+      return
+
+    await createProducer({
+      track,
+      streamId: 'mic-video',
+      // codec: device.value.rtpCapabilities.codecs?.find(
+      //   c => c.mimeType.toLowerCase() === 'video/AV1',
+      // ),
+      // codecOptions: {
+      //   videoGoogleStartBitrate: 1000,
+      // },
+      appData: {
+        source: 'mic-video',
+      },
+    })
   }
 
   async function enableShare() {
+    if (shareProducer.value)
+      return
+
     if (!device.value)
       return
 
@@ -324,85 +452,54 @@ export const useMediasoup = createSharedComposable(() => {
     if (!track)
       return
 
-    await enableProducer('share', {
+    await createProducer({
       track,
+      streamId: 'share',
       codec: device.value.rtpCapabilities.codecs?.find(
-        c => c.mimeType.toLowerCase() === 'video/h264',
+        c => c.mimeType.toLowerCase() === 'video/AV1',
       ),
       codecOptions: {
         videoGoogleStartBitrate: 1000,
       },
+      zeroRtpOnPause: true,
       appData: {
         source: 'share',
       },
     })
   }
 
-  async function pauseProducer(type: ProducerType) {
+  async function pauseProducer(producer: Producer) {
     if (!signaling.socket.value)
       return
 
-    const producer = getProducerByType(type)
-
-    if (!producer.value)
-      return
-
-    if (producer.value.paused)
+    if (producer.paused)
       return
 
     try {
-      producer.value.pause()
+      producer.raw.pause()
 
       await signaling.socket.value.emitWithAck('pauseProducer', {
-        producerId: producer.value.id,
+        producerId: producer.id,
       })
     }
     catch {
-      producer.value.resume()
-    }
-    finally {
-      triggerRef(producers)
-      triggerRef(producer)
+      producer.raw.resume()
     }
   }
 
-  async function resumeProducer(type: ProducerType) {
+  async function resumeProducer(producer: Producer) {
     if (!signaling.socket.value)
       return
 
-    const producer = getProducerByType(type)
-
-    if (!producer.value)
-      return
-
     try {
-      producer.value.resume()
+      producer.raw.resume()
 
       await signaling.socket.value.emitWithAck('resumeProducer', {
-        producerId: producer.value.id,
+        producerId: producer.id,
       })
     }
     catch {
-      producer.value.pause()
-    }
-    finally {
-      triggerRef(producers)
-      triggerRef(producer)
-    }
-  }
-
-  async function init() {
-    signaling.connect()
-  }
-
-  function getProducerByType(type: ProducerType) {
-    switch (type) {
-      case 'microphone':
-        return micProducer
-      case 'camera':
-        return cameraProducer
-      case 'share':
-        return shareProducer
+      producer.raw.pause()
     }
   }
 
@@ -421,18 +518,22 @@ export const useMediasoup = createSharedComposable(() => {
   })
 
   return {
-    init,
     consumers,
+    audioConsumers,
+    videoConsumers,
+    shareConsumers,
     producers,
+    speakingClients,
     sendTransport,
     recvTransport,
     rtpCapabilities,
     device,
     micProducer,
-    cameraProducer,
+    videoProducer,
     shareProducer,
     pauseProducer,
     resumeProducer,
+    enableVideo,
     enableShare,
     disableProducer,
   }

client/app/composables/use-preferences.ts

@@ -14,6 +14,7 @@ export const usePreferences = createGlobalState(() => {
 
   const inputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('INPUT_DEVICE_ID', 'default')
   const outputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('OUTPUT_DEVICE_ID', 'default')
+  const videoDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('VIDEO_DEVICE_ID', 'default')
 
   const autoGainControl = useLocalStorage('AUTO_GAIN_CONTROL', false)
   const noiseSuppression = useLocalStorage('NOISE_SUPPRESSION', true)
@@ -32,6 +33,10 @@ export const usePreferences = createGlobalState(() => {
     return audioOutputs.value.some(device => device.deviceId === outputDeviceId.value)
   })
 
+  const videoDeviceExist = computed(() => {
+    return videoInputs.value.some(device => device.deviceId === videoDeviceId.value)
+  })
+
   watchDebounced(
     [toggleInputHotkey, toggleOutputHotkey],
     async ([toggleInputHotkey, toggleOutputHotkey]) => {
@@ -56,6 +61,7 @@ export const usePreferences = createGlobalState(() => {
     fetched,
     inputDeviceId,
     outputDeviceId,
+    videoDeviceId,
     autoGainControl,
     noiseSuppression,
     echoCancellation,
@@ -64,5 +70,6 @@ export const usePreferences = createGlobalState(() => {
     toggleOutputHotkey,
     inputDeviceExist,
     outputDeviceExist,
+    videoDeviceExist,
   }
 })

client/app/composables/use-sfx.ts

@@ -0,0 +1,93 @@
+import { createSharedComposable } from '@vueuse/core'
+import { Howl } from 'howler'
+
+const CONNECTION_SOUNDS = Object.keys(import.meta.glob('@/../public/sfx/connection/*.ogg')).map(path => path.replace('../public', ''))
+
+console.log('CONNECTION_SOUNDS', CONNECTION_SOUNDS)
+
+function hashStringToNumber(str: string, cap: number): number {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash * 31 + str.charCodeAt(i)) | 0
+  }
+  return Math.abs(hash) % cap
+}
+
+const oneShots: Howl[] = []
+
+type SfxEvent = 'mic-on' | 'mic-off' | 'stream-on' | 'stream-off' | 'connection'
+
+const EVENT_VOLUME: Record<SfxEvent, number> = {
+  'mic-on': 0.2,
+  'mic-off': 0.2,
+  'stream-on': 0.03,
+  'stream-off': 0.03,
+  '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({
+        src,
+        autoplay: true,
+        loop: false,
+        volume,
+      })
+
+      howl.on('end', () => {
+        resolve()
+      })
+    })
+  }
+
+  async function playOneShot(src: string, volume = 0.2): Promise<void> {
+    for (const oneShot of oneShots) {
+      oneShot.stop()
+    }
+
+    oneShots.length = 0
+
+    return new Promise((resolve) => {
+      const howl = new Howl({
+        src,
+        autoplay: true,
+        loop: false,
+        volume,
+      })
+
+      oneShots.push(howl)
+
+      howl.on('end', () => {
+        resolve()
+      })
+    })
+  }
+
+  async function playEvent(event: SfxEvent) {
+    switch (event) {
+      default:
+        await playOneShot(`/sfx/${event}.ogg`, EVENT_VOLUME[event])
+        break
+    }
+  }
+
+  async function playRandomConnectionSound(seed: string) {
+    await playEvent('stream-on')
+
+    if (outputMuted.value)
+      return
+
+    await play(CONNECTION_SOUNDS[hashStringToNumber(seed, CONNECTION_SOUNDS.length)]!, 0.1)
+  }
+
+  return {
+    playOneShot,
+    play,
+    playRandomConnectionSound,
+    playEvent,
+  }
+})

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) => {