From f0b116714ba4144c9e0943cc1e6e5ce5162e4759 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 4 May 2022 16:52:45 +0100
Subject: [PATCH 1/3] Fix mouseup/down behaviour of PTT button

Handle mouseup events anywhere so the button releases if you move
the cursor out of the button & release. Likewsie for window losing
focus.
---
 src/room/PTTButton.jsx | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/room/PTTButton.jsx b/src/room/PTTButton.jsx
index 6da9b863..02f90571 100644
--- a/src/room/PTTButton.jsx
+++ b/src/room/PTTButton.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import classNames from "classnames";
 import styles from "./PTTButton.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
@@ -14,14 +14,39 @@ export function PTTButton({
   startTalking,
   stopTalking,
 }) {
+  const [isHeld, setHeld] = useState(false);
+  const onDocumentMouseUp = useCallback(() => {
+    if (isHeld) stopTalking();
+    setHeld(false);
+  }, [isHeld, setHeld]);
+
+  const onWindowBlur = useCallback(() => {
+    if (isHeld) stopTalking();
+    setHeld(false);
+  }, [isHeld, setHeld]);
+
+  const onButtonMouseDown = useCallback(() => {
+    setHeld(true);
+    startTalking();
+  }, [setHeld]);
+
+  useEffect(() => {
+    window.addEventListener("mouseup", onDocumentMouseUp);
+    window.addEventListener("blur", onWindowBlur);
+
+    return () => {
+      window.removeEventListener("mouseup", onDocumentMouseUp);
+      window.removeEventListener("blur", onWindowBlur);
+    };
+  }, [onDocumentMouseUp, onWindowBlur]);
+
   return (
     <button
       className={classNames(styles.pttButton, {
         [styles.talking]: activeSpeakerUserId,
         [styles.error]: showTalkOverError,
       })}
-      onMouseDown={startTalking}
-      onMouseUp={stopTalking}
+      onMouseDown={onButtonMouseDown}
     >
       {activeSpeakerIsLocalUser || !activeSpeakerUserId ? (
         <MicIcon

From 85a98b3706e6a1e4348b443c69e4a279fbe04ac9 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 4 May 2022 17:35:43 +0100
Subject: [PATCH 2/3] Remove onWindowBlur

we already do this in usePTT
---
 src/room/PTTButton.jsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/room/PTTButton.jsx b/src/room/PTTButton.jsx
index 02f90571..4a5874eb 100644
--- a/src/room/PTTButton.jsx
+++ b/src/room/PTTButton.jsx
@@ -16,12 +16,7 @@ export function PTTButton({
 }) {
   const [isHeld, setHeld] = useState(false);
   const onDocumentMouseUp = useCallback(() => {
-    if (isHeld) stopTalking();
-    setHeld(false);
-  }, [isHeld, setHeld]);
-
-  const onWindowBlur = useCallback(() => {
-    if (isHeld) stopTalking();
+    //if (isHeld) stopTalking();
     setHeld(false);
   }, [isHeld, setHeld]);
 
@@ -32,13 +27,11 @@ export function PTTButton({
 
   useEffect(() => {
     window.addEventListener("mouseup", onDocumentMouseUp);
-    window.addEventListener("blur", onWindowBlur);
 
     return () => {
       window.removeEventListener("mouseup", onDocumentMouseUp);
-      window.removeEventListener("blur", onWindowBlur);
     };
-  }, [onDocumentMouseUp, onWindowBlur]);
+  }, [onDocumentMouseUp]);
 
   return (
     <button

From ad3bde9920b9ce1a20f5f37eb690c7c9193f42b3 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 4 May 2022 17:36:35 +0100
Subject: [PATCH 3/3] Undo unintentionally commented line

---
 src/room/PTTButton.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/room/PTTButton.jsx b/src/room/PTTButton.jsx
index 4a5874eb..3a20e64d 100644
--- a/src/room/PTTButton.jsx
+++ b/src/room/PTTButton.jsx
@@ -16,7 +16,7 @@ export function PTTButton({
 }) {
   const [isHeld, setHeld] = useState(false);
   const onDocumentMouseUp = useCallback(() => {
-    //if (isHeld) stopTalking();
+    if (isHeld) stopTalking();
     setHeld(false);
   }, [isHeld, setHeld]);