user preferences

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,25 @@ 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;
 }

client/app/components.d.ts

@@ -13,7 +13,9 @@ declare module 'vue' {
     PrimeButton: typeof import('primevue/button')['default']
     PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
     PrimeCard: typeof import('primevue/card')['default']
+    PrimeChip: typeof import('primevue/chip')['default']
     PrimeDivider: typeof import('primevue/divider')['default']
+    PrimeFieldset: typeof import('primevue/fieldset')['default']
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimeMenu: typeof import('primevue/menu')['default']

client/app/components/AppHeader.vue

@@ -1,30 +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 v-if="!!title">
-        {{ title }}
-      </h1>
-    </slot>
-
-    <slot name="right" />
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  title?: string
-  secondary?: boolean
-}>()
-
-defineSlots<{
-  left: () => unknown
-  right: () => unknown
-}>()
-</script>

client/app/components/ClientRow.vue

@@ -42,6 +42,7 @@
 <script setup lang="ts">
 import type { ChadClient } from '#shared/types'
 import type { MenuItem } from 'primevue/menuitem'
+import { useLocalStorage } from '@vueuse/core'
 import { User } from 'lucide-vue-next'
 
 const props = defineProps<{
@@ -52,9 +53,9 @@ const { outputMuted } = useApp()
 const { getClientConsumers, micProducer } = useMediasoup()
 const { me } = useClients()
 
-const menuRef = useTemplateRef<HTMLAudioElement>('menu')
+const volume = useLocalStorage<number>(computed(() => `CLIENT_VOLUME_${props.client.userId}`), 100, { writeDefaults: false })
 
-const volume = ref(100)
+const menuRef = useTemplateRef<HTMLAudioElement>('menu')
 
 const menuItems: MenuItem[] = [
   {
@@ -101,7 +102,7 @@ watch(volume, (volume) => {
   //   return
 
   setGain(volume * 0.01)
-})
+}, { immediate: true })
 
 // watch(outputMuted, (outputMuted) => {
 //   setGain(outputMuted ? 0 : (volume.value * 0.01))

client/app/composables/use-app.ts

@@ -8,6 +8,8 @@ export const useApp = createGlobalState(() => {
   const mediasoup = useMediasoup()
   const toast = useToast()
 
+  const ready = ref(false)
+
   const inputMuted = ref(false)
   const outputMuted = ref(false)
 
@@ -15,8 +17,38 @@ export const useApp = createGlobalState(() => {
 
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
 
+  const commitSha = __COMMIT_SHA__
+
   const version = computedAsync(() => isTauri.value ? getVersion() : 'web', '-')
 
+  watch(inputMuted, async (inputMuted) => {
+    if (inputMuted) {
+      await mediasoup.pauseProducer('microphone')
+    }
+    else {
+      if (outputMuted.value) {
+        outputMuted.value = false
+      }
+      await mediasoup.resumeProducer('microphone')
+    }
+
+    const toastText = inputMuted ? 'Microphone muted' : 'Microphone activated'
+    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
+  })
+
+  watch(outputMuted, (outputMuted) => {
+    if (outputMuted) {
+      previousInputMuted.value = inputMuted.value
+      muteInput()
+    }
+    else {
+      inputMuted.value = previousInputMuted.value
+    }
+
+    const toastText = outputMuted ? 'Sound muted' : 'Sound resumed'
+    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
+  })
+
   function muteInput() {
     inputMuted.value = true
   }
@@ -47,35 +79,8 @@ export const useApp = createGlobalState(() => {
       muteOutput()
   }
 
-  watch(inputMuted, async (inputMuted) => {
-    if (inputMuted) {
-      await mediasoup.pauseProducer('microphone')
-    }
-    else {
-      if (outputMuted.value) {
-        outputMuted.value = false
-      }
-      await mediasoup.resumeProducer('microphone')
-    }
-
-    const toastText = inputMuted ? 'Microphone muted' : 'Microphone activated'
-    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
-  })
-
-  watch(outputMuted, (outputMuted) => {
-    if (outputMuted) {
-      previousInputMuted.value = inputMuted.value
-      muteInput()
-    }
-    else {
-      inputMuted.value = previousInputMuted.value
-    }
-
-    const toastText = outputMuted ? 'Sound muted' : 'Sound resumed'
-    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
-  })
-
   return {
+    ready,
     clients,
     inputMuted,
     muteInput,
@@ -87,5 +92,6 @@ export const useApp = createGlobalState(() => {
     toggleOutput,
     version,
     isTauri,
+    commitSha,
   }
 })

client/app/composables/use-preferences.ts

@@ -1,6 +1,15 @@
-import { createGlobalState, useDevicesList, useLocalStorage } from '@vueuse/core'
+import chadApi from '#shared/chad-api'
+import { createGlobalState, useDevicesList, useLocalStorage, watchDebounced } from '@vueuse/core'
+
+export interface SyncedPreferences {
+  toggleInputHotkey: string
+  toggleOutputHotkey: string
+  volumes: Record<Client['id'], number>
+}
 
 export const usePreferences = createGlobalState(() => {
+  const synced = ref(false)
+
   const inputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('INPUT_DEVICE_ID', 'default')
   const outputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('OUTPUT_DEVICE_ID', 'default')
 
@@ -8,6 +17,9 @@ export const usePreferences = createGlobalState(() => {
   const noiseSuppression = useLocalStorage('NOISE_SUPPRESSION', true)
   const echoCancellation = useLocalStorage('ECHO_CANCELLATION', true)
 
+  const toggleInputHotkey = ref<SyncedPreferences['toggleInputHotkey']>('')
+  const toggleOutputHotkey = ref<SyncedPreferences['toggleOutputHotkey']>('')
+
   const {
     ensurePermissions,
     permissionGranted,
@@ -24,12 +36,35 @@ export const usePreferences = createGlobalState(() => {
     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,
     videoInputs: computed(() => JSON.parse(JSON.stringify(videoInputs.value))),

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

@@ -3,9 +3,9 @@ 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' }))
     }
     catch {
       if (to.meta.auth !== 'guest') {

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/preferences.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
+    <PrimeDivider align="left">
+      Audio
+    </PrimeDivider>
+
     <PrimeFloatLabel variant="on">
       <PrimeSelect
         v-model="inputDeviceId"
         :options="audioInputs"
         option-label="label"
         option-value="deviceId"
-        fluid
         input-id="inputDevice"
+        fluid
         :invalid="!inputDeviceExist"
       />
       <label for="inputDevice">Input device</label>
@@ -43,18 +47,41 @@
     <!--      <label for="outputDevice">Output device</label> -->
     <!--    </PrimeFloatLabel> -->
 
-    <template v-if="isTauri">
-      <PrimeDivider />
+    <PrimeDivider align="left">
+      Hotkeys
+    </PrimeDivider>
 
-      <PrimeButton
-        size="small"
-        label="Check for Updates"
-        fluid
-        severity="info"
-        :loading="checking"
-        @click="onCheckForUpdates"
-      />
-    </template>
+    <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>
+
+    <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>
+
+    <PrimeButton
+      v-if="isTauri"
+      class="mt-3"
+      size="small"
+      label="Check for Updates"
+      fluid
+      severity="info"
+      :loading="checking"
+      @click="onCheckForUpdates"
+    />
   </div>
 
   <PrimeToast position="bottom-center" group="updater">
@@ -73,10 +100,12 @@
 </template>
 
 <script setup lang="ts">
+import type { RemovableRef } from '@vueuse/core'
+
 definePageMeta({
   name: 'Preferences',
 })
-const { isTauri } = useApp()
+const { isTauri, version, commitSha } = useApp()
 const { checking, checkForUpdates } = useUpdater()
 const {
   inputDeviceId,
@@ -84,6 +113,8 @@ const {
   autoGainControl,
   noiseSuppression,
   echoCancellation,
+  toggleInputHotkey,
+  toggleOutputHotkey,
   inputDeviceExist,
   outputDeviceExist,
   audioInputs,
@@ -92,6 +123,46 @@ const {
 
 const toast = useToast()
 
+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('+')
+}
+
 async function onCheckForUpdates() {
   const update = await checkForUpdates()
 

client/app/pages/profile.vue

@@ -1,13 +1,15 @@
 <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>
 
-    <PrimeDivider />
-
-    <div class="flex items-center gap-3">
+    <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>

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