cringe sfx

Reviewed-on: #9

.gitea/workflows/deploy-client.yml

@@ -1,16 +1,55 @@
 name: Deploy
 
-# on:
-#   push:
-# tags:
-#   - "v[0-9]+.[0-9]+.[0-9]+"
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "v[0-9]+.[0-9]+.[0-9]+"
 
 # paths:
 #   - ".gitea/workflows/deploy-client.yml"
 #   - "client/**"
 
 jobs:
-  publish-windows:
+#  publish-windows:
+#    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
+
+   publish-web:
      runs-on: ubuntu-latest
 
      steps:
@@ -26,57 +65,19 @@ jobs:
            persist-credentials: false
 
        - name: Build
+         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: Stop old container
+         run: docker rm -f chad-client || true
+
+       - name: Run
          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
-
-  # publish-web:
-  #   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 -f ./client/Dockerfile.web ./client --build-arg COMMIT_SHA=${{ gitea.sha }} --build-arg API_BASE_URL=${{ vars.API_BASE_URL }}
-
-  #     - name: Stop old container
-  #       run: docker rm -f chad-client || true
-
-  #     - name: Run
-  #       run: |
-  #         docker run -d \
-  #           --name chad-client \
-  #           --network traefik \
-  #           --label "traefik.enable=true" \
-  #           --label "traefik.http.routers.chad-client.rule=Host(\`chad.koptilnya.xyz\`)" \
-  #           --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
+           docker run -d \
+             --name chad-client \
+             --network traefik \
+             --label "traefik.enable=true" \
+             --label "traefik.http.routers.chad-client.rule=Host(\`chad.koptilnya.xyz\`)" \
+             --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

client/Dockerfile.web

@@ -2,12 +2,10 @@ 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

client/Dockerfile.windows

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

client/app/app.vue

@@ -7,7 +7,5 @@
 </template>
 
 <script setup lang="ts">
-console.group('Build Info')
-console.log(`COMMIT_SHA: ${__COMMIT_SHA__}`)
-console.groupEnd()
+const route = useRoute()
 </script>

client/app/assets/styles/main.scss

@@ -6,8 +6,42 @@ body {
 
   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/components.d.ts

@@ -13,16 +13,22 @@ declare module 'vue' {
     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']
-    PrimeMenu: typeof import('primevue/menu')['default']
-    PrimePanel: typeof import('primevue/panel')['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']
+    PrimeTag: typeof import('primevue/tag')['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/AppHeader.vue

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

client/app/components/ClientRow.vue

@@ -1,106 +1,142 @@
 <template>
-  <div class="py-3">
-    <div class="flex items-center gap-3 ">
+  <div
+    class="overflow-hidden rounded-xl transition-[background-color]"
+    :class="{
+      'hover:bg-surface-800 cursor-pointer': !isMe,
+      'bg-surface-800': expanded,
+    }"
+  >
+    <div class="p-3" @click="toggleExpand">
+      <div class="flex items-center gap-3">
         <PrimeAvatar
-        icon="pi pi-user"
           size="small"
-      />
+          class="shrink-0"
+          :class="{
+            'outline-1 outline-primary outline-offset-2': speaking,
+          }"
+        >
+          <template #icon>
+            <User :size="20" />
+          </template>
+        </PrimeAvatar>
 
-      <div class="flex-1">
-        <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
-          {{ client.displayName }}
+        <p class="flex-1 text-sm leading-5 font-medium text-color truncate w-0">
+          {{ client.displayName || client.username }}
+        </p>
+
+        <Component :is="expanded ? ChevronUp : ChevronDown" v-if="!isMe" :size="20" class="text-muted-color" />
       </div>
-        <div v-if="client.username !== client.displayName" class="mt-1 text-xs leading-5 text-muted-color">
-          {{ client.username }}
+
+      <div v-if="hasBadges" class="flex justify-end align-center gap-1 mt-2">
+        <PrimeBadge v-if="streaming" 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>
     </div>
 
-      <PrimeBadge v-if="audioConsumerPaused" severity="info" value="Muted" />
-      <PrimeBadge v-if="isMe" severity="secondary" value="You" />
-
-      <template v-if="!isMe">
-        <PrimeButton icon="pi pi-ellipsis-h" text size="small" severity="contrast" @click="menuRef?.toggle" />
-
-        <PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
-          <template #start>
-            <div class="px-4 py-3">
-              <div class="flex justify-between">
+    <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" class="mt-4" :min="0" :max="1000" :step="volume < 200 ? 5 : 25" />
+          <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>
-          </template>
-        </PrimeMenu>
-      </template>
         </div>
       </div>
+    </CollapseTransition>
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { ChadClient } from '#shared/types'
-import type { MenuItem } from 'primevue/menuitem'
+import { ChevronDown, ChevronUp, User } from 'lucide-vue-next'
+import CollapseTransition from '~/components/CollapseTransition.vue'
 
 const props = defineProps<{
   client: ChadClient
 }>()
 
-const { inputMuted, outputMuted } = useApp()
-const { getClientConsumers } = useMediasoup()
+const { outputMuted } = useApp()
+const { consumers: allConsumers, micProducer } = useMediasoup()
 const { me } = useClients()
+const { show } = useFullscreenVideo()
 
-const menuRef = useTemplateRef<HTMLAudioElement>('menu')
+const expanded = ref(false)
 
-const volume = ref(100)
-
-const menuItems: MenuItem[] = [
-  {
-    label: 'Mute',
-    icon: 'pi pi-headphones',
-  },
-  {
-    label: 'DM',
-    icon: 'pi pi-comment',
-    disabled: true,
-  },
-]
+const {
+  volume,
+  premuted,
+  speaking,
+  audioConsumers,
+  videoConsumers,
+  shareConsumers,
+  streaming,
+} = useClient(toRef(() => props.client.socketId))
 
 const isMe = computed(() => {
   return me.value && props.client.userId === me.value.userId
 })
 
 const audioConsumer = computed(() => {
-  if (isMe.value)
-    return undefined
-
-  const consumers = getClientConsumers(props.client.socketId)
-
-  return consumers.find(consumer => consumer.track.kind === 'audio')
-})
-
-const audioConsumerPaused = computed(() => {
-  if (isMe.value)
-    return false
-
-  const consumers = getClientConsumers(props.client.socketId)
-
-  return consumers.find(consumer => consumer.track.kind === 'audio')?.paused
+  return audioConsumers.value[0]
 })
 
 const audioTrack = computed(() => {
-  return audioConsumer.value?.track
+  return audioConsumer.value?.raw.track
+})
+
+const audioConsumerPaused = computed(() => {
+  if (Object.keys(allConsumers.value).length === 0)
+    return false
+
+  return audioConsumer.value?.paused ?? false
+})
+
+const inputMuted = computed(() => {
+  if (isMe.value)
+    return micProducer.value?.paused ?? false
+
+  return premuted.value || audioConsumerPaused.value
+})
+
+const hasBadges = computed(() => {
+  return streaming.value
+    || premuted.value
+    || inputMuted.value
+    || props.client.outputMuted
+    || isMe.value
 })
 
 const { setGain } = useAudioContext(audioTrack)
 
-watch(volume, (volume) => {
-  if (outputMuted.value)
+watchEffect(() => {
+  setGain((outputMuted.value || premuted.value) ? 0 : (volume.value * 0.01))
+})
+
+function toggleExpand() {
+  if (isMe.value)
     return
 
-  setGain(volume * 0.01)
-})
+  expanded.value = !expanded.value
+}
 
-watch(outputMuted, (outputMuted) => {
-  setGain(outputMuted ? 0 : (volume.value * 0.01))
-})
+function watchStream() {
+  if (!streaming.value)
+    return
+
+  const consumer = [...videoConsumers.value, ...shareConsumers.value][0]!
+
+  show(new MediaStream([consumer.raw.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/components/Debug/Consumer.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="text-sm overflow-x-auto">
+    <p class="text-muted-color">
+      {{ consumer.id }}
+    </p>
+
+    <p>paused: {{ consumer.paused }}</p>
+
+    <p v-for="[key, value] in appData" :key="key">
+      {{ key }}: {{ value }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Consumer } from 'mediasoup-client/types'
+
+const props = defineProps<{
+  consumer: Consumer
+}>()
+
+const appData = computed(() => {
+  return Object.entries(props.consumer.appData)
+})
+</script>

client/app/components/FullscreenGallery.vue

@@ -0,0 +1,20 @@
+<template>
+  <Teleport to="body">
+    <div ref="root" class="fullscreen-gallery">
+      {{ videoConsumers.length + shareConsumers.length }}
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useFullscreen } from '@vueuse/core'
+
+const rootRef = useTemplateRef('root')
+
+const { enter } = useFullscreen(rootRef)
+const { videoConsumers, shareConsumers } = useMediasoup()
+
+onMounted(() => {
+  // enter()
+})
+</script>

client/app/components/FullscreenGallery/Card.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="fullscreen-gallery-card">
+    sasd
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style>
+
+</style>

client/app/components/Gallery/Card.vue

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

client/app/composables/use-app.ts

@@ -6,76 +6,139 @@ import { useClients } from '~/composables/use-clients'
 export const useApp = createGlobalState(() => {
   const { clients } = useClients()
   const mediasoup = useMediasoup()
+  const signaling = useSignaling()
   const toast = useToast()
+  const sfx = useSfx()
 
-  const inputMuted = ref(false)
-  const outputMuted = ref(false)
+  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 isTauri = computed(() => '__TAURI_INTERNALS__' in window)
+  const outputMuted = ref(false)
 
-  const version = computedAsync(() => isTauri.value ? getVersion() : 'web', '-')
+  const videoEnabled = computed(() => {
+    return !!mediasoup.videoProducer.value
+  })
 
-  function muteInput() {
-    inputMuted.value = true
+  const sharingEnabled = computed(() => {
+    return !!mediasoup.shareProducer.value
+  })
+
+  const somebodyStreamingVideo = computed(() => {
+    return !!mediasoup.videoProducer.value
+      || !!mediasoup.shareProducer.value
+      || mediasoup.videoConsumers.value.length > 0
+      || mediasoup.shareConsumers.value.length > 0
+  })
+
+  async function muteInput() {
+    if (inputMuted.value || !mediasoup.micProducer.value)
+      return
+
+    await mediasoup.pauseProducer(mediasoup.micProducer.value)
+
+    sfx.play('/sfx/off_micr.ogg').then()
+    toast.add({ severity: 'info', summary: 'Microphone muted', closable: false, life: 1000 })
   }
 
-  function unmuteInput() {
-    inputMuted.value = false
-  }
+  async function unmuteInput() {
+    if (!inputMuted.value || !mediasoup.micProducer.value)
+      return
 
-  function toggleInput() {
-    if (inputMuted.value)
-      unmuteInput()
-    else
-      muteInput()
-  }
-
-  function muteOutput() {
-    outputMuted.value = true
-  }
-
-  function unmuteOutput() {
-    outputMuted.value = false
-  }
-
-  function toggleOutput() {
-    if (outputMuted.value)
-      unmuteOutput()
-    else
-      muteOutput()
-  }
-
-  watch(inputMuted, async (inputMuted) => {
-    if (inputMuted) {
-      await mediasoup.pauseProducer('microphone')
-    }
-    else {
     if (outputMuted.value) {
-        outputMuted.value = false
-      }
-      await mediasoup.resumeProducer('microphone')
+      await unmuteOutput()
     }
 
-    const toastText = inputMuted ? 'Microphone muted' : 'Microphone activated'
-    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
+    await mediasoup.resumeProducer(mediasoup.micProducer.value)
+
+    sfx.play('/sfx/on_micr.ogg').then()
+    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,
     })
 
-  watch(outputMuted, (outputMuted) => {
-    if (outputMuted) {
-      previousInputMuted.value = inputMuted.value
-      muteInput()
+    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 toggleVideo() {
+    if (!mediasoup.videoProducer.value) {
+      await mediasoup.enableVideo()
+      await sfx.play('/sfx/on_trans.ogg', 0.03)
     }
     else {
-      inputMuted.value = previousInputMuted.value
+      await mediasoup.disableProducer(mediasoup.videoProducer.value)
+      await sfx.play('/sfx/off_trans.ogg', 0.03)
+    }
   }
 
-    const toastText = outputMuted ? 'Sound muted' : 'Sound resumed'
-    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
-  })
+  async function toggleShare() {
+    if (!mediasoup.shareProducer.value) {
+      await mediasoup.enableShare()
+      await sfx.play('/sfx/on_trans.ogg', 0.03)
+    }
+    else {
+      await mediasoup.disableProducer(mediasoup.shareProducer.value)
+      await sfx.play('/sfx/off_trans.ogg', 0.03)
+    }
+  }
 
   return {
+    ready,
     clients,
     inputMuted,
     muteInput,
@@ -85,7 +148,13 @@ export const useApp = createGlobalState(() => {
     muteOutput,
     unmuteOutput,
     toggleOutput,
+    toggleVideo,
     version,
     isTauri,
+    commitSha,
+    toggleShare,
+    videoEnabled,
+    sharingEnabled,
+    somebodyStreamingVideo,
   }
 })

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

@@ -4,13 +4,12 @@ export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undef
   const ctx = new (window.AudioContext || window.webkitAudioContext)()
 
   const stream = new MediaStream()
+  const audioEl = new Audio()
 
   const sourceNode = shallowRef<MediaStreamAudioSourceNode>()
   const gainNode = ctx.createGain()
 
-  let hackExecuted = false
-
-  watch(audioTrack, (track, prevTrack) => {
+  watch(audioTrack, async (track, prevTrack) => {
     if (prevTrack)
       stream.removeTrack(prevTrack)
 
@@ -19,16 +18,14 @@ export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undef
 
     stream.addTrack(track)
 
-    if (!hackExecuted) {
-      const audioEl = new Audio()
+    if (!audioEl.srcObject) {
       audioEl.srcObject = stream
       audioEl.muted = true
-      hackExecuted = true
     }
 
     sourceNode.value = ctx.createMediaStreamSource(stream)
 
-    connect()
+    await connect()
   }, { immediate: true })
 
   useEventListener(document, 'click', async () => {
@@ -36,10 +33,16 @@ export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undef
       await ctx.resume()
     }
 
-    connect()
+    await connect()
   }, { once: true })
 
-  function connect() {
+  onScopeDispose(() => {
+    audioEl.pause()
+    audioEl.srcObject = null
+    ctx.close()
+  })
+
+  async function connect() {
     if (!sourceNode.value || ctx.state === 'suspended')
       return
 

client/app/composables/use-client.ts

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

client/app/composables/use-devices.ts

@@ -0,0 +1,37 @@
+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 },
+      },
+    })
+  }
+
+  ;(async () => {
+    if (permissionGranted.value)
+      return
+
+    await ensurePermissions()
+  })()
+
+  return {
+    ensurePermissions,
+    permissionGranted,
+    videoInputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(videoInputs.value))),
+    audioInputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(audioInputs.value))),
+    audioOutputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(audioOutputs.value))),
+    getShareStream,
+  }
+})

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

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

client/app/composables/use-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,10 +1,18 @@
-import type { ChadClient } from '#shared/types'
+import type { ChadClient, Consumer, Producer } from '#shared/types'
+import type { MediaKind, ProducerOptions } from 'mediasoup-client/types'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
+import { shallowRef } from 'vue'
+import { useDevices } from '~/composables/use-devices'
 import { usePreferences } from '~/composables/use-preferences'
 import { useSignaling } from '~/composables/use-signaling'
 
-type ProducerType = 'microphone' | 'camera' | 'share'
+type ProducerType = 'microphone' | 'video' | 'share'
+
+interface SpeakingClient {
+  clientId: ChadClient['socketId']
+  volume: number
+}
 
 const ICE_SERVERS: RTCIceServer[] = [
   { urls: 'stun:stun.l.google.com:19302' },
@@ -21,23 +29,54 @@ const ICE_SERVERS: RTCIceServer[] = [
 
 export const useMediasoup = createSharedComposable(() => {
   const toast = useToast()
+  const sfx = useSfx()
 
   const signaling = useSignaling()
   const { addClient, removeClient } = useClients()
   const preferences = usePreferences()
-  const { me } = useAuth()
+  const { getShareStream } = useDevices()
 
   const device = shallowRef<mediasoupClient.Device>()
   const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
   const sendTransport = shallowRef<mediasoupClient.types.Transport>()
   const recvTransport = shallowRef<mediasoupClient.types.Transport>()
 
-  const micProducer = shallowRef<mediasoupClient.types.Producer>()
-  const cameraProducer = shallowRef<mediasoupClient.types.Producer>()
-  const shareProducer = shallowRef<mediasoupClient.types.Producer>()
+  const consumers = ref<Record<Consumer['id'], Consumer>>({})
+  const producers = ref<Record<Producer['id'], Producer>>({})
 
-  const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
-  const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(new Map())
+  const consumersArray = computed(() => {
+    return Object.values(consumers.value)
+  })
+
+  const audioConsumers = computed(() => {
+    return consumersArray.value.filter(consumer => consumer.raw.kind === 'audio')
+  })
+
+  const videoConsumers = computed(() => {
+    return consumersArray.value.filter(consumer => consumer.raw.kind === 'video' && consumer.appData.source !== 'share')
+  })
+
+  const shareConsumers = computed(() => {
+    return consumersArray.value.filter(consumer => consumer.raw.kind === 'video' && consumer.appData.source === 'share')
+  })
+
+  const producersArray = computed(() => {
+    return Object.values(producers.value)
+  })
+
+  const micProducer = computed(() => {
+    return producersArray.value.find(producer => producer.raw.kind === 'audio' && producer.raw.appData.source === 'mic-video')
+  })
+
+  const videoProducer = computed(() => {
+    return producersArray.value.find(producer => producer.raw.kind === 'video' && producer.raw.appData.source !== 'share')
+  })
+
+  const shareProducer = computed(() => {
+    return producersArray.value.find(producer => producer.raw.kind === 'video' && producer.raw.appData.source === 'share')
+  })
+
+  const speakingClients = shallowRef<SpeakingClient[]>([])
 
   watch(signaling.socket, (socket) => {
     if (!socket)
@@ -137,6 +176,7 @@ export const useMediasoup = createSharedComposable(() => {
     })
 
     socket.on('newPeer', (client) => {
+      sfx.playRandomConnectionSound(client.socketId).then()
       addClient(client)
     })
 
@@ -158,20 +198,38 @@ export const useMediasoup = createSharedComposable(() => {
           producerId,
           kind,
           rtpParameters,
-          streamId: `${socketId}-${appData.share ? 'share' : 'mic-webcam'}`,
+          streamId: `${socketId}-${appData.source || 'stream'}`,
           appData: { ...appData, socketId },
         })
 
+        if (kind === 'video')
+          sfx.play('/sfx/on_trans.ogg', 0.03).then()
+
         if (producerPaused)
           consumer.pause()
 
-        consumer.on('transportclose', () => {
-          if (consumers.value.delete(consumer.id))
-            triggerRef(consumers)
+        consumers.value[consumer.id] = {
+          id: consumer.id,
+          paused: consumer.paused,
+          appData: consumer.appData,
+          raw: markRaw(consumer),
+        }
+
+        consumer.observer.on('resume', () => {
+          consumers.value[consumer.id]!.paused = false
         })
 
-        consumers.value.set(consumer.id, consumer)
-        triggerRef(consumers)
+        consumer.observer.on('pause', () => {
+          consumers.value[consumer.id]!.paused = true
+        })
+
+        consumer.observer.on('close', () => {
+          delete consumers.value[consumer.id]
+        })
+
+        consumer.on('trackended', () => {
+          consumer.close()
+        })
 
         cb()
       },
@@ -182,11 +240,37 @@ export const useMediasoup = createSharedComposable(() => {
       async (
         { consumerId },
       ) => {
-        if (consumers.value.delete(consumerId))
-          triggerRef(consumers)
+        const consumer = consumers.value[consumerId]
+
+        if (!consumer)
+          return
+
+        consumer.raw.close()
       },
     )
 
+    socket.on('consumerPaused', ({ consumerId }) => {
+      const consumer = consumers.value[consumerId]
+
+      if (!consumer)
+        return
+
+      consumer.raw.pause()
+    })
+
+    socket.on('consumerResumed', ({ consumerId }) => {
+      const consumer = consumers.value[consumerId]
+
+      if (!consumer)
+        return
+
+      consumer.raw.resume()
+    })
+
+    socket.on('speakingPeers', (value: SpeakingClient[]) => {
+      speakingClients.value = value
+    })
+
     socket.on('disconnect', () => {
       device.value = undefined
       rtpCapabilities.value = undefined
@@ -197,180 +281,237 @@ export const useMediasoup = createSharedComposable(() => {
       recvTransport.value?.close()
       recvTransport.value = undefined
 
-      micProducer.value = undefined
-      cameraProducer.value = undefined
-      shareProducer.value = undefined
-
-      consumers.value = new Map()
-      producers.value = new Map()
-    })
-
-    socket.on('consumerPaused', ({ consumerId }) => {
-      const consumer = consumers.value.get(consumerId)
-
-      if (!consumer)
-        return
-
-      consumer.pause()
-
-      console.log(consumerId)
-
-      triggerRef(consumers)
-    })
-
-    socket.on('consumerResumed', ({ consumerId }) => {
-      const consumer = consumers.value.get(consumerId)
-
-      if (!consumer)
-        return
-
-      consumer.resume()
-
-      triggerRef(consumers)
+      consumers.value = {}
+      producers.value = {}
     })
   }, { immediate: true, flush: 'sync' })
 
-  function getClientConsumers(socketId: ChadClient['socketId']) {
-    return consumers.value.values().filter(consumer => consumer.appData.socketId === socketId)
+  async function createProducer(options: ProducerOptions) {
+    if (!device.value || !sendTransport.value)
+      return
+
+    if (!options.track)
+      return
+
+    if (!device.value.canProduce(options.track.kind as MediaKind))
+      return
+
+    const producer = await sendTransport.value.produce({ disableTrackOnPause: true, ...options })
+
+    producers.value[producer.id] = {
+      id: producer.id,
+      paused: producer.paused,
+      appData: producer.appData,
+      raw: markRaw(producer),
+    }
+
+    producer.observer.on('pause', () => {
+      producers.value[producer.id]!.paused = true
+    })
+
+    producer.observer.on('resume', () => {
+      producers.value[producer.id]!.paused = false
+    })
+
+    producer.observer.on('close', () => {
+      delete producers.value[producer.id]
+    })
+
+    producer.on('trackended', () => {
+      disableProducer(producers.value[producer.id]!)
+    })
+  }
+
+  async function disableProducer(producer: Producer) {
+    if (!signaling.socket.value)
+      return
+
+    try {
+      producer.raw.close()
+
+      await signaling.socket.value.emitWithAck('closeProducer', {
+        producerId: producer.id,
+      })
+    }
+    catch {
+    }
+    finally {
+      delete producers.value[producer.id]
+    }
   }
 
   async function enableMic() {
     if (micProducer.value)
       return
 
-    if (!device.value || !sendTransport.value)
-      return
-
-    if (!device.value.canProduce('audio'))
-      return
-
     const stream = await navigator.mediaDevices.getUserMedia({
       audio: {
-        autoGainControl: false,
-        noiseSuppression: true,
-        echoCancellation: false,
-        channelCount: 2,
+        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
 
-    micProducer.value = await sendTransport.value.produce({
+    await createProducer({
       track,
+      streamId: 'mic-video',
       codecOptions: {
         opusStereo: true,
         opusDtx: true, // Меньше пакетов летит когда тишина
         opusFec: false, // Фиксит пакет лос
       },
-    })
-
-    producers.value.set(micProducer.value.id, micProducer.value)
-    triggerRef(producers)
-
-    micProducer.value.on('transportclose', () => {
-      micProducer.value = undefined
-    })
-
-    micProducer.value.on('trackended', () => {
-      disableMic()
+      appData: {
+        source: 'mic-video',
+      },
     })
   }
 
   async function disableMic() {
-    if (!signaling.socket.value || !micProducer.value)
+    if (!micProducer.value)
       return
 
-    producers.value.delete(micProducer.value.id)
-    triggerRef(producers)
+    await disableProducer(micProducer.value)
+  }
 
-    try {
-      micProducer.value.close()
+  async function enableVideo() {
+    if (videoProducer.value)
+      return
 
-      await signaling.socket.value.emitWithAck('closeProducer', {
-        producerId: micProducer.value.id,
+    if (!device.value)
+      return
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: {
+        deviceId: { exact: preferences.videoDeviceId.value },
+        width: { ideal: 1920 },
+        height: { ideal: 1080 },
+        frameRate: { ideal: 60 },
+      },
+    })
+
+    const track = stream.getVideoTracks()[0]
+
+    if (!track)
+      return
+
+    await createProducer({
+      track,
+      streamId: 'mic-video',
+      // codec: device.value.rtpCapabilities.codecs?.find(
+      //   c => c.mimeType.toLowerCase() === 'video/AV1',
+      // ),
+      // codecOptions: {
+      //   videoGoogleStartBitrate: 1000,
+      // },
+      appData: {
+        source: 'mic-video',
+      },
     })
   }
-    catch {
-    }
 
-    micProducer.value = undefined
-  }
-
-  async function pauseProducer(type: ProducerType) {
-    if (!signaling.socket.value)
+  async function enableShare() {
+    if (shareProducer.value)
       return
 
-    const producer = getProducerByType(type)
+    if (!device.value)
+      return
 
-    if (!producer)
+    const stream = await getShareStream(preferences.shareFps.value)
+
+    const track = stream.getVideoTracks()[0]
+
+    if (!track)
+      return
+
+    await createProducer({
+      track,
+      streamId: 'share',
+      codec: device.value.rtpCapabilities.codecs?.find(
+        c => c.mimeType.toLowerCase() === 'video/AV1',
+      ),
+      codecOptions: {
+        videoGoogleStartBitrate: 1000,
+      },
+      zeroRtpOnPause: true,
+      appData: {
+        source: 'share',
+      },
+    })
+  }
+
+  async function pauseProducer(producer: Producer) {
+    if (!signaling.socket.value)
       return
 
     if (producer.paused)
       return
 
     try {
-      producer.pause()
+      producer.raw.pause()
 
       await signaling.socket.value.emitWithAck('pauseProducer', {
         producerId: producer.id,
       })
     }
     catch {
-      producer.resume()
+      producer.raw.resume()
     }
   }
 
-  async function resumeProducer(type: ProducerType) {
+  async function resumeProducer(producer: Producer) {
     if (!signaling.socket.value)
       return
 
-    const producer = getProducerByType(type)
-
-    if (!producer)
-      return
-
     try {
-      producer.resume()
+      producer.raw.resume()
 
       await signaling.socket.value.emitWithAck('resumeProducer', {
         producerId: producer.id,
       })
     }
     catch {
-      producer.pause()
+      producer.raw.pause()
     }
   }
 
-  async function init() {
-    signaling.connect()
-  }
+  watch([
+    preferences.inputDeviceId,
+    preferences.echoCancellation,
+    preferences.autoGainControl,
+    preferences.noiseSuppression,
+  ], async ([inputDeviceId]) => {
+    await disableMic()
 
-  function getProducerByType(type: ProducerType) {
-    switch (type) {
-      case 'microphone':
-        return micProducer.value
-      case 'camera':
-        return cameraProducer.value
-      case 'share':
-        return shareProducer.value
-    }
-  }
+    if (!inputDeviceId)
+      return
+
+    await enableMic()
+  })
 
   return {
-    init,
     consumers,
+    audioConsumers,
+    videoConsumers,
+    shareConsumers,
     producers,
+    speakingClients,
     sendTransport,
     recvTransport,
     rtpCapabilities,
     device,
     micProducer,
-    cameraProducer,
+    videoProducer,
     shareProducer,
-    getClientConsumers,
     pauseProducer,
     resumeProducer,
+    enableVideo,
+    enableShare,
+    disableProducer,
   }
 })

client/app/composables/use-preferences.ts

@@ -1,22 +1,75 @@
-import { createGlobalState, useDevicesList } from '@vueuse/core'
+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 inputDeviceId = shallowRef<MediaDeviceInfo['deviceId']>()
-  const outputDeviceId = shallowRef<MediaDeviceInfo['deviceId']>()
+  const { videoInputs, audioInputs, audioOutputs } = useDevices()
 
-  const {
-    ensurePermissions,
-    permissionGranted,
-    videoInputs,
-    audioInputs,
-    audioOutputs,
-  } = useDevicesList()
+  const synced = ref(false)
+
+  const inputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('INPUT_DEVICE_ID', 'default')
+  const outputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('OUTPUT_DEVICE_ID', 'default')
+  const videoDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('VIDEO_DEVICE_ID', 'default')
+
+  const autoGainControl = useLocalStorage('AUTO_GAIN_CONTROL', false)
+  const noiseSuppression = useLocalStorage('NOISE_SUPPRESSION', true)
+  const echoCancellation = useLocalStorage('ECHO_CANCELLATION', true)
+
+  const shareFps = useLocalStorage('SHARE_FPS', 30)
+
+  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)
+  })
+
+  const videoDeviceExist = computed(() => {
+    return videoInputs.value.some(device => device.deviceId === videoDeviceId.value)
+  })
+
+  watchDebounced(
+    [toggleInputHotkey, toggleOutputHotkey],
+    async ([toggleInputHotkey, toggleOutputHotkey]) => {
+      try {
+        await chadApi(
+          '/preferences',
+          {
+            method: 'PATCH',
+            body: {
+              toggleInputHotkey,
+              toggleOutputHotkey,
+            },
+          },
+        )
+      }
+      catch {}
+    },
+    { debounce: 1000 },
+  )
 
   return {
+    synced,
     inputDeviceId,
     outputDeviceId,
-    videoInputs,
-    audioInputs,
-    audioOutputs,
+    videoDeviceId,
+    autoGainControl,
+    noiseSuppression,
+    echoCancellation,
+    shareFps,
+    toggleInputHotkey,
+    toggleOutputHotkey,
+    inputDeviceExist,
+    outputDeviceExist,
+    videoDeviceExist,
   }
 })

client/app/composables/use-sfx.ts

@@ -0,0 +1,43 @@
+import { createSharedComposable } from '@vueuse/core'
+import { Howl, Howler } from 'howler'
+
+const CONNECTION_SOUNDS = Object.keys(import.meta.glob('@/../public/sfx/connection/*.ogg')).map(path => path.replace('../public', ''))
+
+console.log('CONNECTION_SOUNDS', CONNECTION_SOUNDS)
+
+function hashStringToNumber(str: string, cap: number): number {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash * 31 + str.charCodeAt(i)) | 0
+  }
+  return Math.abs(hash) % cap
+}
+
+export const useSfx = createSharedComposable(() => {
+  async function play(src: string, volume = 0.2): Promise<void> {
+    Howler.stop()
+
+    return new Promise((resolve) => {
+      const howl = new Howl({
+        src,
+        autoplay: true,
+        loop: false,
+        volume,
+      })
+
+      howl.on('end', () => {
+        resolve()
+      })
+    })
+  }
+
+  async function playRandomConnectionSound(seed: string) {
+    await play('/sfx/on_trans.ogg', 0.03)
+    await play(CONNECTION_SOUNDS[hashStringToNumber(seed, CONNECTION_SOUNDS.length + 1)]!, 0.1)
+  }
+
+  return {
+    play,
+    playRandomConnectionSound,
+  }
+})

client/app/composables/use-signaling.ts

@@ -66,11 +66,9 @@ export const useSignaling = createSharedComposable(() => {
 
     const uri = host ? `${protocol}//${host}` : ``
 
-    // socket.value = io(`http://localhost:4000/webrtc`, {
-    //   path: `/chad/ws`,
-    //   transports: ['websocket'],
     socket.value = io(`${uri}/webrtc`, {
       path: `${pathname}/ws`,
+      transports: ['websocket'],
       withCredentials: true,
       auth: {
         userId: me.value.id,

client/app/composables/use-updater.ts

@@ -22,6 +22,7 @@ export const useUpdater = createGlobalState(() => {
 
   return {
     lastUpdate,
+    checking,
     checkForUpdates,
   }
 })

client/app/layouts/auth.vue

@@ -27,7 +27,6 @@ const options = computed(() => {
     {
       label: 'Register',
       routeName: 'Register',
-
     },
   ]
 })

client/app/layouts/default.vue

@@ -1,52 +1,155 @@
 <template>
-  <div class="grid grid-cols-2 h-screen">
-    <div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden">
-      <AppHeader title="Надарики">
-        <template #right>
-          <PrimeButtonGroup class="ml-auto">
-            <PrimeButton
-              icon="pi pi-microphone" size="large" :severity="inputMuted ? 'contrast' : 'secondary'"
-              :outlined="!inputMuted" @click="toggleInput"
-            />
-            <PrimeButton
-              icon="pi pi-headphones" size="large" :severity="outputMuted ? 'contrast' : 'secondary'"
-              :outlined="!outputMuted" @click="toggleOutput"
-            />
-          </PrimeButtonGroup>
-
-          <PrimeButton icon="pi pi-cog" size="large" :text="!inPreferences" :severity="inPreferences ? 'contrast' : 'secondary'" @click="onClickPreferences" />
-        </template>
-      </AppHeader>
-
-      <div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
-        <ClientRow v-for="client of clients" :key="client.id" :client="client" />
-      </div>
-    </div>
-
-    <div class="overflow-y-auto">
-      <slot />
-    </div>
-  </div>
-
-  <div class="fixed top-3 right-3 inline-flex items-center gap-3">
-    <PrimeBadge v-if="isTauri" class="opacity-50" severity="secondary" :value="version" size="small" />
+  <div class="grid grid-cols-[360px_1fr] gap-2 p-2 h-screen grid-rows-[auto_1fr] max-w-full">
+    <div
+      class="flex items-center justify-between gap-2 rounded-xl p-3 bg-surface-950"
+    >
+      <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="videoEnabled ? 'success' : undefined" outlined @click="toggleVideo">
+        <template #icon>
+          <Component :is="videoEnabled ? CameraOff : Camera" />
+        </template>
+      </PrimeButton>
+
+      <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"
+        option-label="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 overflow-hidden" 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 overflow-hidden" style="min-height: 0">
+      <div class="p-3">
+        <slot />
+      </div>
+    </PrimeScrollPanel>
+  </div>
+
+  <FullscreenGallery />
 </template>
 
 <script setup lang="ts">
-const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri } = useApp()
+import {
+  Camera,
+  CameraOff,
+  MessageCircle,
+  Mic,
+  MicOff,
+  ScreenShare,
+  ScreenShareOff,
+  Settings,
+  TvMinimalPlay,
+  UserPen,
+  Volume2,
+  VolumeOff,
+} from 'lucide-vue-next'
+
+const {
+  version,
+  clients,
+  inputMuted,
+  outputMuted,
+  videoEnabled,
+  sharingEnabled,
+  somebodyStreamingVideo,
+  toggleInput,
+  toggleOutput,
+  toggleVideo,
+  toggleShare,
+} = useApp()
 const { connect, connected } = useSignaling()
 
+interface Tab {
+  id: string
+  icon: Component
+  onClick: () => void | Promise<void>
+}
+
 const route = useRoute()
 
-const inPreferences = computed(() => {
-  return route.name === 'Preferences'
+const tabs = computed<Tab[]>(() => {
+  const result = []
+
+  if (somebodyStreamingVideo.value) {
+    result.push({
+      id: 'Gallery',
+      icon: TvMinimalPlay,
+      onClick: () => {
+        navigateTo({ name: 'Gallery' })
+      },
+    })
+  }
+
+  result.push(
+    {
+      id: 'Index',
+      icon: MessageCircle,
+      onClick: () => {
+        navigateTo({ name: 'Index' })
+      },
+    },
+    {
+      id: 'Profile',
+      icon: UserPen,
+      onClick: () => {
+        navigateTo({ name: 'Profile' })
+      },
+    },
+    {
+      id: 'Preferences',
+      icon: Settings,
+      onClick: () => {
+        navigateTo({ name: 'Preferences' })
+      },
+    },
+  )
+
+  return result
 })
 
-function onClickPreferences() {
-  navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
-}
+const activeTab = ref<Tab>(tabs.value.find(tab => tab.id === route.name) ?? tabs.value.find(tab => tab.id === 'Index')!)
+
+watch(activeTab, (activeTab) => {
+  activeTab.onClick()
+})
 
 connect()
 </script>

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

@@ -3,9 +3,12 @@ import chadApi from '#shared/chad-api'
 export default defineNuxtRouteMiddleware(async (to, from) => {
   const { me, setMe } = useAuth()
 
-  if (!me.value && !from?.name) {
+  if (!me.value) {
     try {
-      setMe(await chadApi('/me'))
+      setMe(await chadApi('/me', { method: 'GET' }))
+
+      if (to.meta.auth !== false)
+        return navigateTo({ name: 'Index' })
     }
     catch {
       if (to.meta.auth !== 'guest') {
@@ -15,6 +18,6 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   }
 
   if (me.value && to.meta.auth === 'guest') {
-    return navigateTo('/')
+    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/pages/gallery.vue

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

client/app/pages/index.vue

@@ -1,62 +1,17 @@
 <template>
-  <div class="flex flex-col gap-3 p-3 pt-12">
-    <PrimePanel header="Clients" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
-      <dl v-for="client in clients" :key="client.socketId" class="">
-        <div v-for="(value, key) in client" :key="key" class="py-2">
-          <dt class="font-bold">
-            {{ key }}
-          </dt>
-          <dd class="pl-8">
-            {{ value }}
-          </dd>
+  <div>
+    <div class="flex items-center justify-center">
+      <PrimeCard>
+        <template #content>
+          The chat is under development.
+        </template>
+      </PrimeCard>
     </div>
-      </dl>
-    </PrimePanel>
-
-    <PrimePanel header="Producers" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
-      <dl v-for="[_, producer] in Array.from(producers)" :key="producer.id" class="">
-        <div v-for="key in ['id', 'paused']" :key="key" class="py-2">
-          <dt class="font-bold">
-            {{ key }}
-          </dt>
-          <dd class="pl-8">
-            {{ producer[key] }}
-          </dd>
   </div>
-      </dl>
-    </PrimePanel>
-
-    <PrimePanel header="Consumers" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
-      <dl v-for="[_, consumer] in Array.from(consumers)" :key="consumer.id" class="">
-        <div v-for="key in ['id', 'paused']" :key="key" class="py-2">
-          <dt class="font-bold">
-            {{ key }}
-          </dt>
-          <dd class="pl-8">
-            {{ consumer[key] }}
-          </dd>
-        </div>
-      </dl>
-    </PrimePanel>
-  </div>
-
-<!--  <div class="flex items-center justify-center p-3"> -->
-<!--    <PrimeCard> -->
-<!--      <template #subtitle> -->
-<!--        Important information -->
-<!--      </template> -->
-
-<!--      <template #content> -->
-<!--        The chat is under development. -->
-<!--      </template> -->
-<!--    </PrimeCard> -->
-<!--  </div> -->
 </template>
 
 <script setup lang="ts">
-const { clients } = useClients()
-const { producers, consumers } = useMediasoup()
-
 definePageMeta({
+  name: 'Index',
 })
 </script>

client/app/pages/preferences.vue

@@ -1,95 +1,208 @@
 <template>
   <div>
-    <AppHeader title="Preferences" secondary />
+    <PrimeDivider align="left">
+      Audio
+    </PrimeDivider>
 
-    <form class="flex flex-col gap-3 p-3" @submit.prevent="save">
     <PrimeFloatLabel variant="on">
-        <PrimeInputText id="username" v-model="displayName" size="large" fluid autocomplete="off" />
-        <label for="username">Username</label>
+      <PrimeSelect
+        v-model="inputDeviceId"
+        :options="audioInputs"
+        option-label="label"
+        option-value="deviceId"
+        input-id="inputDevice"
+        placeholder="No input device"
+        fluid
+        :invalid="!inputDeviceExist"
+      />
+      <label for="inputDevice">Input device</label>
     </PrimeFloatLabel>
 
-      <PrimeButton label="Save" type="submit" :disabled="!valid" />
-    </form>
-
-    <div v-if="isTauri" class="p-3">
-      <PrimeButton label="Check for Updates" fluid severity="info" @click="onCheckForUpdates" />
+    <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="p-3">
-      <PrimeButton label="Logout" fluid severity="danger" @click="logout()" />
-    </div>
+    <div class="flex items-center gap-2 mt-3">
+      <PrimeToggleSwitch v-model="echoCancellation" input-id="echoCancellation" />
+      <label for="echoCancellation">Echo Cancellation</label>
     </div>
 
-  <PrimeToast position="bottom-center" group="updater">
-    <template #container="slotProps">
-      <div class="p-3">
-        <div class="font-medium text-lg mb-4">
-          {{ slotProps.message.detail }}
-        </div>
-        <div class="flex gap-3">
-          <PrimeButton size="small" label="Update now" @click="() => {}" />
-          <PrimeButton size="small" label="Later" severity="secondary" outlined @click="slotProps.closeCallback()" />
+    <div 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> -->
+
+    <PrimeDivider align="left">
+      Video
+    </PrimeDivider>
+
+    <PrimeFloatLabel variant="on">
+      <PrimeSelect
+        v-model="videoDeviceId"
+        :options="videoInputs"
+        option-label="label"
+        option-value="deviceId"
+        input-id="videoDevice"
+        placeholder="No video device"
+        fluid
+        :invalid="!videoDeviceExist"
+      />
+      <label for="inputDevice">Input device</label>
+    </PrimeFloatLabel>
+
+    <PrimeDivider align="left">
+      Screen sharing
+    </PrimeDivider>
+
+    <div>
+      <p class="text-sm mb-2 text-center">
+        FPS
+      </p>
+      <PrimeSelectButton
+        v-model="shareFps"
+        :options="shareFpsOptions"
+        fluid
+        size="small"
+        option-label="label"
+        option-value="value"
+      />
     </div>
+
+    <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>
-  </PrimeToast>
+
+    <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, videoInputs } = useDevices()
+const {
+  inputDeviceId,
+  outputDeviceId,
+  videoDeviceId,
+  autoGainControl,
+  noiseSuppression,
+  echoCancellation,
+  toggleInputHotkey,
+  toggleOutputHotkey,
+  inputDeviceExist,
+  outputDeviceExist,
+  videoDeviceExist,
+  shareFps,
+} = usePreferences()
 
-const { isTauri } = useApp()
-const { checkForUpdates } = useUpdater()
-const { me, setMe, logout } = useAuth()
-
-const signaling = useSignaling()
-const toast = useToast()
-
-const displayName = ref(me.value?.displayName || '')
-
-const valid = computed(() => {
-  if (!displayName.value || !me.value)
-    return false
-
-  if (displayName.value === me.value.displayName)
-    return false
-
-  return true
+const shareFpsOptions = [5, 30, 60].map((value) => {
+  return {
+    label: value.toString(),
+    value,
+  }
 })
 
-async function onCheckForUpdates() {
-  const update = await checkForUpdates()
+const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)
+const setupToggleOutputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleOutputHotkey)
 
-  toast.removeGroup('updater')
+function setupHotkey(event: KeyboardEvent, model: RemovableRef<string>) {
+  if (event.key === 'Tab' || event.key === 'Enter') {
+    return
+  }
 
-  if (!update) {
-    toast.add({ severity: 'success', summary: 'You are up to date', closable: false, life: 1000 })
+  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
   }
 
-  toast.add({
-    group: 'updater',
-    severity: 'info',
-    detail: `Version ${update?.version ?? '1.0.1'} is available!`,
-    closable: false,
-  })
+  if (!['Control', 'Shift', 'Alt'].includes(event.key)) {
+    hotkey.push(event.key.toUpperCase())
+  }
 
-  // asdasd
-}
+  if (modifierApplied && hotkey.length === 1) {
+    model.value = ''
 
-async function save() {
-  if (!valid.value)
     return
+  }
 
-  const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
-    displayName: displayName.value,
-  })
-
-  setMe({ ...me.value, displayName: updatedMe.displayName })
-
-  toast.add({ severity: 'success', summary: 'Saved', life: 1000, closable: false })
+  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/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/nuxt.config.ts

@@ -86,8 +86,8 @@ export default defineNuxtConfig({
       strictPort: true,
       proxy: {
         '/api': {
-          target: 'http://localhost:4000/chad',
-          // target: 'https://api.koptilnya.xyz/chad',
+          // target: 'http://localhost:4000/chad',
+          target: 'https://api.koptilnya.xyz/chad',
           ws: true,
           changeOrigin: true,
           rewrite: (path) => {
@@ -97,7 +97,7 @@ export default defineNuxtConfig({
       },
     },
     define: {
-      __API_BASE_URL__: JSON.stringify(import.meta.env.API_BASE_URL || '/api'),
+      __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'),
     },
   },

client/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
@@ -14,10 +14,14 @@
     "@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",
-    "mediasoup-client": "^3.16.7",
+    "hotkeys-js": "^4.0.0",
+    "howler": "^2.2.4",
+    "lucide-vue-next": "^0.562.0",
+    "mediasoup-client": "^3.18.6",
     "nuxt": "^4.2.2",
     "postcss": "^8.5.6",
     "primeicons": "^7.0.0",
@@ -34,6 +38,7 @@
     "@antfu/eslint-config": "^5.4.1",
     "@primevue/nuxt-module": "^4.4.0",
     "@tauri-apps/cli": "^2.8.4",
+    "@types/howler": "^2",
     "eslint": "^9.36.0",
     "eslint-plugin-format": "^1.0.2",
     "sass-embedded": "^1.93.2",