screen sharing

client/Dockerfile.web

@@ -2,9 +2,6 @@ FROM node:lts-alpine AS builder
 
 WORKDIR /app
 
-RUN corepack enable
-RUN yarn set version stable
-
 COPY package.json yarn.lock .yarnrc.yml ./
 COPY .yarn ./.yarn
 

client/Dockerfile.windows

@@ -3,8 +3,6 @@ FROM node:lts AS builder
 
 WORKDIR /app
 
-# RUN corepack enable yarn && yarn set version stable
-
 COPY package.json yarn.lock .yarnrc.yml ./
 COPY .yarn ./.yarn
 

client/app/assets/styles/main.scss

@@ -27,4 +27,21 @@ body {
 
 .p-scrollpanel-bar-y {
   translate: -0.25rem;
+}
+
+.p-select-overlay {
+  /* Force dropdown width to match computed min-width from PrimeVue internals. */
+  width: 0;
+}
+
+.p-select-label {
+  width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.p-select-option-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

client/app/components.d.ts

@@ -28,4 +28,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
+  export interface ComponentCustomProperties {
+    Tooltip: typeof import('primevue/tooltip')['default']
+  }
 }

client/app/components/ClientRow.vue

@@ -1,110 +1,129 @@
 <template>
-  <div class="py-3">
-    <div class="flex items-center gap-3 ">
+  <div
+    class="overflow-hidden rounded-xl transition-[background-color]"
+    :class="{
+      'hover:bg-surface-800 cursor-pointer': !isMe,
+      'bg-surface-800': expanded,
+    }"
+  >
+    <div class="p-3 flex items-center gap-3" @click="toggleExpand">
       <PrimeAvatar size="small">
         <template #icon>
           <User :size="20" />
         </template>
       </PrimeAvatar>
 
-      <div class="flex-1">
-        <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
-          {{ client.displayName }}
-        </div>
-        <div v-if="client.username !== client.displayName" class="mt-1 text-xs leading-5 text-muted-color">
-          {{ client.username }}
-        </div>
+      <div class="flex-1 overflow-hidden text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
+        {{ client.displayName || client.username }}
       </div>
 
-      <PrimeBadge v-if="inputMuted" severity="info" value="Muted" />
-      <!--      <PrimeBadge v-if="outputMuted" severity="info" value="No sound" /> -->
-      <PrimeBadge v-if="isMe" severity="secondary" value="You" />
+      <div class="flex align-center gap-1">
+        <PrimeBadge v-if="!!shareConsumer" v-tooltip.top="'Watch'" severity="success" value="Streaming" size="small" @click.stop="watchStream" />
 
-      <template v-if="!isMe">
-        <PrimeButton icon="pi pi-ellipsis-h" text size="small" severity="contrast" @click="menuRef?.toggle" />
+        <PrimeBadge v-if="premuted" severity="danger" value="Muted" size="small" />
+        <PrimeBadge v-else-if="client.outputMuted" severity="info" value="No sound" size="small" />
+        <PrimeBadge v-else-if="inputMuted" severity="info" value="Muted" size="small" />
 
-        <PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
-          <template #start>
-            <div class="px-4 py-3">
-              <div class="flex justify-between">
-                <span>Volume</span>
-                <span>{{ volume }}</span>
-              </div>
-              <PrimeSlider v-model="volume" class="mt-4" :min="0" :max="1000" :step="volume < 200 ? 5 : 25" />
-            </div>
-          </template>
-        </PrimeMenu>
-      </template>
+        <PrimeBadge v-if="isMe" severity="secondary" value="You" size="small" class="shrink-0" />
+      </div>
+
+      <Component :is="expanded ? ChevronUp : ChevronDown" v-if="!isMe" :size="20" />
     </div>
+
+    <CollapseTransition v-if="!isMe">
+      <div v-if="expanded">
+        <div class="px-3 pb-3">
+          <div class="flex justify-between text-sm mb-3">
+            <span>Volume</span>
+            <span>{{ volume }}</span>
+          </div>
+          <PrimeSlider v-model="volume" :min="0" :max="1000" :step="volume < 200 ? 5 : 25" />
+
+          <div class="mt-3 flex gap-1 justify-end">
+            <PrimeButton size="small" variant="text" @click="premuted = !premuted">
+              {{ premuted ? 'Unmute' : 'Mute' }}
+            </PrimeButton>
+          </div>
+        </div>
+      </div>
+    </CollapseTransition>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { ChadClient } from '#shared/types'
-import type { MenuItem } from 'primevue/menuitem'
 import { useLocalStorage } from '@vueuse/core'
-import { User } from 'lucide-vue-next'
+import { ChevronDown, ChevronUp, User } from 'lucide-vue-next'
+import CollapseTransition from '~/components/CollapseTransition.vue'
 
 const props = defineProps<{
   client: ChadClient
 }>()
 
 const { outputMuted } = useApp()
-const { getClientConsumers, micProducer } = useMediasoup()
+const { consumers: allConsumers, micProducer } = useMediasoup()
 const { me } = useClients()
+const { show } = useFullscreenVideo()
+
+const expanded = ref(false)
 
 const volume = useLocalStorage<number>(computed(() => `CLIENT_VOLUME_${props.client.userId}`), 100, { writeDefaults: false })
-
-const menuRef = useTemplateRef<HTMLAudioElement>('menu')
-
-const menuItems: MenuItem[] = [
-  {
-    label: 'Mute',
-    icon: 'pi pi-headphones',
-  },
-  {
-    label: 'DM',
-    icon: 'pi pi-comment',
-    disabled: true,
-  },
-]
+const premuted = useLocalStorage<boolean>(computed(() => `CLIENT_PREMUTED_${props.client.userId}`), false, { writeDefaults: false })
 
 const isMe = computed(() => {
   return me.value && props.client.userId === me.value.userId
 })
 
-const audioConsumer = computed(() => {
-  if (isMe.value)
-    return undefined
-
-  const consumers = getClientConsumers(props.client.socketId)
-
-  return consumers.find(consumer => consumer.track.kind === 'audio')
+const consumers = computed(() => {
+  return allConsumers.value.values().filter(consumer => consumer.appData.socketId === props.client.socketId).toArray()
 })
 
-const inputMuted = computed(() => {
-  if (isMe.value)
-    return micProducer.value?.paused ?? false
+const audioConsumer = computed(() => {
+  return consumers.value.find(consumer => consumer.track.kind === 'audio')
+})
 
-  const consumers = getClientConsumers(props.client.socketId)
+const videoConsumers = computed(() => {
+  return consumers.value.filter(consumer => consumer.track.kind === 'video')
+})
 
-  return consumers.find(consumer => consumer.track.kind === 'audio')?.paused
+const shareConsumer = computed(() => {
+  return videoConsumers.value.find(consumer => consumer.appData.source === 'share')
 })
 
 const audioTrack = computed(() => {
   return audioConsumer.value?.track
 })
 
+const audioConsumerPaused = ref(false)
+
+const inputMuted = computed(() => {
+  if (isMe.value)
+    return micProducer.value?.paused ?? false
+
+  return premuted.value || audioConsumerPaused.value
+})
+
+watch(allConsumers, () => {
+  audioConsumerPaused.value = audioConsumer.value?.paused ?? false
+})
+
 const { setGain } = useAudioContext(audioTrack)
 
-watch(volume, (volume) => {
-  // if (outputMuted.value)
-  //   return
+watchEffect(() => {
+  setGain((outputMuted.value || premuted.value) ? 0 : (volume.value * 0.01))
+})
 
-  setGain(volume * 0.01)
-}, { immediate: true })
+function toggleExpand() {
+  if (isMe.value)
+    return
 
-// watch(outputMuted, (outputMuted) => {
-//   setGain(outputMuted ? 0 : (volume.value * 0.01))
-// })
+  expanded.value = !expanded.value
+}
+
+function watchStream() {
+  if (!shareConsumer.value)
+    return
+
+  show(new MediaStream([shareConsumer.value.track]))
+}
 </script>

client/app/components/CollapseTransition.vue

@@ -0,0 +1,118 @@
+<template>
+  <Transition name="collapse-transition" v-on="bindings">
+    <slot />
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import type { RendererElement } from 'vue'
+
+defineOptions({
+  name: 'CollapseTransition',
+})
+
+const emit = defineEmits<{
+  expanded: []
+  collapsed: []
+}>()
+
+const bindings = {
+  beforeEnter(el: RendererElement) {
+    if (!el.dataset)
+      el.dataset = {}
+
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+    el.dataset.elExistsHeight = el.style.height ?? undefined
+    el.style.maxHeight = 0
+    el.style.paddingTop = 0
+    el.style.paddingBottom = 0
+  },
+
+  enter(el: RendererElement) {
+    requestAnimationFrame(() => {
+      el.dataset.oldOverflow = el.style.overflow
+      if (el.dataset.elExistsHeight) {
+        el.style.maxHeight = el.dataset.elExistsHeight
+      }
+      else if (el.scrollHeight !== 0) {
+        el.style.maxHeight = `${el.scrollHeight}px`
+      }
+      else {
+        el.style.maxHeight = 0
+      }
+
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+      el.style.overflow = 'hidden'
+    })
+  },
+
+  afterEnter(el: RendererElement) {
+    el.style.maxHeight = ''
+    el.style.overflow = el.dataset.oldOverflow
+
+    emit('expanded')
+  },
+
+  enterCancelled(el: RendererElement) {
+    reset(el)
+  },
+
+  beforeLeave(el: RendererElement) {
+    if (!el.dataset)
+      el.dataset = {}
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+    el.dataset.oldOverflow = el.style.overflow
+
+    el.style.maxHeight = `${el.scrollHeight}px`
+    el.style.overflow = 'hidden'
+  },
+
+  leave(el: RendererElement) {
+    if (el.scrollHeight !== 0) {
+      el.style.maxHeight = 0
+      el.style.paddingTop = 0
+      el.style.paddingBottom = 0
+    }
+  },
+
+  afterLeave(el: RendererElement) {
+    reset(el)
+
+    emit('collapsed')
+  },
+
+  leaveCancelled(el: RendererElement) {
+    reset(el)
+  },
+}
+
+function reset(el: RendererElement) {
+  el.style.maxHeight = ''
+  el.style.overflow = el.dataset.oldOverflow
+  el.style.paddingTop = el.dataset.oldPaddingTop
+  el.style.paddingBottom = el.dataset.oldPaddingBottom
+}
+</script>
+
+<style lang="scss">
+.collapse-transition {
+  transition-property: height, padding-top, padding-bottom;
+  transition-timing-function: var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--default-transition-duration, 150ms);
+}
+
+.collapse-transition-leave-active,
+.collapse-transition-enter-active {
+  transition-property: opacity, max-height, padding-top, padding-bottom;
+  transition-timing-function: var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--default-transition-duration, 150ms);
+}
+
+.collapse-transition-leave-to,
+.collapse-transition-enter-from {
+  opacity: 0;
+}
+</style>

client/app/composables/use-app.ts

@@ -6,77 +6,98 @@ import { useClients } from '~/composables/use-clients'
 export const useApp = createGlobalState(() => {
   const { clients } = useClients()
   const mediasoup = useMediasoup()
+  const signaling = useSignaling()
   const toast = useToast()
 
   const ready = ref(false)
-
-  const inputMuted = ref(false)
-  const outputMuted = ref(false)
-
-  const previousInputMuted = ref(inputMuted.value)
-
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
-
   const commitSha = __COMMIT_SHA__
-
   const version = computedAsync(() => isTauri.value ? getVersion() : 'web', '-')
 
-  watch(inputMuted, async (inputMuted) => {
-    if (inputMuted) {
-      await mediasoup.pauseProducer('microphone')
-    }
-    else {
-      if (outputMuted.value) {
-        outputMuted.value = false
-      }
-      await mediasoup.resumeProducer('microphone')
-    }
+  const inputMuted = computed(() => {
+    return !!mediasoup.micProducer.value?.paused
+  })
+  const previousInputMuted = ref(inputMuted.value)
 
-    const toastText = inputMuted ? 'Microphone muted' : 'Microphone activated'
-    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
+  const outputMuted = ref(false)
+
+  const sharingEnabled = computed(() => {
+    return !!mediasoup.shareProducer.value
   })
 
-  watch(outputMuted, (outputMuted) => {
-    if (outputMuted) {
-      previousInputMuted.value = inputMuted.value
-      muteInput()
-    }
-    else {
-      inputMuted.value = previousInputMuted.value
-    }
-
-    const toastText = outputMuted ? 'Sound muted' : 'Sound resumed'
-    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
-  })
-
-  function muteInput() {
-    inputMuted.value = true
-  }
-
-  function unmuteInput() {
-    inputMuted.value = false
-  }
-
-  function toggleInput() {
+  async function muteInput() {
     if (inputMuted.value)
-      unmuteInput()
+      return
+
+    await mediasoup.pauseProducer('microphone')
+
+    toast.add({ severity: 'info', summary: 'Microphone muted', closable: false, life: 1000 })
+  }
+
+  async function unmuteInput() {
+    if (!inputMuted.value)
+      return
+
+    if (outputMuted.value) {
+      await unmuteOutput()
+    }
+
+    await mediasoup.resumeProducer('microphone')
+
+    toast.add({ severity: 'info', summary: 'Microphone activated', closable: false, life: 1000 })
+  }
+
+  async function toggleInput() {
+    if (inputMuted.value)
+      await unmuteInput()
     else
-      muteInput()
+      await muteInput()
   }
 
-  function muteOutput() {
-    outputMuted.value = true
-  }
-
-  function unmuteOutput() {
-    outputMuted.value = false
-  }
-
-  function toggleOutput() {
+  async function muteOutput() {
     if (outputMuted.value)
-      unmuteOutput()
+      return
+
+    outputMuted.value = true
+
+    previousInputMuted.value = inputMuted.value
+
+    await muteInput()
+
+    await signaling.socket.value?.emitWithAck('updateClient', {
+      outputMuted: true,
+    })
+
+    toast.add({ severity: 'info', summary: 'Sound muted', closable: false, life: 1000 })
+  }
+
+  async function unmuteOutput() {
+    outputMuted.value = false
+
+    if (!previousInputMuted.value)
+      await unmuteInput()
+
+    await signaling.socket.value?.emitWithAck('updateClient', {
+      outputMuted: false,
+    })
+
+    toast.add({ severity: 'info', summary: 'Sound resumed', closable: false, life: 1000 })
+  }
+
+  async function toggleOutput() {
+    if (outputMuted.value)
+      await unmuteOutput()
     else
-      muteOutput()
+      await muteOutput()
+  }
+
+  async function toggleShare() {
+    if (!mediasoup.shareProducer.value) {
+      await mediasoup.enableShare()
+    }
+    else {
+      await mediasoup.disableProducer('share')
+    }
   }
 
   return {
@@ -93,5 +114,7 @@ export const useApp = createGlobalState(() => {
     version,
     isTauri,
     commitSha,
+    toggleShare,
+    sharingEnabled,
   }
 })

client/app/composables/use-devices.ts

@@ -0,0 +1,28 @@
+import { createGlobalState, useDevicesList } from '@vueuse/core'
+
+export const useDevices = createGlobalState(() => {
+  const {
+    ensurePermissions,
+    permissionGranted,
+    videoInputs,
+    audioInputs,
+    audioOutputs,
+  } = useDevicesList()
+
+  async function getShareStream(fps = 30) {
+    return navigator.mediaDevices.getDisplayMedia({
+      audio: false,
+      video: {
+        displaySurface: 'monitor',
+        frameRate: { max: fps },
+      },
+    })
+  }
+
+  return {
+    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))),
+    getShareStream,
+  }
+})

client/app/composables/use-fullscreen-video.ts

@@ -0,0 +1,51 @@
+import { createGlobalState, useEventListener } from '@vueuse/core'
+
+export const useFullscreenVideo = createGlobalState(() => {
+  const videoEl = shallowRef<HTMLVideoElement>()
+
+  const visible = computed(() => !!videoEl.value)
+
+  async function show(stream: MediaStream) {
+    if (videoEl.value) {
+      videoEl.value.srcObject = stream
+    }
+    else {
+      const el = document.createElement('video')
+      el.srcObject = stream
+      el.autoplay = true
+      el.playsInline = true
+      el.controls = false
+      el.muted = true
+      // el.style.position = 'fixed'
+      // el.style.top = '0'
+      // el.style.left = '0'
+      // el.style.width = '1px'
+      // el.style.height = '1px'
+      // el.style.opacity = '0'
+      // el.style.pointerEvents = 'none'
+
+      document.body.appendChild(el)
+
+      videoEl.value = el
+    }
+
+    await videoEl.value.requestFullscreen()
+  }
+
+  function hide() {
+    videoEl.value?.remove()
+  }
+
+  useEventListener(document, 'fullscreenchange', () => {
+    if (!document.fullscreenElement && videoEl.value) {
+      videoEl.value?.remove()
+      videoEl.value = undefined
+    }
+  })
+
+  return {
+    visible,
+    show,
+    hide,
+  }
+})

client/app/composables/use-mediasoup.ts

@@ -1,6 +1,7 @@
-import type { ChadClient } from '#shared/types'
+import type { MediaKind, ProducerOptions } from 'mediasoup-client/types'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
+import { useDevices } from '~/composables/use-devices'
 import { usePreferences } from '~/composables/use-preferences'
 import { useSignaling } from '~/composables/use-signaling'
 
@@ -25,7 +26,7 @@ export const useMediasoup = createSharedComposable(() => {
   const signaling = useSignaling()
   const { addClient, removeClient } = useClients()
   const preferences = usePreferences()
-  const { me } = useAuth()
+  const { getShareStream } = useDevices()
 
   const device = shallowRef<mediasoupClient.Device>()
   const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
@@ -158,7 +159,7 @@ export const useMediasoup = createSharedComposable(() => {
           producerId,
           kind,
           rtpParameters,
-          streamId: `${socketId}-${appData.share ? 'share' : 'mic-webcam'}`,
+          streamId: `${socketId}-${appData.source === 'share' ? 'share' : 'mic-webcam'}`,
           appData: { ...appData, socketId },
         })
 
@@ -213,8 +214,6 @@ export const useMediasoup = createSharedComposable(() => {
 
       consumer.pause()
 
-      console.log(consumerId)
-
       triggerRef(consumers)
     })
 
@@ -230,20 +229,62 @@ export const useMediasoup = createSharedComposable(() => {
     })
   }, { immediate: true, flush: 'sync' })
 
-  function getClientConsumers(socketId: ChadClient['socketId']) {
-    return consumers.value.values().filter(consumer => consumer.appData.socketId === socketId)
-  }
+  async function enableProducer(type: ProducerType, options: ProducerOptions) {
+    const producer = getProducerByType(type)
 
-  async function enableMic() {
-    if (micProducer.value)
+    if (producer.value)
       return
 
     if (!device.value || !sendTransport.value)
       return
 
-    if (!device.value.canProduce('audio'))
+    if (!options.track)
       return
 
+    if (!device.value.canProduce(options.track.kind as MediaKind))
+      return
+
+    producer.value = await sendTransport.value.produce(options)
+
+    producers.value.set(producer.value.id, producer.value)
+    triggerRef(producers)
+    triggerRef(producer)
+
+    producer.value.on('transportclose', () => {
+      micProducer.value = undefined
+    })
+
+    producer.value.on('trackended', () => {
+      disableProducer(type)
+    })
+  }
+
+  async function disableProducer(type: ProducerType) {
+    const producer = getProducerByType(type)
+
+    if (!signaling.socket.value || !producer.value)
+      return
+
+    producers.value.delete(producer.value.id)
+
+    try {
+      producer.value.close()
+
+      await signaling.socket.value.emitWithAck('closeProducer', {
+        producerId: producer.value.id,
+      })
+    }
+    catch {
+    }
+    finally {
+      triggerRef(producers)
+      triggerRef(producer)
+    }
+
+    producer.value = undefined
+  }
+
+  async function enableMic() {
     const stream = await navigator.mediaDevices.getUserMedia({
       audio: {
         deviceId: { exact: preferences.inputDeviceId.value },
@@ -258,7 +299,7 @@ export const useMediasoup = createSharedComposable(() => {
     if (!track)
       return
 
-    micProducer.value = await sendTransport.value.produce({
+    await enableProducer('microphone', {
       track,
       codecOptions: {
         opusStereo: true,
@@ -266,41 +307,35 @@ export const useMediasoup = createSharedComposable(() => {
         opusFec: false, // Фиксит пакет лос
       },
     })
-
-    producers.value.set(micProducer.value.id, micProducer.value)
-    triggerRef(producers)
-    triggerRef(micProducer)
-
-    micProducer.value.on('transportclose', () => {
-      micProducer.value = undefined
-    })
-
-    micProducer.value.on('trackended', () => {
-      disableMic()
-    })
   }
 
   async function disableMic() {
-    if (!signaling.socket.value || !micProducer.value)
+    await disableProducer('microphone')
+  }
+
+  async function enableShare() {
+    if (!device.value)
       return
 
-    producers.value.delete(micProducer.value.id)
+    const stream = await getShareStream()
 
-    try {
-      micProducer.value.close()
+    const track = stream.getVideoTracks()[0]
 
-      await signaling.socket.value.emitWithAck('closeProducer', {
-        producerId: micProducer.value.id,
-      })
-    }
-    catch {
-    }
-    finally {
-      triggerRef(producers)
-      triggerRef(micProducer)
-    }
+    if (!track)
+      return
 
-    micProducer.value = undefined
+    await enableProducer('share', {
+      track,
+      codec: device.value.rtpCapabilities.codecs?.find(
+        c => c.mimeType.toLowerCase() === 'video/h264',
+      ),
+      codecOptions: {
+        videoGoogleStartBitrate: 1000,
+      },
+      appData: {
+        source: 'share',
+      },
+    })
   }
 
   async function pauseProducer(type: ProducerType) {
@@ -371,18 +406,6 @@ export const useMediasoup = createSharedComposable(() => {
     }
   }
 
-  watch(
-    preferences.inputDeviceId,
-    async (inputDeviceId) => {
-      await disableMic()
-
-      if (!inputDeviceId)
-        return
-
-      await enableMic()
-    },
-  )
-
   watch([
     preferences.inputDeviceId,
     preferences.echoCancellation,
@@ -408,8 +431,9 @@ export const useMediasoup = createSharedComposable(() => {
     micProducer,
     cameraProducer,
     shareProducer,
-    getClientConsumers,
     pauseProducer,
     resumeProducer,
+    enableShare,
+    disableProducer,
   }
 })

client/app/composables/use-preferences.ts

@@ -1,5 +1,5 @@
 import chadApi from '#shared/chad-api'
-import { createGlobalState, useDevicesList, useLocalStorage, watchDebounced } from '@vueuse/core'
+import { createGlobalState, useLocalStorage, watchDebounced } from '@vueuse/core'
 
 export interface SyncedPreferences {
   toggleInputHotkey: string
@@ -8,6 +8,8 @@ export interface SyncedPreferences {
 }
 
 export const usePreferences = createGlobalState(() => {
+  const { videoInputs, audioInputs, audioOutputs } = useDevices()
+
   const synced = ref(false)
 
   const inputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('INPUT_DEVICE_ID', 'default')
@@ -20,14 +22,6 @@ export const usePreferences = createGlobalState(() => {
   const toggleInputHotkey = ref<SyncedPreferences['toggleInputHotkey']>('')
   const toggleOutputHotkey = ref<SyncedPreferences['toggleOutputHotkey']>('')
 
-  const {
-    ensurePermissions,
-    permissionGranted,
-    videoInputs,
-    audioInputs,
-    audioOutputs,
-  } = useDevicesList()
-
   const inputDeviceExist = computed(() => {
     return audioInputs.value.some(device => device.deviceId === inputDeviceId.value)
   })
@@ -67,8 +61,5 @@ export const usePreferences = createGlobalState(() => {
     toggleOutputHotkey,
     inputDeviceExist,
     outputDeviceExist,
-    videoInputs: computed(() => JSON.parse(JSON.stringify(videoInputs.value))),
-    audioInputs: computed(() => JSON.parse(JSON.stringify(audioInputs.value))),
-    audioOutputs: computed(() => JSON.parse(JSON.stringify(audioOutputs.value))),
   }
 })

client/app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-2 gap-2 p-2 h-screen grid-rows-[auto_1fr]">
+  <div class="grid grid-cols-[1fr_1.25fr] gap-2 p-2 h-screen grid-rows-[auto_1fr]">
     <div
       class="flex items-center justify-between gap-2 rounded-xl p-3 bg-surface-950"
     >
@@ -20,6 +20,12 @@
           </template>
         </PrimeButton>
       </PrimeButtonGroup>
+
+      <PrimeButton outlined @click="toggleShare">
+        <template #icon>
+          <Component :is="sharingEnabled ? ScreenShareOff : ScreenShare" />
+        </template>
+      </PrimeButton>
     </div>
 
     <div
@@ -39,8 +45,8 @@
     </div>
 
     <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
-      <div v-auto-animate class="p-3 divide-y divide-surface-800">
-        <ClientRow v-for="client of clients" :key="client.id" :client="client" />
+      <div v-auto-animate class="p-3 space-y-1">
+        <ClientRow v-for="client of clients" :key="client.userId" :client="client" />
       </div>
     </PrimeScrollPanel>
 
@@ -53,9 +59,29 @@
 </template>
 
 <script setup lang="ts">
-import { MessageCircle, Mic, MicOff, Settings, UserPen, Volume2, VolumeOff } from 'lucide-vue-next'
+import {
+  MessageCircle,
+  Mic,
+  MicOff,
+  ScreenShare,
+  ScreenShareOff,
+  Settings,
+  UserPen,
+  Volume2,
+  VolumeOff,
+} from 'lucide-vue-next'
 
-const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri } = useApp()
+const {
+  isTauri,
+  version,
+  clients,
+  inputMuted,
+  outputMuted,
+  sharingEnabled,
+  toggleInput,
+  toggleOutput,
+  toggleShare,
+} = useApp()
 const { connect, connected } = useSignaling()
 
 interface Tab {

client/app/middleware/01.auth.global.ts

@@ -6,7 +6,9 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   if (!me.value) {
     try {
       setMe(await chadApi('/me', { method: 'GET' }))
-      return navigateTo({ name: 'Index' })
+
+      if (to.meta.auth !== false)
+        return navigateTo({ name: 'Index' })
     }
     catch {
       if (to.meta.auth !== 'guest') {
@@ -16,6 +18,6 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   }
 
   if (me.value && to.meta.auth === 'guest') {
-    return navigateTo('/')
+    return navigateTo({ name: 'Index' })
   }
 })

client/app/pages/index.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="flex items-center justify-center">
-    <PrimeCard>
-      <template #content>
-        The chat is under development.
-      </template>
-    </PrimeCard>
+  <div>
+    <div class="flex items-center justify-center">
+      <PrimeCard>
+        <template #content>
+          The chat is under development.
+        </template>
+      </PrimeCard>
+    </div>
   </div>
 </template>
 

client/app/pages/preferences.vue

@@ -47,19 +47,21 @@
     <!--      <label for="outputDevice">Output device</label> -->
     <!--    </PrimeFloatLabel> -->
 
-    <PrimeDivider align="left">
-      Hotkeys
-    </PrimeDivider>
+    <template v-if="isTauri">
+      <PrimeDivider align="left">
+        Hotkeys
+      </PrimeDivider>
 
-    <PrimeFloatLabel variant="on">
-      <PrimeInputText id="microphoneToggle" :model-value="toggleInputHotkey" fluid @keydown="setupToggleInputHotkey" />
-      <label for="microphoneToggle">Toggle microphone</label>
-    </PrimeFloatLabel>
+      <PrimeFloatLabel variant="on">
+        <PrimeInputText id="microphoneToggle" :model-value="toggleInputHotkey" fluid @keydown="setupToggleInputHotkey" />
+        <label for="microphoneToggle">Toggle microphone</label>
+      </PrimeFloatLabel>
 
-    <PrimeFloatLabel variant="on" class="mt-3">
-      <PrimeInputText id="soundToggle" :model-value="toggleOutputHotkey" fluid @keydown="setupToggleOutputHotkey" />
-      <label for="soundToggle">Toggle sound</label>
-    </PrimeFloatLabel>
+      <PrimeFloatLabel variant="on" class="mt-3">
+        <PrimeInputText id="soundToggle" :model-value="toggleOutputHotkey" fluid @keydown="setupToggleOutputHotkey" />
+        <label for="soundToggle">Toggle sound</label>
+      </PrimeFloatLabel>
+    </template>
 
     <PrimeDivider align="left">
       About
@@ -72,31 +74,28 @@
       COMMIT_SHA: {{ commitSha }}
     </p>
 
-    <PrimeButton
-      v-if="isTauri"
-      class="mt-3"
-      size="small"
-      label="Check for Updates"
-      fluid
-      severity="info"
-      :loading="checking"
-      @click="onCheckForUpdates"
-    />
-  </div>
-
-  <PrimeToast position="bottom-center" group="updater">
-    <template #container="slotProps">
-      <div class="p-3">
-        <div class="font-medium text-lg mb-4">
-          {{ slotProps.message.detail }}
-        </div>
-        <div class="flex gap-3">
-          <PrimeButton size="small" label="Update now" @click="() => {}" />
-          <PrimeButton size="small" label="Later" severity="secondary" outlined @click="slotProps.closeCallback()" />
-        </div>
-      </div>
+    <template v-if="isTauri">
+      <PrimeButton
+        v-if="lastUpdate"
+        class="mt-3"
+        size="small"
+        label="Install new version"
+        fluid
+        severity="success"
+        @click="navigateTo({ name: 'Updater' })"
+      />
+      <PrimeButton
+        v-else
+        class="mt-3"
+        size="small"
+        label="Check for Updates"
+        fluid
+        severity="info"
+        :loading="checking"
+        @click="checkForUpdates"
+      />
     </template>
-  </PrimeToast>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -106,7 +105,8 @@ definePageMeta({
   name: 'Preferences',
 })
 const { isTauri, version, commitSha } = useApp()
-const { checking, checkForUpdates } = useUpdater()
+const { checking, checkForUpdates, lastUpdate } = useUpdater()
+const { audioInputs, audioOutputs } = useDevices()
 const {
   inputDeviceId,
   outputDeviceId,
@@ -117,12 +117,8 @@ const {
   toggleOutputHotkey,
   inputDeviceExist,
   outputDeviceExist,
-  audioInputs,
-  audioOutputs,
 } = usePreferences()
 
-const toast = useToast()
-
 const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)
 const setupToggleOutputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleOutputHotkey)
 
@@ -162,23 +158,4 @@ function setupHotkey(event: KeyboardEvent, model: RemovableRef<string>) {
 
   model.value = hotkey.join('+')
 }
-
-async function onCheckForUpdates() {
-  const update = await checkForUpdates()
-
-  toast.removeGroup('updater')
-
-  if (!update) {
-    toast.add({ severity: 'success', summary: 'You are up to date', closable: false, life: 1000 })
-
-    return
-  }
-
-  toast.add({
-    group: 'updater',
-    severity: 'info',
-    detail: `Version ${update?.version ?? '1.0.1'} is available!`,
-    closable: false,
-  })
-}
 </script>

client/app/pages/profile.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script setup lang="ts">
+import chadApi from '#shared/chad-api'
 import { LogOut } from 'lucide-vue-next'
 
 definePageMeta({
@@ -51,8 +52,11 @@ async function save() {
 
   saving.value = true
 
-  const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
-    displayName: displayName.value,
+  const updatedMe = await chadApi('/profile', {
+    method: 'PATCH',
+    body: {
+      displayName: displayName.value,
+    },
   })
 
   setMe({ ...me.value!, displayName: (updatedMe.displayName as string) })

client/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
-  "version": "0.2.13",
+  "version": "0.2.17",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",

server/plugins/mediasoup-router.ts

@@ -25,5 +25,50 @@ export const autoConfig: mediasoup.types.RouterOptions = {
       channels: 2,
       parameters: { useinbandfec: 1, stereo: 1 },
     },
+    {
+      kind: 'video',
+      mimeType: 'video/VP8',
+      clockRate: 90000,
+      parameters: {
+        'x-google-start-bitrate': 1000,
+      },
+    },
+    {
+      kind: 'video',
+      mimeType: 'video/VP9',
+      clockRate: 90000,
+      parameters: {
+        'profile-id': 2,
+        'x-google-start-bitrate': 1000,
+      },
+    },
+    {
+      kind: 'video',
+      mimeType: 'video/h264',
+      clockRate: 90000,
+      parameters: {
+        'packetization-mode': 1,
+        'profile-level-id': '4d0032',
+        'level-asymmetry-allowed': 1,
+        'x-google-start-bitrate': 1000,
+      },
+    },
+    {
+      kind: 'video',
+      mimeType: 'video/h264',
+      clockRate: 90000,
+      parameters: {
+        'packetization-mode': 1,
+        'profile-level-id': '42e01f',
+        'level-asymmetry-allowed': 1,
+        'x-google-start-bitrate': 1000,
+      },
+    },
+    {
+      kind: 'video',
+      mimeType: 'video/AV1',
+      clockRate: 90000,
+      parameters: {},
+    },
   ],
 }

server/routes/user.ts

@@ -1,6 +1,8 @@
 import type { FastifyInstance } from 'fastify'
+import type { Namespace } from '../types/webrtc.ts'
 import { z } from 'zod'
 import prisma from '../prisma/client.ts'
+import { socketToClient } from '../utils/socket-to-client.ts'
 
 export default function (fastify: FastifyInstance) {
   fastify.get('/preferences', async (req, reply) => {
@@ -47,4 +49,49 @@ export default function (fastify: FastifyInstance) {
       }
     }
   })
+
+  fastify.patch('/profile', async (req, reply) => {
+    if (!req.user) {
+      reply.code(401).send(false)
+
+      return
+    }
+
+    try {
+      const schema = z.object({
+        displayName: z.string().optional(),
+      })
+      const input = schema.parse(req.body)
+
+      const updatedUser = prisma.user.update({
+        where: { id: req.user.id },
+        data: {
+          displayName: input.displayName,
+        },
+      })
+
+      const namespace: Namespace = fastify.io.of('/webrtc')
+      const sockets = await namespace.fetchSockets()
+
+      const found = sockets.find(socket => socket.data.joined && socket.data.userId === req.user!.id)
+
+      if (found) {
+        found.data.displayName = input.displayName
+        namespace.emit('clientChanged', found.id, socketToClient(found))
+      }
+
+      return updatedUser
+    }
+    catch (err) {
+      fastify.log.error(err)
+      reply.code(400)
+
+      if (err instanceof z.ZodError) {
+        reply.send({ error: z.prettifyError(err) })
+      }
+      else {
+        reply.send({ error: err.message })
+      }
+    }
+  })
 }

server/socket/webrtc.ts

@@ -1,145 +1,15 @@
-import type { User } from '@prisma/client'
 import type { types } from 'mediasoup'
-import type { Namespace, RemoteSocket, Socket, Server as SocketServer } from 'socket.io'
+import type { Server as SocketServer } from 'socket.io'
+import type {
+  Namespace,
+  SomeSocket,
+} from '../types/webrtc.ts'
 import { consola } from 'consola'
 import prisma from '../prisma/client.ts'
-
-interface ChadClient {
-  socketId: string
-  userId: User['id']
-  username: User['username']
-  displayName: User['displayName']
-  inputMuted: boolean
-  outputMuted: boolean
-}
-
-interface ProducerShort {
-  producerId: types.Producer['id']
-  kind: types.MediaKind
-}
-
-interface ErrorCallbackResult {
-  error: string
-}
-
-interface SuccessCallbackResult {
-  ok: true
-}
-
-type EventCallback<T = SuccessCallbackResult> = (result: T | ErrorCallbackResult) => void
-
-interface ClientToServerEvents {
-  join: (
-    options: {
-      rtpCapabilities: types.RtpCapabilities
-    },
-    cb: EventCallback<ChadClient[]>
-  ) => void
-  getRtpCapabilities: (
-    cb: EventCallback<types.RtpCapabilities>
-  ) => void
-  createTransport: (
-    options: {
-      producing: boolean
-      consuming: boolean
-    },
-    cb: EventCallback<Pick<types.WebRtcTransport, 'id' | 'iceParameters' | 'iceCandidates' | 'dtlsParameters'>>
-  ) => void
-  connectTransport: (
-    options: {
-      transportId: types.WebRtcTransport['id']
-      dtlsParameters: types.WebRtcTransport['dtlsParameters']
-    },
-    cb: EventCallback
-  ) => void
-  produce: (
-    options: {
-      transportId: types.WebRtcTransport['id']
-      kind: types.MediaKind
-      rtpParameters: types.RtpParameters
-    },
-    cb: EventCallback<{ id: types.Producer['id'] }>
-  ) => void
-  closeProducer: (
-    options: {
-      producerId: types.Producer['id']
-    },
-    cb: EventCallback
-  ) => void
-  pauseProducer: (
-    options: {
-      producerId: types.Producer['id']
-    },
-    cb: EventCallback
-  ) => void
-  resumeProducer: (
-    options: {
-      producerId: types.Producer['id']
-    },
-    cb: EventCallback
-  ) => void
-  pauseConsumer: (
-    options: {
-      consumerId: types.Consumer['id']
-    },
-    cb: EventCallback
-  ) => void
-  resumeConsumer: (
-    options: {
-      consumerId: types.Consumer['id']
-    },
-    cb: EventCallback
-  ) => void
-  updateClient: (
-    options: Partial<Omit<ChadClient, 'socketId' | 'userId'>>,
-    cb: EventCallback<ChadClient>
-  ) => void
-}
-
-interface ServerToClientEvents {
-  authenticated: () => void
-  newPeer: (arg: ChadClient) => void
-  producers: (arg: ProducerShort[]) => void
-  newConsumer: (
-    arg: {
-      socketId: string
-      producerId: types.Producer['id']
-      id: types.Consumer['id']
-      kind: types.MediaKind
-      rtpParameters: types.RtpParameters
-      type: types.ConsumerType
-      appData: types.Producer['appData']
-      producerPaused: types.Consumer['producerPaused']
-    },
-    cb: EventCallback
-  ) => void
-  peerClosed: (arg: string) => void
-  consumerClosed: (arg: { consumerId: string }) => void
-  consumerPaused: (arg: { consumerId: string }) => void
-  consumerResumed: (arg: { consumerId: string }) => void
-  consumerScore: (arg: { consumerId: string, score: types.ConsumerScore }) => void
-  clientChanged: (clientId: ChadClient['socketId'], client: ChadClient) => void
-}
-
-interface InterServerEvent {}
-
-interface SocketData {
-  joined: boolean
-  userId: User['id']
-  username: User['username']
-  displayName: User['displayName']
-  inputMuted: boolean
-  outputMuted: boolean
-  rtpCapabilities: types.RtpCapabilities
-  transports: Map<types.WebRtcTransport['id'], types.WebRtcTransport>
-  producers: Map<types.Producer['id'], types.Producer>
-  consumers: Map<types.Consumer['id'], types.Consumer>
-}
-
-type SomeSocket = Socket<ClientToServerEvents, ServerToClientEvents, InterServerEvent, SocketData> | RemoteSocket<ServerToClientEvents, SocketData>
+import { socketToClient } from '../utils/socket-to-client.ts'
 
 export default function (io: SocketServer, router: types.Router) {
-  const namespace: Namespace<ClientToServerEvents, ServerToClientEvents, InterServerEvent, SocketData> = io.of('/webrtc')
+  const namespace: Namespace = io.of('/webrtc')
 
   namespace.on('connection', async (socket) => {
     consola.info('[WebRtc]', 'Client connected', socket.id)
@@ -278,7 +148,7 @@ export default function (io: SocketServer, router: types.Router) {
       }
     })
 
-    socket.on('produce', async ({ transportId, kind, rtpParameters }, cb) => {
+    socket.on('produce', async ({ transportId, kind, rtpParameters, appData }, cb) => {
       if (!socket.data.joined) {
         consola.error('Peer not joined yet')
         cb({ error: 'Peer not joined yet' })
@@ -296,7 +166,7 @@ export default function (io: SocketServer, router: types.Router) {
       }
 
       try {
-        const producer = await transport.produce({ kind, rtpParameters, appData: { socketId: socket.id } })
+        const producer = await transport.produce({ kind, rtpParameters, appData: { ...appData, socketId: socket.id } })
 
         socket.data.producers.set(producer.id, producer)
 
@@ -439,24 +309,11 @@ export default function (io: SocketServer, router: types.Router) {
     })
 
     socket.on('updateClient', async (updatedClient, cb) => {
-      if (updatedClient.displayName) {
-        await prisma.user.update({
-          where: {
-            id: socket.data.userId,
-          },
-          data: {
-            displayName: updatedClient.displayName,
-          },
-        })
-
-        socket.data.displayName = updatedClient.displayName
-      }
-
-      if (updatedClient.inputMuted) {
+      if (typeof updatedClient.inputMuted === 'boolean') {
         socket.data.inputMuted = updatedClient.inputMuted
       }
 
-      if (updatedClient.outputMuted) {
+      if (typeof updatedClient.outputMuted === 'boolean') {
         socket.data.outputMuted = updatedClient.outputMuted
       }
 
@@ -583,15 +440,4 @@ export default function (io: SocketServer, router: types.Router) {
       consola.error('_createConsumer() | failed:%o', error)
     }
   }
-
-  function socketToClient(socket: SomeSocket): ChadClient {
-    return {
-      socketId: socket.id,
-      userId: socket.data.userId,
-      username: socket.data.username,
-      displayName: socket.data.displayName,
-      inputMuted: socket.data.inputMuted,
-      outputMuted: socket.data.outputMuted,
-    }
-  }
 }

server/types/webrtc.ts

@@ -0,0 +1,140 @@
+import type { types } from 'mediasoup'
+import type { RemoteSocket, Socket, Namespace as SocketNamespace } from 'socket.io'
+import type { User } from '../prisma/client'
+
+export interface ChadClient {
+  socketId: string
+  userId: User['id']
+  username: User['username']
+  displayName: User['displayName']
+  inputMuted: boolean
+  outputMuted: boolean
+}
+
+export interface ProducerShort {
+  producerId: types.Producer['id']
+  kind: types.MediaKind
+}
+
+export interface ErrorCallbackResult {
+  error: string
+}
+
+export interface SuccessCallbackResult {
+  ok: true
+}
+
+export type EventCallback<T = SuccessCallbackResult> = (result: T | ErrorCallbackResult) => void
+
+export interface ClientToServerEvents {
+  join: (
+    options: {
+      rtpCapabilities: types.RtpCapabilities
+    },
+    cb: EventCallback<ChadClient[]>
+  ) => void
+  getRtpCapabilities: (
+    cb: EventCallback<types.RtpCapabilities>
+  ) => void
+  createTransport: (
+    options: {
+      producing: boolean
+      consuming: boolean
+    },
+    cb: EventCallback<Pick<types.WebRtcTransport, 'id' | 'iceParameters' | 'iceCandidates' | 'dtlsParameters'>>
+  ) => void
+  connectTransport: (
+    options: {
+      transportId: types.WebRtcTransport['id']
+      dtlsParameters: types.WebRtcTransport['dtlsParameters']
+    },
+    cb: EventCallback
+  ) => void
+  produce: (
+    options: {
+      transportId: types.WebRtcTransport['id']
+      kind: types.MediaKind
+      rtpParameters: types.RtpParameters
+      appData: { source: 'share' | string }
+    },
+    cb: EventCallback<{ id: types.Producer['id'] }>
+  ) => void
+  closeProducer: (
+    options: {
+      producerId: types.Producer['id']
+    },
+    cb: EventCallback
+  ) => void
+  pauseProducer: (
+    options: {
+      producerId: types.Producer['id']
+    },
+    cb: EventCallback
+  ) => void
+  resumeProducer: (
+    options: {
+      producerId: types.Producer['id']
+    },
+    cb: EventCallback
+  ) => void
+  pauseConsumer: (
+    options: {
+      consumerId: types.Consumer['id']
+    },
+    cb: EventCallback
+  ) => void
+  resumeConsumer: (
+    options: {
+      consumerId: types.Consumer['id']
+    },
+    cb: EventCallback
+  ) => void
+  updateClient: (
+    options: Partial<Pick<ChadClient, 'inputMuted' | 'outputMuted'>>,
+    cb: EventCallback<ChadClient>
+  ) => void
+}
+
+export interface ServerToClientEvents {
+  authenticated: () => void
+  newPeer: (arg: ChadClient) => void
+  producers: (arg: ProducerShort[]) => void
+  newConsumer: (
+    arg: {
+      socketId: string
+      producerId: types.Producer['id']
+      id: types.Consumer['id']
+      kind: types.MediaKind
+      rtpParameters: types.RtpParameters
+      type: types.ConsumerType
+      appData: types.Producer['appData']
+      producerPaused: types.Consumer['producerPaused']
+    },
+    cb: EventCallback
+  ) => void
+  peerClosed: (arg: string) => void
+  consumerClosed: (arg: { consumerId: string }) => void
+  consumerPaused: (arg: { consumerId: string }) => void
+  consumerResumed: (arg: { consumerId: string }) => void
+  consumerScore: (arg: { consumerId: string, score: types.ConsumerScore }) => void
+  clientChanged: (clientId: ChadClient['socketId'], client: ChadClient) => void
+}
+
+export interface InterServerEvent {}
+
+export interface SocketData {
+  joined: boolean
+  userId: User['id']
+  username: User['username']
+  displayName: User['displayName']
+  inputMuted: boolean
+  outputMuted: boolean
+  rtpCapabilities: types.RtpCapabilities
+  transports: Map<types.WebRtcTransport['id'], types.WebRtcTransport>
+  producers: Map<types.Producer['id'], types.Producer>
+  consumers: Map<types.Consumer['id'], types.Consumer>
+}
+
+export type SomeSocket = Socket<ClientToServerEvents, ServerToClientEvents, InterServerEvent, SocketData> | RemoteSocket<ServerToClientEvents, SocketData>
+
+export type Namespace = SocketNamespace<ClientToServerEvents, ServerToClientEvents, InterServerEvent, SocketData>

server/utils/socket-to-client.ts

@@ -0,0 +1,12 @@
+import type { ChadClient, SomeSocket } from '../types/webrtc.ts'
+
+export function socketToClient(socket: SomeSocket): ChadClient {
+  return {
+    socketId: socket.id,
+    userId: socket.data.userId,
+    username: socket.data.username,
+    displayName: socket.data.displayName,
+    inputMuted: socket.data.inputMuted,
+    outputMuted: socket.data.outputMuted,
+  }
+}