Merge pull request #19 from jambonz/feat/dtmf_sound

fix review comments

src/lib/SipAudioElements.ts

@@ -5,6 +5,7 @@ export default class SipAudioElements {
   #busy: HTMLAudioElement;
   #remote: HTMLAudioElement;
   #hungup: HTMLAudioElement;
+  #localHungup: HTMLAudioElement;
 
   constructor() {
     this.#ringing = new Audio(chrome.runtime.getURL("audios/ringing.mp3"));
@@ -21,9 +22,22 @@ export default class SipAudioElements {
       chrome.runtime.getURL("audios/remote-party-hungup-tone.mp3")
     );
     this.#hungup.volume = 0.3;
+    this.#localHungup = new Audio(
+      chrome.runtime.getURL("audios/local-party-hungup-tone.mp3")
+    );
+    this.#localHungup.volume = 0.3;
     this.#remote = new Audio();
   }
 
+  playLocalHungup(volume: number | undefined) {
+    this.pauseRingback();
+    this.pauseRinging();
+    if (volume) {
+      this.#localHungup.volume = volume;
+    }
+    this.#localHungup.play();
+  }
+
   playRinging(volume: number | undefined): void {
     if (volume) {
       this.#ringing.volume = volume;

src/lib/SipSession.ts

@@ -105,6 +105,8 @@ export default class SipSession extends events.EventEmitter {
       let description;
       if (originator === "remote") {
         this.#audio.playRemotePartyHungup(undefined);
+      } else {
+        this.#audio.playLocalHungup(undefined);
       }
       if (message && originator === "remote" && message.hasHeader("Reason")) {
         const reason = Grammar.parse(message.getHeader("Reason"), "Reason");

src/window/phone/DialPadSoundElement.ts

@@ -0,0 +1,27 @@
+export default class DialPadAudioElements {
+  private keySounds: { [key: string]: HTMLAudioElement | undefined } = {};
+
+  constructor() {
+    const arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "#"];
+    for (const i of arr) {
+      this.keySounds[i] = new Audio(
+        chrome.runtime.getURL(`audios/dtmf-${encodeURIComponent(i)}.mp3`)
+      );
+      const audio = this.keySounds[i];
+      if (audio) {
+        audio.volume = 0.5;
+      }
+    }
+  }
+
+  playKeyTone(key: string): void {
+    const audio = this.keySounds[key];
+    if (audio) {
+      if (!audio.paused) {
+        audio.pause();
+        audio.currentTime = 0;
+      }
+      audio.play();
+    }
+  }
+}

src/window/phone/dial-pad.tsx

@@ -1,9 +1,13 @@
 import { Box, Button, HStack, VStack } from "@chakra-ui/react";
+import DialPadAudioElements from "./DialPadSoundElement";
+import { useEffect } from "react";
 
 type DialPadProbs = {
   handleDigitPress: (digit: string) => void;
 };
 
+const keySounds = new DialPadAudioElements();
+
 export const DialPad = ({ handleDigitPress }: DialPadProbs) => {
   const buttons = [
     ["1", "2", "3"],
@@ -12,6 +16,24 @@ export const DialPad = ({ handleDigitPress }: DialPadProbs) => {
     ["*", "0", "#"],
   ];
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (
+      ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "#"].includes(
+        e.key
+      )
+    ) {
+      keySounds?.playKeyTone(e.key);
+      handleDigitPress(e.key);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
   return (
     <Box p={2} w="full">
       <VStack w="full" bg="grey.500" spacing={0.5}>
@@ -20,7 +42,10 @@ export const DialPad = ({ handleDigitPress }: DialPadProbs) => {
             {row.map((num) => (
               <Button
                 key={num}
-                onClick={() => handleDigitPress(num)}
+                onClick={() => {
+                  keySounds?.playKeyTone(num);
+                  handleDigitPress(num);
+                }}
                 size="lg"
                 p={0}
                 width="124px"

src/window/phone/index.tsx

@@ -315,9 +315,8 @@ export const Phone = ({
   }
 
   const handleDialPadClick = (value: string) => {
-    if (isSipClientIdle(callStatus)) {
-      setInputNumber((prev) => prev + value);
-    } else if (isSipClientAnswered(callStatus)) {
+    setInputNumber((prev) => prev + value);
+    if (isSipClientAnswered(callStatus)) {
       sipUA.current?.dtmf(value, undefined);
     }
   };
@@ -414,9 +413,9 @@ export const Phone = ({
     <Center flexDirection="column">
       {isConfigured ? (
         <>
-          <HStack spacing={2} boxShadow="md" w="full" p={2} borderRadius={5}>
-            <Image src={isOnline() ? GreenAvatar : Avatar} />
-            <VStack spacing={2} alignItems="start" w="full">
+          <HStack spacing={2} boxShadow="md" w="full" borderRadius={5} p={2}>
+            <Image src={isOnline() ? GreenAvatar : Avatar} boxSize="50px" />
+            <VStack alignItems="start" w="full" spacing={0}>
               <HStack spacing={2} w="full">
                 <Text fontWeight="bold" fontSize="13px">
                   {sipDisplayName || sipUsername}