Merge pull request #306 from vector-im/dbkr/button_for_ptt

Wire up pressing the PTT button to unmute as well as spacebar

src/room/PTTButton.jsx

@@ -11,6 +11,8 @@ export function PTTButton({
   activeSpeakerAvatarUrl,
   activeSpeakerIsLocalUser,
   size,
+  startTalking,
+  stopTalking,
 }) {
   return (
     <button
@@ -18,6 +20,8 @@ export function PTTButton({
         [styles.talking]: activeSpeakerUserId,
         [styles.error]: showTalkOverError,
       })}
+      onMouseDown={startTalking}
+      onMouseUp={stopTalking}
     >
       {activeSpeakerIsLocalUser || !activeSpeakerUserId ? (
         <MicIcon

src/room/PTTCallView.jsx

@@ -45,6 +45,8 @@ export function PTTCallView({
     talkOverEnabled,
     setTalkOverEnabled,
     activeSpeakerUserId,
+    startTalking,
+    stopTalking,
   } = usePTT(client, groupCall, userMediaFeeds);
 
   const activeSpeakerIsLocalUser =
@@ -115,6 +117,8 @@ export function PTTCallView({
             activeSpeakerAvatarUrl={activeSpeakerAvatarUrl}
             activeSpeakerIsLocalUser={activeSpeakerIsLocalUser}
             size={pttButtonSize}
+            startTalking={startTalking}
+            stopTalking={stopTalking}
           />
           <p className={styles.actionTip}>
             {showTalkOverError

src/room/usePTT.js

@@ -47,18 +47,30 @@ export function usePTT(client, groupCall, userMediaFeeds) {
     };
   }, [userMediaFeeds]);
 
+  const startTalking = useCallback(() => {
+    if (!activeSpeakerUserId || isAdmin || talkOverEnabled) {
+      if (groupCall.isMicrophoneMuted()) {
+        groupCall.setMicrophoneMuted(false);
+      }
+
+      setState((prevState) => ({ ...prevState, pttButtonHeld: true }));
+    }
+  }, []);
+
+  const stopTalking = useCallback(() => {
+    if (!groupCall.isMicrophoneMuted()) {
+      groupCall.setMicrophoneMuted(true);
+    }
+
+    setState((prevState) => ({ ...prevState, pttButtonHeld: false }));
+  }, []);
+
   useEffect(() => {
     function onKeyDown(event) {
       if (event.code === "Space") {
         event.preventDefault();
 
-        if (!activeSpeakerUserId || isAdmin || talkOverEnabled) {
+        startTalking();
-          if (groupCall.isMicrophoneMuted()) {
-            groupCall.setMicrophoneMuted(false);
-          }
-
-          setState((prevState) => ({ ...prevState, pttButtonHeld: true }));
-        }
       }
     }
 
@@ -66,11 +78,7 @@ export function usePTT(client, groupCall, userMediaFeeds) {
       if (event.code === "Space") {
         event.preventDefault();
 
-        if (!groupCall.isMicrophoneMuted()) {
+        stopTalking();
-          groupCall.setMicrophoneMuted(true);
-        }
-
-        setState((prevState) => ({ ...prevState, pttButtonHeld: false }));
       }
     }
 
@@ -107,5 +115,7 @@ export function usePTT(client, groupCall, userMediaFeeds) {
     talkOverEnabled,
     setTalkOverEnabled,
     activeSpeakerUserId,
+    startTalking,
+    stopTalking,
   };
 }