From 9fd7329554f7f596bd8b1224a9549d8cc4bee7f7 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 13 May 2022 21:00:14 +0100 Subject: [PATCH] Add sound when speaker stops speaking And also a slightly nicer blocked sound (ok, I couldn't let it go). --- src/room/PTTCallView.tsx | 10 ++++++++-- src/room/usePTT.ts | 15 +++++++-------- src/sound/PTTClips.tsx | 8 ++++++++ src/sound/blocked.mp3 | Bin 8403 -> 8403 bytes src/sound/blocked.ogg | Bin 6490 -> 6863 bytes src/sound/end_talk.mp3 | Bin 0 -> 6313 bytes src/sound/end_talk.ogg | Bin 0 -> 4694 bytes src/sound/usePttSounds.ts | 9 ++++++++- 8 files changed, 31 insertions(+), 11 deletions(-) create mode 100644 src/sound/end_talk.mp3 create mode 100644 src/sound/end_talk.ogg diff --git a/src/room/PTTCallView.tsx b/src/room/PTTCallView.tsx index 4acd7a6..3e699bd 100644 --- a/src/room/PTTCallView.tsx +++ b/src/room/PTTCallView.tsx @@ -109,8 +109,13 @@ export const PTTCallView: React.FC = ({ 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 = ({
diff --git a/src/room/usePTT.ts b/src/room/usePTT.ts index 3b80f8c..673da76 100644 --- a/src/room/usePTT.ts +++ b/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() && diff --git a/src/sound/PTTClips.tsx b/src/sound/PTTClips.tsx index e13acb5..90958af 100644 --- a/src/sound/PTTClips.tsx +++ b/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; startTalkingRemoteRef: React.RefObject; + endTalkingRef: React.RefObject; blockedRef: React.RefObject; } export const PTTClips: React.FC = ({ startTalkingLocalRef, startTalkingRemoteRef, + endTalkingRef, blockedRef, }) => { return ( @@ -53,6 +57,10 @@ export const PTTClips: React.FC = ({ +