minor update

Reviewed-on: #7

.gitea/workflows/deploy-client.yml

@@ -1,43 +1,83 @@
 name: Deploy
 
 on:
+  workflow_dispatch:
   push:
-    branches:
+    tags:
-      - master
+      - "v[0-9]+.[0-9]+.[0-9]+"
-    paths:
+
-      - '.gitea/workflows/deploy-client.yml'
+# paths:
-      - 'client/**'
+#   - ".gitea/workflows/deploy-client.yml"
+#   - "client/**"
 
 jobs:
-  deploy:
+#  publish-windows:
-    runs-on: ubuntu-latest
+#    runs-on: ubuntu-latest
+#
+#    steps:
+#      - name: Keyscan
+#        run: |
+#          ssh-keyscan git.koptilnya.xyz >> ~/.ssh/known_hosts
+#
+#      - name: Checkout
+#        uses: actions/checkout@v4
+#        with:
+#          ssh-key: ${{ secrets.SSH_PRIVATE_KEY }}
+#          ssh-strict: false
+#          persist-credentials: false
+#
+#      - name: Build
+#        run: |
+#          docker build \
+#            -t chad-client-windows-builder \
+#            -f ./client/Dockerfile.windows \
+#            ./client \
+#            --build-arg COMMIT_SHA=${{ gitea.sha }} \
+#            --build-arg API_BASE_URL=${{ vars.API_BASE_URL }} \
+#            --build-arg TAURI_SIGNING_PRIVATE_KEY=${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+#
+#          docker create --name chad-client-windows-container chad-client-windows-builder
+#          mkdir -p artifacts
+#          docker cp chad-client-windows-container:/artifacts artifacts/
+#          docker rm chad-client-windows-container
+#          ls -la artifacts
+#
+#      - name: Publish
+#        uses: akkuman/gitea-release-action@v1
+#        with:
+#          files: |
+#            artifacts/**
+#          draft: true
 
-    steps:
+   publish-web:
-      - name: Keyscan
+     runs-on: ubuntu-latest
-        run: |
-          ssh-keyscan git.koptilnya.xyz >> ~/.ssh/known_hosts
 
-      - name: Checkout
+     steps:
-        uses: actions/checkout@v4
+       - name: Keyscan
-        with:
+         run: |
-          ssh-key: ${{ secrets.SSH_PRIVATE_KEY }}
+           ssh-keyscan git.koptilnya.xyz >> ~/.ssh/known_hosts
-          ssh-strict: false
-          persist-credentials: false
 
-      - name: Build
+       - name: Checkout
-        run: docker build -t chad-client ./client --build-arg COMMIT_SHA=${{ gitea.sha }}
+         uses: actions/checkout@v4
+         with:
+           ssh-key: ${{ secrets.SSH_PRIVATE_KEY }}
+           ssh-strict: false
+           persist-credentials: false
 
-      - name: Stop old container
+       - name: Build
-        run: docker rm -f chad-client || true
+         run: docker build -t chad-client -f ./client/Dockerfile.web ./client --build-arg COMMIT_SHA=${{ gitea.sha }} --build-arg API_BASE_URL=${{ vars.API_BASE_URL }}
 
-      - name: Run
+       - name: Stop old container
-        run: |
+         run: docker rm -f chad-client || true
-          docker run -d \
+
-            --name chad-client \
+       - name: Run
-            --network traefik \
+         run: |
-            --label "traefik.enable=true" \
+           docker run -d \
-            --label "traefik.http.routers.chad-client.rule=Host(\`chad.koptilnya.xyz\`)" \
+             --name chad-client \
-            --label "traefik.http.routers.chad-client.entrypoints=websecure" \
+             --network traefik \
-            --label "traefik.http.routers.chad-client.tls.certresolver=myresolver" \
+             --label "traefik.enable=true" \
-            --label "traefik.http.services.chad-client.loadbalancer.server.port=80" \
+             --label "traefik.http.routers.chad-client.rule=Host(\`chad.koptilnya.xyz\`)" \
-            chad-client:latest
+             --label "traefik.http.routers.chad-client.entrypoints=websecure" \
+             --label "traefik.http.routers.chad-client.tls.certresolver=myresolver" \
+             --label "traefik.http.services.chad-client.loadbalancer.server.port=80" \
+             chad-client:latest

.gitea/workflows/deploy-server.yml

@@ -24,6 +24,9 @@ jobs:
           ssh-strict: false
           persist-credentials: false
 
+#      - name: Backup DB
+#        run: cp /home/koptilnya/services/chad/data/database.db /home/koptilnya/services/chad/database-$(date+"%d-%m-%Y").db
+
       - name: Build
         run: docker build -t chad-server ./server
 
@@ -35,7 +38,8 @@ jobs:
           docker run -d \
             --name chad-server \
             --network traefik \
-            -p 20000-40000:20000-40000/udp \
+            --volume /home/koptilnya/services/chad/data:/app/data \
+            -p 40000-40100:40000-40100/udp \
             --label "traefik.enable=true" \
             --label "traefik.http.routers.chad-server.rule=Host(\`api.koptilnya.xyz\`) && PathPrefix(\`/chad\`)" \
             --label "traefik.http.routers.chad-server.entrypoints=websecure" \

client/.gitattributes

@@ -0,0 +1,2 @@
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

client/.gitignore

@@ -23,9 +23,15 @@ logs
 .env.*
 !.env.example
 
+.pnp.*
 .yarn/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+scripts/release.ps1
+.tauri
+
+updater.json

client/.yarnrc.yml

@@ -1 +1,3 @@
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.12.0.cjs

client/Dockerfile.web

@@ -2,16 +2,17 @@ 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
 
-RUN yarn install
+RUN yarn install --immutable
 COPY . .
 
 ARG COMMIT_SHA=unknown
-ENV COMMIT_SHA=$COMMIT_SHA
+ARG API_BASE_URL
+
+ENV COMMIT_SHA=$COMMIT_SHA \
+    API_BASE_URL=$API_BASE_URL
 
 RUN yarn generate
 

client/Dockerfile.windows

@@ -0,0 +1,46 @@
+# === Build ===
+FROM node:lts AS builder
+
+WORKDIR /app
+
+COPY package.json yarn.lock .yarnrc.yml ./
+COPY .yarn ./.yarn
+
+RUN yarn install --immutable
+COPY . .
+
+ARG COMMIT_SHA=unknown
+ARG API_BASE_URL
+ARG TAURI_SIGNING_PRIVATE_KEY
+
+ENV COMMIT_SHA=$COMMIT_SHA \
+    API_BASE_URL=$API_BASE_URL \
+    TAURI_SIGNING_PRIVATE_KEY=$TAURI_SIGNING_PRIVATE_KEY \
+    TAURI_SIGNING_PRIVATE_KEY_PASSWORD=
+
+RUN apt update && apt install -y --no-install-recommends \
+    nsis \
+    clang \
+    lld \
+    llvm \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+
+ENV PATH=/root/.cargo/bin:$PATH
+
+RUN rustup target add x86_64-pc-windows-msvc
+
+RUN cargo install --locked cargo-xwin
+
+RUN yarn tauri build --runner cargo-xwin --target x86_64-pc-windows-msvc
+
+RUN node scripts/generate-updater.mjs
+
+# === Artifacts ===
+FROM scratch AS artifacts
+
+COPY --from=builder /app/updater.json ./artifacts
+COPY --from=builder /app/src-tauri/target/x86_64-pc-windows-msvc/release/bundle/nsis/ ./artifacts
+
+CMD ["true"]

client/app/app.vue

@@ -1,13 +1,11 @@
 <template>
-  <h1>yo</h1>
+  <NuxtLayout>
-  <pre>{{ connected }}</pre>
+    <NuxtPage />
-  <audio v-for="(s, i) in streams" :key="i" :ref="(el) => onAudioRef(el, s)" autoplay controls />
+  </NuxtLayout>
+
+  <PrimeToast position="bottom-center" />
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
-const { connected, streams } = useMediasoup()
+const route = useRoute()
-
-function onAudioRef(ref: Element, stream: MediaStream) {
-  (ref as HTMLAudioElement).srcObject = stream
-}
 </script>

client/app/assets/styles/main.scss

@@ -0,0 +1,47 @@
+
+html,
+body {
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+
+  height: 100%;
+  overflow: hidden;
+  background-image: radial-gradient(var(--p-surface-700), var(--p-surface-800));
+  background-size: 200% 200%;
+  background-position: left -100% top -100%;
+}
+
+#__nuxt {
+  --p-scrollpanel-bar-size: 5px;
+  --p-scrollpanel-bar-background: var(--p-surface-950);
+  --p-divider-horizontal-margin: 2rem 0 1rem;
+
+  height: 100%;
+}
+
+.p-divider {
+  &:first-child {
+    --p-divider-horizontal-margin: 1rem 0 1rem;
+  }
+}
+
+.p-scrollpanel-bar-y {
+  translate: -0.25rem;
+}
+
+.p-select-overlay {
+  /* Force dropdown width to match computed min-width from PrimeVue internals. */
+  width: 0 !important;
+}
+
+.p-select-label {
+  width: 0 !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+.p-select-option-label {
+  min-width: 0 !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}

client/app/assets/styles/primeicons.css

@@ -0,0 +1 @@
+@import 'primeicons/primeicons.css';

client/app/assets/styles/tailwind.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "tailwindcss-primeui";

client/app/components.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    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']
+    PrimeDivider: typeof import('primevue/divider')['default']
+    PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
+    PrimeInputText: typeof import('primevue/inputtext')['default']
+    PrimePassword: typeof import('primevue/password')['default']
+    PrimeProgressBar: typeof import('primevue/progressbar')['default']
+    PrimeScrollPanel: typeof import('primevue/scrollpanel')['default']
+    PrimeSelect: typeof import('primevue/select')['default']
+    PrimeSelectButton: typeof import('primevue/selectbutton')['default']
+    PrimeSlider: typeof import('primevue/slider')['default']
+    PrimeToast: typeof import('primevue/toast')['default']
+    PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
+    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

@@ -0,0 +1,129 @@
+<template>
+  <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 overflow-hidden text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
+        {{ client.displayName || client.username }}
+      </div>
+
+      <div class="flex align-center gap-1">
+        <PrimeBadge v-if="!!shareConsumer" v-tooltip.top="'Watch'" severity="success" value="Streaming" size="small" @click.stop="watchStream" />
+
+        <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" />
+
+        <PrimeBadge v-if="isMe" severity="secondary" value="You" size="small" class="shrink-0" />
+      </div>
+
+      <Component :is="expanded ? ChevronUp : ChevronDown" v-if="!isMe" :size="20" class="text-muted-color" />
+    </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 { useLocalStorage } from '@vueuse/core'
+import { ChevronDown, ChevronUp, User } from 'lucide-vue-next'
+import CollapseTransition from '~/components/CollapseTransition.vue'
+
+const props = defineProps<{
+  client: ChadClient
+}>()
+
+const { outputMuted } = useApp()
+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 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 consumers = computed(() => {
+  return allConsumers.value.values().filter(consumer => consumer.appData.socketId === props.client.socketId).toArray()
+})
+
+const audioConsumer = computed(() => {
+  return consumers.value.find(consumer => consumer.track.kind === 'audio')
+})
+
+const videoConsumers = computed(() => {
+  return consumers.value.filter(consumer => consumer.track.kind === 'video')
+})
+
+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)
+
+watchEffect(() => {
+  setGain((outputMuted.value || premuted.value) ? 0 : (volume.value * 0.01))
+})
+
+function toggleExpand() {
+  if (isMe.value)
+    return
+
+  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

@@ -0,0 +1,130 @@
+import { getVersion } from '@tauri-apps/api/app'
+
+import { computedAsync, createGlobalState } from '@vueuse/core'
+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 isTauri = computed(() => '__TAURI_INTERNALS__' in window)
+  const commitSha = __COMMIT_SHA__
+  const version = computedAsync(() => {
+    if (import.meta.dev) {
+      return 'dev'
+    }
+    else if (isTauri.value) {
+      return getVersion()
+    }
+    else {
+      return 'web'
+    }
+  }, '-')
+
+  const inputMuted = computed(() => {
+    return !!mediasoup.micProducer.value?.paused
+  })
+  const previousInputMuted = ref(inputMuted.value)
+
+  const outputMuted = ref(false)
+
+  const sharingEnabled = computed(() => {
+    return !!mediasoup.shareProducer.value
+  })
+
+  async function muteInput() {
+    if (inputMuted.value)
+      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
+      await muteInput()
+  }
+
+  async function muteOutput() {
+    if (outputMuted.value)
+      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
+      await muteOutput()
+  }
+
+  async function toggleShare() {
+    if (!mediasoup.shareProducer.value) {
+      await mediasoup.enableShare()
+    }
+    else {
+      await mediasoup.disableProducer('share')
+    }
+  }
+
+  return {
+    ready,
+    clients,
+    inputMuted,
+    muteInput,
+    unmuteInput,
+    toggleInput,
+    outputMuted,
+    muteOutput,
+    unmuteOutput,
+    toggleOutput,
+    version,
+    isTauri,
+    commitSha,
+    toggleShare,
+    sharingEnabled,
+  }
+})

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

@@ -0,0 +1,62 @@
+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 audioEl = new Audio()
+
+  const sourceNode = shallowRef<MediaStreamAudioSourceNode>()
+  const gainNode = ctx.createGain()
+
+  watch(audioTrack, async (track, prevTrack) => {
+    if (prevTrack)
+      stream.removeTrack(prevTrack)
+
+    if (!track)
+      return
+
+    stream.addTrack(track)
+
+    if (!audioEl.srcObject) {
+      audioEl.srcObject = stream
+      audioEl.muted = true
+    }
+
+    sourceNode.value = ctx.createMediaStreamSource(stream)
+
+    await connect()
+  }, { immediate: true })
+
+  useEventListener(document, 'click', async () => {
+    if (ctx.state === 'suspended') {
+      await ctx.resume()
+    }
+
+    await connect()
+  }, { once: true })
+
+  onScopeDispose(() => {
+    audioEl.pause()
+    audioEl.srcObject = null
+    ctx.close()
+  })
+
+  async 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-auth.ts

@@ -0,0 +1,69 @@
+import chadApi from '#shared/chad-api'
+import { createGlobalState } from '@vueuse/core'
+
+interface Me {
+  id: string
+  username: string
+  displayName: string
+}
+
+export const useAuth = createGlobalState(() => {
+  const me = shallowRef<Me>()
+
+  function setMe(value: Me | undefined): void {
+    me.value = value
+  }
+
+  async function login(username: string, password: string): Promise<void> {
+    try {
+      const result = await chadApi<Me>('/login', {
+        method: 'POST',
+        body: {
+          username,
+          password,
+        },
+      })
+
+      setMe(result)
+
+      await navigateTo('/')
+    }
+    catch {}
+  }
+
+  async function register(username: string, password: string): Promise<void> {
+    try {
+      const result = await chadApi<Me>('/register', {
+        method: 'POST',
+        body: {
+          username,
+          password,
+        },
+      })
+
+      setMe(result)
+
+      await navigateTo('/')
+    }
+    catch {}
+  }
+
+  async function logout(): Promise<void> {
+    try {
+      await chadApi('/logout', { method: 'POST' })
+
+      setMe(undefined)
+
+      await navigateTo({ name: 'Login' })
+    }
+    catch {}
+  }
+
+  return {
+    me: readonly(me),
+    setMe,
+    login,
+    register,
+    logout,
+  }
+})

client/app/composables/use-clients.ts

@@ -0,0 +1,66 @@
+import type { ChadClient, UpdatedClient } from '#shared/types'
+import { createGlobalState } from '@vueuse/core'
+
+export const useClients = createGlobalState(() => {
+  const auth = useAuth()
+  const signaling = useSignaling()
+  const toast = useToast()
+
+  const clients = shallowRef<ChadClient[]>([])
+
+  const me = computed(() => clients.value.find(client => client.userId === auth.me.value?.id))
+
+  watch(signaling.socket, (socket) => {
+    if (!socket)
+      return
+
+    socket.on('clientChanged', (clientId: ChadClient['socketId'], updatedClient: UpdatedClient) => {
+      const client = getClient(clientId)
+      updateClient(clientId, updatedClient)
+
+      if (client && client.displayName !== updatedClient.displayName)
+        toast.add({ severity: 'info', summary: `${client.displayName} is now ${updatedClient.displayName}`, closable: false, life: 1000 })
+    })
+
+    socket.on('disconnect', () => {
+      clients.value = []
+    })
+  })
+
+  function getClient(clientId: ChadClient['socketId']) {
+    return clients.value.find(client => client.socketId === clientId)
+  }
+
+  function addClient(...client: ChadClient[]) {
+    clients.value.push(...client)
+
+    triggerRef(clients)
+  }
+
+  function removeClient(clientId: ChadClient['socketId']) {
+    clients.value = clients.value.filter(client => client.socketId !== clientId)
+  }
+
+  function updateClient(clientId: ChadClient['socketId'], updatedClient: UpdatedClient) {
+    const clientIdx = clients.value.findIndex(client => client.socketId === clientId)
+
+    if (clientIdx === -1)
+      return
+
+    clients.value[clientIdx] = {
+      ...clients.value[clientIdx],
+      ...updatedClient,
+    } as ChadClient
+
+    triggerRef(clients)
+  }
+
+  return {
+    me,
+    clients,
+    getClient,
+    addClient,
+    removeClient,
+    updateClient,
+  }
+})

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,65 @@
+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
+    }
+
+    stream.getTracks().forEach(t =>
+      t.addEventListener('ended', hide),
+    )
+    videoEl.value.addEventListener('ended', hide)
+
+    await videoEl.value.requestFullscreen()
+  }
+
+  function hide() {
+    if (!videoEl.value)
+      return
+
+    (videoEl.value.srcObject as MediaStream).getTracks().forEach(t =>
+      t.removeEventListener('ended', hide),
+    )
+    videoEl.value.removeEventListener('ended', hide)
+
+    videoEl.value?.remove()
+    videoEl.value = undefined
+  }
+
+  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,161 +1,439 @@
-import type { Socket } from 'socket.io-client'
+import type { MediaKind, ProducerOptions } from 'mediasoup-client/types'
-import { createGlobalState } from '@vueuse/core'
+import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
-import { io } from 'socket.io-client'
+import { useDevices } from '~/composables/use-devices'
+import { usePreferences } from '~/composables/use-preferences'
+import { useSignaling } from '~/composables/use-signaling'
+
+type ProducerType = 'microphone' | 'camera' | 'share'
 
 const ICE_SERVERS: RTCIceServer[] = [
-  // {
+  { urls: 'stun:stun.l.google.com:19302' },
-  //   urls: 'stun:stun.relay.metered.ca:80',
+  { urls: 'stun:stun.l.google.com:5349' },
-  // },
+  { urls: 'stun:stun1.l.google.com:3478' },
-  // {
+  { urls: 'stun:stun1.l.google.com:5349' },
-  //   urls: 'turn:global.relay.metered.ca:80',
+  { urls: 'stun:stun2.l.google.com:19302' },
-  //   username: '4cad09c0111f423f5283814c',
+  { urls: 'stun:stun2.l.google.com:5349' },
-  //   credential: 'B1dO8AGehex4o3pt',
+  { urls: 'stun:stun3.l.google.com:3478' },
-  // },
+  { urls: 'stun:stun3.l.google.com:5349' },
-  // {
+  { urls: 'stun:stun4.l.google.com:19302' },
-  //   urls: 'turn:global.relay.metered.ca:80?transport=tcp',
+  { urls: 'stun:stun4.l.google.com:5349' },
-  //   username: '4cad09c0111f423f5283814c',
-  //   credential: 'B1dO8AGehex4o3pt',
-  // },
-  // {
-  //   urls: 'turn:global.relay.metered.ca:443',
-  //   username: '4cad09c0111f423f5283814c',
-  //   credential: 'B1dO8AGehex4o3pt',
-  // },
-  {
-    urls: 'turns:global.relay.metered.ca:443?transport=tcp',
-    username: '4cad09c0111f423f5283814c',
-    credential: 'B1dO8AGehex4o3pt',
-  },
 ]
 
-export const useMediasoup = createGlobalState(() => {
+export const useMediasoup = createSharedComposable(() => {
-  const socket: Socket = io('https://api.koptilnya.xyz', {
+  const toast = useToast()
-    path: '/chad/ws/',
-    transports: ['websocket'],
-  })
 
-  const initializing = ref(false)
+  const signaling = useSignaling()
-  const connected = ref(false)
+  const { addClient, removeClient } = useClients()
-  const streams = shallowRef<MediaStream[]>([])
+  const preferences = usePreferences()
-  let device: mediasoupClient.Device
+  const { getShareStream } = useDevices()
-  let sendTransport: mediasoupClient.types.Transport
-  let recvTransport: mediasoupClient.types.Transport
 
-  socket.on('newProducer', async ({ producerId }) => {
+  const device = shallowRef<mediasoupClient.Device>()
-    const params = await socket.emitWithAck('consume', {
+  const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
-      producerId,
+  const sendTransport = shallowRef<mediasoupClient.types.Transport>()
-      transportId: recvTransport.id,
+  const recvTransport = shallowRef<mediasoupClient.types.Transport>()
-      rtpCapabilities: device.rtpCapabilities,
-    })
 
-    if (params?.error) {
+  const micProducer = shallowRef<mediasoupClient.types.Producer>()
-      console.error('consume error:', params.error)
+  const cameraProducer = shallowRef<mediasoupClient.types.Producer>()
+  const shareProducer = shallowRef<mediasoupClient.types.Producer>()
+
+  const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
+  const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(new Map())
+
+  watch(signaling.socket, (socket) => {
+    if (!socket)
       return
-    }
 
-    const consumer = await recvTransport.consume(params)
+    socket.on('authenticated', async () => {
-    const stream = new MediaStream([consumer.track])
+      if (!signaling.socket.value)
+        return
 
-    streams.value.push(stream)
+      device.value = new mediasoupClient.Device()
-    triggerRef(streams)
+      rtpCapabilities.value = await signaling.socket.value.emitWithAck('getRtpCapabilities')
-  })
 
-  async function loadDevice() {
+      await device.value.load({ routerRtpCapabilities: rtpCapabilities.value! })
-    device = new mediasoupClient.Device()
-    const rtpCapabilities = await socket.emitWithAck('getRtpCapabilities')
-    await device.load({ routerRtpCapabilities: rtpCapabilities })
-  }
 
-  async function createSendTransport() {
+      // Send transport
-    const params = await socket.emitWithAck('createTransport')
+      {
-    sendTransport = device.createSendTransport({
+        const transportInfo = await signaling.socket.value.emitWithAck('createTransport', { producing: true, consuming: false })
-      ...params,
+        sendTransport.value = device.value.createSendTransport({
-      iceServers: [
+          ...transportInfo,
-        ...ICE_SERVERS,
+          iceServers: [
-        ...(params.iceServers ?? []),
+            ...ICE_SERVERS,
-      ],
+            ...(transportInfo.iceServers ?? []),
-    })
+          ],
-
-    sendTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
-      try {
-        await socket.emitWithAck('connectTransport', {
-          transportId: sendTransport.id,
-          dtlsParameters,
         })
 
-        callback()
+        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)
+            }
+          }
+        })
       }
-      catch (err) {
+
-        errback(err)
+      // 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)
+            }
+          }
+        })
       }
+
+      const joinedClients = (await signaling.socket.value.emitWithAck('join', {
+        rtpCapabilities: rtpCapabilities.value,
+      }))
+
+      addClient(...joinedClients)
+
+      toast.add({ severity: 'success', summary: 'Joined', closable: false, life: 1000 })
+
+      await enableMic()
     })
 
-    sendTransport.on('produce', async ({ kind, rtpParameters }, callback, errback) => {
+    socket.on('newPeer', (client) => {
-      try {
+      addClient(client)
-        const { id } = await socket.emitWithAck('produce', {
+    })
-          transportId: sendTransport.id,
+
+    socket.on('peerClosed', (id) => {
+      removeClient(id)
+    })
+
+    socket.on(
+      'newConsumer',
+      async (
+        { id, producerId, kind, rtpParameters, socketId, appData, producerPaused },
+        cb,
+      ) => {
+        if (!recvTransport.value)
+          return
+
+        const consumer = await recvTransport.value.consume({
+          id,
+          producerId,
           kind,
           rtpParameters,
-        })
+          streamId: `${socketId}-${appData.source === 'share' ? 'share' : 'mic-webcam'}`,
-        callback({ id })
+          appData: { ...appData, socketId },
-      }
-      catch (err) {
-        errback(err)
-      }
-    })
-  }
-
-  async function publishMic() {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
-    const track = stream.getAudioTracks()[0]
-
-    await sendTransport.produce({ track })
-  }
-
-  async function createRecvTransport() {
-    const params = await socket.emitWithAck('createTransport')
-    recvTransport = device.createRecvTransport({
-      ...params,
-      iceServers: [
-        ...ICE_SERVERS,
-        ...(params.iceServers ?? []),
-      ],
-    })
-
-    recvTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
-      try {
-        await socket.emitWithAck('connectTransport', {
-          transportId: recvTransport.id,
-          dtlsParameters,
         })
 
-        callback()
+        if (producerPaused)
-      }
+          consumer.pause()
-      catch (err) {
-        errback(err)
-      }
-    })
-  }
 
-  (async () => {
+        consumer.on('transportclose', () => {
-    if (initializing.value || connected.value)
+          if (consumers.value.delete(consumer.id))
+            triggerRef(consumers)
+        })
+
+        consumers.value.set(consumer.id, consumer)
+        triggerRef(consumers)
+
+        cb()
+      },
+    )
+
+    socket.on(
+      'consumerClosed',
+      async (
+        { consumerId },
+      ) => {
+        if (consumers.value.delete(consumerId))
+          triggerRef(consumers)
+      },
+    )
+
+    socket.on('disconnect', () => {
+      device.value = undefined
+      rtpCapabilities.value = undefined
+
+      sendTransport.value?.close()
+      sendTransport.value = undefined
+
+      recvTransport.value?.close()
+      recvTransport.value = undefined
+
+      micProducer.value = undefined
+      cameraProducer.value = undefined
+      shareProducer.value = undefined
+
+      consumers.value = new Map()
+      producers.value = new Map()
+    })
+
+    socket.on('consumerPaused', ({ consumerId }) => {
+      const consumer = consumers.value.get(consumerId)
+
+      if (!consumer)
+        return
+
+      consumer.pause()
+
+      triggerRef(consumers)
+    })
+
+    socket.on('consumerResumed', ({ consumerId }) => {
+      const consumer = consumers.value.get(consumerId)
+
+      if (!consumer)
+        return
+
+      consumer.resume()
+
+      triggerRef(consumers)
+    })
+  }, { immediate: true, flush: 'sync' })
+
+  async function enableProducer(type: ProducerType, options: ProducerOptions) {
+    const producer = getProducerByType(type)
+
+    if (producer.value)
       return
 
-    initializing.value = true
+    if (!device.value || !sendTransport.value)
-    connected.value = false
+      return
 
-    await loadDevice()
+    if (!options.track)
-    await createSendTransport()
+      return
-    await createRecvTransport()
-    await publishMic()
 
-    initializing.value = false
+    if (!device.value.canProduce(options.track.kind as MediaKind))
-    connected.value = true
+      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 },
+        autoGainControl: { exact: preferences.autoGainControl.value },
+        echoCancellation: { exact: preferences.echoCancellation.value },
+        noiseSuppression: { exact: preferences.noiseSuppression.value },
+      },
+    })
+
+    const track = stream.getAudioTracks()[0]
+
+    if (!track)
+      return
+
+    await enableProducer('microphone', {
+      track,
+      codecOptions: {
+        opusStereo: true,
+        opusDtx: true, // Меньше пакетов летит когда тишина
+        opusFec: false, // Фиксит пакет лос
+      },
+    })
+  }
+
+  async function disableMic() {
+    await disableProducer('microphone')
+  }
+
+  async function enableShare() {
+    if (!device.value)
+      return
+
+    const stream = await getShareStream()
+
+    const track = stream.getVideoTracks()[0]
+
+    if (!track)
+      return
+
+    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) {
+    if (!signaling.socket.value)
+      return
+
+    const producer = getProducerByType(type)
+
+    if (!producer.value)
+      return
+
+    if (producer.value.paused)
+      return
+
+    try {
+      producer.value.pause()
+
+      await signaling.socket.value.emitWithAck('pauseProducer', {
+        producerId: producer.value.id,
+      })
+    }
+    catch {
+      producer.value.resume()
+    }
+    finally {
+      triggerRef(producers)
+      triggerRef(producer)
+    }
+  }
+
+  async function resumeProducer(type: ProducerType) {
+    if (!signaling.socket.value)
+      return
+
+    const producer = getProducerByType(type)
+
+    if (!producer.value)
+      return
+
+    try {
+      producer.value.resume()
+
+      await signaling.socket.value.emitWithAck('resumeProducer', {
+        producerId: producer.value.id,
+      })
+    }
+    catch {
+      producer.value.pause()
+    }
+    finally {
+      triggerRef(producers)
+      triggerRef(producer)
+    }
+  }
+
+  async function init() {
+    signaling.connect()
+  }
+
+  function getProducerByType(type: ProducerType) {
+    switch (type) {
+      case 'microphone':
+        return micProducer
+      case 'camera':
+        return cameraProducer
+      case 'share':
+        return shareProducer
+    }
+  }
+
+  watch([
+    preferences.inputDeviceId,
+    preferences.echoCancellation,
+    preferences.autoGainControl,
+    preferences.noiseSuppression,
+  ], async ([inputDeviceId]) => {
+    await disableMic()
+
+    if (!inputDeviceId)
+      return
+
+    await enableMic()
+  })
 
   return {
-    connected,
+    init,
-    streams,
+    consumers,
+    producers,
+    sendTransport,
+    recvTransport,
+    rtpCapabilities,
+    device,
+    micProducer,
+    cameraProducer,
+    shareProducer,
+    pauseProducer,
+    resumeProducer,
+    enableShare,
+    disableProducer,
   }
 })

client/app/composables/use-preferences.ts

@@ -0,0 +1,65 @@
+import chadApi from '#shared/chad-api'
+import { createGlobalState, useLocalStorage, watchDebounced } from '@vueuse/core'
+
+export interface SyncedPreferences {
+  toggleInputHotkey: string
+  toggleOutputHotkey: string
+  volumes: Record<Client['id'], number>
+}
+
+export const usePreferences = createGlobalState(() => {
+  const { videoInputs, audioInputs, audioOutputs } = useDevices()
+
+  const synced = ref(false)
+
+  const inputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('INPUT_DEVICE_ID', 'default')
+  const outputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('OUTPUT_DEVICE_ID', 'default')
+
+  const autoGainControl = useLocalStorage('AUTO_GAIN_CONTROL', false)
+  const noiseSuppression = useLocalStorage('NOISE_SUPPRESSION', true)
+  const echoCancellation = useLocalStorage('ECHO_CANCELLATION', true)
+
+  const toggleInputHotkey = ref<SyncedPreferences['toggleInputHotkey']>('')
+  const toggleOutputHotkey = ref<SyncedPreferences['toggleOutputHotkey']>('')
+
+  const inputDeviceExist = computed(() => {
+    return audioInputs.value.some(device => device.deviceId === inputDeviceId.value)
+  })
+
+  const outputDeviceExist = computed(() => {
+    return audioOutputs.value.some(device => device.deviceId === outputDeviceId.value)
+  })
+
+  watchDebounced(
+    [toggleInputHotkey, toggleOutputHotkey],
+    async ([toggleInputHotkey, toggleOutputHotkey]) => {
+      try {
+        await chadApi(
+          '/preferences',
+          {
+            method: 'PATCH',
+            body: {
+              toggleInputHotkey,
+              toggleOutputHotkey,
+            },
+          },
+        )
+      }
+      catch {}
+    },
+    { debounce: 1000 },
+  )
+
+  return {
+    synced,
+    inputDeviceId,
+    outputDeviceId,
+    autoGainControl,
+    noiseSuppression,
+    echoCancellation,
+    toggleInputHotkey,
+    toggleOutputHotkey,
+    inputDeviceExist,
+    outputDeviceExist,
+  }
+})

client/app/composables/use-signaling.ts

@@ -0,0 +1,84 @@
+import type { Socket } from 'socket.io-client'
+import { createSharedComposable } from '@vueuse/core'
+import { io } from 'socket.io-client'
+import { parseURL } from 'ufo'
+
+export const useSignaling = createSharedComposable(() => {
+  const toast = useToast()
+  const { me } = useAuth()
+
+  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' })
+
+  watch(connected, (connected) => {
+    if (connected)
+      toast.add({ severity: 'success', summary: 'Connected', closable: false, life: 1000 })
+    else
+      toast.add({ severity: 'error', summary: 'Disconnected', closable: false, life: 1000 })
+  }, { immediate: true })
+
+  watch(me, (me) => {
+    if (!me) {
+      socket.value?.close()
+      socket.value = undefined
+    }
+  })
+
+  onScopeDispose(() => {
+    socket.value?.close()
+    socket.value = undefined
+  })
+
+  function connect() {
+    if (socket.value || !me.value)
+      return
+
+    const { protocol, host, pathname } = parseURL(__API_BASE_URL__)
+
+    const uri = host ? `${protocol}//${host}` : ``
+
+    socket.value = io(`${uri}/webrtc`, {
+      path: `${pathname}/ws`,
+      transports: ['websocket'],
+      withCredentials: true,
+      auth: {
+        userId: me.value.id,
+      },
+    })
+  }
+
+  return {
+    socket,
+    connected,
+    connect,
+  }
+})

client/app/composables/use-updater.ts

@@ -0,0 +1,28 @@
+import type { Update } from '@tauri-apps/plugin-updater'
+import { check } from '@tauri-apps/plugin-updater'
+import { createGlobalState } from '@vueuse/core'
+
+export const useUpdater = createGlobalState(() => {
+  const lastUpdate = shallowRef<Update>()
+
+  const checking = ref(false)
+
+  async function checkForUpdates() {
+    try {
+      checking.value = true
+
+      lastUpdate.value = (await check()) ?? undefined
+    }
+    finally {
+      checking.value = false
+    }
+
+    return lastUpdate.value
+  }
+
+  return {
+    lastUpdate,
+    checking,
+    checkForUpdates,
+  }
+})

client/app/index.d.ts

@@ -0,0 +1,7 @@
+declare module '#app' {
+  interface PageMeta {
+    auth?: boolean | 'guest'
+  }
+}
+
+export {}

client/app/layouts/auth.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="w-full h-full flex p-3">
+    <img src="/chad-bg.webp" alt="Background" draggable="false" class="pointer-events-none absolute opacity-3 -z-1 block inset-0 object-contain w-full h-full">
+
+    <div v-auto-animate class="w-1/2 m-auto">
+      <div class="text-center">
+        <PrimeSelectButton v-model="tab" class="mb-6" :options="options" option-label="label" :allow-empty="false" />
+      </div>
+
+      <slot />
+    </div>
+  </div>
+
+  <PrimeBadge class="fixed top-3 right-3 opacity-50" severity="secondary" :value="version" size="small" />
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const { version } = useApp()
+
+const options = computed(() => {
+  return [
+    {
+      label: 'Login',
+      routeName: 'Login',
+    },
+    {
+      label: 'Register',
+      routeName: 'Register',
+    },
+  ]
+})
+
+const tab = shallowRef(options.value.find(option => route.name === option.routeName))
+
+watch(tab, (tab) => {
+  if (!tab)
+    return
+
+  navigateTo({ name: tab.routeName })
+})
+</script>

client/app/layouts/blank.vue

@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>

client/app/layouts/default.vue

@@ -0,0 +1,125 @@
+<template>
+  <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"
+    >
+      <div class="inline-flex items-center gap-3">
+        <PrimeBadge class="opacity-50" severity="secondary" :value="version" size="small" />
+        <PrimeBadge :severity="connected ? 'success' : 'danger' " />
+      </div>
+
+      <PrimeButtonGroup class="ml-auto">
+        <PrimeButton :severity="inputMuted ? 'info' : undefined" outlined @click="toggleInput">
+          <template #icon>
+            <Component :is="inputMuted ? MicOff : Mic" />
+          </template>
+        </PrimeButton>
+        <PrimeButton :severity="outputMuted ? 'info' : undefined" outlined @click="toggleOutput">
+          <template #icon>
+            <Component :is="outputMuted ? VolumeOff : Volume2" />
+          </template>
+        </PrimeButton>
+      </PrimeButtonGroup>
+
+      <PrimeButton :severity="sharingEnabled ? 'success' : undefined" outlined @click="toggleShare">
+        <template #icon>
+          <Component :is="sharingEnabled ? ScreenShareOff : ScreenShare" />
+        </template>
+      </PrimeButton>
+    </div>
+
+    <div
+      class="flex items-center justify-center rounded-xl p-3 bg-surface-950"
+    >
+      <PrimeSelectButton
+        v-model="activeTab"
+        :options="tabs"
+        data-key="id"
+        :allow-empty="false"
+        style="--p-togglebutton-content-padding: 0.25rem 0.5rem"
+      >
+        <template #option="{ option }">
+          <Component :is="option.icon" size="24" />
+        </template>
+      </PrimeSelectButton>
+    </div>
+
+    <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
+      <div v-auto-animate class="p-3 space-y-1">
+        <ClientRow v-for="client of clients" :key="client.userId" :client="client" />
+      </div>
+    </PrimeScrollPanel>
+
+    <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
+      <div class="p-3">
+        <slot />
+      </div>
+    </PrimeScrollPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  MessageCircle,
+  Mic,
+  MicOff,
+  ScreenShare,
+  ScreenShareOff,
+  Settings,
+  UserPen,
+  Volume2,
+  VolumeOff,
+} from 'lucide-vue-next'
+
+const {
+  version,
+  clients,
+  inputMuted,
+  outputMuted,
+  sharingEnabled,
+  toggleInput,
+  toggleOutput,
+  toggleShare,
+} = useApp()
+const { connect, connected } = useSignaling()
+
+interface Tab {
+  id: string
+  icon: Component
+  onClick: () => void | Promise<void>
+}
+
+const route = useRoute()
+
+const tabs: Tab[] = [
+  {
+    id: 'Index',
+    icon: MessageCircle,
+    onClick: () => {
+      navigateTo({ name: 'Index' })
+    },
+  },
+  {
+    id: 'Profile',
+    icon: UserPen,
+    onClick: () => {
+      navigateTo({ name: 'Profile' })
+    },
+  },
+  {
+    id: 'Preferences',
+    icon: Settings,
+    onClick: () => {
+      navigateTo({ name: 'Preferences' })
+    },
+  },
+]
+
+const activeTab = ref<Tab>(tabs.find(tab => tab.id === route.name) ?? tabs[0]!)
+
+watch(activeTab, (activeTab) => {
+  activeTab.onClick()
+})
+
+connect()
+</script>

client/app/middleware/00.updater.global.ts

@@ -0,0 +1,20 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  if (import.meta.dev || import.meta.server)
+    return
+
+  const { isTauri } = useApp()
+
+  if (!isTauri.value)
+    return
+
+  if (from?.name || !!to.redirectedFrom)
+    return
+
+  const { checkForUpdates } = useUpdater()
+
+  const update = await checkForUpdates()
+
+  if (update) {
+    return navigateTo({ name: 'Updater' })
+  }
+})

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

@@ -0,0 +1,23 @@
+import chadApi from '#shared/chad-api'
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  const { me, setMe } = useAuth()
+
+  if (!me.value) {
+    try {
+      setMe(await chadApi('/me', { method: 'GET' }))
+
+      if (to.meta.auth !== false)
+        return navigateTo({ name: 'Index' })
+    }
+    catch {
+      if (to.meta.auth !== 'guest') {
+        return navigateTo({ name: 'Login' })
+      }
+    }
+  }
+
+  if (me.value && to.meta.auth === 'guest') {
+    return navigateTo({ name: 'Index' })
+  }
+})

client/app/middleware/02.user-preferences.global.ts

@@ -0,0 +1,26 @@
+import type { SyncedPreferences } from '~/composables/use-preferences'
+import chadApi from '#shared/chad-api'
+
+export default defineNuxtRouteMiddleware(async () => {
+  const { me } = useAuth()
+
+  if (!me.value)
+    return
+
+  const { synced, toggleInputHotkey, toggleOutputHotkey } = usePreferences()
+
+  if (synced.value)
+    return
+
+  try {
+    const preferences = await chadApi<SyncedPreferences>('/preferences', { method: 'GET' })
+
+    if (!preferences)
+      return
+
+    toggleInputHotkey.value = preferences.toggleInputHotkey ?? toggleInputHotkey.value
+    toggleOutputHotkey.value = preferences.toggleOutputHotkey ?? toggleOutputHotkey.value
+    synced.value = true
+  }
+  catch {}
+})

client/app/middleware/build-info.global.ts

@@ -1,5 +0,0 @@
-export default defineNuxtRouteMiddleware((to, from) => {
-  console.group('Build Info')
-  console.log(`COMMIT_SHA: ${__COMMIT_SHA__}`)
-  console.groupEnd()
-})

client/app/pages/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div class="flex items-center justify-center">
+      <PrimeCard>
+        <template #content>
+          The chat is under development.
+        </template>
+      </PrimeCard>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  name: 'Index',
+})
+</script>

client/app/pages/login.vue

@@ -0,0 +1,67 @@
+<template>
+  <PrimeCard>
+    <template #content>
+      <form @submit.prevent="submit">
+        <div class="flex flex-col gap-3">
+          <PrimeFloatLabel variant="on">
+            <PrimeInputText id="username" v-model="username" size="large" autocomplete="off" fluid autofocus />
+            <label for="username">Username</label>
+          </PrimeFloatLabel>
+
+          <PrimeFloatLabel variant="on">
+            <PrimePassword id="password" v-model="password" size="large" autocomplete="off" toggle-mask fluid :feedback="false" />
+            <label for="password">Password</label>
+          </PrimeFloatLabel>
+        </div>
+
+        <PrimeButton
+          class="mt-6"
+          size="large"
+          icon="pi pi-arrow-right"
+          icon-pos="right"
+          label="Let's go"
+          :loading="submitting"
+          :disabled="!valid"
+          type="submit"
+          fluid
+        />
+      </form>
+    </template>
+  </PrimeCard>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Login',
+  layout: 'auth',
+  auth: 'guest',
+})
+
+const { login } = useAuth()
+
+const submitting = ref(false)
+
+const username = ref<string>()
+const password = ref<string>()
+
+const valid = computed(() => {
+  if (!username.value)
+    return false
+
+  if (!password.value)
+    return false
+
+  return true
+})
+
+async function submit() {
+  if (!valid.value)
+    return
+
+  submitting.value = true
+
+  await login(username.value!, password.value!)
+
+  submitting.value = false
+}
+</script>

client/app/pages/preferences.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <PrimeDivider align="left">
+      Audio
+    </PrimeDivider>
+
+    <PrimeFloatLabel variant="on">
+      <PrimeSelect
+        v-model="inputDeviceId"
+        :options="audioInputs"
+        option-label="label"
+        option-value="deviceId"
+        input-id="inputDevice"
+        fluid
+        :invalid="!inputDeviceExist"
+      />
+      <label for="inputDevice">Input device</label>
+    </PrimeFloatLabel>
+
+    <div class="flex items-center gap-2 mt-3">
+      <PrimeToggleSwitch v-model="autoGainControl" input-id="autoGainControl" />
+      <label for="autoGainControl">Auto Gain Control</label>
+    </div>
+
+    <div class="flex items-center gap-2 mt-3">
+      <PrimeToggleSwitch v-model="echoCancellation" input-id="echoCancellation" />
+      <label for="echoCancellation">Echo Cancellation</label>
+    </div>
+
+    <div class="flex items-center gap-2 mt-3">
+      <PrimeToggleSwitch v-model="noiseSuppression" input-id="noiseSuppression" />
+      <label for="noiseSuppression">Noise Suppression</label>
+    </div>
+
+    <!--    <PrimeFloatLabel variant="on"> -->
+    <!--      <PrimeSelect -->
+    <!--        v-model="outputDeviceId" -->
+    <!--        :options="audioOutputs" -->
+    <!--        option-label="label" -->
+    <!--        option-value="deviceId" -->
+    <!--        fluid -->
+    <!--        class="mt-6" -->
+    <!--        input-id="outputDevice" -->
+    <!--        :invalid="!outputDeviceExist" -->
+    <!--        -->
+    <!--      /> -->
+    <!--      <label for="outputDevice">Output device</label> -->
+    <!--    </PrimeFloatLabel> -->
+
+    <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" class="mt-3">
+        <PrimeInputText id="soundToggle" :model-value="toggleOutputHotkey" fluid @keydown="setupToggleOutputHotkey" />
+        <label for="soundToggle">Toggle sound</label>
+      </PrimeFloatLabel>
+    </template>
+
+    <PrimeDivider align="left">
+      About
+    </PrimeDivider>
+
+    <p v-if="version" class="text-muted-color text-sm">
+      VERSION: {{ version }}
+    </p>
+    <p class="text-muted-color text-sm mt-2">
+      COMMIT_SHA: {{ commitSha }}
+    </p>
+
+    <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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RemovableRef } from '@vueuse/core'
+
+definePageMeta({
+  name: 'Preferences',
+})
+const { isTauri, version, commitSha } = useApp()
+const { checking, checkForUpdates, lastUpdate } = useUpdater()
+const { audioInputs, audioOutputs } = useDevices()
+const {
+  inputDeviceId,
+  outputDeviceId,
+  autoGainControl,
+  noiseSuppression,
+  echoCancellation,
+  toggleInputHotkey,
+  toggleOutputHotkey,
+  inputDeviceExist,
+  outputDeviceExist,
+} = usePreferences()
+
+const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)
+const setupToggleOutputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleOutputHotkey)
+
+function setupHotkey(event: KeyboardEvent, model: RemovableRef<string>) {
+  if (event.key === 'Tab' || event.key === 'Enter') {
+    return
+  }
+
+  event.preventDefault()
+
+  const hotkey = []
+
+  if (event.ctrlKey || event.metaKey)
+    hotkey.push('CommandOrControl')
+  if (event.altKey)
+    hotkey.push('Alt')
+  if (event.shiftKey)
+    hotkey.push('Shift')
+
+  const modifierApplied = hotkey.length > 0
+
+  if (!modifierApplied && ['Escape', 'Backspace', 'Delete'].includes(event.key)) {
+    model.value = ''
+
+    return
+  }
+
+  if (!['Control', 'Shift', 'Alt'].includes(event.key)) {
+    hotkey.push(event.key.toUpperCase())
+  }
+
+  if (modifierApplied && hotkey.length === 1) {
+    model.value = ''
+
+    return
+  }
+
+  model.value = hotkey.join('+')
+}
+</script>

client/app/pages/profile.vue

@@ -0,0 +1,68 @@
+<template>
+  <form @submit.prevent="save()">
+    <PrimeDivider align="left">
+      General
+    </PrimeDivider>
+
+    <PrimeFloatLabel variant="on">
+      <PrimeInputText id="displayName" v-model="displayName" fluid autocomplete="off" />
+      <label for="displayName">Display name</label>
+    </PrimeFloatLabel>
+
+    <div class="flex items-center gap-3 mt-6">
+      <PrimeButton label="Save" :disabled="!valid" :loading="saving" fluid type="submit" />
+      <PrimeButton severity="danger" class="shrink-0" @click="logout()">
+        <template #icon>
+          <LogOut />
+        </template>
+      </PrimeButton>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import chadApi from '#shared/chad-api'
+import { LogOut } from 'lucide-vue-next'
+
+definePageMeta({
+  name: 'Profile',
+})
+
+const { me, setMe, logout } = useAuth()
+const signaling = useSignaling()
+const toast = useToast()
+
+const displayName = ref(me.value?.displayName || '')
+
+const saving = ref(false)
+
+const valid = computed(() => {
+  if (!me.value)
+    return false
+
+  if (displayName.value === me.value.displayName)
+    return false
+
+  return true
+})
+
+async function save() {
+  if (!valid.value)
+    return
+
+  saving.value = true
+
+  const updatedMe = await chadApi('/profile', {
+    method: 'PATCH',
+    body: {
+      displayName: displayName.value,
+    },
+  })
+
+  setMe({ ...me.value!, displayName: (updatedMe.displayName as string) })
+
+  toast.add({ severity: 'success', summary: 'Saved', life: 1000, closable: false })
+
+  saving.value = false
+}
+</script>

client/app/pages/register.vue

@@ -0,0 +1,74 @@
+<template>
+  <PrimeCard>
+    <template #content>
+      <form @submit.prevent="submit">
+        <div class="flex flex-col gap-3">
+          <PrimeFloatLabel variant="on">
+            <PrimeInputText id="username" v-model="username" size="large" autocomplete="off" fluid autofocus />
+            <label for="username">Username</label>
+          </PrimeFloatLabel>
+
+          <PrimeFloatLabel variant="on">
+            <PrimePassword id="password" v-model="password" size="large" autocomplete="off" toggle-mask fluid :feedback="false" />
+            <label for="password">Password</label>
+          </PrimeFloatLabel>
+
+          <PrimeFloatLabel variant="on">
+            <PrimePassword id="repeatPassword" v-model="repeatPassword" size="large" autocomplete="off" toggle-mask fluid :feedback="false" />
+            <label for="repeatPassword">Repeat password</label>
+          </PrimeFloatLabel>
+        </div>
+
+        <PrimeButton
+          class="mt-6"
+          size="large"
+          label="Register"
+          :loading="submitting"
+          :disabled="!valid"
+          type="submit"
+          fluid
+        />
+      </form>
+    </template>
+  </PrimeCard>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Register',
+  layout: 'auth',
+  auth: 'guest',
+})
+
+const { register } = useAuth()
+
+const submitting = ref(false)
+
+const username = ref<string>()
+const password = ref<string>()
+const repeatPassword = ref<string>()
+
+const valid = computed(() => {
+  if (!username.value)
+    return false
+
+  if (!password.value)
+    return false
+
+  if (repeatPassword.value !== password.value)
+    return false
+
+  return true
+})
+
+async function submit() {
+  if (!valid.value)
+    return
+
+  submitting.value = true
+
+  await register(username.value!, password.value!)
+
+  submitting.value = false
+}
+</script>

client/app/pages/updater.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex h-full">
+    <div class="w-80 m-auto">
+      <p class="text-center text-muted-color mb-4">
+        Updating...
+      </p>
+
+      <PrimeProgressBar mode="indeterminate" style="height: 8px;" />
+
+      <div class="flex items-center justify-center gap-2 mt-8">
+        <PrimeBadge :value="lastUpdate.currentVersion" size="small" severity="secondary" />
+        <i class="pi pi-arrow-right" style="font-size: 0.75rem;" />
+        <PrimeBadge :value="lastUpdate.version" size="small" severity="contrast" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Updater',
+  layout: 'blank',
+  auth: false,
+  middleware: () => {
+    const { lastUpdate } = useUpdater()
+    if (!lastUpdate.value)
+      return navigateTo('/')
+  },
+})
+
+const lastUpdate = useUpdater().lastUpdate.value!
+
+;(async () => {
+  try {
+    await lastUpdate.downloadAndInstall()
+  }
+  catch {
+    await navigateTo('/')
+  }
+})()
+</script>

client/app/plugins/00.build-info.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin({
+  setup() {
+    console.group('Build Info')
+    console.log(`COMMIT_SHA: ${__COMMIT_SHA__}`)
+    console.groupEnd()
+  },
+})

client/app/plugins/01.register-hotkeys.ts

@@ -0,0 +1,45 @@
+import { isRegistered, register, unregister, unregisterAll } from '@tauri-apps/plugin-global-shortcut'
+
+export default defineNuxtPlugin({
+  async setup() {
+    const { isTauri, toggleInput, toggleOutput } = useApp()
+    const preferences = usePreferences()
+
+    if (!isTauri.value)
+      return
+
+    await unregisterAll()
+
+    watch(preferences.toggleInputHotkey, async (shortcut, prevShortcut) => {
+      await registerHotkey(shortcut, prevShortcut, toggleInput)
+    }, {
+      immediate: true,
+    })
+
+    watch(preferences.toggleOutputHotkey, async (shortcut, prevShortcut) => {
+      await registerHotkey(shortcut, prevShortcut, toggleOutput)
+    }, {
+      immediate: true,
+    })
+
+    async function registerHotkey(shortcut: string, prevShortcut: string | undefined, cb: () => void) {
+      if (!!prevShortcut && await isRegistered(prevShortcut)) {
+        await unregister(prevShortcut)
+      }
+
+      if (!shortcut)
+        return
+
+      if (await isRegistered(shortcut)) {
+        await unregister(shortcut)
+      }
+
+      await register(shortcut, ({ state }) => {
+        if (state !== 'Released')
+          return
+
+        cb()
+      })
+    }
+  },
+})

client/eslint.config.mjs

@@ -5,6 +5,9 @@ export default antfu({
     css: true,
   },
   overrides: {
+    typescript: {
+      'no-console': 'off',
+    },
     vue: {
       'vue/block-order': ['error', {
         order: ['template', 'script', 'style'],

client/globals.d.ts

@@ -1 +1,2 @@
+declare const __API_BASE_URL__: string
 declare const __COMMIT_SHA__: string

client/nuxt.config.ts

@@ -1,18 +1,104 @@
+import { definePreset } from '@primeuix/themes'
+import Aura from '@primeuix/themes/aura'
+import tailwindcss from '@tailwindcss/vite'
+
 export default defineNuxtConfig({
   compatibilityDate: '2025-09-29',
-  devtools: { enabled: true },
+  devtools: { enabled: true, vueDevTools: true },
   ssr: false,
-  devServer: {
+  modules: [
-    // host: '0',
+    '@nuxt/fonts',
+    '@primevue/nuxt-module',
+    '@formkit/auto-animate/nuxt',
+  ],
+  fonts: {
+    provider: 'google',
   },
+  primevue: {
+    options: {
+      theme: {
+        preset: definePreset(Aura, {
+          semantic: {
+            transitionDuration: '150ms',
+            primary: {
+              50: '{zinc.50}',
+              100: '{zinc.100}',
+              200: '{zinc.200}',
+              300: '{zinc.300}',
+              400: '{zinc.400}',
+              500: '{zinc.500}',
+              600: '{zinc.600}',
+              700: '{zinc.700}',
+              800: '{zinc.800}',
+              900: '{zinc.900}',
+              950: '{zinc.950}',
+            },
+          },
+          colorScheme: {
+            light: {
+              primary: {
+                color: '{zinc.950}',
+                inverseColor: '#ffffff',
+                hoverColor: '{zinc.900}',
+                activeColor: '{zinc.800}',
+              },
+              highlight: {
+                background: '{zinc.950}',
+                focusBackground: '{zinc.700}',
+                color: '#ffffff',
+                focusColor: '#ffffff',
+              },
+            },
+            dark: {
+              primary: {
+                color: '{zinc.50}',
+                inverseColor: '{zinc.950}',
+                hoverColor: '{zinc.100}',
+                activeColor: '{zinc.200}',
+              },
+              highlight: {
+                background: 'rgba(250, 250, 250, .16)',
+                focusBackground: 'rgba(250, 250, 250, .24)',
+                color: 'rgba(255,255,255,.87)',
+                focusColor: 'rgba(255,255,255,.87)',
+              },
+            },
+          },
+        }),
+      },
+    },
+    components: {
+      prefix: 'Prime',
+    },
+  },
+  css: [
+    '@/assets/styles/tailwind.css',
+    '@/assets/styles/primeicons.css',
+    '@/assets/styles/main.scss',
+  ],
   vite: {
+    plugins: [
+      tailwindcss(),
+    ],
     clearScreen: false,
     envPrefix: ['VITE_', 'TAURI_'],
     server: {
       strictPort: true,
+      proxy: {
+        '/api': {
+          target: 'http://localhost:4000/chad',
+          // target: 'https://api.koptilnya.xyz/chad',
+          ws: true,
+          changeOrigin: true,
+          rewrite: (path) => {
+            return path.replace(/^\/api/, '')
+          },
+        },
+      },
     },
     define: {
-      __COMMIT_SHA__: JSON.stringify(process.env.COMMIT_SHA || 'local'),
+      __API_BASE_URL__: JSON.stringify(import.meta.env.API_BASE_URL || 'http://localhost:4000/chad'),
+      __COMMIT_SHA__: JSON.stringify(import.meta.env.COMMIT_SHA || 'local'),
     },
   },
   ignore: ['**/src-tauri/**'],

client/package.json

@@ -10,19 +10,36 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.9.0",
+    "@nuxt/fonts": "^0.11.4",
+    "@primeuix/themes": "^1.2.5",
+    "@tailwindcss/vite": "^4.1.14",
+    "@tauri-apps/plugin-global-shortcut": "~2",
+    "@tauri-apps/plugin-process": "~2",
+    "@tauri-apps/plugin-updater": "~2",
     "@vueuse/core": "^13.9.0",
+    "hotkeys-js": "^4.0.0",
+    "lucide-vue-next": "^0.562.0",
     "mediasoup-client": "^3.16.7",
-    "nuxt": "^4.1.2",
+    "nuxt": "^4.2.2",
+    "postcss": "^8.5.6",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.4.0",
     "socket.io-client": "^4.8.1",
-    "typescript": "^5.9.3",
+    "tailwindcss": "^4.1.14",
+    "tailwindcss-primeui": "^0.6.1",
+    "ufo": "^1.6.1",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1"
   },
-  "packageManager": "yarn@4.10.3",
+  "packageManager": "yarn@4.12.0",
   "devDependencies": {
     "@antfu/eslint-config": "^5.4.1",
+    "@primevue/nuxt-module": "^4.4.0",
     "@tauri-apps/cli": "^2.8.4",
     "eslint": "^9.36.0",
-    "eslint-plugin-format": "^1.0.2"
+    "eslint-plugin-format": "^1.0.2",
+    "sass-embedded": "^1.93.2",
+    "typescript": "^5.9.3"
   }
 }

client/scripts/generate-updater.mjs

@@ -0,0 +1,41 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const TAURI_CONF = path.resolve(__dirname, '../src-tauri/tauri.conf.json')
+const OUTPUT = path.resolve(__dirname, '../updater.json')
+
+const PLATFORM = 'windows-x86_64'
+const BASE_URL = 'https://git.koptilnya.xyz/opti1337/chad/releases/download/latest'
+
+const tauriConfRaw = fs.readFileSync(TAURI_CONF, 'utf8')
+const tauriConf = JSON.parse(tauriConfRaw)
+const version = tauriConf.version
+
+const SIG_FILE = path.resolve(
+  __dirname,
+  `../src-tauri/target/x86_64-pc-windows-msvc/release/bundle/nsis/chad_${version}_x64-setup.exe.sig`,
+)
+
+const signature = fs.readFileSync(SIG_FILE, 'utf8').trim()
+
+const installerName = `chad_${version}_x64-setup.exe`
+
+const updater = {
+  pub_date: new Date().toISOString(),
+  version,
+  platforms: {
+    [PLATFORM]: {
+      url: `${BASE_URL}/${installerName}`,
+      signature,
+    },
+  },
+  notes: '',
+}
+
+fs.writeFileSync(OUTPUT, JSON.stringify(updater, null, 2), 'utf8')
+
+console.log('updater.json generated')

client/server/plugins/extend-html.ts

@@ -0,0 +1,4 @@
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('render:html', (html, { event }) => {
+  })
+})

client/shared/chad-api.ts

@@ -0,0 +1,64 @@
+import { ToastEventBus } from 'primevue'
+
+const instance = $fetch.create({
+  baseURL: __API_BASE_URL__,
+  credentials: 'include',
+  retry: false,
+  onResponseError({ request, response }) {
+    if (!import.meta.client)
+      return
+
+    if (typeof request === 'string' && request.endsWith('/me'))
+      return
+
+    const message = response._data.error || 'Something went wrong'
+
+    ToastEventBus.emit('add', { severity: 'error', summary: 'Error', detail: message, closable: false, life: 3000 })
+  },
+})
+
+// function instance(url: string, request: Request) {
+//   console.log(url)
+//   return fetch({
+//     url: `https://api.koptilnya.xyz${url}`,
+//     credentials: 'include',
+//     method: 'GET',
+//     headers: {
+//       'Accept': 'application/json',
+//       'Content-Type': 'application/json',
+//       ...request.headers,
+//     },
+//     ...request,
+//     body: request.body ? JSON.stringify(request.body) : undefined,
+//   })
+// }
+
+// async function instance(url: string, options: Partial<Request> = {}) {
+//   const response = await fetch(`https://api.koptilnya.xyz/chad${url}`, {
+//     method: options.method || 'GET',
+//     headers: {
+//       'Content-Type': 'application/json',
+//       ...(options.headers || {}),
+//     },
+//     body: JSON.stringify(options.body ?? {}),
+//     responseType: 2,
+//     credentials: 'include',
+//   })
+//
+//   const data = await response.json()
+//
+//   if (response.status >= 400) {
+//     if (!import.meta.client)
+//       return
+//
+//     const message = data?.error || 'Something went wrong'
+//
+//     ToastEventBus.emit('add', { severity: 'error', summary: 'Error', detail: message, closable: false, life: 3000 })
+//
+//     throw new Error(`HTTP ${response.status}: ${data?.message || 'Ошибка'}`)
+//   }
+//
+//   return data
+// }
+
+export default instance

client/shared/types.ts

@@ -0,0 +1,10 @@
+export interface ChadClient {
+  socketId: string
+  userId: string
+  username: string
+  displayName: string
+  inputMuted?: boolean
+  outputMuted?: boolean
+}
+
+export type UpdatedClient = Omit<ChadClient, 'socketId' | 'userId' | 'isMe'>

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,9 @@ serde = { version = "1.0", features = ["derive"] }
 log = "0.4"
 tauri = { version = "2.8.5", features = [] }
 tauri-plugin-log = "2"
+tauri-plugin-process = "2"
+
+[target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
+tauri-plugin-global-shortcut = "2"
+tauri-plugin-single-instance = "2"
+tauri-plugin-updater = "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/capabilities/desktop.json

@@ -0,0 +1,18 @@
+{
+  "identifier": "desktop-capability",
+  "platforms": [
+    "macOS",
+    "windows",
+    "linux"
+  ],
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "updater:default",
+    "global-shortcut:allow-is-registered",
+    "global-shortcut:allow-register",
+    "global-shortcut:allow-unregister",
+    "global-shortcut:allow-unregister-all"
+  ]
+}

client/src-tauri/src/lib.rs

@@ -1,16 +1,20 @@
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
-  tauri::Builder::default()
+    tauri::Builder::default()
-    .setup(|app| {
+        .plugin(tauri_plugin_global_shortcut::Builder::new().build())
-      if cfg!(debug_assertions) {
+        .plugin(tauri_plugin_process::init())
-        app.handle().plugin(
+        .plugin(tauri_plugin_updater::Builder::new().build())
-          tauri_plugin_log::Builder::default()
+        .plugin(tauri_plugin_single_instance::init(|_, _, _| {}))
-            .level(log::LevelFilter::Info)
+        .setup(|app| {
-            .build(),
+            if cfg!(debug_assertions) {
-        )?;
+                app.handle().plugin(
-      }
+                    tauri_plugin_log::Builder::default()
-      Ok(())
+                        .level(log::LevelFilter::Info)
-    })
+                        .build(),
-    .run(tauri::generate_context!())
+                )?;
-    .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

@@ -1,31 +1,39 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
-  "version": "0.1.0",
+  "version": "0.2.19",
-  "identifier": "com.tauri.dev",
+  "identifier": "xyz.koptilnya.chad",
   "build": {
-    "frontendDist": "../dist",
+    "frontendDist": "../.output/public",
     "devUrl": "http://localhost:3000",
     "beforeDevCommand": "yarn dev",
-    "beforeBuildCommand": "yarn build"
+    "beforeBuildCommand": "yarn generate"
   },
   "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",
+        "incognito": false
       }
     ],
     "security": {
-      "csp": null
+      "csp": null,
+      "capabilities": []
     }
   },
   "bundle": {
+    "createUpdaterArtifacts": true,
     "active": true,
-    "targets": "all",
+    "targets": ["nsis"],
     "icon": [
       "icons/32x32.png",
       "icons/128x128.png",
@@ -33,5 +41,13 @@
       "icons/icon.icns",
       "icons/icon.ico"
     ]
+  },
+  "plugins": {
+    "updater": {
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEU3MzkxMzM3RkQ3NTg4QUQKUldTdGlIWDlOeE01NStIak9VbmZTTm9HY2NyNUQrVXB5ZEdIN1BkK2lhYW9zWkNCQnZQSjRmelIK",
+      "endpoints": [
+        "https://git.koptilnya.xyz/opti1337/chad/releases/download/latest/updater.json"
+      ]
+    }
   }
 }

server/.gitignore

@@ -15,3 +15,6 @@ node_modules
 
 #!.yarn/cache
 .pnp.*
+
+.env*
+*.db

server/Dockerfile

@@ -8,7 +8,10 @@ RUN yarn install --frozen-lockfile
 COPY . .
 
 ENV PORT=80
-ENV DEBUG=mediasoup*
+ENV CORS_ORIGIN=chad.koptilnya.xyz
+ENV ANNOUNCED_ADDRESS=91.144.171.182
+ENV DATABASE_URL=file:../data/database.db
+
 EXPOSE 80
-RUN ls -la
+
-CMD ["yarn", "node", "index.mjs"]
+CMD yarn db:deploy && yarn start

server/auth/lucia.ts

@@ -0,0 +1,34 @@
+import { PrismaAdapter } from '@lucia-auth/adapter-prisma'
+import { Lucia } from 'lucia'
+import prisma from '../prisma/client.ts'
+
+declare module 'lucia' {
+  interface Register {
+    Lucia: typeof Lucia
+    UserId: string
+    DatabaseUserAttributes: DatabaseUserAttributes
+  }
+}
+
+interface DatabaseUserAttributes {
+  id: string
+  displayName: string
+  username: string
+}
+
+export const auth = new Lucia(new PrismaAdapter(prisma.session, prisma.user), {
+  sessionCookie: {
+    attributes: {
+      sameSite: 'none',
+    },
+  },
+  getUserAttributes: ({ id, displayName, username }) => {
+    return {
+      id,
+      displayName,
+      username,
+    }
+  },
+})
+
+export type Auth = typeof auth

server/eslint.config.mjs

@@ -0,0 +1,10 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  typescript: {
+    overrides: {
+      'no-console': 'off',
+      'n/prefer-global/process': 'off',
+    },
+  },
+})

server/index.mjs

@@ -1,146 +0,0 @@
-import express from "express";
-import http from "http";
-import cors from "cors";
-import { Server } from "socket.io";
-import * as mediasoup from "mediasoup";
-
-const app = express();
-
-app.use(cors());
-
-const server = http.createServer(app);
-const io = new Server(server, {
-  path: '/chad/ws',
-  cors: {
-    origin: '*'
-  }
-});
-
-let worker;
-let router;
-const transports = new Map(); // socketId -> [transports]
-const producers = new Map();  // socketId -> [producers]
-const consumers = new Map();  // socketId -> [consumers]
-
-async function createWorker() {
-    worker = await mediasoup.createWorker();
-    worker.on("died", () => {
-        console.error("mediasoup worker died, exiting...");
-        process.exit(1);
-    });
-
-    router = await worker.createRouter({
-        mediaCodecs: [
-            {
-                kind: "audio",
-                mimeType: "audio/opus",
-                clockRate: 48000,
-                channels: 2,
-            }
-        ],
-    });
-
-    console.log("Mediasoup worker & router created");
-}
-
-createWorker();
-
-io.on("connection", (socket) => {
-    console.log("Client connected:", socket.id);
-
-    socket.on("getRtpCapabilities", (cb) => {
-        cb(router.rtpCapabilities);
-    });
-
-    socket.on("createTransport", async (cb) => {
-        try {
-            const transport = await router.createWebRtcTransport({
-                listenIps: [{ ip: "0.0.0.0", announcedIp: "91.144.171.182" }],
-                enableUdp: true,
-                enableTcp: true,
-                preferUdp: true,
-            });
-
-            transports.set(socket.id, [...(transports.get(socket.id) || []), transport]);
-
-            cb({
-                id: transport.id,
-                iceParameters: transport.iceParameters,
-                iceCandidates: transport.iceCandidates,
-                dtlsParameters: transport.dtlsParameters,
-            });
-
-            transport.observer.on("close", () => {
-                console.log("transport closed", transport.id);
-            });
-        } catch (err) {
-            console.error("createTransport error:", err);
-            cb({ error: err.message });
-        }
-    });
-
-    socket.on("connectTransport", async ({ transportId, dtlsParameters }, cb) => {
-        const transport = transports.get(socket.id)?.find((t) => t.id === transportId);
-        if (!transport) return cb({ error: "transport not found" });
-        await transport.connect({ dtlsParameters });
-        cb({ connected: true });
-    });
-
-    socket.on("produce", async ({ transportId, kind, rtpParameters }, cb) => {
-        const transport = transports.get(socket.id)?.find((t) => t.id === transportId);
-        if (!transport) return cb({ error: "transport not found" });
-
-        const producer = await transport.produce({ kind, rtpParameters });
-        producers.set(socket.id, [...(producers.get(socket.id) || []), producer]);
-
-        cb({ id: producer.id });
-        socket.broadcast.emit("newProducer", { producerId: producer.id });
-
-        producer.observer.on("close", () => {
-            console.log("producer closed", producer.id);
-        });
-    });
-
-    socket.on("consume", async ({ producerId, transportId, rtpCapabilities }, cb) => {
-        try {
-            if (!router.canConsume({ producerId, rtpCapabilities })) {
-                return cb({ error: "cannot consume" });
-            }
-
-            const transport = transports.get(socket.id)?.find((t) => t.id === transportId);
-            if (!transport) return cb({ error: "transport not found" });
-
-            const consumer = await transport.consume({
-                producerId,
-                rtpCapabilities,
-                paused: false,
-            });
-
-            consumers.set(socket.id, [...(consumers.get(socket.id) || []), consumer]);
-
-            cb({
-                id: consumer.id,
-                producerId,
-                kind: consumer.kind,
-                rtpParameters: consumer.rtpParameters,
-            });
-        } catch (err) {
-            console.error("consume error:", err);
-            cb({ error: err.message });
-        }
-    });
-
-    socket.on("disconnect", () => {
-        console.log("Client disconnected:", socket.id);
-
-        transports.get(socket.id)?.forEach((t) => t.close());
-        producers.get(socket.id)?.forEach((p) => p.close());
-        consumers.get(socket.id)?.forEach((c) => c.close());
-
-        transports.delete(socket.id);
-        producers.delete(socket.id);
-        consumers.delete(socket.id);
-    });
-});
-
-server.listen(process.env.PORT || 3000);

server/package.json

@@ -1,13 +1,38 @@
 {
   "name": "server",
   "scripts": {
-    "start": "node index.mjs"
+    "start": "ts-node --transpile-only server.ts",
+    "db:deploy": "npx prisma migrate deploy && npx prisma generate"
   },
+  "type": "module",
   "packageManager": "yarn@4.10.3",
   "dependencies": {
-    "cors": "^2.8.5",
+    "@fastify/autoload": "^6.3.1",
-    "express": "^5.1.0",
+    "@fastify/cookie": "^11.0.2",
+    "@fastify/cors": "^11.1.0",
+    "@lucia-auth/adapter-prisma": "^4.0.1",
+    "@prisma/client": "^6.17.0",
+    "bcrypt": "^6.0.0",
+    "consola": "^3.4.2",
+    "dotenv": "^17.2.3",
+    "fastify": "^5.6.1",
+    "fastify-plugin": "^5.1.0",
+    "lucia": "^3.2.2",
     "mediasoup": "^3.19.3",
-    "socket.io": "^4.8.1"
+    "prisma": "^6.17.0",
+    "socket.io": "^4.8.1",
+    "ws": "^8.18.3",
+    "zod": "^4.1.12"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^5.4.1",
+    "@types/bcrypt": "^6",
+    "@types/ws": "^8",
+    "eslint": "^9.36.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
+  },
+  "engines": {
+    "node": ">=22.18.0"
   }
 }

server/plugins/auth.ts

@@ -0,0 +1,45 @@
+import type { Session, User } from 'lucia'
+import fp from 'fastify-plugin'
+import { auth } from '../auth/lucia.ts'
+
+declare module 'fastify' {
+  interface FastifyRequest {
+    user: User | null
+    session: Session | null
+  }
+}
+
+export default fp(async (fastify) => {
+  fastify.decorateRequest('user', null)
+  fastify.decorateRequest('session', null)
+
+  fastify.addHook('preHandler', async (req, reply) => {
+    try {
+      const sessionId = auth.readSessionCookie(req.headers.cookie ?? '')
+
+      if (!sessionId)
+        return
+
+      const { session, user } = await auth.validateSession(sessionId ?? '')
+
+      if (session && session.fresh) {
+        const cookie = auth.createSessionCookie(session.id)
+
+        reply.setCookie(cookie.name, cookie.value, cookie.attributes)
+      }
+
+      if (!session) {
+        const blank = auth.createBlankSessionCookie()
+
+        reply.setCookie(blank.name, blank.value, blank.attributes)
+      }
+
+      req.user = user
+      req.session = session
+    }
+    catch {
+      req.user = null
+      req.session = null
+    }
+  })
+})

server/plugins/mediasoup-router.ts

@@ -0,0 +1,74 @@
+import type * as mediasoup from 'mediasoup'
+import fp from 'fastify-plugin'
+
+declare module 'fastify' {
+  interface FastifyInstance {
+    mediasoupRouter: mediasoup.types.Router
+  }
+}
+
+export default fp<mediasoup.types.RouterOptions>(
+  async (fastify, opts) => {
+    const router = await fastify.mediasoupWorker.createRouter(opts)
+
+    fastify.decorate('mediasoupRouter', router)
+  },
+  { name: 'mediasoup-router', dependencies: ['mediasoup-worker'] },
+)
+
+export const autoConfig: mediasoup.types.RouterOptions = {
+  mediaCodecs: [
+    {
+      kind: 'audio',
+      mimeType: 'audio/opus',
+      clockRate: 48000,
+      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/plugins/mediasoup-worker.ts

@@ -0,0 +1,23 @@
+import { consola } from 'consola'
+import fp from 'fastify-plugin'
+import * as mediasoup from 'mediasoup'
+
+declare module 'fastify' {
+  interface FastifyInstance {
+    mediasoupWorker: mediasoup.types.Worker
+  }
+}
+
+export default fp(
+  async (fastify) => {
+    const worker = await mediasoup.createWorker()
+    worker.on('died', () => {
+      consola.error('[Mediasoup]', 'Worker died, exiting...')
+
+      process.exit(1)
+    })
+
+    fastify.decorate('mediasoupWorker', worker)
+  },
+  { name: 'mediasoup-worker' },
+)

server/plugins/socket.ts

@@ -0,0 +1,39 @@
+import type { FastifyInstance } from 'fastify'
+import type { ServerOptions } from 'socket.io'
+import fp from 'fastify-plugin'
+import { Server } from 'socket.io'
+import registerWebrtcSocket from '../socket/webrtc.ts'
+
+declare module 'fastify' {
+  interface FastifyInstance {
+    io: Server
+  }
+}
+
+export default fp<Partial<ServerOptions>>(
+  async (fastify, opts) => {
+    fastify.decorate('io', new Server(fastify.server, opts))
+
+    fastify.addHook('preClose', () => {
+      fastify.io.disconnectSockets(true)
+    })
+
+    fastify.addHook('onClose', async (fastify: FastifyInstance) => {
+      await fastify.io.close()
+    })
+
+    fastify.ready(() => {
+      registerWebrtcSocket(fastify.io, fastify.mediasoupRouter)
+    })
+  },
+  { name: 'socket-io', dependencies: ['mediasoup-worker', 'mediasoup-router'] },
+)
+
+export const autoConfig: Partial<ServerOptions> = {
+  path: '/chad/ws',
+  cors: {
+    origin: process.env.CORS_ORIGIN || '*',
+    methods: ['GET', 'POST'],
+    credentials: true,
+  },
+}

server/prisma/client.ts

@@ -0,0 +1,7 @@
+import { PrismaClient } from '@prisma/client'
+
+const client = new PrismaClient({
+  log: ['query', 'error', 'warn'],
+})
+
+export default client

server/prisma/migrations/20251009115816_init/migration.sql

@@ -0,0 +1,12 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "username" TEXT NOT NULL,
+    "password" TEXT NOT NULL,
+    "displayName" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_username_key" ON "User"("username");

server/prisma/migrations/20251009120427_lucia/migration.sql

@@ -0,0 +1,7 @@
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "expiresAt" DATETIME NOT NULL,
+    CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);

server/prisma/migrations/20251225143531_user_preferences/migration.sql

@@ -0,0 +1,10 @@
+-- CreateTable
+CREATE TABLE "UserPreferences" (
+    "userId" TEXT NOT NULL PRIMARY KEY,
+    "toggleInputHotkey" TEXT NOT NULL,
+    "toggleOutputHotkey" TEXT NOT NULL,
+    CONSTRAINT "UserPreferences_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE INDEX "Session_userId_idx" ON "Session"("userId");

server/prisma/migrations/20251225145827_user_preferences_volumes/migration.sql

@@ -0,0 +1,21 @@
+/*
+  Warnings:
+
+  - Added the required column `volumes` to the `UserPreferences` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_UserPreferences" (
+    "userId" TEXT NOT NULL PRIMARY KEY,
+    "toggleInputHotkey" TEXT NOT NULL,
+    "toggleOutputHotkey" TEXT NOT NULL,
+    "volumes" JSONB NOT NULL,
+    CONSTRAINT "UserPreferences_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+INSERT INTO "new_UserPreferences" ("toggleInputHotkey", "toggleOutputHotkey", "userId") SELECT "toggleInputHotkey", "toggleOutputHotkey", "userId" FROM "UserPreferences";
+DROP TABLE "UserPreferences";
+ALTER TABLE "new_UserPreferences" RENAME TO "UserPreferences";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

server/prisma/migrations/20251225153018_user_preferences_optional_columns/migration.sql

@@ -0,0 +1,15 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_UserPreferences" (
+    "userId" TEXT NOT NULL PRIMARY KEY,
+    "toggleInputHotkey" TEXT,
+    "toggleOutputHotkey" TEXT,
+    "volumes" JSONB,
+    CONSTRAINT "UserPreferences_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+INSERT INTO "new_UserPreferences" ("toggleInputHotkey", "toggleOutputHotkey", "userId", "volumes") SELECT "toggleInputHotkey", "toggleOutputHotkey", "userId", "volumes" FROM "UserPreferences";
+DROP TABLE "UserPreferences";
+ALTER TABLE "new_UserPreferences" RENAME TO "UserPreferences";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

server/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "sqlite"

server/prisma/schema.prisma

@@ -0,0 +1,40 @@
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+generator client {
+  provider = "prisma-client-js"
+  // output   = "./generated/client"
+}
+
+model User {
+  id                String   @id @default(cuid())
+  username          String   @unique
+  password          String
+  displayName       String
+  createdAt         DateTime @default(now())
+  updatedAt         DateTime @updatedAt
+
+  Session           Session[]
+  UserPreferences   UserPreferences?
+}
+
+model Session {
+  id        String @id
+  userId    String
+  expiresAt DateTime
+
+  user      User @relation(references: [id], fields: [userId], onDelete: Cascade)
+
+  @@index([userId])
+}
+
+model UserPreferences {
+  userId              String  @id
+  toggleInputHotkey   String? @default("")
+  toggleOutputHotkey  String? @default("")
+  volumes             Json?   @default("{}")
+
+  user                User    @relation(fields: [userId], references: [id], onDelete: Cascade)
+}

server/routes/auth.ts

@@ -0,0 +1,118 @@
+import type { FastifyInstance } from 'fastify'
+import bcrypt from 'bcrypt'
+import { z } from 'zod'
+import { auth } from '../auth/lucia.ts'
+import prisma from '../prisma/client.ts'
+
+export default function (fastify: FastifyInstance) {
+  fastify.post('/register', async (req, reply) => {
+    try {
+      const schema = z.object({
+        username: z.string().min(1),
+        password: z.string().min(6),
+      })
+      const input = schema.parse(req.body)
+
+      const hashed = await bcrypt.hash(input.password, 10)
+      const user = await prisma.user.create({
+        data: {
+          username: input.username,
+          password: hashed,
+          displayName: input.username,
+        },
+      })
+
+      const session = await auth.createSession(user.id, {})
+      const cookie = auth.createSessionCookie(session.id)
+
+      reply.setCookie(cookie.name, cookie.value, cookie.attributes)
+
+      return {
+        id: user.id,
+        username: user.username,
+        displayName: user.displayName,
+      }
+    }
+    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 })
+      }
+    }
+  })
+
+  fastify.post('/login', async (req, reply) => {
+    try {
+      const schema = z.object({
+        username: z.string().min(1),
+        password: z.string(),
+      })
+      const input = schema.parse(req.body)
+
+      const user = await prisma.user.findFirst({
+        where: { username: input.username },
+      })
+
+      if (!user) {
+        return reply.code(404).send({ error: 'Incorrect username or password' })
+      }
+
+      const validPassword = await bcrypt.compare(input.password, user.password)
+      if (!validPassword) {
+        return reply.code(404).send({ error: 'Incorrect username or password' })
+      }
+
+      const session = await auth.createSession(user.id, {})
+      const cookie = auth.createSessionCookie(session.id)
+
+      reply.setCookie(cookie.name, cookie.value, cookie.attributes)
+
+      return {
+        id: user.id,
+        username: user.username,
+        displayName: user.displayName,
+      }
+    }
+    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 })
+      }
+    }
+  })
+
+  fastify.get('/me', async (req, reply) => {
+    if (req.user) {
+      return req.user
+    }
+
+    reply.code(401).send(false)
+  })
+
+  fastify.post('/logout', async (req, reply) => {
+    try {
+      if (req.session)
+        await auth.invalidateSession(req.session.id)
+
+      const blank = auth.createBlankSessionCookie()
+
+      reply.setCookie(blank.name, blank.value, blank.attributes)
+
+      return true
+    }
+    catch (err) {
+      fastify.log.error(err)
+      reply.code(400).send({ error: err.message })
+    }
+  })
+}

server/routes/user.ts

@@ -0,0 +1,97 @@
+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) => {
+    if (req.user) {
+      return prisma.userPreferences.findFirst({ where: { userId: req.user.id } })
+    }
+
+    reply.code(401).send(false)
+  })
+
+  fastify.patch('/preferences', async (req, reply) => {
+    if (!req.user) {
+      reply.code(401).send(false)
+
+      return
+    }
+
+    try {
+      const schema = z.object({
+        toggleInputHotkey: z.string().optional(),
+        toggleOutputHotkey: z.string().optional(),
+        volumes: z.record(z.string(), z.number()).optional(),
+      })
+      const input = schema.parse(req.body)
+
+      return prisma.userPreferences.upsert({
+        where: { userId: req.user.id },
+        create: {
+          userId: req.user.id,
+          ...input,
+        },
+        update: input,
+      })
+    }
+    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 })
+      }
+    }
+  })
+
+  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/server.ts

@@ -0,0 +1,51 @@
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import FastifyAutoLoad from '@fastify/autoload'
+import FastifyCookie from '@fastify/cookie'
+import FastifyCors from '@fastify/cors'
+import Fastify from 'fastify'
+import prisma from './prisma/client.ts'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const fastify = Fastify({
+  logger: true,
+})
+
+fastify.register(FastifyCors, {
+  origin: [
+    'http://localhost:3000',
+    'http://tauri.localhost',
+    'https://koptilnya.xyz',
+    'https://chad.koptilnya.xyz',
+  ],
+  methods: ['PATCH', 'PUT', 'OPTIONS', 'GET', 'POST', 'DELETE'],
+  credentials: true,
+})
+
+fastify.register(FastifyCookie)
+
+fastify.register(FastifyAutoLoad, {
+  dir: join(__dirname, 'plugins'),
+})
+
+fastify.register(FastifyAutoLoad, {
+  dir: join(__dirname, 'routes'),
+  options: { prefix: 'chad' },
+})
+
+;(async () => {
+  const port = process.env.PORT ? Number(process.env.PORT) : 4000
+
+  try {
+    await fastify.listen({ port, host: '0.0.0.0' })
+
+    await prisma.$connect()
+    fastify.log.info('Testing DB Connection. OK')
+  }
+  catch (err) {
+    fastify.log.error(err)
+    process.exit(1)
+  }
+})()

server/socket/webrtc.ts

@@ -0,0 +1,443 @@
+import type { types } from 'mediasoup'
+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'
+import { socketToClient } from '../utils/socket-to-client.ts'
+
+export default function (io: SocketServer, router: types.Router) {
+  const namespace: Namespace = io.of('/webrtc')
+
+  namespace.on('connection', async (socket) => {
+    consola.info('[WebRtc]', 'Client connected', socket.id)
+
+    socket.data.joined = false
+
+    socket.data.inputMuted = false
+    socket.data.outputMuted = false
+
+    socket.data.transports = new Map()
+    socket.data.producers = new Map()
+    socket.data.consumers = new Map()
+
+    const { id, username, displayName } = await prisma.user.findUnique({
+      where: {
+        id: socket.handshake.auth.userId,
+      },
+      select: {
+        id: true,
+        username: true,
+        displayName: true,
+      },
+    })
+
+    socket.data.userId = id
+    socket.data.username = username
+    socket.data.displayName = displayName
+
+    socket.emit('authenticated')
+
+    socket.on('join', async ({ rtpCapabilities }, cb) => {
+      if (socket.data.joined) {
+        consola.error('[WebRtc]', 'Already joined')
+        cb({ error: 'Already joined' })
+      }
+
+      socket.data.joined = true
+      socket.data.rtpCapabilities = rtpCapabilities
+
+      const joinedSockets = await getJoinedSockets()
+
+      cb(joinedSockets.map(socketToClient))
+
+      for (const joinedSocket of joinedSockets.filter(joinedSocket => joinedSocket.id !== socket.id)) {
+        for (const producer of joinedSocket.data.producers.values()) {
+          createConsumer(
+            socket,
+            joinedSocket,
+            producer,
+          )
+        }
+      }
+
+      socket.broadcast.emit('newPeer', socketToClient(socket))
+    })
+
+    socket.on('getRtpCapabilities', (cb) => {
+      cb(router.rtpCapabilities)
+    })
+
+    socket.on('createTransport', async ({ producing, consuming }, cb) => {
+      try {
+        const transport = await router.createWebRtcTransport({
+          listenInfos: [
+            {
+              protocol: 'udp',
+              ip: '0.0.0.0',
+              announcedAddress: process.env.ANNOUNCED_ADDRESS || '127.0.0.1',
+              portRange: {
+                min: 40000,
+                max: 40100,
+              },
+            },
+          ],
+          enableUdp: true,
+          preferUdp: true,
+          appData: {
+            producing,
+            consuming,
+          },
+        })
+
+        socket.data.transports.set(transport.id, transport)
+
+        cb({
+          id: transport.id,
+          iceParameters: transport.iceParameters,
+          iceCandidates: transport.iceCandidates,
+          dtlsParameters: transport.dtlsParameters,
+        })
+
+        transport.on('icestatechange', (iceState: types.IceState) => {
+          if (iceState === 'disconnected' || iceState === 'closed') {
+            consola.info('[WebRtc]', '[WebRtcTransport]', `"icestatechange" event [iceState:${iceState}], closing peer`, transport.id)
+
+            socket.disconnect()
+          }
+        })
+
+        transport.on('dtlsstatechange', (dtlsState: types.DtlsState) => {
+          if (dtlsState === 'failed' || dtlsState === 'closed') {
+            consola.warn('WebRtcTransport "dtlsstatechange" event [dtlsState:%s], closing peer', dtlsState)
+
+            socket.disconnect()
+          }
+        })
+      }
+      catch (error) {
+        if (error instanceof Error) {
+          consola.error('[WebRtc]', '[createTransport]', error.message)
+          cb({ error: error.message })
+        }
+      }
+    })
+
+    socket.on('connectTransport', async ({ transportId, dtlsParameters }, cb) => {
+      const transport = socket.data.transports.get(transportId)
+
+      if (!transport) {
+        consola.error('[WebRtc]', '[connectTransport]', `Transport with id ${transportId} not found`)
+        cb({ error: 'Transport not found' })
+
+        return
+      }
+
+      try {
+        await transport.connect({ dtlsParameters })
+
+        cb({ ok: true })
+      }
+      catch (error) {
+        if (error instanceof Error) {
+          consola.error('[WebRtc]', '[connectTransport]', error.message)
+          cb({ error: error.message })
+        }
+      }
+    })
+
+    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' })
+
+        return
+      }
+
+      const transport = socket.data.transports.get(transportId)
+
+      if (!transport) {
+        consola.error('[WebRtc]', '[produce]', `Transport with id ${transportId} not found`)
+        cb({ error: 'Transport not found' })
+
+        return
+      }
+
+      try {
+        const producer = await transport.produce({ kind, rtpParameters, appData: { ...appData, socketId: socket.id } })
+
+        socket.data.producers.set(producer.id, producer)
+
+        cb({ id: producer.id })
+
+        const otherSockets = await getJoinedSockets(socket.id)
+
+        for (const otherSocket of otherSockets) {
+          createConsumer(
+            otherSocket,
+            socket,
+            producer,
+          )
+        }
+
+        // TODO: Add into the AudioLevelObserver and ActiveSpeakerObserver.
+        // https://github.com/versatica/mediasoup-demo/blob/v3/server/lib/Room.js#L1276
+      }
+      catch (error) {
+        if (error instanceof Error) {
+          consola.error('[WebRtc]', '[produce]', error.message)
+          cb({ error: error.message })
+        }
+      }
+    })
+
+    socket.on('closeProducer', async ({ producerId }, cb) => {
+      if (!socket.data.joined) {
+        consola.error('Peer not joined yet')
+        cb({ error: 'Peer not joined yet' })
+
+        return
+      }
+
+      const producer = socket.data.producers.get(producerId)
+
+      if (!producer) {
+        consola.error(`producer with id "${producerId}" not found`)
+        cb({ error: `producer with id "${producerId}" not found` })
+
+        return
+      }
+
+      producer.close()
+
+      socket.data.producers.delete(producerId)
+
+      cb({ ok: true })
+    })
+
+    socket.on('pauseProducer', async ({ producerId }, cb) => {
+      if (!socket.data.joined) {
+        consola.error('Peer not joined yet')
+        cb({ error: 'Peer not joined yet' })
+
+        return
+      }
+
+      const producer = socket.data.producers.get(producerId)
+
+      if (!producer) {
+        consola.error(`producer with id "${producerId}" not found`)
+        cb({ error: `producer with id "${producerId}" not found` })
+
+        return
+      }
+
+      if (producer.paused)
+        return
+
+      await producer.pause()
+
+      cb({ ok: true })
+    })
+
+    socket.on('resumeProducer', async ({ producerId }, cb) => {
+      if (!socket.data.joined) {
+        consola.error('Peer not joined yet')
+        cb({ error: 'Peer not joined yet' })
+
+        return
+      }
+
+      const producer = socket.data.producers.get(producerId)
+
+      if (!producer) {
+        consola.error(`producer with id "${producerId}" not found`)
+        cb({ error: `producer with id "${producerId}" not found` })
+
+        return
+      }
+
+      await producer.resume()
+
+      cb({ ok: true })
+    })
+
+    socket.on('pauseConsumer', async ({ consumerId }, cb) => {
+      if (!socket.data.joined) {
+        consola.error('Peer not joined yet')
+        cb({ error: 'Peer not joined yet' })
+
+        return
+      }
+
+      const consumer = socket.data.consumers.get(consumerId)
+
+      if (!consumer) {
+        consola.error(`consumer with id "${consumerId}" not found`)
+        cb({ error: `consumer with id "${consumerId}" not found` })
+
+        return
+      }
+
+      await consumer.pause()
+
+      cb({ ok: true })
+    })
+
+    socket.on('resumeConsumer', async ({ consumerId }, cb) => {
+      if (!socket.data.joined) {
+        consola.error('Peer not joined yet')
+        cb({ error: 'Peer not joined yet' })
+
+        return
+      }
+
+      const consumer = socket.data.consumers.get(consumerId)
+
+      if (!consumer) {
+        consola.error(`consumer with id "${consumerId}" not found`)
+        cb({ error: `consumer with id "${consumerId}" not found` })
+
+        return
+      }
+
+      await consumer.resume()
+
+      cb({ ok: true })
+    })
+
+    socket.on('updateClient', async (updatedClient, cb) => {
+      if (typeof updatedClient.inputMuted === 'boolean') {
+        socket.data.inputMuted = updatedClient.inputMuted
+      }
+
+      if (typeof updatedClient.outputMuted === 'boolean') {
+        socket.data.outputMuted = updatedClient.outputMuted
+      }
+
+      cb(socketToClient(socket))
+
+      namespace.emit('clientChanged', socket.id, socketToClient(socket))
+    })
+
+    socket.on('disconnect', () => {
+      consola.info('Client disconnected:', socket.id)
+
+      if (socket.data.joined) {
+        socket.broadcast.emit('peerClosed', socket.id)
+      }
+
+      for (const transport of socket.data.transports.values()) {
+        transport.close()
+      }
+    })
+  })
+
+  async function getJoinedSockets(excludeId?: string) {
+    const sockets = await namespace.fetchSockets()
+
+    return sockets.filter(socket => socket.data.joined && (excludeId ? excludeId !== socket.id : true))
+  }
+
+  async function createConsumer(
+    consumerSocket: SomeSocket,
+    producerSocket: SomeSocket,
+    producer: types.Producer,
+  ) {
+    if (
+      !consumerSocket.data.rtpCapabilities
+      || !router.canConsume(
+        {
+          producerId: producer.id,
+          rtpCapabilities: consumerSocket.data.rtpCapabilities,
+        },
+      )
+    ) {
+      return
+    }
+
+    const transport = Array.from(consumerSocket.data.transports.values())
+      .find(t => t.appData.consuming)
+
+    if (!transport) {
+      consola.error('createConsumer() | Transport for consuming not found')
+
+      return
+    }
+
+    let consumer: types.Consumer
+
+    try {
+      consumer = await transport.consume(
+        {
+          producerId: producer.id,
+          rtpCapabilities: consumerSocket.data.rtpCapabilities,
+          // Enable NACK for OPUS.
+          enableRtx: true,
+          paused: true,
+          ignoreDtx: true,
+        },
+      )
+    }
+    catch (error) {
+      consola.error('_createConsumer() | transport.consume():%o', error)
+
+      return
+    }
+
+    consumerSocket.data.consumers.set(consumer.id, consumer)
+
+    consumer.on('transportclose', () => {
+      consumerSocket.data.consumers.delete(consumer.id)
+    })
+
+    consumer.on('producerclose', () => {
+      consumerSocket.data.consumers.delete(consumer.id)
+
+      consumerSocket.emit('consumerClosed', { consumerId: consumer.id })
+    })
+
+    consumer.on('producerpause', () => {
+      consumerSocket.emit('consumerPaused', { consumerId: consumer.id })
+    })
+
+    consumer.on('producerresume', () => {
+      consumerSocket.emit('consumerResumed', { consumerId: consumer.id })
+    })
+
+    consumer.on('score', (score: types.ConsumerScore) => {
+      consumerSocket.emit('consumerScore', { consumerId: consumer.id, score })
+    })
+
+    try {
+      await consumerSocket.emitWithAck(
+        'newConsumer',
+        {
+          socketId: producerSocket.id,
+          producerId: producer.id,
+          id: consumer.id,
+          kind: consumer.kind,
+          rtpParameters: consumer.rtpParameters,
+          type: consumer.type,
+          appData: producer.appData,
+          producerPaused: consumer.producerPaused,
+        },
+      )
+
+      await consumer.resume()
+
+      consumerSocket.emit(
+        'consumerScore',
+        {
+          consumerId: consumer.id,
+          score: consumer.score,
+        },
+      )
+    }
+    catch (error) {
+      consola.error('_createConsumer() | failed:%o', error)
+    }
+  }
+}

server/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "ESNext",
+    "moduleResolution": "nodenext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true
+  }
+}

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,
+  }
+}

yarn.lock

@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-