front update

client/app/app.vue

@@ -1,7 +1,10 @@
 <template>
-  <NuxtPage />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+
+  <PrimeToast position="bottom-center" />
 </template>
 
 <script lang="ts" setup>
-const { consumers, producers } = useMediasoup()
 </script>

client/app/components.d.ts

@@ -11,10 +11,15 @@ declare module 'vue' {
     PrimeAvatar: typeof import('primevue/avatar')['default']
     PrimeBadge: typeof import('primevue/badge')['default']
     PrimeButton: typeof import('primevue/button')['default']
+    PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
     PrimeCard: typeof import('primevue/card')['default']
+    PrimeFieldset: typeof import('primevue/fieldset')['default']
+    PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimeMenu: typeof import('primevue/menu')['default']
+    PrimeMessage: typeof import('primevue/message')['default']
     PrimeSlider: typeof import('primevue/slider')['default']
+    PrimeToast: typeof import('primevue/toast')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

client/app/components/AppHeader.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="flex items-center justify-between gap-2 border-b-2 border-surface-800 px-3 py-3"
+    :class="{
+      'bg-surface-950': !secondary,
+      'bg-surface-900': secondary,
+    }"
+    style="height: 75px;"
+  >
+    <slot name="left">
+      <h1>
+        {{ title }}
+      </h1>
+    </slot>
+
+    <slot name="right" />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  secondary?: boolean
+}>()
+</script>

client/app/components/ClientRow.vue

@@ -1,31 +1,39 @@
 <template>
-  <div class="flex items-center gap-3 py-3">
+  <div class="py-3">
-    <PrimeAvatar icon="pi pi-user" size="small" />
+    <div class="flex items-center gap-3 ">
+      <PrimeAvatar
+        icon="pi pi-user"
+        size="small"
+      />
 
-    <div class="flex-1">
+      <div class="flex-1">
-      <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
+        <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
-        {{ client.username }}
+          {{ client.username }}
-      </div>
-      <div class="mt-1 text-xs leading-5 text-muted-color">
-        {{ client.id }}
-      </div>
-    </div>
-
-    <PrimeBadge severity="secondary" value="Muted" />
-
-    <PrimeButton icon="pi pi-ellipsis-h" text size="small" @click="menuRef?.toggle" />
-
-    <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="100" :step="5" />
         </div>
+        <div class="mt-1 text-xs leading-5 text-muted-color">
+          {{ client.id }}
+        </div>
+      </div>
+
+      <PrimeBadge v-if="client.isMe && inputMuted" severity="info" value="Muted" />
+      <PrimeBadge v-if="client.isMe" severity="secondary" value="You" />
+
+      <template v-if="!client.isMe">
+        <PrimeButton icon="pi pi-ellipsis-h" text size="small" severity="contrast" @click="menuRef?.toggle" />
+
+        <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="300" :step="5" />
+            </div>
+          </template>
+        </PrimeMenu>
       </template>
-    </PrimeMenu>
+    </div>
   </div>
 </template>
 
@@ -33,11 +41,15 @@
 import type { ChadClient } from '#shared/types'
 import type { MenuItem } from 'primevue/menuitem'
 
-defineProps<{
+const props = defineProps<{
   client: ChadClient
 }>()
 
-const menuRef = useTemplateRef('menu')
+const { inputMuted, outputMuted } = useApp()
+const { getClientConsumers } = useMediasoup()
+
+const menuRef = useTemplateRef<HTMLAudioElement>('menu')
+
 const volume = ref(100)
 
 const menuItems: MenuItem[] = [
@@ -51,4 +63,27 @@ const menuItems: MenuItem[] = [
     disabled: true,
   },
 ]
+
+const audioConsumer = computed(() => {
+  const consumers = getClientConsumers(props.client.id)
+
+  return consumers.find(consumer => consumer.track.kind === 'audio')
+})
+
+const audioTrack = computed(() => {
+  return audioConsumer.value?.track
+})
+
+const { setGain } = useAudioContext(audioTrack)
+
+watch(volume, (volume) => {
+  if (outputMuted)
+    return
+
+  setGain(volume * 0.01)
+})
+
+watch(outputMuted, (outputMuted) => {
+  setGain(outputMuted ? 0 : (volume.value * 0.01))
+})
 </script>

client/app/composables/use-app.ts

@@ -0,0 +1,60 @@
+import { createGlobalState } from '@vueuse/core'
+
+export const useApp = createGlobalState(() => {
+  const mediasoup = useMediasoup()
+
+  const inputMuted = ref(false)
+  const outputMuted = ref(false)
+
+  const me = computed(() => mediasoup.clients.value.find(client => client.isMe))
+
+  function muteInput() {
+    inputMuted.value = true
+  }
+
+  function unmuteInput() {
+    inputMuted.value = false
+  }
+
+  function toggleInput() {
+    if (inputMuted.value)
+      unmuteInput()
+    else
+      muteInput()
+  }
+
+  function muteOutput() {
+    outputMuted.value = true
+  }
+
+  function unmuteOutput() {
+    outputMuted.value = false
+  }
+
+  function toggleOutput() {
+    if (outputMuted.value)
+      unmuteOutput()
+    else
+      muteOutput()
+  }
+
+  watch(inputMuted, async (state) => {
+    if (state)
+      await mediasoup.muteMic()
+    else
+      await mediasoup.unmuteMic()
+  })
+
+  return {
+    clients: mediasoup.clients,
+    me,
+    inputMuted,
+    muteInput,
+    unmuteInput,
+    toggleInput,
+    outputMuted,
+    muteOutput,
+    unmuteOutput,
+    toggleOutput,
+  }
+})

client/app/composables/use-audio-context.ts

@@ -0,0 +1,59 @@
+import { useEventListener } from '@vueuse/core'
+
+export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undefined>) {
+  const ctx = new (window.AudioContext || window.webkitAudioContext)()
+
+  const stream = new MediaStream()
+
+  const sourceNode = shallowRef<MediaStreamAudioSourceNode>()
+  const gainNode = ctx.createGain()
+
+  let hackExecuted = false
+
+  watch(audioTrack, (track, prevTrack) => {
+    if (prevTrack)
+      stream.removeTrack(prevTrack)
+
+    if (!track)
+      return
+
+    stream.addTrack(track)
+
+    if (!hackExecuted) {
+      const audioEl = new Audio()
+      audioEl.srcObject = stream
+      audioEl.muted = true
+      hackExecuted = true
+    }
+
+    sourceNode.value = ctx.createMediaStreamSource(stream)
+
+    connect()
+  }, { immediate: true })
+
+  useEventListener(document, 'click', async () => {
+    if (ctx.state === 'suspended') {
+      await ctx.resume()
+    }
+
+    connect()
+  }, { once: true })
+
+  function connect() {
+    if (!sourceNode.value || ctx.state === 'suspended')
+      return
+
+    sourceNode.value.connect(gainNode)
+    gainNode.connect(ctx.destination)
+
+    ctx.resume()
+  }
+
+  function setGain(value: number) {
+    gainNode.gain.value = value
+  }
+
+  return {
+    setGain,
+  }
+}

client/app/composables/use-global-state.ts

@@ -1,30 +0,0 @@
-import type { ChadClient } from '#shared/types'
-import { createGlobalState, useLocalStorage } from '@vueuse/core'
-
-export const useGlobalState = createGlobalState(() => {
-  const username = useLocalStorage<string>('username', '')
-
-  const clients = ref<ChadClient[]>([])
-
-  const me = computed(() => clients.value.find(client => client.isMe))
-
-  const clientByIdMap = computed(() => {
-    return clients.value.reduce<Record<ChadClient['id'], ChadClient>>((result, client) => {
-      result[client.id] = client
-
-      return result
-    }, {})
-  })
-
-  function reset() {
-    clients.value = []
-  }
-
-  return {
-    username,
-    me,
-    clients,
-    clientByIdMap,
-    reset,
-  }
-})

client/app/composables/use-mediasoup.ts

@@ -1,8 +1,8 @@
 import type { ChadClient, RemoteClient } from '#shared/types'
-import type { Socket } from 'socket.io-client'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
-import { io } from 'socket.io-client'
+import { usePreferences } from '~/composables/use-preferences'
+import { useSignaling } from '~/composables/use-signaling'
 
 const ICE_SERVERS: RTCIceServer[] = [
   { urls: 'stun:stun.l.google.com:19302' },
@@ -18,9 +18,8 @@ const ICE_SERVERS: RTCIceServer[] = [
 ]
 
 export const useMediasoup = createSharedComposable(() => {
-  const state = useGlobalState()
+  const preferences = usePreferences()
-
+  const signaling = useSignaling()
-  const socket = shallowRef<Socket>()
 
   const device = shallowRef<mediasoupClient.Device>()
   const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
@@ -31,47 +30,118 @@ 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())
 
-  watch(socket, (socket, prevSocket) => {
+  watch(signaling.socket, (socket) => {
-    if (prevSocket) {
+    if (!socket)
-      prevSocket.close()
-
-      dispose()
-    }
-
-    if (!socket) {
       return
-    }
-
-    socket.onAny((event, ...args) => {
-      console.log('[onAny]', event, args)
-    })
-
-    socket.onAnyOutgoing((event, ...args) => {
-      console.log('[onAnyOutgoing]', event, args)
-    })
 
     socket.on('connect', async () => {
-      if (!state.username.value)
+      if (!signaling.socket.value)
-        state.username.value = socket.id!
+        return
 
-      await join()
+      device.value = new mediasoupClient.Device()
+      rtpCapabilities.value = await signaling.socket.value.emitWithAck('getRtpCapabilities')
+
+      await device.value.load({ routerRtpCapabilities: rtpCapabilities.value! })
+
+      // Send transport
+      {
+        const transportInfo = await signaling.socket.value.emitWithAck('createTransport', { producing: true, consuming: false })
+        sendTransport.value = device.value.createSendTransport({
+          ...transportInfo,
+          iceServers: [
+            ...ICE_SERVERS,
+            ...(transportInfo.iceServers ?? []),
+          ],
+        })
+
+        sendTransport.value.on('connect', async ({ dtlsParameters }, callback, errback) => {
+          try {
+            await signaling.socket.value!.emitWithAck('connectTransport', {
+              transportId: sendTransport.value!.id,
+              dtlsParameters,
+            })
+
+            callback()
+          }
+          catch (error) {
+            if (error instanceof Error) {
+              errback(error)
+            }
+          }
+        })
+
+        sendTransport.value.on('produce', async ({ kind, rtpParameters, appData }, callback, errback) => {
+          try {
+            const { id } = await signaling.socket.value!.emitWithAck('produce', {
+              transportId: sendTransport.value!.id,
+              kind,
+              rtpParameters,
+              appData,
+            })
+            callback({ id })
+          }
+          catch (error) {
+            if (error instanceof Error) {
+              errback(error)
+            }
+          }
+        })
+      }
+
+      // Recv Transport
+      {
+        const transportInfo = await signaling.socket.value.emitWithAck('createTransport', { producing: false, consuming: true })
+        recvTransport.value = device.value.createRecvTransport({
+          ...transportInfo,
+          iceServers: [
+            ...ICE_SERVERS,
+            ...(transportInfo.iceServers ?? []),
+          ],
+        })
+
+        recvTransport.value.on('connect', async ({ dtlsParameters }, callback, errback) => {
+          try {
+            await signaling.socket.value!.emitWithAck('connectTransport', {
+              transportId: recvTransport.value!.id,
+              dtlsParameters,
+            })
+
+            callback()
+          }
+          catch (error) {
+            if (error instanceof Error) {
+              errback(error)
+            }
+          }
+        })
+      }
+
+      clients.value = (await signaling.socket.value.emitWithAck('join', {
+        username: preferences.username.value,
+        rtpCapabilities: rtpCapabilities.value,
+      })).map(transformClient)
+
+      await enableMic()
     })
 
     socket.on('newPeer', (client) => {
-      state.clients.value.push(transformClient(client))
+      clients.value.push(transformClient(client))
+      triggerRef(clients)
     })
 
     socket.on('peerClosed', (id) => {
-      state.clients.value = state.clients.value.filter(client => client.id !== id)
+      clients.value = clients.value.filter(client => client.id !== id)
     })
 
     socket.on(
       'newConsumer',
       async (
-        { id, producerId, kind, rtpParameters, peerId, appData, producerPaused },
+        { id, producerId, kind, rtpParameters, peerId: clientId, appData },
         cb,
       ) => {
         if (!recvTransport.value)
@@ -82,30 +152,18 @@ export const useMediasoup = createSharedComposable(() => {
           producerId,
           kind,
           rtpParameters,
-          streamId: `${peerId}-${appData.share ? 'share' : 'mic-webcam'}`,
+          streamId: `${clientId}-${appData.share ? 'share' : 'mic-webcam'}`,
-          appData: { ...appData, peerId },
+          appData: { ...appData, clientId },
         })
 
         consumer.on('transportclose', () => {
-          console.log('consumer on transportclose')
           consumers.value.delete(consumer.id)
           triggerRef(consumers)
-
-          const client = state.clientByIdMap.value[peerId as string]
-
-          if (!client)
-            return
-
-          client.consumerIds = client.consumerIds.filter(id => id !== consumer.id)
         })
 
         consumers.value.set(consumer.id, consumer)
         triggerRef(consumers)
 
-        console.log(consumer)
-
-        state.clientByIdMap.value[peerId]!.consumerIds.push(consumer.id)
-
         cb()
       },
     )
@@ -115,8 +173,6 @@ export const useMediasoup = createSharedComposable(() => {
       async (
         { consumerId },
       ) => {
-        console.log('socket on consumerClosed')
-
         const consumer = consumers.value.get(consumerId)
 
         if (!consumer)
@@ -124,13 +180,6 @@ export const useMediasoup = createSharedComposable(() => {
 
         consumers.value.delete(consumer.id)
         triggerRef(consumers)
-
-        const client = state.clientByIdMap.value[(consumer.appData.peerId || consumer.appData.socketId) as string]
-
-        if (!client)
-          return
-
-        client.consumerIds = client.consumerIds.filter(id => id !== consumer.id)
       },
     )
 
@@ -143,97 +192,8 @@ export const useMediasoup = createSharedComposable(() => {
     })
   }, { immediate: true, flush: 'sync' })
 
-  onScopeDispose(() => {
+  function getClientConsumers(clientId: ChadClient['id']) {
-    socket.value?.close()
+    return consumers.value.values().filter(consumer => consumer.appData.clientId === clientId)
-  })
-
-  async function join() {
-    if (!socket.value)
-      return
-
-    device.value = new mediasoupClient.Device()
-    rtpCapabilities.value = await socket.value.emitWithAck('getRtpCapabilities')
-
-    await device.value.load({ routerRtpCapabilities: rtpCapabilities.value! })
-
-    // Send transport
-    {
-      const transportInfo = await socket.value.emitWithAck('createTransport', { producing: true, consuming: false })
-      sendTransport.value = device.value.createSendTransport({
-        ...transportInfo,
-        iceServers: [
-          ...ICE_SERVERS,
-          ...(transportInfo.iceServers ?? []),
-        ],
-      })
-
-      sendTransport.value.on('connect', async ({ dtlsParameters }, callback, errback) => {
-        try {
-          await socket.value!.emitWithAck('connectTransport', {
-            transportId: sendTransport.value!.id,
-            dtlsParameters,
-          })
-
-          callback()
-        }
-        catch (error) {
-          if (error instanceof Error) {
-            errback(error)
-          }
-        }
-      })
-
-      sendTransport.value.on('produce', async ({ kind, rtpParameters, appData }, callback, errback) => {
-        try {
-          const { id } = await socket.value!.emitWithAck('produce', {
-            transportId: sendTransport.value!.id,
-            kind,
-            rtpParameters,
-            appData,
-          })
-          callback({ id })
-        }
-        catch (error) {
-          if (error instanceof Error) {
-            errback(error)
-          }
-        }
-      })
-    }
-
-    // Recv Transport
-    {
-      const transportInfo = await socket.value.emitWithAck('createTransport', { producing: false, consuming: true })
-      recvTransport.value = device.value.createRecvTransport({
-        ...transportInfo,
-        iceServers: [
-          ...ICE_SERVERS,
-          ...(transportInfo.iceServers ?? []),
-        ],
-      })
-
-      recvTransport.value.on('connect', async ({ dtlsParameters }, callback, errback) => {
-        try {
-          await socket.value!.emitWithAck('connectTransport', {
-            transportId: recvTransport.value!.id,
-            dtlsParameters,
-          })
-
-          callback()
-        }
-        catch (error) {
-          if (error instanceof Error) {
-            errback(error)
-          }
-        }
-      })
-    }
-
-    const result = await socket.value.emitWithAck('join', { username: state.username.value, rtpCapabilities: rtpCapabilities.value })
-
-    state.clients.value = (result as RemoteClient[]).map(transformClient)
-
-    await enableMic()
   }
 
   async function enableMic() {
@@ -281,7 +241,7 @@ export const useMediasoup = createSharedComposable(() => {
   }
 
   async function disableMic() {
-    if (!micProducer.value)
+    if (!signaling.socket.value || !micProducer.value)
       return
 
     producers.value.delete(micProducer.value.id)
@@ -290,7 +250,7 @@ export const useMediasoup = createSharedComposable(() => {
     try {
       micProducer.value.close()
 
-      await socket.value?.emitWithAck('closeProducer', {
+      await signaling.socket.value.emitWithAck('closeProducer', {
         producerId: micProducer.value.id,
       })
     }
@@ -301,13 +261,13 @@ export const useMediasoup = createSharedComposable(() => {
   }
 
   async function muteMic() {
-    if (!micProducer.value)
+    if (!signaling.socket.value || !micProducer.value)
       return
 
     try {
       micProducer.value.pause()
 
-      await socket.value?.emitWithAck('pauseProducer', {
+      await signaling.socket.value.emitWithAck('pauseProducer', {
         producerId: micProducer.value.id,
       })
     }
@@ -316,13 +276,13 @@ export const useMediasoup = createSharedComposable(() => {
   }
 
   async function unmuteMic() {
-    if (!micProducer.value)
+    if (!signaling.socket.value || !micProducer.value)
       return
 
     try {
-      micProducer.value?.resume()
+      micProducer.value.resume()
 
-      await socket.value?.emitWithAck('resumeProducer', {
+      await signaling.socket.value.emitWithAck('resumeProducer', {
         producerId: micProducer.value.id,
       })
     }
@@ -330,24 +290,17 @@ export const useMediasoup = createSharedComposable(() => {
     }
   }
 
+  async function init() {
+    signaling.connect()
+  }
+
   function transformClient(client: RemoteClient): ChadClient {
     return {
       ...client,
-      isMe: client.id === socket.value!.id,
+      isMe: client.id === signaling.socket.value!.id,
-      consumerIds: [],
     }
   }
 
-  function init() {
-    if (socket.value)
-      return
-
-    socket.value = io('https://api.koptilnya.xyz/webrtc', {
-      path: '/chad/ws',
-      transports: ['websocket'],
-    })
-  }
-
   function dispose() {
     device.value = undefined
     rtpCapabilities.value = undefined
@@ -360,21 +313,22 @@ export const useMediasoup = createSharedComposable(() => {
 
     consumers.value = new Map()
     producers.value = new Map()
-
-    state.reset()
   }
 
   return {
     init,
+    clients,
     consumers,
     producers,
     sendTransport,
     recvTransport,
-    socket,
     rtpCapabilities,
     device,
     micProducer,
     webcamProducer,
     shareProducer,
+    getClientConsumers,
+    muteMic,
+    unmuteMic,
   }
 })

client/app/composables/use-preferences.ts

@@ -0,0 +1,14 @@
+import { createGlobalState, useLocalStorage } from '@vueuse/core'
+
+export const usePreferences = createGlobalState(() => {
+  const username = useLocalStorage<string>('username', '')
+
+  const audioDevice = shallowRef()
+  const videoDevice = shallowRef()
+
+  return {
+    username,
+    audioDevice,
+    videoDevice,
+  }
+})

client/app/composables/use-signaling.ts

@@ -0,0 +1,58 @@
+import type { Socket } from 'socket.io-client'
+import { createSharedComposable } from '@vueuse/core'
+import { io } from 'socket.io-client'
+
+export const useSignaling = createSharedComposable(() => {
+  const socket = shallowRef<Socket>()
+
+  const connected = ref(false)
+
+  watch(socket, (socket, prevSocket) => {
+    if (prevSocket) {
+      prevSocket.close()
+    }
+
+    if (!socket) {
+      return
+    }
+
+    if (import.meta.dev) {
+      socket.onAny((event, ...args) => {
+        console.info('[onAny]', event, args)
+      })
+
+      socket.onAnyOutgoing((event, ...args) => {
+        console.info('[onAnyOutgoing]', event, args)
+      })
+    }
+
+    socket.on('connect', async () => {
+      connected.value = true
+    })
+
+    socket.on('disconnect', async () => {
+      connected.value = false
+    })
+  }, { immediate: true, flush: 'sync' })
+
+  onScopeDispose(() => {
+    socket.value?.close()
+  })
+
+  function connect() {
+    if (socket.value)
+      return
+
+    socket.value = io('https://api.koptilnya.xyz/webrtc', {
+      // socket.value = io('http://127.0.0.1:4000/webrtc', {
+      path: '/chad/ws',
+      transports: ['websocket'],
+    })
+  }
+
+  return {
+    socket,
+    connected,
+    connect,
+  }
+})

client/app/layouts/auth.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full h-full flex justify-center items-center p-3">
+    <slot />
+  </div>
+</template>

client/app/layouts/default.vue

@@ -0,0 +1,46 @@
+<template>
+  <div v-auto-animate class="grid grid-cols-2 h-screen">
+    <div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden z-10">
+      <AppHeader title="Шальные сиськи 18+">
+        <template #right>
+          <PrimeButtonGroup class="ml-auto">
+            <PrimeButton
+              icon="pi pi-microphone" size="large" :severity="inputMuted ? 'contrast' : 'secondary'"
+              :outlined="!inputMuted" @click="toggleInput"
+            />
+            <PrimeButton
+              icon="pi pi-headphones" size="large" :severity="outputMuted ? 'contrast' : 'secondary'"
+              :outlined="!outputMuted" @click="toggleOutput"
+            />
+          </PrimeButtonGroup>
+
+          <PrimeButton icon="pi pi-cog" size="large" :text="!inPreferences" :severity="inPreferences ? 'contrast' : 'secondary'" @click="onClickPreferences" />
+        </template>
+      </AppHeader>
+
+      <div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
+        <ClientRow v-for="client of clients" :key="client.id" :client="client" />
+      </div>
+    </div>
+
+    <slot />
+  </div>
+
+  <PrimeBadge class="fixed top-3 right-3" severity="success" />
+</template>
+
+<script setup lang="ts">
+import { vAutoAnimate } from '@formkit/auto-animate'
+
+const { clients, inputMuted, toggleInput, outputMuted, toggleOutput } = useApp()
+
+const route = useRoute()
+
+const inPreferences = computed(() => {
+  return route.name === 'Preferences'
+})
+
+function onClickPreferences() {
+  navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
+}
+</script>

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

@@ -1,8 +1,7 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-  const { username } = useGlobalState()
+  const { username } = usePreferences()
 
   if (!username.value && to.name !== 'Login') {
-    console.log('yes')
     return navigateTo({ name: 'Login' })
   }
 
@@ -13,7 +12,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 
   init()
 
-  if (to.name === 'Login') {
+  if (to.path === 'Login') {
     return navigateTo('/')
   }
 })

client/app/pages/index.vue

@@ -1,56 +1,11 @@
 <template>
-  <div class="grid grid-cols-2 h-screen">
+  <div class="flex items-center justify-center p-3">
-    <div class="flex flex-col shadow-xl overflow-y-hidden">
+    <PrimeFieldset legend="Important information">
-      <div class="flex items-center bg-surface-950 border-b-2 border-surface-800 px-3 py-3">
+      The chat is under development.
-        <h1>
+    </PrimeFieldset>
-          Шальные сиськи 18+
-        </h1>
-
-        <div class="inline-flex gap-2 ml-auto">
-          <PrimeButton icon="pi pi-headphones" text size="large" />
-          <PrimeButton icon="pi pi-microphone" text size="large" />
-        </div>
-      </div>
-
-      <div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
-        <ClientRow v-for="client of clients" :key="client.id" :client="client" />
-      </div>
-    </div>
   </div>
-
-  <audio v-for="client in clients" :key="client.id" :ref="(el) => onAudioRef(el, client)" autoplay controls />
-
-  <PrimeBadge class="fixed top-3 right-3" severity="success" />
 </template>
 
 <script setup lang="ts">
-import type { ChadClient } from '#shared/types'
+const { clients, inputMuted, toggleInput, outputMuted, toggleOutput } = useApp()
-import { vAutoAnimate } from '@formkit/auto-animate'
-
-const { clients } = useGlobalState()
-const { consumers } = useMediasoup()
-
-function onAudioRef(ref: HTMLAudioElement, client: ChadClient) {
-  if (!ref || !client)
-    return
-
-  if (client.isMe)
-    return
-
-  const consumersArray = client.consumerIds.map(id => consumers.value.get(id)!)
-
-  const audioConsumer = consumersArray.find(
-    consumer => consumer.track.kind === 'audio',
-  )
-
-  if (!audioConsumer)
-    return
-
-  const stream = new MediaStream()
-
-  stream.addTrack(audioConsumer!.track)
-
-  ref.srcObject = stream
-  ref.setAttribute('data-consumer-id', audioConsumer.id)
-}
 </script>

client/app/pages/login.vue

@@ -1,30 +1,34 @@
 <template>
-  <div class="w-full h-full flex justify-center items-center">
+  <PrimeCard class="w-2/5">
-    <PrimeCard class="w-2/5">
+    <template #content>
-      <template #content>
+      <form class="flex flex-col gap-3" @submit.prevent="submit">
-        <form class="flex flex-col gap-3" @submit.prevent="submit">
+        <PrimeFloatLabel variant="on">
-          <PrimeInputText v-model="username" type="text" placeholder="Username" />
+          <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
+          <label for="username">Username</label>
+        </PrimeFloatLabel>
 
-          <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!username" type="submit" />
+        <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!localUsername" type="submit" />
-        </form>
+      </form>
-      </template>
+    </template>
-    </PrimeCard>
+  </PrimeCard>
-  </div>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
   name: 'Login',
-  layout: 'login',
+  layout: 'auth',
 })
 
-const { username } = useGlobalState()
+const { username } = usePreferences()
-const { init } = useMediasoup()
+
+const localUsername = ref<typeof username.value>()
 
 async function submit() {
-  if (!username.value)
+  if (!localUsername.value)
     return
 
+  username.value = localUsername.value
+
   await navigateTo('/')
 }
 </script>

client/app/pages/preferences.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <AppHeader title="Preferences" secondary />
+
+    <form class="flex flex-col gap-3 p-3" @submit.prevent="save">
+      <PrimeFloatLabel variant="on">
+        <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
+        <label for="username">Username</label>
+      </PrimeFloatLabel>
+
+      <PrimeButton label="Save" type="submit" />
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  name: 'Preferences',
+})
+
+const { username } = usePreferences()
+const toast = useToast()
+
+const localUsername = ref(username.value)
+
+function save() {
+  username.value = localUsername.value
+
+  toast.add({ severity: 'success', summary: 'Saved', life: 3000 })
+}
+</script>

client/shared/types.ts

@@ -1,11 +1,10 @@
-import type * as mediasoupClient from 'mediasoup-client'
-
 export interface RemoteClient {
   id: string
   username: string
 }
 
 export interface ChadClient extends RemoteClient {
-  isMe?: boolean
+  isMe: boolean
-  consumerIds: mediasoupClient.types.Consumer['id'][]
+  inputMuted?: boolean
+  outputMuted?: boolean
 }

client/src-tauri/Cargo.lock

@@ -94,6 +94,7 @@ dependencies = [
  "tauri",
  "tauri-build",
  "tauri-plugin-log",
+ "tauri-plugin-single-instance",
 ]
 
 [[package]]
@@ -102,6 +103,137 @@ version = "0.7.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7c02d123df017efcdfbd739ef81735b36c5ba83ec3c59c80a9d7ecc718f92e50"
 
+[[package]]
+name = "async-broadcast"
+version = "0.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "435a87a52755b8f27fcf321ac4f04b2802e337c8c4872923137471ec39c37532"
+dependencies = [
+ "event-listener",
+ "event-listener-strategy",
+ "futures-core",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "async-channel"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "924ed96dd52d1b75e9c1a3e6275715fd320f5f9439fb5a4a11fa51f4221158d2"
+dependencies = [
+ "concurrent-queue",
+ "event-listener-strategy",
+ "futures-core",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "async-executor"
+version = "1.13.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "497c00e0fd83a72a79a39fcbd8e3e2f055d6f6c7e025f3b3d91f4f8e76527fb8"
+dependencies = [
+ "async-task",
+ "concurrent-queue",
+ "fastrand",
+ "futures-lite",
+ "pin-project-lite",
+ "slab",
+]
+
+[[package]]
+name = "async-io"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "456b8a8feb6f42d237746d4b3e9a178494627745c3c56c6ea55d92ba50d026fc"
+dependencies = [
+ "autocfg",
+ "cfg-if",
+ "concurrent-queue",
+ "futures-io",
+ "futures-lite",
+ "parking",
+ "polling",
+ "rustix",
+ "slab",
+ "windows-sys 0.61.1",
+]
+
+[[package]]
+name = "async-lock"
+version = "3.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5fd03604047cee9b6ce9de9f70c6cd540a0520c813cbd49bae61f33ab80ed1dc"
+dependencies = [
+ "event-listener",
+ "event-listener-strategy",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "async-process"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc50921ec0055cdd8a16de48773bfeec5c972598674347252c0399676be7da75"
+dependencies = [
+ "async-channel",
+ "async-io",
+ "async-lock",
+ "async-signal",
+ "async-task",
+ "blocking",
+ "cfg-if",
+ "event-listener",
+ "futures-lite",
+ "rustix",
+]
+
+[[package]]
+name = "async-recursion"
+version = "1.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b43422f69d8ff38f95f1b2bb76517c91589a924d1559a0e935d7c8ce0274c11"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
+[[package]]
+name = "async-signal"
+version = "0.2.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "43c070bbf59cd3570b6b2dd54cd772527c7c3620fce8be898406dd3ed6adc64c"
+dependencies = [
+ "async-io",
+ "async-lock",
+ "atomic-waker",
+ "cfg-if",
+ "futures-core",
+ "futures-io",
+ "rustix",
+ "signal-hook-registry",
+ "slab",
+ "windows-sys 0.61.1",
+]
+
+[[package]]
+name = "async-task"
+version = "4.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b75356056920673b02621b35afd0f7dda9306d03c79a30f5c56c44cf256e3de"
+
+[[package]]
+name = "async-trait"
+version = "0.1.89"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9035ad2d096bed7955a320ee7e2230574d28fd3c3a0f186cbea1ff3c7eed5dbb"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "atk"
 version = "0.18.2"
@@ -218,6 +350,19 @@ dependencies = [
  "objc2 0.6.2",
 ]
 
+[[package]]
+name = "blocking"
+version = "1.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e83f8d02be6967315521be875afa792a316e28d57b5a2d401897e2a7921b7f21"
+dependencies = [
+ "async-channel",
+ "async-task",
+ "futures-io",
+ "futures-lite",
+ "piper",
+]
+
 [[package]]
 name = "borsh"
 version = "1.5.7"
@@ -460,6 +605,15 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "concurrent-queue"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ca0197aee26d1ae37445ee532fefce43251d24cc7c166799f4d46817f1d3973"
+dependencies = [
+ "crossbeam-utils",
+]
+
 [[package]]
 name = "convert_case"
 version = "0.4.0"
@@ -791,6 +945,33 @@ version = "1.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4ef6b89e5b37196644d8796de5268852ff179b44e96276cf4290264843743bb7"
 
+[[package]]
+name = "endi"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a3d8a32ae18130a3c84dd492d4215c3d913c3b07c6b63c2eb3eb7ff1101ab7bf"
+
+[[package]]
+name = "enumflags2"
+version = "0.7.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1027f7680c853e056ebcec683615fb6fbbc07dbaa13b4d5d9442b146ded4ecef"
+dependencies = [
+ "enumflags2_derive",
+ "serde",
+]
+
+[[package]]
+name = "enumflags2_derive"
+version = "0.7.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67c78a4d8fdf9953a5c9d458f9efe940fd97a0cab0941c075a813ac594733827"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "env_filter"
 version = "0.1.3"
@@ -818,6 +999,43 @@ dependencies = [
  "typeid",
 ]
 
+[[package]]
+name = "errno"
+version = "0.3.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
+dependencies = [
+ "libc",
+ "windows-sys 0.61.1",
+]
+
+[[package]]
+name = "event-listener"
+version = "5.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e13b66accf52311f30a0db42147dadea9850cb48cd070028831ae5f5d4b856ab"
+dependencies = [
+ "concurrent-queue",
+ "parking",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "event-listener-strategy"
+version = "0.5.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8be9f3dfaaffdae2972880079a491a1a8bb7cbed0b8dd7a347f668b4150a3b93"
+dependencies = [
+ "event-listener",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "fastrand"
+version = "2.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "37909eebbb50d72f9059c3b6d82c0463f2ff062c9e95845c43a6c9c0355411be"
+
 [[package]]
 name = "fdeflate"
 version = "0.3.7"
@@ -952,6 +1170,19 @@ version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9e5c1b78ca4aae1ac06c48a526a655760685149f0d465d21f37abfe57ce075c6"
 
+[[package]]
+name = "futures-lite"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f78e10609fe0e0b3f4157ffab1876319b5b0db102a2c60dc4626306dc46b44ad"
+dependencies = [
+ "fastrand",
+ "futures-core",
+ "futures-io",
+ "parking",
+ "pin-project-lite",
+]
+
 [[package]]
 name = "futures-macro"
 version = "0.3.31"
@@ -1325,6 +1556,12 @@ version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
 
+[[package]]
+name = "hermit-abi"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc0fef456e4baa96da950455cd02c081ca953b141298e41db3fc7e36b1da849c"
+
 [[package]]
 name = "hex"
 version = "0.4.3"
@@ -1796,6 +2033,12 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "linux-raw-sys"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df1d3c3b53da64cf5760482273a98e575c651a67eec7f77df96b5b642de8f039"
+
 [[package]]
 name = "litemap"
 version = "0.8.0"
@@ -1957,6 +2200,19 @@ version = "1.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "650eef8c711430f1a879fdd01d4745a7deea475becfb90269c06775983bbf086"
 
+[[package]]
+name = "nix"
+version = "0.30.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "74523f3a35e05aba87a1d978330aef40f67b0304ac79c1c00b294c9830543db6"
+dependencies = [
+ "bitflags 2.9.4",
+ "cfg-if",
+ "cfg_aliases",
+ "libc",
+ "memoffset",
+]
+
 [[package]]
 name = "nodrop"
 version = "0.1.14"
@@ -2267,6 +2523,16 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d"
 
+[[package]]
+name = "ordered-stream"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9aa2b01e1d916879f73a53d01d1d6cee68adbb31d6d9177a8cfce093cced1d50"
+dependencies = [
+ "futures-core",
+ "pin-project-lite",
+]
+
 [[package]]
 name = "pango"
 version = "0.18.3"
@@ -2292,6 +2558,12 @@ dependencies = [
  "system-deps",
 ]
 
+[[package]]
+name = "parking"
+version = "2.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f38d5652c16fde515bb1ecef450ab0f6a219d619a7274976324d5e377f7dceba"
+
 [[package]]
 name = "parking_lot"
 version = "0.12.4"
@@ -2467,6 +2739,17 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
 
+[[package]]
+name = "piper"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "96c8c490f422ef9a4efd2cb5b42b76c8613d7e7dfc1caf667b8a3350a5acc066"
+dependencies = [
+ "atomic-waker",
+ "fastrand",
+ "futures-io",
+]
+
 [[package]]
 name = "pkg-config"
 version = "0.3.32"
@@ -2499,6 +2782,20 @@ dependencies = [
  "miniz_oxide",
 ]
 
+[[package]]
+name = "polling"
+version = "3.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d0e4f59085d47d8241c88ead0f274e8a0cb551f3625263c05eb8dd897c34218"
+dependencies = [
+ "cfg-if",
+ "concurrent-queue",
+ "hermit-abi",
+ "pin-project-lite",
+ "rustix",
+ "windows-sys 0.61.1",
+]
+
 [[package]]
 name = "potential_utf"
 version = "0.1.3"
@@ -2907,6 +3204,19 @@ dependencies = [
  "semver",
 ]
 
+[[package]]
+name = "rustix"
+version = "1.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd15f8a2c5551a84d56efdc1cd049089e409ac19a3072d5037a17fd70719ff3e"
+dependencies = [
+ "bitflags 2.9.4",
+ "errno",
+ "libc",
+ "linux-raw-sys",
+ "windows-sys 0.61.1",
+]
+
 [[package]]
 name = "rustversion"
 version = "1.0.22"
@@ -3207,6 +3517,15 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
 
+[[package]]
+name = "signal-hook-registry"
+version = "1.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2a4719bff48cee6b39d12c020eeb490953ad2443b7055bd0b21fca26bd8c28b"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "simd-adler32"
 version = "0.3.7"
@@ -3307,6 +3626,12 @@ version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a8f112729512f8e442d81f95a8a7ddf2b7c6b8a1a6f509a95864142b30cab2d3"
 
+[[package]]
+name = "static_assertions"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
+
 [[package]]
 name = "string_cache"
 version = "0.8.9"
@@ -3621,6 +3946,21 @@ dependencies = [
  "time",
 ]
 
+[[package]]
+name = "tauri-plugin-single-instance"
+version = "2.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fb9cac815bf11c4a80fb498666bcdad66d65b89e3ae24669e47806febb76389c"
+dependencies = [
+ "serde",
+ "serde_json",
+ "tauri",
+ "thiserror 2.0.17",
+ "tracing",
+ "windows-sys 0.60.2",
+ "zbus",
+]
+
 [[package]]
 name = "tauri-runtime"
 version = "2.8.0"
@@ -3721,6 +4061,19 @@ dependencies = [
  "toml 0.9.7",
 ]
 
+[[package]]
+name = "tempfile"
+version = "3.23.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2d31c77bdf42a745371d260a26ca7163f1e0924b64afa0b688e61b5a9fa02f16"
+dependencies = [
+ "fastrand",
+ "getrandom 0.3.3",
+ "once_cell",
+ "rustix",
+ "windows-sys 0.61.1",
+]
+
 [[package]]
 name = "tendril"
 version = "0.4.3"
@@ -4008,9 +4361,21 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "784e0ac535deb450455cbfa28a6f0df145ea1bb7ae51b821cf5e7927fdcfbdd0"
 dependencies = [
  "pin-project-lite",
+ "tracing-attributes",
  "tracing-core",
 ]
 
+[[package]]
+name = "tracing-attributes"
+version = "0.1.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "81383ab64e72a7a8b8e13130c49e3dab29def6d0c7d76a03087b3cf71c5c6903"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "tracing-core"
 version = "0.1.34"
@@ -4060,6 +4425,17 @@ version = "1.18.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1dccffe3ce07af9386bfd29e80c0ab1a8205a2fc34e4bcd40364df902cfa8f3f"
 
+[[package]]
+name = "uds_windows"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "89daebc3e6fd160ac4aa9fc8b3bf71e1f74fbf92367ae71fb83a037e8bf164b9"
+dependencies = [
+ "memoffset",
+ "tempfile",
+ "winapi",
+]
+
 [[package]]
 name = "unic-char-property"
 version = "0.9.0"
@@ -4993,6 +5369,66 @@ dependencies = [
  "synstructure",
 ]
 
+[[package]]
+name = "zbus"
+version = "5.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2d07e46d035fb8e375b2ce63ba4e4ff90a7f73cf2ffb0138b29e1158d2eaadf7"
+dependencies = [
+ "async-broadcast",
+ "async-executor",
+ "async-io",
+ "async-lock",
+ "async-process",
+ "async-recursion",
+ "async-task",
+ "async-trait",
+ "blocking",
+ "enumflags2",
+ "event-listener",
+ "futures-core",
+ "futures-lite",
+ "hex",
+ "nix",
+ "ordered-stream",
+ "serde",
+ "serde_repr",
+ "tracing",
+ "uds_windows",
+ "windows-sys 0.60.2",
+ "winnow 0.7.13",
+ "zbus_macros",
+ "zbus_names",
+ "zvariant",
+]
+
+[[package]]
+name = "zbus_macros"
+version = "5.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "57e797a9c847ed3ccc5b6254e8bcce056494b375b511b3d6edcec0aeb4defaca"
+dependencies = [
+ "proc-macro-crate 3.4.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+ "zbus_names",
+ "zvariant",
+ "zvariant_utils",
+]
+
+[[package]]
+name = "zbus_names"
+version = "4.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7be68e64bf6ce8db94f63e72f0c7eb9a60d733f7e0499e628dfab0f84d6bcb97"
+dependencies = [
+ "serde",
+ "static_assertions",
+ "winnow 0.7.13",
+ "zvariant",
+]
+
 [[package]]
 name = "zerocopy"
 version = "0.8.27"
@@ -5066,3 +5502,43 @@ dependencies = [
  "quote",
  "syn 2.0.106",
 ]
+
+[[package]]
+name = "zvariant"
+version = "5.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "999dd3be73c52b1fccd109a4a81e4fcd20fab1d3599c8121b38d04e1419498db"
+dependencies = [
+ "endi",
+ "enumflags2",
+ "serde",
+ "winnow 0.7.13",
+ "zvariant_derive",
+ "zvariant_utils",
+]
+
+[[package]]
+name = "zvariant_derive"
+version = "5.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6643fd0b26a46d226bd90d3f07c1b5321fe9bb7f04673cb37ac6d6883885b68e"
+dependencies = [
+ "proc-macro-crate 3.4.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+ "zvariant_utils",
+]
+
+[[package]]
+name = "zvariant_utils"
+version = "3.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c6949d142f89f6916deca2232cf26a8afacf2b9fdc35ce766105e104478be599"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "serde",
+ "syn 2.0.106",
+ "winnow 0.7.13",
+]

client/src-tauri/Cargo.toml

@@ -1,8 +1,8 @@
 [package]
 name = "app"
 version = "0.1.0"
-description = "A Tauri App"
+description = "WW додепчик"
-authors = ["you"]
+authors = ["KPTL"]
 license = ""
 repository = ""
 edition = "2021"
@@ -23,3 +23,6 @@ serde = { version = "1.0", features = ["derive"] }
 log = "0.4"
 tauri = { version = "2.8.5", features = [] }
 tauri-plugin-log = "2"
+
+[target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
+tauri-plugin-single-instance = "2"

client/src-tauri/Info.plist

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSCameraUsageDescription</key>
+	<string>Request camera access for WebRTC</string>
+	<key>NSMicrophoneUsageDescription</key>
+	<string>Request microphone access for WebRTC</string>
+</dict>
+</plist>

client/src-tauri/build.rs

@@ -1,3 +1,3 @@
 fn main() {
-  tauri_build::build()
+    tauri_build::build()
 }

client/src-tauri/src/lib.rs

@@ -1,16 +1,21 @@
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
-  tauri::Builder::default()
+    tauri::Builder::default()
-    .setup(|app| {
+//         .plugin(tauri_plugin_single_instance::init(|app, args, cwd| {
-      if cfg!(debug_assertions) {
+//             app.get_webview_window("main")
-        app.handle().plugin(
+//                .expect("no main window")
-          tauri_plugin_log::Builder::default()
+//                .set_focus();
-            .level(log::LevelFilter::Info)
+//         }))
-            .build(),
+        .setup(|app| {
-        )?;
+            if cfg!(debug_assertions) {
-      }
+                app.handle().plugin(
-      Ok(())
+                    tauri_plugin_log::Builder::default()
-    })
+                        .level(log::LevelFilter::Info)
-    .run(tauri::generate_context!())
+                        .build(),
-    .expect("error while running tauri application");
+                )?;
+            }
+            Ok(())
+        })
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
 }

client/src-tauri/src/main.rs

@@ -2,5 +2,5 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 fn main() {
-  app_lib::run();
+    app_lib::run();
 }

client/src-tauri/tauri.conf.json

@@ -12,20 +12,26 @@
   "app": {
     "windows": [
       {
+        "maximizable": false,
+        "label": "main",
         "title": "Chad",
         "width": 800,
         "height": 600,
         "resizable": false,
-        "fullscreen": false
+        "fullscreen": false,
+        "center": true,
+        "theme": "Dark",
+        "additionalBrowserArgs": "--disable-features=msWebOOUI,msPdfOOUI,msSmartScreenProtection --autoplay-policy=no-user-gesture-required"
       }
     ],
     "security": {
-      "csp": null
+      "csp": null,
+      "capabilities": []
     }
   },
   "bundle": {
     "active": true,
-    "targets": "all",
+    "targets": ["nsis"],
     "icon": [
       "icons/32x32.png",
       "icons/128x128.png",

server/index.ts

@@ -41,7 +41,7 @@ import { webrtcSocket } from './sockets'
 
   webrtcSocket(io, router)
 
-  server.listen(process.env.PORT || 3000, () => {
+  server.listen(process.env.PORT || 4000, () => {
     consola.success('[Server]', 'Server started!')
   })
 })()

server/sockets/webrtc.ts

@@ -85,16 +85,19 @@ interface ClientToServerEvents {
 interface ServerToClientEvents {
   newPeer: (arg: { id: string, username: string }) => void
   producers: (arg: ProducerShort[]) => void
-  newConsumer: (arg: {
+  newConsumer: (
-    peerId: string
+    arg: {
-    producerId: types.Producer['id']
+      peerId: string
-    id: types.Consumer['id']
+      producerId: types.Producer['id']
-    kind: types.MediaKind
+      id: types.Consumer['id']
-    rtpParameters: types.RtpParameters
+      kind: types.MediaKind
-    type: types.ConsumerType
+      rtpParameters: types.RtpParameters
-    appData: types.Producer['appData']
+      type: types.ConsumerType
-    producerPaused: types.Consumer['producerPaused']
+      appData: types.Producer['appData']
-  }, cb: EventCallback) => void
+      producerPaused: types.Consumer['producerPaused']
+    },
+    cb: EventCallback
+  ) => void
   peerClosed: (arg: string) => void
   consumerClosed: (arg: { consumerId: string }) => void
   consumerPaused: (arg: { consumerId: string }) => void