From 7edf544d731a1fa224a5ad18814d5c5b5dafcd3b Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 5 May 2022 12:21:46 +0100 Subject: [PATCH 1/4] Return to normal state when time limit reached --- src/room/PTTCallView.jsx | 33 +++++++++++++++++---------------- src/room/usePTT.js | 25 +++++++++++++++++-------- 2 files changed, 34 insertions(+), 24 deletions(-) diff --git a/src/room/PTTCallView.jsx b/src/room/PTTCallView.jsx index 6993ec9e..2406d0b7 100644 --- a/src/room/PTTCallView.jsx +++ b/src/room/PTTCallView.jsx @@ -16,6 +16,7 @@ import { Timer } from "./Timer"; import { Toggle } from "../input/Toggle"; import { getAvatarUrl } from "../matrix-utils"; import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; +import { OtherUserSpeakingError } from "matrix-js-sdk/src/webrtc/groupCall"; export function PTTCallView({ client, @@ -47,21 +48,22 @@ export function PTTCallView({ activeSpeakerUserId, startTalking, stopTalking, + unmuteError, } = usePTT(client, groupCall, userMediaFeeds); + const showTalkOverError = pttButtonHeld && unmuteError instanceof OtherUserSpeakingError; + const activeSpeakerIsLocalUser = activeSpeakerUserId && client.getUserId() === activeSpeakerUserId; - const showTalkOverError = - pttButtonHeld && !activeSpeakerIsLocalUser && !talkOverEnabled; const activeSpeakerUser = activeSpeakerUserId ? client.getUser(activeSpeakerUserId) : null; const activeSpeakerAvatarUrl = activeSpeakerUser ? getAvatarUrl( - client, - activeSpeakerUser.avatarUrl, - pttButtonSize - pttBorderWidth * 2 - ) + client, + activeSpeakerUser.avatarUrl, + pttButtonSize - pttBorderWidth * 2 + ) : null; const activeSpeakerDisplayName = activeSpeakerUser ? activeSpeakerUser.displayName @@ -77,9 +79,8 @@ export function PTTCallView({
-

{`${participants.length} ${ - participants.length > 1 ? "people" : "person" - } connected`}

+

{`${participants.length} ${participants.length > 1 ? "people" : "person" + } connected`}

{showTalkOverError ? "You can't talk at the same time" - : pttButtonHeld - ? "Release spacebar key to stop" - : talkOverEnabled && - activeSpeakerUserId && - !activeSpeakerIsLocalUser - ? `Press and hold spacebar to talk over ${activeSpeakerDisplayName}` - : "Press and hold spacebar to talk"} + : pttButtonHeld && activeSpeakerIsLocalUser + ? "Release spacebar key to stop" + : talkOverEnabled && + activeSpeakerUserId && + !activeSpeakerIsLocalUser + ? `Press and hold spacebar to talk over ${activeSpeakerDisplayName}` + : "Press and hold spacebar to talk"}

{userMediaFeeds.map((callFeed) => ( { function onMuteStateChanged(...args) { const activeSpeakerFeed = userMediaFeeds.find((f) => !f.isAudioMuted()); @@ -47,22 +49,26 @@ export function usePTT(client, groupCall, userMediaFeeds) { }; }, [userMediaFeeds]); - const startTalking = useCallback(() => { + const startTalking = useCallback(async () => { + setState((prevState) => ({ ...prevState, pttButtonHeld: true })); + setUnmuteError(null); if (!activeSpeakerUserId || isAdmin || talkOverEnabled) { if (groupCall.isMicrophoneMuted()) { - groupCall.setMicrophoneMuted(false); + try { + await groupCall.setMicrophoneMuted(false); + } catch (e) { + setUnmuteError(e); + } } - - setState((prevState) => ({ ...prevState, pttButtonHeld: true })); } - }, []); + }, [setUnmuteError]); const stopTalking = useCallback(() => { + setState((prevState) => ({ ...prevState, pttButtonHeld: false })); + if (!groupCall.isMicrophoneMuted()) { groupCall.setMicrophoneMuted(true); } - - setState((prevState) => ({ ...prevState, pttButtonHeld: false })); }, []); useEffect(() => { @@ -70,6 +76,8 @@ export function usePTT(client, groupCall, userMediaFeeds) { if (event.code === "Space") { event.preventDefault(); + if (pttButtonHeld) return; + startTalking(); } } @@ -100,7 +108,7 @@ export function usePTT(client, groupCall, userMediaFeeds) { window.removeEventListener("keyup", onKeyUp); window.removeEventListener("blur", onBlur); }; - }, [activeSpeakerUserId, isAdmin, talkOverEnabled]); + }, [activeSpeakerUserId, isAdmin, talkOverEnabled, pttButtonHeld]); const setTalkOverEnabled = useCallback((talkOverEnabled) => { setState((prevState) => ({ @@ -117,5 +125,6 @@ export function usePTT(client, groupCall, userMediaFeeds) { activeSpeakerUserId, startTalking, stopTalking, + unmuteError, }; } From a70dbb130f77b524091bec36453b632d94b41570 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 5 May 2022 12:26:30 +0100 Subject: [PATCH 2/4] Run prettier --- src/room/PTTCallView.jsx | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/room/PTTCallView.jsx b/src/room/PTTCallView.jsx index 2406d0b7..35497e60 100644 --- a/src/room/PTTCallView.jsx +++ b/src/room/PTTCallView.jsx @@ -51,7 +51,8 @@ export function PTTCallView({ unmuteError, } = usePTT(client, groupCall, userMediaFeeds); - const showTalkOverError = pttButtonHeld && unmuteError instanceof OtherUserSpeakingError; + const showTalkOverError = + pttButtonHeld && unmuteError instanceof OtherUserSpeakingError; const activeSpeakerIsLocalUser = activeSpeakerUserId && client.getUserId() === activeSpeakerUserId; @@ -60,10 +61,10 @@ export function PTTCallView({ : null; const activeSpeakerAvatarUrl = activeSpeakerUser ? getAvatarUrl( - client, - activeSpeakerUser.avatarUrl, - pttButtonSize - pttBorderWidth * 2 - ) + client, + activeSpeakerUser.avatarUrl, + pttButtonSize - pttBorderWidth * 2 + ) : null; const activeSpeakerDisplayName = activeSpeakerUser ? activeSpeakerUser.displayName @@ -79,8 +80,9 @@ export function PTTCallView({
-

{`${participants.length} ${participants.length > 1 ? "people" : "person" - } connected`}

+

{`${participants.length} ${ + participants.length > 1 ? "people" : "person" + } connected`}

{userMediaFeeds.map((callFeed) => ( Date: Fri, 6 May 2022 21:23:29 +0100 Subject: [PATCH 3/4] Store unmuteError in main state --- src/room/usePTT.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/room/usePTT.js b/src/room/usePTT.js index d2f26a54..f7ce66da 100644 --- a/src/room/usePTT.js +++ b/src/room/usePTT.js @@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react"; export function usePTT(client, groupCall, userMediaFeeds) { const [ - { pttButtonHeld, isAdmin, talkOverEnabled, activeSpeakerUserId }, + { pttButtonHeld, isAdmin, talkOverEnabled, activeSpeakerUserId, unmuteError }, setState, ] = useState(() => { const roomMember = groupCall.room.getMember(client.getUserId()); @@ -14,11 +14,10 @@ export function usePTT(client, groupCall, userMediaFeeds) { talkOverEnabled: false, pttButtonHeld: false, activeSpeakerUserId: activeSpeakerFeed ? activeSpeakerFeed.userId : null, + unmuteError: null, }; }); - const [unmuteError, setUnmuteError] = useState(null); - useEffect(() => { function onMuteStateChanged(...args) { const activeSpeakerFeed = userMediaFeeds.find((f) => !f.isAudioMuted()); @@ -50,18 +49,17 @@ export function usePTT(client, groupCall, userMediaFeeds) { }, [userMediaFeeds]); const startTalking = useCallback(async () => { - setState((prevState) => ({ ...prevState, pttButtonHeld: true })); - setUnmuteError(null); + setState((prevState) => ({ ...prevState, pttButtonHeld: true, unmuteError: null, })); if (!activeSpeakerUserId || isAdmin || talkOverEnabled) { if (groupCall.isMicrophoneMuted()) { try { await groupCall.setMicrophoneMuted(false); } catch (e) { - setUnmuteError(e); + setState((prevState) => ({ ...prevState, unmuteError: null, })); } } } - }, [setUnmuteError]); + }, [setState]); const stopTalking = useCallback(() => { setState((prevState) => ({ ...prevState, pttButtonHeld: false })); From 7e5610eb36f8da9cfacd113e5f245709475c9007 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 6 May 2022 21:27:07 +0100 Subject: [PATCH 4/4] Prettier --- src/room/usePTT.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/room/usePTT.js b/src/room/usePTT.js index f7ce66da..d7aa8999 100644 --- a/src/room/usePTT.js +++ b/src/room/usePTT.js @@ -2,7 +2,13 @@ import { useCallback, useEffect, useState } from "react"; export function usePTT(client, groupCall, userMediaFeeds) { const [ - { pttButtonHeld, isAdmin, talkOverEnabled, activeSpeakerUserId, unmuteError }, + { + pttButtonHeld, + isAdmin, + talkOverEnabled, + activeSpeakerUserId, + unmuteError, + }, setState, ] = useState(() => { const roomMember = groupCall.room.getMember(client.getUserId()); @@ -49,13 +55,17 @@ export function usePTT(client, groupCall, userMediaFeeds) { }, [userMediaFeeds]); const startTalking = useCallback(async () => { - setState((prevState) => ({ ...prevState, pttButtonHeld: true, unmuteError: null, })); + setState((prevState) => ({ + ...prevState, + pttButtonHeld: true, + unmuteError: null, + })); if (!activeSpeakerUserId || isAdmin || talkOverEnabled) { if (groupCall.isMicrophoneMuted()) { try { await groupCall.setMicrophoneMuted(false); } catch (e) { - setState((prevState) => ({ ...prevState, unmuteError: null, })); + setState((prevState) => ({ ...prevState, unmuteError: null })); } } }