xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #869 from vector-im/dbkr/suppress_dup_ptt_unhold

Browse source 
Avoid duplicate PTT button 'unhold' events
This commit is contained in:
David Baker 2023-01-23 16:59:54 +00:00 • committed by GitHub
commit 41b72440a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/room/PTTButton.tsx
View file

@ -17,6 +17,7 @@ limitations under the License.
import React, { useCallback, useState, useRef } from "react"; import React, { useCallback, useState, useRef } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { useSpring, animated } from "@react-spring/web"; import { useSpring, animated } from "@react-spring/web";
import { logger } from "@sentry/utils";
import styles from "./PTTButton.module.css"; import styles from "./PTTButton.module.css";
import { ReactComponent as MicIcon } from "../icons/Mic.svg"; import { ReactComponent as MicIcon } from "../icons/Mic.svg";
@ -68,11 +69,23 @@ export const PTTButton: React.FC<Props> = ({
enqueueNetworkWaiting(true, 100); enqueueNetworkWaiting(true, 100);
startTalking(); startTalking();
}, [enqueueNetworkWaiting, startTalking, buttonHeld]); }, [enqueueNetworkWaiting, startTalking, buttonHeld]);
const unhold = useCallback(() => { const unhold = useCallback(() => {
if (!buttonHeld) return;
setButtonHeld(false); setButtonHeld(false);
setNetworkWaiting(false); setNetworkWaiting(false);
stopTalking(); stopTalking();
}, [setNetworkWaiting, stopTalking]); }, [setNetworkWaiting, stopTalking, buttonHeld]);
const onMouseUp = useCallback(() => {
logger.info("Mouse up event: unholding PTT button");
unhold();
}, [unhold]);
const onBlur = useCallback(() => {
logger.info("Blur event: unholding PTT button");
unhold();
}, [unhold]);
const onButtonMouseDown = useCallback( const onButtonMouseDown = useCallback(
(e: React.MouseEvent<HTMLButtonElement>) => { (e: React.MouseEvent<HTMLButtonElement>) => {
@ -85,7 +98,7 @@ export const PTTButton: React.FC<Props> = ({
// These listeners go on the window so even if the user's cursor / finger // These listeners go on the window so even if the user's cursor / finger
// leaves the button while holding it, the button stays pushed until // leaves the button while holding it, the button stays pushed until
// they stop clicking / tapping. // they stop clicking / tapping.
useEventTarget(window, "mouseup", unhold); useEventTarget(window, "mouseup", onMouseUp);
useEventTarget( useEventTarget(
window, window,
"touchend", "touchend",
@ -103,6 +116,8 @@ export const PTTButton: React.FC<Props> = ({
} }
if (!touchFound) return; if (!touchFound) return;
logger.info("Touch event ended: unholding PTT button");
e.preventDefault(); e.preventDefault();
unhold(); unhold();
setActiveTouchId(null); setActiveTouchId(null);
@ -163,6 +178,8 @@ export const PTTButton: React.FC<Props> = ({
e.preventDefault(); e.preventDefault();
logger.info("Keyup event for spacebar: unholding PTT button");
unhold(); unhold();
} }
}, },
@ -171,7 +188,7 @@ export const PTTButton: React.FC<Props> = ({
); );
// TODO: We will need to disable this for a global PTT hotkey to work // TODO: We will need to disable this for a global PTT hotkey to work
useEventTarget(window, "blur", unhold); useEventTarget(window, "blur", onBlur);
const prefersReducedMotion = usePrefersReducedMotion(); const prefersReducedMotion = usePrefersReducedMotion();
const { shadow } = useSpring({ const { shadow } = useSpring({