Add sound when speaker stops speaking

And also a slightly nicer blocked sound (ok, I couldn't let it go).

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,
   };