strawberries/frangipane-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added full control over which input device to use in voice chat (limited by cpal)

Browse Source
This commit is contained in:
strawberries
2026-01-30 15:49:48 +01:00
parent 81d9624c9e
commit c57e8d8254
11 changed files with 329 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChatWindow.vue
+20 -4
View File
@@ -7,6 +7,8 @@
:ownerUuid="currentRoom?.owner_uuid || ''" @close="showDetailsModal = false"
@room-changed="handleRoomChanged" />
<VoiceDeviceModal v-if="showVoiceModal" @close="showVoiceModal = false" @select="handleVoiceSelect" />
<div v-if="uuid === 'none'" class="no-room">
<div class="empty-state">
<i class="fa-solid fa-comments"></i>
@@ -44,8 +46,7 @@
<i class="fa-solid fa-users"></i>
</button>
<button class="invite-btn" @click="toggleVoice" :class="{ 'active-voice': isCurrentRoomVoice }"
title="Join Voice Chat">
<button class="invite-btn" @click="toggleVoice" :class="{ 'active-voice': isCurrentRoomVoice }">
<i class="fa-solid" :class="isCurrentRoomVoice ? 'fa-phone-slash' : 'fa-phone'"></i>
</button>
@@ -68,6 +69,7 @@ import MessageList from "./MessageList.vue";
import MessageInput from "./MessageInput.vue";
import InvitePeopleModal from './InvitePeopleModal.vue';
import RoomDetailsModal from "./RoomDetailsModal.vue";
import VoiceDeviceModal from "./VoiceDeviceModal.vue";
import WebSocket from '@tauri-apps/plugin-websocket';
import { getAuthData } from "../store.ts";
import { fetchRoomInfo } from "../api/rooms.ts";
@@ -96,9 +98,11 @@ const connectionError = ref<string | null>(null);
// Pagination State
const isLoadingMore = ref(false);
const hasMore = ref(true);
const isInitialLoad = ref(false);
const showInviteModal = ref(false);
const showDetailsModal = ref(false);
const isInitialLoad = ref(false);
const showVoiceModal = ref(false);
// WebSocket State
let socket: WebSocket | null = null;
@@ -324,7 +328,19 @@ async function toggleVoice() {
if (isCurrentRoomVoice.value) {
await voiceActions.leaveRoom();
} else {
await voiceActions.joinRoom(props.uuid);
showVoiceModal.value = true;
}
}
async function handleVoiceSelect(selection: { host: string | null, device: string | null }) {
showVoiceModal.value = false;
if (!selection) return;
try {
await voiceActions.joinRoom(props.uuid, selection.host, selection.device);
} catch (e) {
console.error("Failed to join voice", e);
}
}
</script>
src/components/VoiceDeviceModal.vue
+198
View File
@@ -0,0 +1,198 @@
<template>
<div class="backdrop" @click.self="$emit('close')">
<div class="modal">
<div v-if="step === 1" class="step-container">
<h3>{{ $t('chat-voice-select-host') || 'Select Audio System' }}</h3>
<div v-if="loadingHosts" class="loading">Loading systems...</div>
<div v-else class="list">
<button @click="selectHost(null)" class="item default">
<i class="fa-solid fa-wand-magic-sparkles"></i>
<span>Automatic (Default)</span>
</button>
<button v-for="host in hosts" :key="host" @click="selectHost(host)" class="item">
<i class="fa-solid fa-server"></i>
<span>{{ host }}</span>
</button>
</div>
</div>
<div v-else class="step-container">
<div class="header">
<button class="back-btn" @click="step = 1">
<i class="fa-solid fa-arrow-left"></i>
</button>
<h3>{{ selectedHost }} Devices</h3>
</div>
<div v-if="loadingDevices" class="loading">Scanning devices...</div>
<div v-else class="list">
<button @click="selectDevice(null)" class="item default">
<i class="fa-solid fa-star"></i>
<span>Default Device</span>
</button>
<button v-for="device in devices" :key="device[0]" @click="selectDevice(device[0])" class="item">
<i class="fa-solid fa-microphone"></i>
<div class="device-details">
<span class="device-name">{{ device[1] }}</span>
</div>
</button>
</div>
</div>
<div class="actions">
<button class="secondary" @click="$emit('close')">Cancel</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { voiceActions } from '../voice';
const emit = defineEmits(['close', 'select']);
const step = ref(1);
const hosts = ref<string[]>([]);
const devices = ref<string[]>([]); // Array of [id, name] tuples
const selectedHost = ref<string | null>(null);
const loadingHosts = ref(false);
const loadingDevices = ref(false);
onMounted(async () => {
loadingHosts.value = true;
hosts.value = await voiceActions.getHosts();
loadingHosts.value = false;
});
async function selectHost(host: string | null) {
selectedHost.value = host;
// Default
if (host === null) {
emit('select', { host: null, device: null });
return;
}
step.value = 2;
loadingDevices.value = true;
devices.value = await voiceActions.getDevices(host);
loadingDevices.value = false;
}
function selectDevice(deviceId: string | null) {
emit('select', { host: selectedHost.value, device: deviceId });
}
</script>
<style scoped>
.backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.step-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.header {
display: flex;
align-items: center;
gap: 1rem;
}
.back-btn {
background: transparent;
border: none;
color: var(--text);
cursor: pointer;
font-size: 1.1rem;
padding: 0.5rem;
border-radius: 50%;
}
.back-btn:hover {
background: var(--panel-hover);
}
.list {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 400px;
overflow-y: auto;
padding-right: 5px;
}
.item {
background: none;
text-align: left;
font-weight: 500;
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
display: flex;
align-items: center;
padding: 0.8rem;
gap: 0.8rem;
transition: all 0.2s ease;
min-width: 0;
}
.item:hover {
border-color: var(--accent-color);
background: var(--panel-hover);
}
.device-details {
display: flex;
flex-direction: column;
overflow: hidden;
}
.device-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.actions {
display: flex;
justify-content: flex-end;
margin-top: 0.5rem;
border-top: 1px solid var(--border);
padding-top: 1rem;
}
.loading {
text-align: center;
color: var(--muted);
padding: 2rem;
}
</style>
src/locales/en.ftl
+1
View File
@@ -50,6 +50,7 @@ chat-create-global = Global room
chat-create-submit = Create
chat-connecting = Connecting to room...
chat-connecting-failed = Could not connect. Check internet connection.
chat-voice-select-input = Select input device.
## User profile
profile-title = User profile
src/locales/fr.ftl
+1
View File
@@ -50,6 +50,7 @@ chat-create-global = Salon public
chat-create-submit = Créer
chat-connecting = Connexion au salon...
chat-connecting-failed = Impossible d'établir la connexion. Vérifiez votre internet.
chat-voice-select-input = Sélectionnez un périphérique d'entrée.
## User profile
profile-title = Profil d'utilisateur
src/main.ts
+4 -4
View File
@@ -54,9 +54,9 @@ async function init() {
init()
export const API = 'http://127.0.0.1:8080'
// export const API = 'http://192.168.1.183:8080'
// export const API = 'http://127.0.0.1:8080'
export const API = 'http://192.168.1.183:8080'
// export const API = 'https://alatreon.org/frangipane'
export const API_WS = 'ws://127.0.0.1:8080/ws'
// export const API_WS = 'ws://192.168.1.183:8080/ws'
// export const API_WS = 'ws://127.0.0.1:8080/ws'
export const API_WS = 'ws://192.168.1.183:8080/ws'
// export const API_WS = 'wss://alatreon.org/frangipane/ws'
src/pages/RegisterPage.vue
+1 -3
View File
@@ -48,11 +48,9 @@ const errorMessage = ref("");
const router = useRouter();
async function submit(event: Event) {
async function submit() {
errorMessage.value = "";
const form = event.target as HTMLFormElement;
// if (!form.checkValidity()) {
// if (password.value.length < 8) {
// errorMessage.value = $t('auth-error-password-length');
src/voice.ts
+27 -24
View File
@@ -1,5 +1,5 @@
import { reactive } from 'vue';
import { API_WS, logJS } from './main';
import { API_WS } from './main';
import { apiFetch } from './api/client';
import WebSocket from '@tauri-apps/plugin-websocket';
import { invoke } from '@tauri-apps/api/core';
@@ -53,34 +53,46 @@ export async function initVoiceListeners() {
}
export const voiceActions = {
async joinRoom(roomUuid: string) {
async getHosts(): Promise<string[]> {
try {
return await invoke<string[]>('get_audio_hosts');
} catch (e) {
console.error(e);
return [];
}
},
async getDevices(hostName: string | null): Promise<string[]> {
try {
return await invoke('get_input_devices', { hostName });
} catch (e) {
console.error(e);
return [];
}
},
async joinRoom(roomUuid: string, hostName: string | null, deviceName: string | null) {
if (voiceState.status === 'connected') return;
nextStartTime = 0;
voiceState.status = 'connecting';
voiceState.currentRoomUuid = roomUuid;
// Ensure listeners are active
await initVoiceListeners();
try {
const res = await apiFetch<{ token: string }>('/ws/issue-token');
const url = `${API_WS}/voice/${roomUuid}?token=${res.token}`;
socket = await WebSocket.connect(url);
socket.addListener((msg) => {
if (msg.type === 'Binary') {
handleIncomingAudio(msg.data);
} else if (msg.type === 'Close') {
voiceActions.leaveRoom();
}
if (msg.type === 'Binary') handleIncomingAudio(msg.data);
else if (msg.type === 'Close') voiceActions.leaveRoom();
});
await this.startAudioCapture();
await this.startAudioCapture(hostName, deviceName);
voiceState.status = 'connected';
} catch (e) {
logJS(e);
console.error("Voice join failed", e);
voiceActions.leaveRoom();
}
@@ -105,34 +117,25 @@ export const voiceActions = {
voiceState.isMuted = !voiceState.isMuted;
},
async startAudioCapture() {
async startAudioCapture(hostName: string | null, deviceName: string | null) {
const hasPermission = await ensureMicrophonePermission();
if (!hasPermission) {
throw new Error("Microphone permission denied");
}
// Give the OS a moment to release the mic resource from the WebView
if (!hasPermission) throw new Error("Microphone permission denied");
await new Promise(r => setTimeout(r, 200));
audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
unlistenConfig = await listen<{ sample_rate: number, channels: number }>('microphone-config', (event) => {
console.log("Mic Config Received:", event.payload);
voiceState.captureSampleRate = event.payload.sample_rate;
voiceState.captureChannels = event.payload.channels;
});
unlistenMic = await listen<number[]>('microphone-data', (event) => {
if (voiceState.isMuted || !socket) return;
socket.send(event.payload).catch(console.error);
});
try {
await invoke('start_microphone');
} catch (e) {
console.error("Failed to start mic:", e);
throw e;
}
await invoke('start_microphone', { hostName, deviceName });
},
async stopAudioCapture() {