user preferences

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))),