update

client/app/pages/index.vue

@@ -1,56 +1,11 @@
 <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>
-      </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 class="flex items-center justify-center p-3">
+    <PrimeCard>
+      <template #content>
+        The chat is under development.
+      </template>
+    </PrimeCard>
   </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">
@@ -58,5 +13,6 @@ const { clients } = useClients()
 const { producers, consumers } = useMediasoup()
 
 definePageMeta({
+  name: 'Index',
 })
 </script>

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>

client/app/pages/profile.vue

@@ -0,0 +1,62 @@
+<template>
+  <form class="px-3 py-6" @submit.prevent="save()">
+    <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">
+      <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 { 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 signaling.socket.value?.emitWithAck('updateClient', {
+    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>