update

client/app/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center justify-center p-3">
+  <div class="flex items-center justify-center">
     <PrimeCard>
       <template #content>
         The chat is under development.
@@ -9,9 +9,6 @@
 </template>
 
 <script setup lang="ts">
-const { clients } = useClients()
-const { producers, consumers } = useMediasoup()
-
 definePageMeta({
   name: 'Index',
 })

client/app/pages/preferences.vue

@@ -1,13 +1,14 @@
 <template>
-  <div class="px-3 py-6">
+  <div>
     <PrimeFloatLabel variant="on">
       <PrimeSelect
         v-model="inputDeviceId"
-        :options="audioInputsHack"
+        :options="audioInputs"
         option-label="label"
         option-value="deviceId"
         fluid
         input-id="inputDevice"
+        :invalid="!inputDeviceExist"
       />
       <label for="inputDevice">Input device</label>
     </PrimeFloatLabel>
@@ -27,30 +28,33 @@
       <label for="noiseSuppression">Noise Suppression</label>
     </div>
 
-    <PrimeFloatLabel variant="on">
-      <PrimeSelect
-        v-model="outputDeviceId"
-        :options="audioOutputsHack"
-        option-label="label"
-        option-value="deviceId"
+    <!--    <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> -->
+
+    <template v-if="isTauri">
+      <PrimeDivider />
+
+      <PrimeButton
+        size="small"
+        label="Check for Updates"
         fluid
-        class="mt-6"
-        input-id="outputDevice"
+        severity="info"
+        :loading="checking"
+        @click="onCheckForUpdates"
       />
-      <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"
-    />
+    </template>
   </div>
 
   <PrimeToast position="bottom-center" group="updater">
@@ -80,19 +84,14 @@ const {
   autoGainControl,
   noiseSuppression,
   echoCancellation,
+  inputDeviceExist,
+  outputDeviceExist,
   audioInputs,
   audioOutputs,
 } = usePreferences()
 
 const toast = useToast()
 
-const audioInputsHack = computed(() => {
-  return JSON.parse(JSON.stringify(audioInputs.value))
-})
-const audioOutputsHack = computed(() => {
-  return JSON.parse(JSON.stringify(audioOutputs.value))
-})
-
 async function onCheckForUpdates() {
   const update = await checkForUpdates()
 

client/app/pages/profile.vue

@@ -1,5 +1,5 @@
 <template>
-  <form class="px-3 py-6" @submit.prevent="save()">
+  <form @submit.prevent="save()">
     <PrimeFloatLabel variant="on">
       <PrimeInputText id="displayName" v-model="displayName" fluid autocomplete="off" />
       <label for="displayName">Display name</label>