cringe sfx

client/app/components.d.ts

@@ -22,6 +22,7 @@ declare module 'vue' {
     PrimeSelect: typeof import('primevue/select')['default']
     PrimeSelectButton: typeof import('primevue/selectbutton')['default']
     PrimeSlider: typeof import('primevue/slider')['default']
+    PrimeTag: typeof import('primevue/tag')['default']
     PrimeToast: typeof import('primevue/toast')['default']
     PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

client/app/components/ClientRow.vue

@@ -111,7 +111,7 @@ const inputMuted = computed(() => {
 })
 
 const hasBadges = computed(() => {
-  return shareConsumers.value.length > 0
+  return streaming.value
     || premuted.value
     || inputMuted.value
     || props.client.outputMuted

client/app/components/Gallery/Card.vue

@@ -1,19 +1,38 @@
 <template>
-  <div class="cursor-pointer hover:outline outline-primary rounded overflow-hidden flex items-center justify-center">
-    <video :srcObject="mediaStream" muted autoplay />
+  <div
+    class="group cursor-pointer hover:outline outline-primary relative rounded overflow-hidden flex items-center justify-center"
+    @click="watch"
+  >
+    <video :srcObject="stream" muted autoplay />
+
+    <PrimeTag
+      severity="secondary"
+      class="absolute bottom-2 text-sm opacity-70 group-hover:opacity-100"
+      rounded
+    >
+      {{ isMe ? 'You' : client.displayName }}
+    </PrimeTag>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Consumer } from '#shared/types'
+import type { ChadClient } from '#shared/types'
 
 const props = defineProps<{
-  consumer: Consumer
+  client: ChadClient
+  stream: MediaStream
 }>()
 
-const mediaStream = computed(() => {
-  return new MediaStream([props.consumer.raw.track])
+const { me } = useClients()
+const fullscreenVideo = useFullscreenVideo()
+
+const isMe = computed(() => {
+  return props.client.socketId === me.value?.socketId
 })
+
+function watch() {
+  fullscreenVideo.show(props.stream)
+}
 </script>
 
 <style>

client/app/composables/use-app.ts

@@ -8,6 +8,7 @@ export const useApp = createGlobalState(() => {
   const mediasoup = useMediasoup()
   const signaling = useSignaling()
   const toast = useToast()
+  const sfx = useSfx()
 
   const ready = ref(false)
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
@@ -40,7 +41,10 @@ export const useApp = createGlobalState(() => {
   })
 
   const somebodyStreamingVideo = computed(() => {
-    return mediasoup.videoConsumers.value.length > 0 || mediasoup.shareConsumers.value.length > 0
+    return !!mediasoup.videoProducer.value
+      || !!mediasoup.shareProducer.value
+      || mediasoup.videoConsumers.value.length > 0
+      || mediasoup.shareConsumers.value.length > 0
   })
 
   async function muteInput() {
@@ -49,6 +53,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 })
   }
 
@@ -62,6 +67,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 })
   }
 
@@ -112,18 +118,22 @@ export const useApp = createGlobalState(() => {
   async function toggleVideo() {
     if (!mediasoup.videoProducer.value) {
       await mediasoup.enableVideo()
+      await sfx.playEvent('stream-on')
     }
     else {
       await mediasoup.disableProducer(mediasoup.videoProducer.value)
+      await sfx.playEvent('stream-off')
     }
   }
 
   async function toggleShare() {
     if (!mediasoup.shareProducer.value) {
       await mediasoup.enableShare()
+      await sfx.playEvent('stream-on')
     }
     else {
       await mediasoup.disableProducer(mediasoup.shareProducer.value)
+      await sfx.playEvent('stream-off')
     }
   }
 

client/app/composables/use-client.ts

@@ -14,10 +14,6 @@ export function useClient(socketId: MaybeRef<ChadClient['socketId']>) {
     return Object.values(mediasoup.consumers.value).filter(consumer => consumer.appData.socketId === client.value.socketId)
   })
 
-  const producers = computed(() => {
-    return mediasoup.producers.value.values().filter(producer => producer.appData.socketId === client.value.socketId).toArray()
-  })
-
   const audioConsumers = computed(() => {
     return mediasoup.audioConsumers.value.filter(consumer => consumer.appData.socketId === client.value.socketId)
   })
@@ -30,6 +26,10 @@ export function useClient(socketId: MaybeRef<ChadClient['socketId']>) {
     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
   })

client/app/composables/use-mediasoup.ts

@@ -29,9 +29,10 @@ const ICE_SERVERS: RTCIceServer[] = [
 
 export const useMediasoup = createSharedComposable(() => {
   const toast = useToast()
+  const sfx = useSfx()
 
   const signaling = useSignaling()
-  const { addClient, removeClient } = useClients()
+  const { addClient, removeClient, me } = useClients()
   const preferences = usePreferences()
   const { getShareStream } = useDevices()
 
@@ -169,12 +170,16 @@ 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 })
 
       await enableMic()
     })
 
     socket.on('newPeer', (client) => {
+      sfx.playRandomConnectionSound(client.socketId).then()
       addClient(client)
     })
 
@@ -200,6 +205,9 @@ export const useMediasoup = createSharedComposable(() => {
           appData: { ...appData, socketId },
         })
 
+        if (kind === 'video')
+          sfx.playEvent('stream-on').then()
+
         if (producerPaused)
           consumer.pause()
 
@@ -219,6 +227,9 @@ export const useMediasoup = createSharedComposable(() => {
         })
 
         consumer.observer.on('close', () => {
+          if (kind === 'video')
+            sfx.playEvent('stream-off').then()
+
           delete consumers.value[consumer.id]
         })
 
@@ -384,6 +395,9 @@ export const useMediasoup = createSharedComposable(() => {
     const stream = await navigator.mediaDevices.getUserMedia({
       video: {
         deviceId: { exact: preferences.videoDeviceId.value },
+        width: { ideal: 1920 },
+        height: { ideal: 1080 },
+        frameRate: { ideal: 60 },
       },
     })
 
@@ -395,9 +409,9 @@ export const useMediasoup = createSharedComposable(() => {
     await createProducer({
       track,
       streamId: 'mic-video',
-      codec: device.value.rtpCapabilities.codecs?.find(
-        c => c.mimeType.toLowerCase() === 'video/AV1',
-      ),
+      // codec: device.value.rtpCapabilities.codecs?.find(
+      //   c => c.mimeType.toLowerCase() === 'video/AV1',
+      // ),
       // codecOptions: {
       //   videoGoogleStartBitrate: 1000,
       // },

client/app/composables/use-sfx.ts

@@ -0,0 +1,86 @@
+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,
+}
+
+export const useSfx = createSharedComposable(() => {
+  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')
+    await play(CONNECTION_SOUNDS[hashStringToNumber(seed, CONNECTION_SOUNDS.length)]!, 0.1)
+  }
+
+  return {
+    playOneShot,
+    play,
+    playRandomConnectionSound,
+    playEvent,
+  }
+})

client/app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-[1fr_1.25fr] gap-2 p-2 h-screen grid-rows-[auto_1fr] max-w-full">
+  <div class="grid grid-cols-[360px_1fr] gap-2 p-2 h-screen grid-rows-[auto_1fr] max-w-full">
     <div
       class="flex items-center justify-between gap-2 rounded-xl p-3 bg-surface-950"
     >
@@ -40,7 +40,7 @@
       <PrimeSelectButton
         v-model="activeTab"
         :options="tabs"
-        data-key="id"
+        option-label="id"
         :allow-empty="false"
         style="--p-togglebutton-content-padding: 0.25rem 0.5rem"
       >

client/app/pages/gallery.vue

@@ -1,38 +1,64 @@
 <template>
   <div class="grid grid-cols-[1fr_1fr] gap-2">
-    <template v-for="(group, id) in groupedConsumers" :key="id">
     <GalleryCard
-        v-for="consumer in group"
-        :key="consumer.id"
-        :consumer="consumer"
-        @click="watch(consumer)"
+      v-for="item in gallery"
+      :key="item.client.socketId"
+      :client="item.client"
+      :stream="item.stream"
     />
-    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Consumer } from '#shared/types'
+import type { ChadClient } from '#shared/types'
+
+interface GalleryItem {
+  client: ChadClient
+  stream: MediaStream
+}
 
 definePageMeta({
   name: 'Gallery',
 })
 
-const { videoConsumers, shareConsumers } = useMediasoup()
-const fullscreenVideo = useFullscreenVideo()
+const { videoProducer, shareProducer } = useMediasoup()
+const { clients, me } = useClients()
 
-const groupedConsumers = computed<Partial<Record<string, Consumer[]>>>(() => {
-  if (fullscreenVideo.visible.value)
-    return {}
+const gallery = computed(() => {
+  return clients.value.reduce<GalleryItem[]>(
+    (acc, client) => {
+      const { streaming, videoConsumers, shareConsumers } = useClient(client.socketId)
 
-  const consumers = [...videoConsumers.value, ...shareConsumers.value]
+      if (!streaming.value)
+        return acc
 
-  return Object.groupBy(consumers, (consumer) => {
-    return consumer.appData.socketId!
+      for (const consumer of [...videoConsumers.value, ...shareConsumers.value]) {
+        acc.push({
+          client,
+          stream: new MediaStream([consumer.raw.track]),
         })
+      }
+
+      return acc
+    },
+    [videoProducer.value, shareProducer.value].reduce<GalleryItem[]>((acc, producer) => {
+      if (!me.value || !producer || !producer.raw.track)
+        return acc
+
+      acc.push({
+        client: me.value,
+        stream: new MediaStream([producer.raw.track]),
+      })
+
+      return acc
+    }, []),
+  )
 })
 
-function watch(consumer: Consumer) {
-  fullscreenVideo.show(new MediaStream([consumer.raw.track]))
-}
+watch(gallery, (gallery) => {
+  if (gallery.length > 0)
+    return
+
+  navigateTo({ name: 'Index' })
+})
 </script>

client/app/pages/preferences.vue

@@ -74,7 +74,14 @@
       <p class="text-sm mb-2 text-center">
         FPS
       </p>
-      <PrimeSelectButton v-model="shareFps" :options="[5, 30, 60]" fluid size="small" />
+      <PrimeSelectButton
+        v-model="shareFps"
+        :options="shareFpsOptions"
+        fluid
+        size="small"
+        option-label="label"
+        option-value="value"
+      />
     </div>
 
     <template v-if="isTauri">
@@ -152,6 +159,13 @@ const {
   shareFps,
 } = usePreferences()
 
+const shareFpsOptions = [5, 30, 60].map((value) => {
+  return {
+    label: value.toString(),
+    value,
+  }
+})
+
 const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)
 const setupToggleOutputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleOutputHotkey)
 

client/package.json

@@ -19,6 +19,7 @@
     "@tauri-apps/plugin-updater": "~2",
     "@vueuse/core": "^13.9.0",
     "hotkeys-js": "^4.0.0",
+    "howler": "^2.2.4",
     "lucide-vue-next": "^0.562.0",
     "mediasoup-client": "^3.18.6",
     "nuxt": "^4.2.2",
@@ -37,6 +38,7 @@
     "@antfu/eslint-config": "^5.4.1",
     "@primevue/nuxt-module": "^4.4.0",
     "@tauri-apps/cli": "^2.8.4",
+    "@types/howler": "^2",
     "eslint": "^9.36.0",
     "eslint-plugin-format": "^1.0.2",
     "sass-embedded": "^1.93.2",