feat: push to talk (#28)

* feat: push to talk

* refactor: better description

* refactor: better description

Author: BreadGenie

frontend/src/components/settings/AudioSettingsTab.vue

@@ -1,7 +1,5 @@
 <template>
-	<SettingsLayoutBase
-		:description="'Configure audio processing options for your microphone'"
-	>
+	<SettingsLayoutBase :description="'Configure your audio and microphone settings'">
 		<template #title>
 			Audio
 		</template>
@@ -13,6 +11,12 @@
 					description="Reduce background noise from your microphone"
 					v-model="noiseCancellationEnabledLocal"
 				/>
+				<Switch
+					class="w-full !px-0"
+					label="Push to Talk"
+					description="Hold spacebar to unmute your microphone"
+					v-model="pushToTalkEnabledLocal"
+				/>
 			</div>
 		</template>
 	</SettingsLayoutBase>
@@ -23,7 +27,9 @@ import { Switch } from "frappe-ui";
 import { type Ref, ref, watch } from "vue";
 import {
 	noiseCancellationEnabled,
+	pushToTalkEnabled,
 	setNoiseCancellationEnabled,
+	setPushToTalkEnabled,
 } from "../../data/mediaPreferences";
 import SettingsLayoutBase from "./SettingsLayoutBase.vue";
 
@@ -38,4 +44,14 @@ watch(noiseCancellationEnabledLocal, (newValue) => {
 watch(noiseCancellationEnabled, (newValue) => {
 	noiseCancellationEnabledLocal.value = newValue;
 });
+
+const pushToTalkEnabledLocal: Ref<boolean> = ref(pushToTalkEnabled.value);
+
+watch(pushToTalkEnabledLocal, (newValue) => {
+	setPushToTalkEnabled(newValue);
+});
+
+watch(pushToTalkEnabled, (newValue) => {
+	pushToTalkEnabledLocal.value = newValue;
+});
 </script>

frontend/src/composables/useMeetingLogic.js

@@ -5,6 +5,7 @@ import {
 	noiseCancellationEnabled,
 	cameraEnabled as prefCameraEnabled,
 	micEnabled as prefMicEnabled,
+	pushToTalkEnabled,
 	selectedCameraId,
 	selectedMicId,
 	selectedSpeakerId,
@@ -62,6 +63,7 @@ export function useMeetingLogic(meetingState, meetingId, options = {}) {
 	const realtimeListenersSetup = ref(false);
 	const activeSpeakerTimeout = ref(null);
 	const joiningInProgress = ref(false);
+	const unmutedByPushToTalk = ref(false);
 
 	// Background effects
 	const { applyBackgroundEffects, stopProcessing, processedStream } =
@@ -2119,6 +2121,25 @@ export function useMeetingLogic(meetingState, meetingId, options = {}) {
 	 * Handle keyboard shortcuts
 	 */
 	const handleKeyDown = (event) => {
+		const targetTag = event.target?.tagName?.toLowerCase();
+		const isInput =
+			targetTag === "input" ||
+			targetTag === "textarea" ||
+			event.target?.isContentEditable;
+
+		if (
+			pushToTalkEnabled.value &&
+			event.code === "Space" &&
+			!isInput &&
+			!event.repeat
+		) {
+			event.preventDefault();
+			if (!meetingState.isMicOn.value) {
+				unmutedByPushToTalk.value = true;
+				toggleMicrophone();
+			}
+		}
+
 		if ((event.metaKey || event.ctrlKey) && event.key === "d") {
 			event.preventDefault();
 			toggleMicrophone();
@@ -2129,6 +2150,23 @@ export function useMeetingLogic(meetingState, meetingId, options = {}) {
 		}
 	};
 
+	const handleKeyUp = (event) => {
+		const targetTag = event.target?.tagName?.toLowerCase();
+		const isInput =
+			targetTag === "input" ||
+			targetTag === "textarea" ||
+			event.target?.isContentEditable;
+
+		if (pushToTalkEnabled.value && event.code === "Space" && !isInput) {
+			if (unmutedByPushToTalk.value) {
+				unmutedByPushToTalk.value = false;
+				if (meetingState.isMicOn.value) {
+					toggleMicrophone();
+				}
+			}
+		}
+	};
+
 	// ==================== NOTIFICATION CONTEXT WATCHERS ====================
 
 	// Watch chat state to update notification context
@@ -2286,5 +2324,6 @@ export function useMeetingLogic(meetingState, meetingId, options = {}) {
 
 		// Methods - Keyboard
 		handleKeyDown,
+		handleKeyUp,
 	};
 }

frontend/src/data/mediaPreferences.ts

@@ -28,6 +28,10 @@ export const noiseCancellationEnabled: Ref<boolean> = ref(
 	readBool("mediaPref.noiseCancellation", false),
 );
 
+export const pushToTalkEnabled: Ref<boolean> = ref(
+	readBool("mediaPref.pushToTalk", false),
+);
+
 export function setNoiseCancellationEnabled(val: boolean): void {
 	noiseCancellationEnabled.value = !!val;
 	localStorage.setItem(
@@ -36,6 +40,14 @@ export function setNoiseCancellationEnabled(val: boolean): void {
 	);
 }
 
+export function setPushToTalkEnabled(val: boolean): void {
+	pushToTalkEnabled.value = !!val;
+	localStorage.setItem(
+		"mediaPref.pushToTalk",
+		pushToTalkEnabled.value ? "1" : "0",
+	);
+}
+
 export function setMicEnabled(val: boolean): void {
 	micEnabled.value = !!val;
 	localStorage.setItem("mediaPref.mic", micEnabled.value ? "1" : "0");
@@ -71,4 +83,5 @@ export function loadMediaPreferences(): void {
 		"mediaPref.noiseCancellation",
 		false,
 	);
+	pushToTalkEnabled.value = readBool("mediaPref.pushToTalk", false);
 }

frontend/src/pages/Meeting.vue

@@ -241,6 +241,7 @@ const {
 	setupRaiseHandEvents,
 	toggleRaiseHand,
 	handleKeyDown,
+	handleKeyUp,
 	sfuManager,
 	applySpeakerDevice,
 	processedStream,
@@ -657,6 +658,7 @@ const handleDeviceChanged = async (event) => {
 // Lifecycle
 onMounted(async () => {
 	window.addEventListener("keydown", handleKeyDown);
+	window.addEventListener("keyup", handleKeyUp);
 
 	// Clear any stale error/connection state from previous navigations
 	if (typeof meetingState.resetConnectionState === "function") {
@@ -736,6 +738,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
 	window.removeEventListener("keydown", handleKeyDown);
+	window.removeEventListener("keyup", handleKeyUp);
 
 	// Cleanup will be handled by the meeting logic composable
 });