Merge pull request #327 from vector-im/dbkr/end_talk_sound

Add sound when speaker stops speaking

src/room/PTTCallView.tsx

@@ -109,8 +109,13 @@ export const PTTCallView: React.FC<Props> = ({
 
   const { audioOutput } = useMediaHandler();
 
-  const { startTalkingLocalRef, startTalkingRemoteRef, blockedRef, playClip } =
-    usePTTSounds();
+  const {
+    startTalkingLocalRef,
+    startTalkingRemoteRef,
+    blockedRef,
+    endTalkingRef,
+    playClip,
+  } = usePTTSounds();
 
   const {
     pttButtonHeld,
@@ -146,6 +151,7 @@ export const PTTCallView: React.FC<Props> = ({
       <PTTClips
         startTalkingLocalRef={startTalkingLocalRef}
         startTalkingRemoteRef={startTalkingRemoteRef}
+        endTalkingRef={endTalkingRef}
         blockedRef={blockedRef}
       />
       <Header className={styles.header}>

src/room/usePTT.ts

@@ -27,17 +27,14 @@ import { PlayClipFunction, PTTClipID } from "../sound/usePttSounds";
 function getActiveSpeakerFeed(
   feeds: CallFeed[],
   groupCall: GroupCall
-): CallFeed {
+): CallFeed | null {
   const activeSpeakerFeeds = feeds.filter((f) => !f.isAudioMuted());
 
-  let activeSpeakerFeed;
-  let highestPowerLevel;
+  let activeSpeakerFeed = null;
+  let highestPowerLevel = null;
   for (const feed of activeSpeakerFeeds) {
     const member = groupCall.room.getMember(feed.userId);
-    if (
-      highestPowerLevel === undefined ||
-      member.powerLevel > highestPowerLevel
-    ) {
+    if (highestPowerLevel === null || member.powerLevel > highestPowerLevel) {
       highestPowerLevel = member.powerLevel;
       activeSpeakerFeed = feed;
     }
@@ -110,12 +107,14 @@ export const usePTT = (
     const activeSpeakerFeed = getActiveSpeakerFeed(userMediaFeeds, groupCall);
 
     let blocked = false;
-    if (activeSpeakerUserId === null && activeSpeakerFeed.userId !== null) {
+    if (activeSpeakerUserId === null && activeSpeakerFeed !== null) {
       if (activeSpeakerFeed.userId === client.getUserId()) {
         playClip(PTTClipID.START_TALKING_LOCAL);
       } else {
         playClip(PTTClipID.START_TALKING_REMOTE);
       }
+    } else if (activeSpeakerUserId !== null && activeSpeakerFeed === null) {
+      playClip(PTTClipID.END_TALKING);
     } else if (
       pttButtonHeld &&
       activeSpeakerUserId === client.getUserId() &&

src/sound/PTTClips.tsx

@@ -20,6 +20,8 @@ import startTalkLocalOggUrl from "./start_talk_local.ogg";
 import startTalkLocalMp3Url from "./start_talk_local.mp3";
 import startTalkRemoteOggUrl from "./start_talk_remote.ogg";
 import startTalkRemoteMp3Url from "./start_talk_remote.mp3";
+import endTalkOggUrl from "./end_talk.ogg";
+import endTalkMp3Url from "./end_talk.mp3";
 import blockedOggUrl from "./blocked.ogg";
 import blockedMp3Url from "./blocked.mp3";
 import styles from "./PTTClips.module.css";
@@ -27,12 +29,14 @@ import styles from "./PTTClips.module.css";
 interface Props {
   startTalkingLocalRef: React.RefObject<HTMLAudioElement>;
   startTalkingRemoteRef: React.RefObject<HTMLAudioElement>;
+  endTalkingRef: React.RefObject<HTMLAudioElement>;
   blockedRef: React.RefObject<HTMLAudioElement>;
 }
 
 export const PTTClips: React.FC<Props> = ({
   startTalkingLocalRef,
   startTalkingRemoteRef,
+  endTalkingRef,
   blockedRef,
 }) => {
   return (
@@ -53,6 +57,10 @@ export const PTTClips: React.FC<Props> = ({
         <source type="audio/ogg" src={startTalkRemoteOggUrl} />
         <source type="audio/mpeg" src={startTalkRemoteMp3Url} />
       </audio>
+      <audio preload="true" className={styles.pttClip} ref={endTalkingRef}>
+        <source type="audio/ogg" src={endTalkOggUrl} />
+        <source type="audio/mpeg" src={endTalkMp3Url} />
+      </audio>
       <audio preload="true" className={styles.pttClip} ref={blockedRef}>
         <source type="audio/ogg" src={blockedOggUrl} />
         <source type="audio/mpeg" src={blockedMp3Url} />

src/sound/usePttSounds.ts

@@ -19,6 +19,7 @@ import React, { useCallback, useState } from "react";
 export enum PTTClipID {
   START_TALKING_LOCAL,
   START_TALKING_REMOTE,
+  END_TALKING,
   BLOCKED,
 }
 
@@ -27,6 +28,7 @@ export type PlayClipFunction = (clipID: PTTClipID) => void;
 interface PTTSounds {
   startTalkingLocalRef: React.RefObject<HTMLAudioElement>;
   startTalkingRemoteRef: React.RefObject<HTMLAudioElement>;
+  endTalkingRef: React.RefObject<HTMLAudioElement>;
   blockedRef: React.RefObject<HTMLAudioElement>;
   playClip: PlayClipFunction;
 }
@@ -34,6 +36,7 @@ interface PTTSounds {
 export const usePTTSounds = (): PTTSounds => {
   const [startTalkingLocalRef] = useState(React.createRef<HTMLAudioElement>());
   const [startTalkingRemoteRef] = useState(React.createRef<HTMLAudioElement>());
+  const [endTalkingRef] = useState(React.createRef<HTMLAudioElement>());
   const [blockedRef] = useState(React.createRef<HTMLAudioElement>());
 
   const playClip = useCallback(
@@ -47,6 +50,9 @@ export const usePTTSounds = (): PTTSounds => {
         case PTTClipID.START_TALKING_REMOTE:
           ref = startTalkingRemoteRef;
           break;
+        case PTTClipID.END_TALKING:
+          ref = endTalkingRef;
+          break;
         case PTTClipID.BLOCKED:
           ref = blockedRef;
           break;
@@ -58,12 +64,13 @@ export const usePTTSounds = (): PTTSounds => {
         console.log("No media element found");
       }
     },
-    [startTalkingLocalRef, startTalkingRemoteRef, blockedRef]
+    [startTalkingLocalRef, startTalkingRemoteRef, endTalkingRef, blockedRef]
   );
 
   return {
     startTalkingLocalRef,
     startTalkingRemoteRef,
+    endTalkingRef,
     blockedRef,
     playClip,
   };