Show when connection is lost on PTT mode

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<Props> = ({
     startTalking,
     stopTalking,
     transmitBlocked,
+    connected,
   } = usePTT(
     client,
     groupCall,
@@ -234,7 +238,8 @@ export const PTTCallView: React.FC<Props> = ({
               activeSpeakerIsLocalUser,
               talkOverEnabled,
               activeSpeakerUserId,
-              activeSpeakerDisplayName
+              activeSpeakerDisplayName,
+              connected
             )}
           </p>
           {userMediaFeeds.map((callFeed) => (

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,
   };
 };