53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
<template>
|
|
<div class="grid grid-cols-2 h-screen">
|
|
<div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden">
|
|
<AppHeader title="Надарики">
|
|
<template #right>
|
|
<PrimeButtonGroup class="ml-auto">
|
|
<PrimeButton
|
|
icon="pi pi-microphone" size="large" :severity="inputMuted ? 'contrast' : 'secondary'"
|
|
:outlined="!inputMuted" @click="toggleInput"
|
|
/>
|
|
<PrimeButton
|
|
icon="pi pi-headphones" size="large" :severity="outputMuted ? 'contrast' : 'secondary'"
|
|
:outlined="!outputMuted" @click="toggleOutput"
|
|
/>
|
|
</PrimeButtonGroup>
|
|
|
|
<PrimeButton icon="pi pi-cog" size="large" :text="!inPreferences" :severity="inPreferences ? 'contrast' : 'secondary'" @click="onClickPreferences" />
|
|
</template>
|
|
</AppHeader>
|
|
|
|
<div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
|
|
<ClientRow v-for="client of clients" :key="client.id" :client="client" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-y-auto">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fixed top-3 right-3 inline-flex items-center gap-3">
|
|
<PrimeBadge v-if="isTauri" class="opacity-50" severity="secondary" :value="version" size="small" />
|
|
<PrimeBadge :severity="connected ? 'success' : 'danger' " />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri } = useApp()
|
|
const { connect, connected } = useSignaling()
|
|
|
|
const route = useRoute()
|
|
|
|
const inPreferences = computed(() => {
|
|
return route.name === 'Preferences'
|
|
})
|
|
|
|
function onClickPreferences() {
|
|
navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
|
|
}
|
|
|
|
connect()
|
|
</script>
|