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

Avoid duplicate PTT button 'unhold' events

Browse source 
We called the 'unhold' function even if the button wasn't held which
probably will have been generating unmute events even when we weren't
muted.

Also use separate handlers for events so we can have specific log lines
(and also see where the event comes from when caught in the debugger).
This commit is contained in:
David Baker 2023-01-23 16:53:24 +00:00
parent 4f0a780ecf
commit d65464e4db
1 changed files with 20 additions and 3 deletions
Show stats 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 classNames from "classnames";
import { useSpring, animated } from "@react-spring/web";
import { logger } from "@sentry/utils";
import styles from "./PTTButton.module.css";
import { ReactComponent as MicIcon } from "../icons/Mic.svg";
@ -68,11 +69,23 @@ export const PTTButton: React.FC<Props> = ({
enqueueNetworkWaiting(true, 100);
startTalking();
}, [enqueueNetworkWaiting, startTalking, buttonHeld]);
const unhold = useCallback(() => {
if (!buttonHeld) return;
setButtonHeld(false);
setNetworkWaiting(false);
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(
(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
// leaves the button while holding it, the button stays pushed until
// they stop clicking / tapping.
useEventTarget(window, "mouseup", unhold);
useEventTarget(window, "mouseup", onMouseUp);
useEventTarget(
window,
"touchend",
@ -103,6 +116,8 @@ export const PTTButton: React.FC<Props> = ({
}
if (!touchFound) return;
logger.info("Touch event ended: unholding PTT button");
e.preventDefault();
unhold();
setActiveTouchId(null);
@ -163,6 +178,8 @@ export const PTTButton: React.FC<Props> = ({
e.preventDefault();
logger.info("Keyup event for spacebar: unholding PTT button");
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
useEventTarget(window, "blur", unhold);
useEventTarget(window, "blur", onBlur);
const prefersReducedMotion = usePrefersReducedMotion();
const { shadow } = useSpring({