diff --git a/README.md b/README.md index c80c7900..997af57c 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,8 @@ Full mesh group calls powered by [Matrix](https://matrix.org), implementing [MatrixRTC](https://github.com/matrix-org/matrix-spec-proposals/blob/matthew/group-voip/proposals/3401-group-voip.md). +![A demo of Element Call with six people](demo.jpg) + To try it out, visit our hosted version at [call.element.io](https://call.element.io). You can also find the latest development version continuously deployed to [element-call.netlify.app](https://element-call.netlify.app). ## Host it yourself diff --git a/demo.jpg b/demo.jpg new file mode 100644 index 00000000..afce1ae3 Binary files /dev/null and b/demo.jpg differ diff --git a/src/room/PTTButton.tsx b/src/room/PTTButton.tsx index abc02c68..1ff7b27b 100644 --- a/src/room/PTTButton.tsx +++ b/src/room/PTTButton.tsx @@ -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 = ({ 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) => { @@ -85,7 +98,7 @@ export const PTTButton: React.FC = ({ // 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 = ({ } 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 = ({ e.preventDefault(); + logger.info("Keyup event for spacebar: unholding PTT button"); + unhold(); } }, @@ -171,7 +188,7 @@ export const PTTButton: React.FC = ({ ); // 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({