Merge pull request #311 from vector-im/dbkr/fix_pt_button_behaviour

Fix mouseup/down behaviour of PTT button

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,32 @@ export function PTTButton({
   startTalking,
   stopTalking,
 }) {
+  const [isHeld, setHeld] = useState(false);
+  const onDocumentMouseUp = useCallback(() => {
+    if (isHeld) stopTalking();
+    setHeld(false);
+  }, [isHeld, setHeld]);
+
+  const onButtonMouseDown = useCallback(() => {
+    setHeld(true);
+    startTalking();
+  }, [setHeld]);
+
+  useEffect(() => {
+    window.addEventListener("mouseup", onDocumentMouseUp);
+
+    return () => {
+      window.removeEventListener("mouseup", onDocumentMouseUp);
+    };
+  }, [onDocumentMouseUp]);
+
   return (
     <button
       className={classNames(styles.pttButton, {
         [styles.talking]: activeSpeakerUserId,
         [styles.error]: showTalkOverError,
       })}
-      onMouseDown={startTalking}
-      onMouseUp={stopTalking}
+      onMouseDown={onButtonMouseDown}
     >
       {activeSpeakerIsLocalUser || !activeSpeakerUserId ? (
         <MicIcon