Ensure we react to RTC transport changes in useRoomCall (#31691)

src/hooks/room/useRoomCall.tsx

@@ -116,9 +116,12 @@ export const useRoomCall = (
         return SdkConfig.get("element_call").use_exclusively;
     }, []);
 
-    const serverIsConfiguredForElementCall = CallStore.instance
-        .getConfiguredRTCTransports()
-        .some((s) => s.type === "livekit" && s.livekit_service_url);
+    const serverIsConfiguredForElementCall = useEventEmitterState(
+        CallStore.instance,
+        CallStoreEvent.TransportsUpdated,
+        () =>
+            CallStore.instance.getConfiguredRTCTransports().some((s) => s.type === "livekit" && s.livekit_service_url),
+    );
 
     useEffect(() => {
         if (useElementCallExclusively && !serverIsConfiguredForElementCall) {

src/stores/CallStore.ts

@@ -23,6 +23,8 @@ export enum CallStoreEvent {
     Call = "call",
     // Signals a change in the active calls
     ConnectedCalls = "connected_calls",
+    // Signals a change in the configured RTC transports.
+    TransportsUpdated = "transports_updated",
 }
 
 export class CallStore extends AsyncStoreWithClient<EmptyObject> {
@@ -53,6 +55,7 @@ export class CallStore extends AsyncStoreWithClient<EmptyObject> {
      */
     protected async fetchTransports(): Promise<void> {
         if (!this.matrixClient) return;
+        this.configuredMatrixRTCTransports.clear();
         // Prefer checking the proper endpoint for transports.
         try {
             const transports = await this.matrixClient._unstable_getRTCTransports();
@@ -70,6 +73,7 @@ export class CallStore extends AsyncStoreWithClient<EmptyObject> {
         if (Array.isArray(foci)) {
             foci.forEach((foci) => this.configuredMatrixRTCTransports.add(foci));
         }
+        this.emit(CallStoreEvent.TransportsUpdated);
     }
 
     protected async onReady(): Promise<any> {

test/unit-tests/hooks/useRoomCall-test.tsx

@@ -129,5 +129,25 @@ describe("useRoomCall", () => {
                 expect(result.current.callOptions).toEqual([PlatformCallType.ElementCall, PlatformCallType.LegacyCall]),
             );
         });
+        it("Ensure handler reacts to transport changes", async () => {
+            // Clear all transports
+            client._unstable_getRTCTransports.mockResolvedValue([]);
+            client.getClientWellKnown.mockReturnValue({});
+
+            await setupAsyncStoreWithClient(CallStore.instance, client);
+            const { result } = render();
+
+            // Ensure Element Call is not a call option.
+            expect(result.current.callOptions).toEqual([PlatformCallType.LegacyCall]);
+
+            // Now enable a transport and ensure that useRoomCall picks it up reactively.
+            client._unstable_getRTCTransports.mockResolvedValue([
+                { type: "livekit", livekit_service_url: "https://example.org" },
+            ]);
+            await setupAsyncStoreWithClient(CallStore.instance, client);
+            await waitFor(() =>
+                expect(result.current.callOptions).toEqual([PlatformCallType.ElementCall, PlatformCallType.LegacyCall]),
+            );
+        });
     });
 });