Compare commits
6 Commits
v0.2.7
...
8265e2d719
| Author | SHA1 | Date | |
|---|---|---|---|
| 8265e2d719 | |||
| 4f91309f7f | |||
| bcd457e2d6 | |||
| 8eef4fc477 | |||
| 614867bd12 | |||
| cdf2bf5952 |
@@ -1,13 +1,13 @@
|
|||||||
name: Deploy
|
name: Deploy
|
||||||
|
|
||||||
on:
|
# on:
|
||||||
push:
|
# push:
|
||||||
# tags:
|
# tags:
|
||||||
# - "v[0-9]+.[0-9]+.[0-9]+"
|
# - "v[0-9]+.[0-9]+.[0-9]+"
|
||||||
|
|
||||||
# paths:
|
# paths:
|
||||||
# - ".gitea/workflows/deploy-client.yml"
|
# - ".gitea/workflows/deploy-client.yml"
|
||||||
# - "client/**"
|
# - "client/**"
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
publish-windows:
|
publish-windows:
|
||||||
|
|||||||
Binary file not shown.
4
client/app/components.d.ts
vendored
4
client/app/components.d.ts
vendored
@@ -13,15 +13,19 @@ declare module 'vue' {
|
|||||||
PrimeButton: typeof import('primevue/button')['default']
|
PrimeButton: typeof import('primevue/button')['default']
|
||||||
PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
|
PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
|
||||||
PrimeCard: typeof import('primevue/card')['default']
|
PrimeCard: typeof import('primevue/card')['default']
|
||||||
|
PrimeCheckbox: typeof import('primevue/checkbox')['default']
|
||||||
|
PrimeDivider: typeof import('primevue/divider')['default']
|
||||||
PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
|
PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
|
||||||
PrimeInputText: typeof import('primevue/inputtext')['default']
|
PrimeInputText: typeof import('primevue/inputtext')['default']
|
||||||
PrimeMenu: typeof import('primevue/menu')['default']
|
PrimeMenu: typeof import('primevue/menu')['default']
|
||||||
PrimePanel: typeof import('primevue/panel')['default']
|
PrimePanel: typeof import('primevue/panel')['default']
|
||||||
PrimePassword: typeof import('primevue/password')['default']
|
PrimePassword: typeof import('primevue/password')['default']
|
||||||
PrimeProgressBar: typeof import('primevue/progressbar')['default']
|
PrimeProgressBar: typeof import('primevue/progressbar')['default']
|
||||||
|
PrimeSelect: typeof import('primevue/select')['default']
|
||||||
PrimeSelectButton: typeof import('primevue/selectbutton')['default']
|
PrimeSelectButton: typeof import('primevue/selectbutton')['default']
|
||||||
PrimeSlider: typeof import('primevue/slider')['default']
|
PrimeSlider: typeof import('primevue/slider')['default']
|
||||||
PrimeToast: typeof import('primevue/toast')['default']
|
PrimeToast: typeof import('primevue/toast')['default']
|
||||||
|
PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
style="height: 75px;"
|
style="height: 75px;"
|
||||||
>
|
>
|
||||||
<slot name="left">
|
<slot name="left">
|
||||||
<h1>
|
<h1 v-if="!!title">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</h1>
|
</h1>
|
||||||
</slot>
|
</slot>
|
||||||
@@ -19,7 +19,12 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
defineProps<{
|
defineProps<{
|
||||||
title: string
|
title?: string
|
||||||
secondary?: boolean
|
secondary?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
defineSlots<{
|
||||||
|
left: () => unknown
|
||||||
|
right: () => unknown
|
||||||
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="py-3">
|
<div class="py-3">
|
||||||
<div class="flex items-center gap-3 ">
|
<div class="flex items-center gap-3 ">
|
||||||
<PrimeAvatar
|
<PrimeAvatar size="small">
|
||||||
icon="pi pi-user"
|
<template #icon>
|
||||||
size="small"
|
<User :size="20" />
|
||||||
/>
|
</template>
|
||||||
|
</PrimeAvatar>
|
||||||
|
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
|
<div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
|
||||||
@@ -15,7 +16,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<PrimeBadge v-if="audioConsumerPaused" severity="info" value="Muted" />
|
<PrimeBadge v-if="inputMuted" severity="info" value="Muted" />
|
||||||
|
<!-- <PrimeBadge v-if="outputMuted" severity="info" value="No sound" /> -->
|
||||||
<PrimeBadge v-if="isMe" severity="secondary" value="You" />
|
<PrimeBadge v-if="isMe" severity="secondary" value="You" />
|
||||||
|
|
||||||
<template v-if="!isMe">
|
<template v-if="!isMe">
|
||||||
@@ -40,13 +42,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { ChadClient } from '#shared/types'
|
import type { ChadClient } from '#shared/types'
|
||||||
import type { MenuItem } from 'primevue/menuitem'
|
import type { MenuItem } from 'primevue/menuitem'
|
||||||
|
import { User } from 'lucide-vue-next'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
client: ChadClient
|
client: ChadClient
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { inputMuted, outputMuted } = useApp()
|
const { outputMuted } = useApp()
|
||||||
const { getClientConsumers } = useMediasoup()
|
const { getClientConsumers, micProducer } = useMediasoup()
|
||||||
const { me } = useClients()
|
const { me } = useClients()
|
||||||
|
|
||||||
const menuRef = useTemplateRef<HTMLAudioElement>('menu')
|
const menuRef = useTemplateRef<HTMLAudioElement>('menu')
|
||||||
@@ -78,9 +81,9 @@ const audioConsumer = computed(() => {
|
|||||||
return consumers.find(consumer => consumer.track.kind === 'audio')
|
return consumers.find(consumer => consumer.track.kind === 'audio')
|
||||||
})
|
})
|
||||||
|
|
||||||
const audioConsumerPaused = computed(() => {
|
const inputMuted = computed(() => {
|
||||||
if (isMe.value)
|
if (isMe.value)
|
||||||
return false
|
return micProducer.value?.paused ?? false
|
||||||
|
|
||||||
const consumers = getClientConsumers(props.client.socketId)
|
const consumers = getClientConsumers(props.client.socketId)
|
||||||
|
|
||||||
@@ -94,13 +97,13 @@ const audioTrack = computed(() => {
|
|||||||
const { setGain } = useAudioContext(audioTrack)
|
const { setGain } = useAudioContext(audioTrack)
|
||||||
|
|
||||||
watch(volume, (volume) => {
|
watch(volume, (volume) => {
|
||||||
if (outputMuted.value)
|
// if (outputMuted.value)
|
||||||
return
|
// return
|
||||||
|
|
||||||
setGain(volume * 0.01)
|
setGain(volume * 0.01)
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(outputMuted, (outputMuted) => {
|
// watch(outputMuted, (outputMuted) => {
|
||||||
setGain(outputMuted ? 0 : (volume.value * 0.01))
|
// setGain(outputMuted ? 0 : (volume.value * 0.01))
|
||||||
})
|
// })
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -165,6 +165,8 @@ export const useMediasoup = createSharedComposable(() => {
|
|||||||
if (producerPaused)
|
if (producerPaused)
|
||||||
consumer.pause()
|
consumer.pause()
|
||||||
|
|
||||||
|
console.log('newConsumer', consumer.paused)
|
||||||
|
|
||||||
consumer.on('transportclose', () => {
|
consumer.on('transportclose', () => {
|
||||||
if (consumers.value.delete(consumer.id))
|
if (consumers.value.delete(consumer.id))
|
||||||
triggerRef(consumers)
|
triggerRef(consumers)
|
||||||
@@ -283,7 +285,6 @@ export const useMediasoup = createSharedComposable(() => {
|
|||||||
return
|
return
|
||||||
|
|
||||||
producers.value.delete(micProducer.value.id)
|
producers.value.delete(micProducer.value.id)
|
||||||
triggerRef(producers)
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
micProducer.value.close()
|
micProducer.value.close()
|
||||||
@@ -294,6 +295,9 @@ export const useMediasoup = createSharedComposable(() => {
|
|||||||
}
|
}
|
||||||
catch {
|
catch {
|
||||||
}
|
}
|
||||||
|
finally {
|
||||||
|
triggerRef(producers)
|
||||||
|
}
|
||||||
|
|
||||||
micProducer.value = undefined
|
micProducer.value = undefined
|
||||||
}
|
}
|
||||||
@@ -304,21 +308,25 @@ export const useMediasoup = createSharedComposable(() => {
|
|||||||
|
|
||||||
const producer = getProducerByType(type)
|
const producer = getProducerByType(type)
|
||||||
|
|
||||||
if (!producer)
|
if (!producer.value)
|
||||||
return
|
return
|
||||||
|
|
||||||
if (producer.paused)
|
if (producer.value.paused)
|
||||||
return
|
return
|
||||||
|
|
||||||
try {
|
try {
|
||||||
producer.pause()
|
producer.value.pause()
|
||||||
|
|
||||||
await signaling.socket.value.emitWithAck('pauseProducer', {
|
await signaling.socket.value.emitWithAck('pauseProducer', {
|
||||||
producerId: producer.id,
|
producerId: producer.value.id,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
catch {
|
catch {
|
||||||
producer.resume()
|
producer.value.resume()
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
triggerRef(producers)
|
||||||
|
triggerRef(producer)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -328,18 +336,22 @@ export const useMediasoup = createSharedComposable(() => {
|
|||||||
|
|
||||||
const producer = getProducerByType(type)
|
const producer = getProducerByType(type)
|
||||||
|
|
||||||
if (!producer)
|
if (!producer.value)
|
||||||
return
|
return
|
||||||
|
|
||||||
try {
|
try {
|
||||||
producer.resume()
|
producer.value.resume()
|
||||||
|
|
||||||
await signaling.socket.value.emitWithAck('resumeProducer', {
|
await signaling.socket.value.emitWithAck('resumeProducer', {
|
||||||
producerId: producer.id,
|
producerId: producer.value.id,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
catch {
|
catch {
|
||||||
producer.pause()
|
producer.value.pause()
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
triggerRef(producers)
|
||||||
|
triggerRef(producer)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -350,11 +362,11 @@ export const useMediasoup = createSharedComposable(() => {
|
|||||||
function getProducerByType(type: ProducerType) {
|
function getProducerByType(type: ProducerType) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'microphone':
|
case 'microphone':
|
||||||
return micProducer.value
|
return micProducer
|
||||||
case 'camera':
|
case 'camera':
|
||||||
return cameraProducer.value
|
return cameraProducer
|
||||||
case 'share':
|
case 'share':
|
||||||
return shareProducer.value
|
return shareProducer
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,12 @@
|
|||||||
import { createGlobalState, useDevicesList } from '@vueuse/core'
|
import { createGlobalState, useDevicesList, useLocalStorage } from '@vueuse/core'
|
||||||
|
|
||||||
export const usePreferences = createGlobalState(() => {
|
export const usePreferences = createGlobalState(() => {
|
||||||
const inputDeviceId = shallowRef<MediaDeviceInfo['deviceId']>()
|
const inputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('INPUT_DEVICE_ID', 'default')
|
||||||
const outputDeviceId = shallowRef<MediaDeviceInfo['deviceId']>()
|
const outputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('OUTPUT_DEVICE_ID', 'default')
|
||||||
|
|
||||||
|
const autoGainControl = useLocalStorage('AUTO_GAIN_CONTROL', false)
|
||||||
|
const noiseSuppression = useLocalStorage('NOISE_SUPPRESSION', true)
|
||||||
|
const echoCancellation = useLocalStorage('ECHO_CANCELLATION', true)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
ensurePermissions,
|
ensurePermissions,
|
||||||
@@ -15,6 +19,9 @@ export const usePreferences = createGlobalState(() => {
|
|||||||
return {
|
return {
|
||||||
inputDeviceId,
|
inputDeviceId,
|
||||||
outputDeviceId,
|
outputDeviceId,
|
||||||
|
autoGainControl,
|
||||||
|
noiseSuppression,
|
||||||
|
echoCancellation,
|
||||||
videoInputs,
|
videoInputs,
|
||||||
audioInputs,
|
audioInputs,
|
||||||
audioOutputs,
|
audioOutputs,
|
||||||
|
|||||||
@@ -66,11 +66,9 @@ export const useSignaling = createSharedComposable(() => {
|
|||||||
|
|
||||||
const uri = host ? `${protocol}//${host}` : ``
|
const uri = host ? `${protocol}//${host}` : ``
|
||||||
|
|
||||||
socket.value = io(`http://localhost:4000/webrtc`, {
|
socket.value = io(`${uri}/webrtc`, {
|
||||||
path: `/chad/ws`,
|
path: `${pathname}/ws`,
|
||||||
transports: ['websocket'],
|
transports: ['websocket'],
|
||||||
// socket.value = io(`${uri}/webrtc`, {
|
|
||||||
// path: `${pathname}/ws`,
|
|
||||||
withCredentials: true,
|
withCredentials: true,
|
||||||
auth: {
|
auth: {
|
||||||
userId: me.value.id,
|
userId: me.value.id,
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ export const useUpdater = createGlobalState(() => {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
lastUpdate,
|
lastUpdate,
|
||||||
|
checking,
|
||||||
checkForUpdates,
|
checkForUpdates,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -27,7 +27,6 @@ const options = computed(() => {
|
|||||||
{
|
{
|
||||||
label: 'Register',
|
label: 'Register',
|
||||||
routeName: 'Register',
|
routeName: 'Register',
|
||||||
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,52 +1,100 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="grid grid-cols-2 h-screen">
|
<div class="grid grid-cols-2 h-screen">
|
||||||
<div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden">
|
<div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden">
|
||||||
<AppHeader title="Шальные сиськи 18+">
|
<div
|
||||||
<template #right>
|
class="flex items-center justify-between gap-2 border-b-2 border-surface-800 px-3 py-3 bg-surface-950"
|
||||||
<PrimeButtonGroup class="ml-auto">
|
style="height: 75px;"
|
||||||
<PrimeButton
|
>
|
||||||
icon="pi pi-microphone" size="large" :severity="inputMuted ? 'contrast' : 'secondary'"
|
<div class="inline-flex items-center gap-3">
|
||||||
:outlined="!inputMuted" @click="toggleInput"
|
<PrimeBadge v-if="isTauri" class="opacity-50" severity="secondary" :value="version" size="small" />
|
||||||
/>
|
<PrimeBadge :severity="connected ? 'success' : 'danger' " />
|
||||||
<PrimeButton
|
</div>
|
||||||
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" />
|
<PrimeButtonGroup class="ml-auto">
|
||||||
</template>
|
<PrimeButton outlined @click="toggleInput">
|
||||||
</AppHeader>
|
<template #icon>
|
||||||
|
<Component :is="inputMuted ? MicOff : Mic" />
|
||||||
|
</template>
|
||||||
|
</PrimeButton>
|
||||||
|
<PrimeButton outlined @click="toggleOutput">
|
||||||
|
<template #icon>
|
||||||
|
<Component :is="outputMuted ? VolumeOff : Volume2" />
|
||||||
|
</template>
|
||||||
|
</PrimeButton>
|
||||||
|
</PrimeButtonGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
|
<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" />
|
<ClientRow v-for="client of clients" :key="client.id" :client="client" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="overflow-y-auto">
|
<div class="bg-surface-950 overflow-y-auto">
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-center gap-2 border-b-2 border-surface-800 px-3 py-3 bg-surface-900"
|
||||||
|
style="height: 75px;"
|
||||||
|
>
|
||||||
|
<PrimeSelectButton
|
||||||
|
v-model="activeTab"
|
||||||
|
:options="tabs"
|
||||||
|
data-key="id"
|
||||||
|
:allow-empty="false"
|
||||||
|
style="--p-togglebutton-content-padding: 0.25rem 0.5rem"
|
||||||
|
>
|
||||||
|
<template #option="{ option }">
|
||||||
|
<Component :is="option.icon" size="24" />
|
||||||
|
</template>
|
||||||
|
</PrimeSelectButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { MessageCircle, Mic, MicOff, Settings, UserPen, Volume2, VolumeOff } from 'lucide-vue-next'
|
||||||
|
|
||||||
const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri } = useApp()
|
const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri } = useApp()
|
||||||
const { connect, connected } = useSignaling()
|
const { connect, connected } = useSignaling()
|
||||||
|
|
||||||
|
interface Tab {
|
||||||
|
id: string
|
||||||
|
icon: Component
|
||||||
|
onClick: () => void | Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
const inPreferences = computed(() => {
|
const tabs: Tab[] = [
|
||||||
return route.name === 'Preferences'
|
{
|
||||||
})
|
id: 'Index',
|
||||||
|
icon: MessageCircle,
|
||||||
|
onClick: () => {
|
||||||
|
navigateTo({ name: 'Index' })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'Profile',
|
||||||
|
icon: UserPen,
|
||||||
|
onClick: () => {
|
||||||
|
navigateTo({ name: 'Profile' })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'Preferences',
|
||||||
|
icon: Settings,
|
||||||
|
onClick: () => {
|
||||||
|
navigateTo({ name: 'Preferences' })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
function onClickPreferences() {
|
const activeTab = ref<Tab>(tabs.find(tab => tab.id === route.name) ?? tabs[0]!)
|
||||||
navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
|
|
||||||
}
|
watch(activeTab, (activeTab) => {
|
||||||
|
activeTab.onClick()
|
||||||
|
})
|
||||||
|
|
||||||
connect()
|
connect()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
|
|||||||
if (!isTauri.value)
|
if (!isTauri.value)
|
||||||
return
|
return
|
||||||
|
|
||||||
if (from?.name)
|
if (from?.name || !!to.redirectedFrom)
|
||||||
return
|
return
|
||||||
|
|
||||||
const { checkForUpdates } = useUpdater()
|
const { checkForUpdates } = useUpdater()
|
||||||
@@ -15,6 +15,6 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
|
|||||||
const update = await checkForUpdates()
|
const update = await checkForUpdates()
|
||||||
|
|
||||||
if (update) {
|
if (update) {
|
||||||
return navigateTo({ name: 'Updating' })
|
return navigateTo({ name: 'Updater' })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,56 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col gap-3 p-3 pt-12">
|
<div class="flex items-center justify-center p-3">
|
||||||
<PrimePanel header="Clients" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
|
<PrimeCard>
|
||||||
<dl v-for="client in clients" :key="client.socketId" class="">
|
<template #content>
|
||||||
<div v-for="(value, key) in client" :key="key" class="py-2">
|
The chat is under development.
|
||||||
<dt class="font-bold">
|
</template>
|
||||||
{{ key }}
|
</PrimeCard>
|
||||||
</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>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -58,5 +13,6 @@ const { clients } = useClients()
|
|||||||
const { producers, consumers } = useMediasoup()
|
const { producers, consumers } = useMediasoup()
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
|
name: 'Index',
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,23 +1,56 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="px-3 py-6">
|
||||||
<AppHeader title="Preferences" secondary />
|
<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">
|
<div class="flex items-center gap-2 mt-3">
|
||||||
<PrimeFloatLabel variant="on">
|
<PrimeToggleSwitch v-model="autoGainControl" input-id="autoGainControl" />
|
||||||
<PrimeInputText id="username" v-model="displayName" size="large" fluid autocomplete="off" />
|
<label for="autoGainControl">Auto Gain Control</label>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<div class="p-3">
|
<div class="flex items-center gap-2 mt-3">
|
||||||
<PrimeButton label="Logout" fluid severity="danger" @click="logout()" />
|
<PrimeToggleSwitch v-model="echoCancellation" input-id="echoCancellation" />
|
||||||
|
<label for="echoCancellation">Echo Cancellation</label>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<PrimeToast position="bottom-center" group="updater">
|
<PrimeToast position="bottom-center" group="updater">
|
||||||
@@ -39,24 +72,25 @@
|
|||||||
definePageMeta({
|
definePageMeta({
|
||||||
name: 'Preferences',
|
name: 'Preferences',
|
||||||
})
|
})
|
||||||
|
|
||||||
const { isTauri } = useApp()
|
const { isTauri } = useApp()
|
||||||
const { checkForUpdates } = useUpdater()
|
const { checking, checkForUpdates } = useUpdater()
|
||||||
const { me, setMe, logout } = useAuth()
|
const {
|
||||||
|
inputDeviceId,
|
||||||
|
outputDeviceId,
|
||||||
|
autoGainControl,
|
||||||
|
noiseSuppression,
|
||||||
|
echoCancellation,
|
||||||
|
audioInputs,
|
||||||
|
audioOutputs,
|
||||||
|
} = usePreferences()
|
||||||
|
|
||||||
const signaling = useSignaling()
|
|
||||||
const toast = useToast()
|
const toast = useToast()
|
||||||
|
|
||||||
const displayName = ref(me.value?.displayName || '')
|
const audioInputsHack = computed(() => {
|
||||||
|
return JSON.parse(JSON.stringify(audioInputs.value))
|
||||||
const valid = computed(() => {
|
})
|
||||||
if (!displayName.value || !me.value)
|
const audioOutputsHack = computed(() => {
|
||||||
return false
|
return JSON.parse(JSON.stringify(audioOutputs.value))
|
||||||
|
|
||||||
if (displayName.value === me.value.displayName)
|
|
||||||
return false
|
|
||||||
|
|
||||||
return true
|
|
||||||
})
|
})
|
||||||
|
|
||||||
async function onCheckForUpdates() {
|
async function onCheckForUpdates() {
|
||||||
@@ -76,20 +110,5 @@ async function onCheckForUpdates() {
|
|||||||
detail: `Version ${update?.version ?? '1.0.1'} is available!`,
|
detail: `Version ${update?.version ?? '1.0.1'} is available!`,
|
||||||
closable: false,
|
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>
|
</script>
|
||||||
|
|||||||
62
client/app/pages/profile.vue
Normal file
62
client/app/pages/profile.vue
Normal file
@@ -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>
|
||||||
@@ -23,7 +23,6 @@ definePageMeta({
|
|||||||
auth: false,
|
auth: false,
|
||||||
middleware: () => {
|
middleware: () => {
|
||||||
const { lastUpdate } = useUpdater()
|
const { lastUpdate } = useUpdater()
|
||||||
|
|
||||||
if (!lastUpdate.value)
|
if (!lastUpdate.value)
|
||||||
return navigateTo('/')
|
return navigateTo('/')
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -97,7 +97,7 @@ export default defineNuxtConfig({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
define: {
|
define: {
|
||||||
__API_BASE_URL__: JSON.stringify(import.meta.env.API_BASE_URL || '/api'),
|
__API_BASE_URL__: JSON.stringify(import.meta.env.API_BASE_URL || 'http://localhost:4000/chad'),
|
||||||
__COMMIT_SHA__: JSON.stringify(import.meta.env.COMMIT_SHA || 'local'),
|
__COMMIT_SHA__: JSON.stringify(import.meta.env.COMMIT_SHA || 'local'),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -17,6 +17,7 @@
|
|||||||
"@tauri-apps/plugin-process": "~2",
|
"@tauri-apps/plugin-process": "~2",
|
||||||
"@tauri-apps/plugin-updater": "~2",
|
"@tauri-apps/plugin-updater": "~2",
|
||||||
"@vueuse/core": "^13.9.0",
|
"@vueuse/core": "^13.9.0",
|
||||||
|
"lucide-vue-next": "^0.562.0",
|
||||||
"mediasoup-client": "^3.16.7",
|
"mediasoup-client": "^3.16.7",
|
||||||
"nuxt": "^4.2.2",
|
"nuxt": "^4.2.2",
|
||||||
"postcss": "^8.5.6",
|
"postcss": "^8.5.6",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
|
"$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
|
||||||
"productName": "chad",
|
"productName": "chad",
|
||||||
"version": "0.2.7",
|
"version": "0.2.11",
|
||||||
"identifier": "xyz.koptilnya.chad",
|
"identifier": "xyz.koptilnya.chad",
|
||||||
"build": {
|
"build": {
|
||||||
"frontendDist": "../.output/public",
|
"frontendDist": "../.output/public",
|
||||||
|
|||||||
@@ -4041,6 +4041,7 @@ __metadata:
|
|||||||
"@vueuse/core": "npm:^13.9.0"
|
"@vueuse/core": "npm:^13.9.0"
|
||||||
eslint: "npm:^9.36.0"
|
eslint: "npm:^9.36.0"
|
||||||
eslint-plugin-format: "npm:^1.0.2"
|
eslint-plugin-format: "npm:^1.0.2"
|
||||||
|
lucide-vue-next: "npm:^0.562.0"
|
||||||
mediasoup-client: "npm:^3.16.7"
|
mediasoup-client: "npm:^3.16.7"
|
||||||
nuxt: "npm:^4.2.2"
|
nuxt: "npm:^4.2.2"
|
||||||
postcss: "npm:^8.5.6"
|
postcss: "npm:^8.5.6"
|
||||||
@@ -7024,6 +7025,15 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"lucide-vue-next@npm:^0.562.0":
|
||||||
|
version: 0.562.0
|
||||||
|
resolution: "lucide-vue-next@npm:0.562.0"
|
||||||
|
peerDependencies:
|
||||||
|
vue: ">=3.0.1"
|
||||||
|
checksum: 10c0/5ba792ea5e48d01fc99a3c5ae4a59d9767e5d4c7826901800831cf051cf85eb4a680b3564d2910ed4d17dc1d35223c37d006bdbcdb291d90a9491b9c6a20ae14
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"magic-regexp@npm:^0.10.0":
|
"magic-regexp@npm:^0.10.0":
|
||||||
version: 0.10.0
|
version: 0.10.0
|
||||||
resolution: "magic-regexp@npm:0.10.0"
|
resolution: "magic-regexp@npm:0.10.0"
|
||||||
|
|||||||
Reference in New Issue
Block a user