core: Do not send client metadata before connecting to room

.changeset/nervous-shrimps-deny.md

@@ -0,0 +1,5 @@
+---
+"@whereby.com/core": minor
+---
+
+Do not send client metadata before connecting to room

packages/core/src/redux/index.ts

@@ -17,6 +17,7 @@ export * from "./slices/organization";
 export * from "./slices/remoteParticipants";
 export * from "./slices/room";
 export * from "./slices/roomConnection";
+export * from "./slices/roomConnection/selectors";
 export * from "./slices/rtcAnalytics";
 export * from "./slices/spotlights";
 export * from "./slices/streaming";

packages/core/src/redux/slices/connectionMonitor.ts

@@ -3,7 +3,7 @@ import { setClientProvider, subscribeIssues } from "@whereby.com/media";
 import { RootState } from "../store";
 import { createAppThunk } from "../thunk";
 import { createReactor } from "../listenerMiddleware";
-import { selectRoomConnectionStatus } from "./roomConnection";
+import { selectRoomConnectionStatus } from "./roomConnection/selectors";
 import { selectRtcManager } from "./rtcConnection";
 import { selectAllClientViews } from "./room";
 

packages/core/src/redux/slices/localParticipant.ts

@@ -6,10 +6,11 @@ import { LocalParticipant } from "../../RoomParticipant";
 import { selectSignalConnectionRaw } from "./signalConnection";
 import { doAppStart } from "./app";
 import { selectLocalMediaStream, toggleCameraEnabled, toggleMicrophoneEnabled } from "./localMedia";
-import { createReactor, startAppListening } from "../listenerMiddleware";
+import { startAppListening } from "../listenerMiddleware";
 import { signalEvents } from "./signalConnection/actions";
 import { ClientView } from "../types";
 import { NON_PERSON_ROLES } from "../constants";
+import { selectRoomConnectionStatus } from "./roomConnection/selectors";
 
 export interface LocalParticipantState extends LocalParticipant {
     isScreenSharing: boolean;
@@ -217,7 +218,11 @@ startAppListening({
     effect: ({ payload }, { dispatch, getState }) => {
         const { enabled } = payload;
         const { isVideoEnabled } = selectLocalParticipantRaw(getState());
+        const roomConnectionStatus = selectRoomConnectionStatus(getState());
 
+        if (roomConnectionStatus !== "connected") {
+            return;
+        }
         dispatch(doEnableVideo({ enabled: enabled || !isVideoEnabled }));
     },
 });
@@ -227,11 +232,11 @@ startAppListening({
     effect: ({ payload }, { dispatch, getState }) => {
         const { enabled } = payload;
         const { isAudioEnabled } = selectLocalParticipantRaw(getState());
+        const roomConnectionStatus = selectRoomConnectionStatus(getState());
 
+        if (roomConnectionStatus !== "connected") {
+            return;
+        }
         dispatch(doEnableAudio({ enabled: enabled || !isAudioEnabled }));
     },
 });
-
-createReactor([selectLocalParticipantDisplayName, selectLocalParticipantStickyReaction], ({ dispatch }) => {
-    dispatch(doSendClientMetadata());
-});

packages/core/src/redux/slices/notifications/index.ts

@@ -7,7 +7,7 @@ import { createReactor, startAppListening } from "../../listenerMiddleware";
 import { signalEvents } from "../signalConnection/actions";
 import { selectRemoteParticipants } from "../remoteParticipants";
 import { selectSignalStatus } from "../signalConnection";
-import { selectRoomConnectionStatus } from "../roomConnection";
+import { selectRoomConnectionStatus } from "../roomConnection/selectors";
 import { selectIsAuthorizedToAskToSpeak } from "../authorization";
 import {
     Notification,

packages/core/src/redux/slices/roomConnection.ts → packages/core/src/redux/slices/roomConnection/index.ts

@@ -1,8 +1,8 @@
 import { PayloadAction, createSelector, createSlice } from "@reduxjs/toolkit";
 
-import { createReactor, startAppListening } from "../listenerMiddleware";
-import { RootState } from "../store";
-import { createAppThunk } from "../thunk";
+import { createReactor, startAppListening } from "../../listenerMiddleware";
+import { selectRoomConnectionError, selectRoomConnectionStatus } from "./selectors";
+import { createAppThunk } from "../../thunk";
 import {
     doAppStop,
     selectAppDisplayName,
@@ -11,19 +11,25 @@ import {
     selectAppExternalId,
     selectAppIsActive,
     selectAppIsDialIn,
-} from "./app";
-import { selectRoomKey, setRoomKey } from "./authorization";
+} from "../app";
+import { selectRoomKey, setRoomKey } from "../authorization";
 
-import { selectOrganizationId } from "./organization";
-import { signalEvents } from "./signalConnection/actions";
+import { selectOrganizationId } from "../organization";
+import { signalEvents } from "../signalConnection/actions";
 import {
     doSignalDisconnect,
     selectSignalConnectionDeviceIdentified,
     selectSignalConnectionRaw,
     socketReconnecting,
-} from "./signalConnection";
-import { selectIsCameraEnabled, selectIsMicrophoneEnabled, selectLocalMediaStatus } from "./localMedia";
-import { selectSelfId, selectLocalParticipantClientClaim } from "./localParticipant";
+} from "../signalConnection";
+import { selectIsCameraEnabled, selectIsMicrophoneEnabled, selectLocalMediaStatus } from "../localMedia";
+import {
+    selectSelfId,
+    selectLocalParticipantClientClaim,
+    selectLocalParticipantDisplayName,
+    selectLocalParticipantStickyReaction,
+    doSendClientMetadata,
+} from "../localParticipant";
 
 export type ConnectionStatus =
     | "ready"
@@ -219,16 +225,6 @@ export const doConnectRoom = createAppThunk(() => (dispatch, getState) => {
     dispatch(connectionStatusChanged("connecting"));
 });
 
-/**
- * Selectors
- */
-
-export const selectRoomConnectionRaw = (state: RootState) => state.roomConnection;
-export const selectRoomConnectionSession = (state: RootState) => state.roomConnection.session;
-export const selectRoomConnectionSessionId = (state: RootState) => state.roomConnection.session?.id;
-export const selectRoomConnectionStatus = (state: RootState) => state.roomConnection.status;
-export const selectRoomConnectionError = (state: RootState) => state.roomConnection.error;
-
 /**
  * Reactors
  */
@@ -309,3 +305,12 @@ startAppListening({
         }
     },
 });
+
+createReactor(
+    [selectLocalParticipantDisplayName, selectLocalParticipantStickyReaction, selectRoomConnectionStatus],
+    ({ dispatch }, diplayName, stickyReaction, roomConnectionStatus) => {
+        if (roomConnectionStatus === "connected") {
+            dispatch(doSendClientMetadata());
+        }
+    },
+);

packages/core/src/redux/slices/roomConnection/selectors.ts

@@ -0,0 +1,10 @@
+import { RootState } from "../../store";
+/**
+ * Selectors
+ */
+
+export const selectRoomConnectionRaw = (state: RootState) => state.roomConnection;
+export const selectRoomConnectionSession = (state: RootState) => state.roomConnection.session;
+export const selectRoomConnectionSessionId = (state: RootState) => state.roomConnection.session?.id;
+export const selectRoomConnectionStatus = (state: RootState) => state.roomConnection.status;
+export const selectRoomConnectionError = (state: RootState) => state.roomConnection.error;

packages/core/src/redux/slices/rtcAnalytics.ts

@@ -12,7 +12,7 @@ import { selectSignalStatus } from "./signalConnection";
 import { selectDeviceId } from "./deviceCredentials";
 import { doSetDevice, selectIsCameraEnabled, selectIsMicrophoneEnabled, selectLocalMediaStream } from "./localMedia";
 import { doStartScreenshare, selectLocalScreenshareStream, stopScreenshare } from "./localScreenshare";
-import { selectRoomConnectionSessionId } from "./roomConnection";
+import { selectRoomConnectionSessionId } from "./roomConnection/selectors";
 import { signalEvents } from "./signalConnection/actions";
 
 type RtcAnalyticsCustomEvent = {