Add push-to-talk sound effects

Fixes https://github.com/vector-im/element-call/issues/296

src/sound/PTTClips.module.css

@@ -0,0 +1,19 @@
+/*
+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.
+*/
+
+.pttClip {
+    display: none;
+}

src/sound/PTTClips.tsx

@@ -0,0 +1,62 @@
+/*
+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 from "react";
+
+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 blockedOggUrl from "./blocked.ogg";
+import blockedMp3Url from "./blocked.mp3";
+import styles from "./PTTClips.module.css";
+
+interface Props {
+  startTalkingLocalRef: React.RefObject<HTMLAudioElement>;
+  startTalkingRemoteRef: React.RefObject<HTMLAudioElement>;
+  blockedRef: React.RefObject<HTMLAudioElement>;
+}
+
+export const PTTClips: React.FC<Props> = ({
+  startTalkingLocalRef,
+  startTalkingRemoteRef,
+  blockedRef,
+}) => {
+  return (
+    <>
+      <audio
+        preload="true"
+        className={styles.pttClip}
+        ref={startTalkingLocalRef}
+      >
+        <source type="audio/ogg" src={startTalkLocalOggUrl} />
+        <source type="audio/mpeg" src={startTalkLocalMp3Url} />
+      </audio>
+      <audio
+        preload="true"
+        className={styles.pttClip}
+        ref={startTalkingRemoteRef}
+      >
+        <source type="audio/ogg" src={startTalkRemoteOggUrl} />
+        <source type="audio/mpeg" src={startTalkRemoteMp3Url} />
+      </audio>
+      <audio preload="true" className={styles.pttClip} ref={blockedRef}>
+        <source type="audio/ogg" src={blockedOggUrl} />
+        <source type="audio/mpeg" src={blockedMp3Url} />
+      </audio>
+    </>
+  );
+};

src/sound/usePttSounds.ts

@@ -0,0 +1,70 @@
+/*
+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, useState } from "react";
+
+export enum PTTClipID {
+  START_TALKING_LOCAL,
+  START_TALKING_REMOTE,
+  BLOCKED,
+}
+
+export type PlayClipFunction = (clipID: PTTClipID) => void;
+
+interface PTTSounds {
+  startTalkingLocalRef: React.RefObject<HTMLAudioElement>;
+  startTalkingRemoteRef: React.RefObject<HTMLAudioElement>;
+  blockedRef: React.RefObject<HTMLAudioElement>;
+  playClip: PlayClipFunction;
+}
+
+export const usePTTSounds = (): PTTSounds => {
+  const [startTalkingLocalRef] = useState(React.createRef<HTMLAudioElement>());
+  const [startTalkingRemoteRef] = useState(React.createRef<HTMLAudioElement>());
+  const [blockedRef] = useState(React.createRef<HTMLAudioElement>());
+
+  const playClip = useCallback(
+    async (clipID: PTTClipID) => {
+      let ref: React.RefObject<HTMLAudioElement>;
+
+      switch (clipID) {
+        case PTTClipID.START_TALKING_LOCAL:
+          ref = startTalkingLocalRef;
+          break;
+        case PTTClipID.START_TALKING_REMOTE:
+          ref = startTalkingRemoteRef;
+          break;
+        case PTTClipID.BLOCKED:
+          ref = blockedRef;
+          break;
+      }
+      if (ref.current) {
+        ref.current.currentTime = 0;
+        await ref.current.play();
+      } else {
+        console.log("No media element found");
+      }
+    },
+    [startTalkingLocalRef, startTalkingRemoteRef, blockedRef]
+  );
+
+  return {
+    startTalkingLocalRef,
+    startTalkingRemoteRef,
+    blockedRef,
+    playClip,
+  };
+};