chad/client/app/pages/preferences.vue

<template>
  <div>
    <PrimeDivider align="left">
      Audio
    </PrimeDivider>

    <PrimeFloatLabel variant="on">
      <PrimeSelect
        v-model="inputDeviceId"
        :options="audioInputs"
        option-label="label"
        option-value="deviceId"
        input-id="inputDevice"
        fluid
        :invalid="!inputDeviceExist"
      />
      <label for="inputDevice">Input device</label>
    </PrimeFloatLabel>

    <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="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="audioOutputs" -->
    <!--        option-label="label" -->
    <!--        option-value="deviceId" -->
    <!--        fluid -->
    <!--        class="mt-6" -->
    <!--        input-id="outputDevice" -->
    <!--        :invalid="!outputDeviceExist" -->
    <!--        -->
    <!--      /> -->
    <!--      <label for="outputDevice">Output device</label> -->
    <!--    </PrimeFloatLabel> -->

    <PrimeDivider align="left">
      Video
    </PrimeDivider>

    <div>
      <div class="flex justify-between text-sm mb-3">
        <span>FPS</span>
        <span>{{ shareFps }}</span>
      </div>
      <PrimeSlider v-model="shareFps" class="mx-[10px]" :min="30" :max="60" :step="5" />
    </div>

    <template v-if="isTauri">
      <PrimeDivider align="left">
        Hotkeys
      </PrimeDivider>

      <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>
    </template>

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

    <template v-if="isTauri">
      <PrimeButton
        v-if="lastUpdate"
        class="mt-3"
        size="small"
        label="Install new version"
        fluid
        severity="success"
        @click="navigateTo({ name: 'Updater' })"
      />
      <PrimeButton
        v-else
        class="mt-3"
        size="small"
        label="Check for Updates"
        fluid
        severity="info"
        :loading="checking"
        @click="checkForUpdates"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import type { RemovableRef } from '@vueuse/core'

definePageMeta({
  name: 'Preferences',
})
const { isTauri, version, commitSha } = useApp()
const { checking, checkForUpdates, lastUpdate } = useUpdater()
const { audioInputs, audioOutputs } = useDevices()
const {
  inputDeviceId,
  outputDeviceId,
  autoGainControl,
  noiseSuppression,
  echoCancellation,
  toggleInputHotkey,
  toggleOutputHotkey,
  inputDeviceExist,
  outputDeviceExist,
  shareFps,
} = usePreferences()

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('+')
}
</script>