215 lines
8.2 KiB
TypeScript
215 lines
8.2 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|||
|
|
import { atom, useSetAtom } from 'jotai';
|
||
|
|
import { CallEmbed, useCallControlState } from '../plugins/call';
|
||
|
|
import { useSetting } from '../state/hooks/settings';
|
||
|
|
import { settingsAtom } from '../state/settings';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* True while a push-to-talk key is held. Written by useCallHotkeys (mounted for
|
||
|
|
* the lifetime of the embed) and read by the PTT chip in CallControls, which
|
||
|
|
* only renders while the call room is selected.
|
||
|
|
*/
|
||
|
|
export const pttActiveAtom = atom(false);
|
||
|
|
|
||
|
|
type KeyLike = {
|
||
|
|
code: string;
|
||
|
|
repeat: boolean;
|
||
|
|
ctrlKey: boolean;
|
||
|
|
altKey: boolean;
|
||
|
|
metaKey: boolean;
|
||
|
|
shiftKey: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Whether a keydown should engage push-to-talk for `pttKey`.
|
||
|
|
* [Gitea #23] Ignore the PTT key with Ctrl/Alt/Meta held so it doesn't hijack
|
||
|
|
* OS/app chords (e.g. Cmd+Space) that happen to share the code. Shift is
|
||
|
|
* allowed through — Shift+Space is a harmless combo for PTT.
|
||
|
|
*/
|
||
|
|
export const isPttKeyDown = (e: KeyLike, pttKey: string): boolean =>
|
||
|
|
e.code === pttKey && !e.repeat && !e.ctrlKey && !e.altKey && !e.metaKey;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Whether a keydown should toggle deafen for `deafenKey`.
|
||
|
|
* [Gitea #23] Ignore the deafen key with any modifier held — with the default
|
||
|
|
* 'KeyM', Ctrl+M / Alt+M / Cmd+M are common OS/app chords that shouldn't also
|
||
|
|
* toggle deafen (and previously got preventDefault()ed).
|
||
|
|
*/
|
||
|
|
export const isDeafenKeyDown = (e: KeyLike, deafenKey: string): boolean =>
|
||
|
|
e.code === deafenKey && !e.repeat && !e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey;
|
||
|
|
|
||
|
|
// BUG-7: use ownerDocument.body so isEditable works inside the EC iframe
|
||
|
|
const isEditable = (el: HTMLElement): boolean => {
|
||
|
|
const tag = el.tagName;
|
||
|
|
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
|
||
|
|
let node: HTMLElement | null = el;
|
||
|
|
while (node && node !== el.ownerDocument.body) {
|
||
|
|
if (node.contentEditable === 'true') return true;
|
||
|
|
if (node.contentEditable === 'false') return false;
|
||
|
|
node = node.parentElement;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
|
||
|
|
// [Gitea #23] Don't swallow Space on a focused button/link/etc — PTT still
|
||
|
|
// engages the mic, but the key's default action (activating the control)
|
||
|
|
// is left alone so keyboard users can still Tab+Space the call buttons.
|
||
|
|
const isInteractive = (el: HTMLElement): boolean => {
|
||
|
|
const tag = el.tagName;
|
||
|
|
if (tag === 'BUTTON' || tag === 'A' || tag === 'SELECT') return true;
|
||
|
|
let node: HTMLElement | null = el;
|
||
|
|
while (node && node !== el.ownerDocument.body) {
|
||
|
|
const role = node.getAttribute('role');
|
||
|
|
if (role === 'button' || role === 'link' || role === 'menuitem' || role === 'tab') {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
node = node.parentElement;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Bind listeners to the EC iframe's window and keep them bound across document
|
||
|
|
* reloads. [Gitea #60] Listeners registered on a contentWindow are discarded
|
||
|
|
* when that window navigates to a new document (crash recovery, in-widget
|
||
|
|
* navigation), so re-run `bind` from the iframe's `load` event and detach the
|
||
|
|
* previous set. Returns a cleanup that detaches everything.
|
||
|
|
*/
|
||
|
|
const bindIframeWindow = (
|
||
|
|
iframe: HTMLIFrameElement,
|
||
|
|
bind: (win: Window) => () => void,
|
||
|
|
): (() => void) => {
|
||
|
|
let unbind: (() => void) | undefined;
|
||
|
|
const attach = () => {
|
||
|
|
unbind?.();
|
||
|
|
const win = iframe.contentWindow;
|
||
|
|
unbind = win ? bind(win) : undefined;
|
||
|
|
};
|
||
|
|
attach();
|
||
|
|
iframe.addEventListener('load', attach);
|
||
|
|
return () => {
|
||
|
|
iframe.removeEventListener('load', attach);
|
||
|
|
unbind?.();
|
||
|
|
unbind = undefined;
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Push-to-talk and deafen hotkeys for the active call.
|
||
|
|
*
|
||
|
|
* [Gitea #9] Mounted from CallUtils (CallEmbedProvider) so the bindings live as
|
||
|
|
* long as the embed — not only while the call room is the selected room. Before
|
||
|
|
* this lived in CallControls, so navigating away (PiP) or opening the in-call
|
||
|
|
* chat on mobile silently dropped PTT and the deafen key. Gated on `joined` so
|
||
|
|
* nothing is sent over the widget transport before EC's handler mounts.
|
||
|
|
*/
|
||
|
|
export function useCallHotkeys(callEmbed: CallEmbed | undefined, joined: boolean): void {
|
||
|
|
const embed = joined ? callEmbed : undefined;
|
||
|
|
const [pttMode] = useSetting(settingsAtom, 'pttMode');
|
||
|
|
const [pttKey] = useSetting(settingsAtom, 'pttKey');
|
||
|
|
const [deafenKey] = useSetting(settingsAtom, 'deafenKey');
|
||
|
|
const { microphone } = useCallControlState(embed?.control);
|
||
|
|
const setPttActive = useSetAtom(pttActiveAtom);
|
||
|
|
|
||
|
|
// Track microphone via ref so the PTT effect doesn't need it as a dep (avoids listener churn)
|
||
|
|
const microphoneRef = useRef(microphone);
|
||
|
|
useEffect(() => {
|
||
|
|
microphoneRef.current = microphone;
|
||
|
|
}, [microphone]);
|
||
|
|
|
||
|
|
// Handle PTT mode toggle mid-call — save/restore mic state (I-4)
|
||
|
|
const pttModeRef = useRef(pttMode);
|
||
|
|
const micBeforePTTRef = useRef<boolean | null>(null);
|
||
|
|
useEffect(() => {
|
||
|
|
if (embed) {
|
||
|
|
if (pttMode && !pttModeRef.current) {
|
||
|
|
micBeforePTTRef.current = microphoneRef.current;
|
||
|
|
embed.control.setMicrophone(false);
|
||
|
|
} else if (!pttMode && pttModeRef.current) {
|
||
|
|
embed.control.setMicrophone(micBeforePTTRef.current ?? true);
|
||
|
|
micBeforePTTRef.current = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
pttModeRef.current = pttMode;
|
||
|
|
}, [pttMode, embed]);
|
||
|
|
|
||
|
|
const pttActiveRef = useRef(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!embed || !pttMode) return undefined;
|
||
|
|
|
||
|
|
const release = () => {
|
||
|
|
embed.control.pttActive = false;
|
||
|
|
embed.control.setMicrophone(false);
|
||
|
|
pttActiveRef.current = false;
|
||
|
|
setPttActive(false);
|
||
|
|
};
|
||
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
||
|
|
if (!isPttKeyDown(e, pttKey)) return;
|
||
|
|
const target = e.target as HTMLElement;
|
||
|
|
if (isEditable(target)) return;
|
||
|
|
if (!isInteractive(target)) e.preventDefault();
|
||
|
|
// C-M5: mark PTT active BEFORE unmuting so the mic echo (onMediaState)
|
||
|
|
// doesn't treat this transient unmute as a user-initiated undeafen.
|
||
|
|
embed.control.pttActive = true;
|
||
|
|
if (!microphoneRef.current) embed.control.setMicrophone(true);
|
||
|
|
pttActiveRef.current = true;
|
||
|
|
setPttActive(true);
|
||
|
|
};
|
||
|
|
const onKeyUp = (e: KeyboardEvent) => {
|
||
|
|
if (e.code !== pttKey) return;
|
||
|
|
release();
|
||
|
|
};
|
||
|
|
// BUG-9: release a held key when focus leaves/enters so the mic can't stick
|
||
|
|
// open after the keyup lands elsewhere. [Gitea #27] Only when a PTT hold is
|
||
|
|
// actually in progress — the mic button is still usable in PTT mode, and a
|
||
|
|
// deliberate hands-free unmute must survive a click into the iframe/alt-tab.
|
||
|
|
const onFocusChange = () => {
|
||
|
|
if (pttActiveRef.current) release();
|
||
|
|
};
|
||
|
|
const bind = (win: Window) => {
|
||
|
|
win.addEventListener('keydown', onKeyDown);
|
||
|
|
win.addEventListener('keyup', onKeyUp);
|
||
|
|
win.addEventListener('blur', onFocusChange);
|
||
|
|
win.addEventListener('focus', onFocusChange);
|
||
|
|
return () => {
|
||
|
|
win.removeEventListener('keydown', onKeyDown);
|
||
|
|
win.removeEventListener('keyup', onKeyUp);
|
||
|
|
win.removeEventListener('blur', onFocusChange);
|
||
|
|
win.removeEventListener('focus', onFocusChange);
|
||
|
|
};
|
||
|
|
};
|
||
|
|
const unbindHost = bind(window);
|
||
|
|
// BUG-9: also wire iframe key/blur/focus so PTT works with focus in the iframe
|
||
|
|
const unbindIframe = bindIframeWindow(embed.iframe, bind);
|
||
|
|
return () => {
|
||
|
|
unbindHost();
|
||
|
|
unbindIframe();
|
||
|
|
// BUG-8: if the embed changes while PTT is active, release mic on cleanup
|
||
|
|
if (pttActiveRef.current) release();
|
||
|
|
};
|
||
|
|
// microphone intentionally read via microphoneRef — excluded from deps to avoid listener churn
|
||
|
|
}, [pttMode, pttKey, embed, setPttActive]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!embed) return undefined;
|
||
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
||
|
|
if (!isDeafenKeyDown(e, deafenKey)) return;
|
||
|
|
if (isEditable(e.target as HTMLElement)) return;
|
||
|
|
e.preventDefault();
|
||
|
|
embed.control.toggleSound();
|
||
|
|
};
|
||
|
|
window.addEventListener('keydown', onKeyDown);
|
||
|
|
// C-L4: also bind the EC iframe window so the deafen key works when focus is
|
||
|
|
// inside the iframe (mirrors the PTT binding above).
|
||
|
|
const unbindIframe = bindIframeWindow(embed.iframe, (win) => {
|
||
|
|
win.addEventListener('keydown', onKeyDown);
|
||
|
|
return () => win.removeEventListener('keydown', onKeyDown);
|
||
|
|
});
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener('keydown', onKeyDown);
|
||
|
|
unbindIframe();
|
||
|
|
};
|
||
|
|
}, [embed, deafenKey]);
|
||
|
|
}
|