Merge remote-tracking branch 'origin/main' into dbkr/typescript_round_1

src/room/PTTButton.tsx

@@ -1,4 +1,20 @@
-import React from "react";
+/*
+Copyright 2022 Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useCallback, useEffect, useState } from "react";
 import classNames from "classnames";
 
 import styles from "./PTTButton.module.css";
@@ -26,14 +42,31 @@ export const PTTButton: React.FC<Props> = ({
   startTalking,
   stopTalking,
 }) => {
+  const [isHeld, setHeld] = useState(false);
+  const onDocumentMouseUp = useCallback(() => {
+    if (isHeld) stopTalking();
+    setHeld(false);
+  }, [isHeld, setHeld, stopTalking]);
+
+  const onButtonMouseDown = useCallback(() => {
+    setHeld(true);
+    startTalking();
+  }, [setHeld, startTalking]);
+
+  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