163 lines
4.3 KiB
Vue
163 lines
4.3 KiB
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> -->
|
|
|
|
<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 {
|
|
inputDeviceId,
|
|
outputDeviceId,
|
|
autoGainControl,
|
|
noiseSuppression,
|
|
echoCancellation,
|
|
toggleInputHotkey,
|
|
toggleOutputHotkey,
|
|
inputDeviceExist,
|
|
outputDeviceExist,
|
|
audioInputs,
|
|
audioOutputs,
|
|
} = 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>
|