From e9b963080cd3ddcd8829a21983ef2b40db9995f0 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 30 May 2022 16:28:16 +0100 Subject: [PATCH 1/3] Show when connection is lost on PTT mode --- src/room/PTTCallView.tsx | 9 +++++++-- src/room/usePTT.ts | 26 +++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/src/room/PTTCallView.tsx b/src/room/PTTCallView.tsx index 4b395f8..12157d2 100644 --- a/src/room/PTTCallView.tsx +++ b/src/room/PTTCallView.tsx @@ -44,8 +44,11 @@ function getPromptText( activeSpeakerIsLocalUser: boolean, talkOverEnabled: boolean, activeSpeakerUserId: string, - activeSpeakerDisplayName: string + activeSpeakerDisplayName: string, + connected: boolean ): string { + if (!connected) return "Connection Lost"; + const isTouchScreen = Boolean(window.ontouchstart !== undefined); if (showTalkOverError) { @@ -127,6 +130,7 @@ export const PTTCallView: React.FC = ({ startTalking, stopTalking, transmitBlocked, + connected, } = usePTT( client, groupCall, @@ -234,7 +238,8 @@ export const PTTCallView: React.FC = ({ activeSpeakerIsLocalUser, talkOverEnabled, activeSpeakerUserId, - activeSpeakerDisplayName + activeSpeakerDisplayName, + connected )}

{userMediaFeeds.map((callFeed) => ( diff --git a/src/room/usePTT.ts b/src/room/usePTT.ts index 5965c54..328ea44 100644 --- a/src/room/usePTT.ts +++ b/src/room/usePTT.ts @@ -15,10 +15,11 @@ limitations under the License. */ import { useCallback, useEffect, useState } from "react"; -import { MatrixClient } from "matrix-js-sdk/src/client"; +import { MatrixClient, ClientEvent } from "matrix-js-sdk/src/client"; import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall"; import { CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed"; import { logger } from "matrix-js-sdk/src/logger"; +import { SyncState } from "matrix-js-sdk/src/sync"; import { PlayClipFunction, PTTClipID } from "../sound/usePttSounds"; @@ -52,6 +53,11 @@ export interface PTTState { startTalking: () => void; stopTalking: () => void; transmitBlocked: boolean; + // connected is actually an indication of whether we're connected to the HS + // (ie. the client's syncing state) rather than media connection, since + // it's peer to peer so we can't really say once peer is 'disconnected' if + // there's only one other person in the call and they've lost Internet. + connected: boolean; } export const usePTT = ( @@ -211,6 +217,17 @@ export const usePTT = ( setMicMuteWrapper(true); }, [setMicMuteWrapper]); + // separate state for connected: we set it separately from other things + // in the client sync callback + const [connected, setConnected] = useState(true); + + const onClientSync = useCallback( + (syncState: SyncState) => { + setConnected(syncState !== SyncState.Error); + }, + [setConnected] + ); + useEffect(() => { function onKeyDown(event: KeyboardEvent): void { if (event.code === "Space") { @@ -245,10 +262,14 @@ export const usePTT = ( window.addEventListener("keyup", onKeyUp); window.addEventListener("blur", onBlur); + client.on(ClientEvent.Sync, onClientSync); + return () => { window.removeEventListener("keydown", onKeyDown); window.removeEventListener("keyup", onKeyUp); window.removeEventListener("blur", onBlur); + + client.removeListener(ClientEvent.Sync, onClientSync); }; }, [ groupCall, @@ -260,6 +281,8 @@ export const usePTT = ( pttButtonHeld, enablePTTButton, setMicMuteWrapper, + client, + onClientSync, ]); const setTalkOverEnabled = useCallback((talkOverEnabled) => { @@ -278,5 +301,6 @@ export const usePTT = ( startTalking, stopTalking, transmitBlocked, + connected, }; }; From 64e30c89e393e3a773a1511496b3af99c0caf6cb Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 1 Jun 2022 10:13:20 +0100 Subject: [PATCH 2/3] Comment typo Co-authored-by: Robin --- src/room/usePTT.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/room/usePTT.ts b/src/room/usePTT.ts index 328ea44..1a72faa 100644 --- a/src/room/usePTT.ts +++ b/src/room/usePTT.ts @@ -55,7 +55,7 @@ export interface PTTState { transmitBlocked: boolean; // connected is actually an indication of whether we're connected to the HS // (ie. the client's syncing state) rather than media connection, since - // it's peer to peer so we can't really say once peer is 'disconnected' if + // it's peer to peer so we can't really say which peer is 'disconnected' if // there's only one other person in the call and they've lost Internet. connected: boolean; } From d9bd48b9a68de6c866114b3ffb0ec6f8e2a1518e Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 1 Jun 2022 10:21:44 +0100 Subject: [PATCH 3/3] Split out client sync listeber into separate useEffect --- src/room/usePTT.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/room/usePTT.ts b/src/room/usePTT.ts index 1a72faa..8a1f916 100644 --- a/src/room/usePTT.ts +++ b/src/room/usePTT.ts @@ -262,14 +262,10 @@ export const usePTT = ( window.addEventListener("keyup", onKeyUp); window.addEventListener("blur", onBlur); - client.on(ClientEvent.Sync, onClientSync); - return () => { window.removeEventListener("keydown", onKeyDown); window.removeEventListener("keyup", onKeyUp); window.removeEventListener("blur", onBlur); - - client.removeListener(ClientEvent.Sync, onClientSync); }; }, [ groupCall, @@ -285,6 +281,14 @@ export const usePTT = ( onClientSync, ]); + useEffect(() => { + client.on(ClientEvent.Sync, onClientSync); + + return () => { + client.removeListener(ClientEvent.Sync, onClientSync); + }; + }, [client, onClientSync]); + const setTalkOverEnabled = useCallback((talkOverEnabled) => { setState((prevState) => ({ ...prevState,