update

client/app/pages/preferences.vue

@@ -1,23 +1,56 @@
 <template>
-  <div>
-    <AppHeader title="Preferences" secondary />
+  <div class="px-3 py-6">
+    <PrimeFloatLabel variant="on">
+      <PrimeSelect
+        v-model="inputDeviceId"
+        :options="audioInputsHack"
+        option-label="label"
+        option-value="deviceId"
+        fluid
+        input-id="inputDevice"
+      />
+      <label for="inputDevice">Input device</label>
+    </PrimeFloatLabel>
 
-    <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>
-      </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 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="audioOutputsHack"
+        option-label="label"
+        option-value="deviceId"
+        fluid
+        class="mt-6"
+        input-id="outputDevice"
+      />
+      <label for="outputDevice">Output device</label>
+    </PrimeFloatLabel>
+
+    <PrimeDivider />
+
+    <PrimeButton
+      v-if="isTauri"
+      size="small"
+      label="Check for Updates"
+      fluid
+      severity="info"
+      :loading="checking"
+      @click="onCheckForUpdates"
+    />
   </div>
 
   <PrimeToast position="bottom-center" group="updater">
@@ -39,24 +72,25 @@
 definePageMeta({
   name: 'Preferences',
 })
-
 const { isTauri } = useApp()
-const { checkForUpdates } = useUpdater()
-const { me, setMe, logout } = useAuth()
+const { checking, checkForUpdates } = useUpdater()
+const {
+  inputDeviceId,
+  outputDeviceId,
+  autoGainControl,
+  noiseSuppression,
+  echoCancellation,
+  audioInputs,
+  audioOutputs,
+} = usePreferences()
 
-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 audioInputsHack = computed(() => {
+  return JSON.parse(JSON.stringify(audioInputs.value))
+})
+const audioOutputsHack = computed(() => {
+  return JSON.parse(JSON.stringify(audioOutputs.value))
 })
 
 async function onCheckForUpdates() {
@@ -76,20 +110,5 @@ async function onCheckForUpdates() {
     detail: `Version ${update?.version ?? '1.0.1'} is available!`,
     closable: false,
   })
-
-  // asdasd
-}
-
-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 })
 }
 </script>