Handle reconnect logic

src/lib/core/redux/slices/remoteParticipants.ts

@@ -76,8 +76,8 @@ function updateStreamState(
         return state;
     }
 
+    const idIdx = participant.streams.findIndex((s) => s.id === streamId);
     const streams = [...participant.streams];
-    const idIdx = streams.findIndex((s) => s.id === streamId);
     streams[idIdx] = { ...streams[idIdx], state: state_ };
 
     return updateParticipant(state, participantId, { streams });
@@ -178,9 +178,9 @@ export const remoteParticipantsSlice = createSlice({
         streamStatusUpdated: (state, action: PayloadAction<StreamStatusUpdate[]>) => {
             let newState = state;
 
-            action.payload.forEach((update) => {
-                newState = updateStreamState(newState, update.clientId, update.streamId, update.state);
-            });
+            for (const { clientId, streamId, state } of action.payload) {
+                newState = updateStreamState(newState, clientId, streamId, state);
+            }
 
             return newState;
         },

src/lib/core/redux/slices/roomConnection.ts

@@ -14,14 +14,19 @@ import {
 
 import { selectOrganizationId } from "./organization";
 import { signalEvents } from "./signalConnection/actions";
-import { selectSignalConnectionDeviceIdentified, selectSignalConnectionRaw } from "./signalConnection";
+import {
+    selectSignalConnectionDeviceIdentified,
+    selectSignalConnectionRaw,
+    socketReconnecting,
+} from "./signalConnection";
 import { selectIsCameraEnabled, selectIsMicrophoneEnabled, selectLocalMediaStatus } from "./localMedia";
 import { selectSelfId } from "./localParticipant";
 
 export type ConnectionStatus =
     | "initializing"
     | "connecting"
     | "connected"
+    | "reconnect"
     | "room_locked"
     | "knocking"
     | "disconnecting"
@@ -69,6 +74,12 @@ export const roomConnectionSlice = createSlice({
                 status: "connected",
             };
         });
+        builder.addCase(socketReconnecting, (state) => {
+            return {
+                ...state,
+                status: "reconnect",
+            };
+        });
     },
 });
 
@@ -121,6 +132,7 @@ export const doConnectRoom = createAppThunk(() => (dispatch, getState) => {
     const organizationId = selectOrganizationId(state);
     const isCameraEnabled = selectIsCameraEnabled(getState());
     const isMicrophoneEnabled = selectIsMicrophoneEnabled(getState());
+    const selfId = selectSelfId(getState());
 
     socket?.emit("join_room", {
         avatarUrl: null,
@@ -136,7 +148,7 @@ export const doConnectRoom = createAppThunk(() => (dispatch, getState) => {
         organizationId,
         roomKey,
         roomName,
-        selfId: "",
+        selfId,
         userAgent: `browser-sdk:${sdkVersion || "unknown"}`,
         externalId,
     });
@@ -162,7 +174,7 @@ export const selectShouldConnectRoom = createSelector(
             localMediaStatus === "started" &&
             signalConnectionDeviceIdentified &&
             !!hasOrganizationIdFetched &&
-            roomConnectionStatus === "initializing"
+            ["initializing", "reconnect"].includes(roomConnectionStatus)
         ) {
             return true;
         }

src/lib/core/redux/slices/rtcConnection/index.ts

@@ -2,7 +2,7 @@ import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { AppDispatch, RootState } from "../../store";
 import { createAppThunk } from "../../thunk";
 import RtcManager from "@whereby/jslib-media/src/webrtc/RtcManager";
-import { selectSignalConnectionRaw, selectSignalConnectionSocket } from "../signalConnection";
+import { selectSignalConnectionRaw, selectSignalConnectionSocket, socketReconnecting } from "../signalConnection";
 import RtcManagerDispatcher, {
     RtcEvents,
     RtcManagerCreatedPayload,
@@ -23,6 +23,7 @@ import {
 } from "../localMedia";
 import { rtcEvents } from "./actions";
 import { StreamStatusUpdate } from "./types";
+import { signalEvents } from "../signalConnection/actions";
 
 export const createWebRtcEmitter = (dispatch: AppDispatch) => {
     return {
@@ -61,6 +62,7 @@ export interface RtcConnectionState {
     rtcManagerDispatcher: RtcManagerDispatcher | null;
     rtcManagerInitialized: boolean;
     status: "" | "ready" | "reconnect";
+    isAcceptingStreams: boolean;
 }
 
 const initialState: RtcConnectionState = {
@@ -72,12 +74,19 @@ const initialState: RtcConnectionState = {
     rtcManagerDispatcher: null,
     rtcManagerInitialized: false,
     status: "",
+    isAcceptingStreams: false,
 };
 
 export const rtcConnectionSlice = createSlice({
     name: "rtcConnection",
     initialState,
     reducers: {
+        isAcceptingStreams: (state, action: PayloadAction<boolean>) => {
+            return {
+                ...state,
+                isAcceptingStreams: action.payload,
+            };
+        },
         resolutionReported: (state, action: PayloadAction<StreamResolutionUpdate>) => {
             const { streamId, width, height } = action.payload;
 
@@ -111,10 +120,7 @@ export const rtcConnectionSlice = createSlice({
         rtcManagerDestroyed: (state) => {
             return {
                 ...state,
-                dispatcherCreated: false,
-                rtcManagerDispatcher: null,
                 rtcManager: null,
-                rtcManagerInitialized: false,
             };
         },
         rtcManagerInitialized: (state) => {
@@ -124,6 +130,20 @@ export const rtcConnectionSlice = createSlice({
             };
         },
     },
+    extraReducers: (builder) => {
+        builder.addCase(socketReconnecting, (state) => {
+            return {
+                ...state,
+                status: "reconnect",
+            };
+        });
+        builder.addCase(signalEvents.roomJoined, (state) => {
+            return {
+                ...state,
+                status: state.status === "reconnect" ? "ready" : state.status,
+            };
+        });
+    },
 });
 
 /**
@@ -137,6 +157,7 @@ export const {
     rtcManagerCreated,
     rtcManagerDestroyed,
     rtcManagerInitialized,
+    isAcceptingStreams,
 } = rtcConnectionSlice.actions;
 
 export const doConnectRtc = createAppThunk(() => (dispatch, getState) => {
@@ -188,6 +209,7 @@ export const doDisconnectRtc = createAppThunk(() => (dispatch, getState) => {
 });
 
 export const doHandleAcceptStreams = createAppThunk((payload: StreamStatusUpdate[]) => (dispatch, getState) => {
+    dispatch(isAcceptingStreams(true));
     const state = getState();
     const rtcManager = selectRtcConnectionRaw(state).rtcManager;
     const remoteParticipants = selectRemoteParticipants(state);
@@ -230,6 +252,7 @@ export const doHandleAcceptStreams = createAppThunk((payload: StreamStatusUpdate
     }
 
     dispatch(streamStatusUpdated(updates));
+    dispatch(isAcceptingStreams(false));
 });
 
 export const doRtcReportStreamResolution = createAppThunk(
@@ -279,6 +302,7 @@ export const selectRtcManager = (state: RootState) => state.rtcConnection.rtcMan
 export const selectRtcDispatcherCreated = (state: RootState) => state.rtcConnection.dispatcherCreated;
 export const selectRtcIsCreatingDispatcher = (state: RootState) => state.rtcConnection.isCreatingDispatcher;
 export const selectRtcStatus = (state: RootState) => state.rtcConnection.status;
+export const selectIsAcceptingStreams = (state: RootState) => state.rtcConnection.isAcceptingStreams;
 
 /**
  * Reactors
@@ -413,8 +437,11 @@ export const selectStreamsToAccept = createSelector(
     }
 );
 
-createReactor([selectStreamsToAccept], ({ dispatch }, streamsToAccept) => {
-    if (0 < streamsToAccept.length) {
-        dispatch(doHandleAcceptStreams(streamsToAccept));
+createReactor(
+    [selectStreamsToAccept, selectIsAcceptingStreams],
+    ({ dispatch }, streamsToAccept, isAcceptingStreams) => {
+        if (0 < streamsToAccept.length && !isAcceptingStreams) {
+            dispatch(doHandleAcceptStreams(streamsToAccept));
+        }
     }
-});
+);

src/lib/core/redux/slices/signalConnection/actions.ts

@@ -28,6 +28,7 @@ export const signalEvents = {
     clientMetadataReceived: createSignalEventAction<ClientMetadataReceivedEvent>("clientMetadataReceived"),
     cloudRecordingStarted: createSignalEventAction<CloudRecordingStartedEvent>("cloudRecordingStarted"),
     cloudRecordingStopped: createSignalEventAction<void>("cloudRecordingStopped"),
+    disconnect: createSignalEventAction<void>("disconnect"),
     knockerLeft: createSignalEventAction<KnockerLeftEvent>("knockerLeft"),
     knockHandled: createSignalEventAction<KnockAcceptedEvent | KnockRejectedEvent>("knockHandled"),
     newClient: createSignalEventAction<NewClientEvent>("newClient"),

src/lib/core/redux/slices/signalConnection/index.ts

@@ -17,6 +17,7 @@ function forwardSocketEvents(socket: ServerSocket, dispatch: ThunkDispatch<RootS
     socket.on("video_enabled", (payload) => dispatch(signalEvents.videoEnabled(payload)));
     socket.on("client_metadata_received", (payload) => dispatch(signalEvents.clientMetadataReceived(payload)));
     socket.on("chat_message", (payload) => dispatch(signalEvents.chatMessage(payload)));
+    socket.on("disconnect", () => dispatch(signalEvents.disconnect()));
     socket.on("room_knocked", (payload) => dispatch(signalEvents.roomKnocked(payload)));
     socket.on("knocker_left", (payload) => dispatch(signalEvents.knockerLeft(payload)));
     socket.on("knock_handled", (payload) => dispatch(signalEvents.knockHandled(payload)));
@@ -77,10 +78,15 @@ export const signalConnectionSlice = createSlice({
         socketDisconnected: (state) => {
             return {
                 ...state,
-                socket: null,
                 status: "disconnected",
             };
         },
+        socketReconnecting: (state) => {
+            return {
+                ...state,
+                status: "reconnect",
+            };
+        },
         deviceIdentifying: (state) => {
             return {
                 ...state,
@@ -115,7 +121,6 @@ export const doSignalSocketConnect = createAppThunk(() => {
 
         socket.on("connect", () => dispatch(socketConnected(socket)));
         socket.on("device_identified", () => dispatch(deviceIdentified()));
-        socket.on("disconnect", () => dispatch(doSignalDisconnect()));
         socket.getManager().on("reconnect", () => dispatch(doSignalReconnect()));
         forwardSocketEvents(socket, dispatch);
 
@@ -147,11 +152,14 @@ export const doSignalDisconnect = createAppThunk(() => (dispatch, getState) => {
 
 export const doSignalReconnect = createAppThunk(() => (dispatch, getState) => {
     const deviceCredentialsRaw = selectDeviceCredentialsRaw(getState());
+    dispatch(socketReconnecting());
     if (deviceCredentialsRaw.data) {
         dispatch(doSignalIdentifyDevice({ deviceCredentials: deviceCredentialsRaw.data }));
     }
 });
 
+export const { socketReconnecting } = signalConnectionSlice.actions;
+
 /**
  * Selectors
  */
@@ -175,7 +183,7 @@ export const selectShouldConnectSignal = createSelector(
     selectAppWantsToJoin,
     selectSignalStatus,
     (wantsToJoin, signalStatus) => {
-        if (wantsToJoin && signalStatus === "") {
+        if (wantsToJoin && ["", "reconnect"].includes(signalStatus)) {
             return true;
         }
         return false;

src/lib/core/redux/tests/store.setup.ts

@@ -93,12 +93,13 @@
             rtcManagerDispatcher: createRtcDispatcher({ emitter: mockRtcEmitter }),
             rtcManagerInitialized: true,
             rtcManager: mockRtcManager,
+            isAcceptingStreams: false,
         };
     }
 
     const store = createRealStore({
         preloadedState: initialState,
         injectServices: mockServices as any,
     });
 
     return store;

src/lib/core/redux/tests/store/signalConnection.spec.ts

@@ -56,7 +56,6 @@ describe("actions", () => {
         expect(mockSignalEmit).toHaveBeenCalledWith("leave_room");
         expect(mockServerSocket.disconnect).toHaveBeenCalled();
         expect(diff(before, after)).toEqual({
-            socket: null,
             status: "disconnected",
         });
     });
@@ -82,6 +81,7 @@ describe("actions", () => {
         expect(mockSignalEmit).toHaveBeenCalledWith("identify_device", { deviceCredentials });
         expect(diff(before, after)).toEqual({
             isIdentifyingDevice: true,
+            status: "reconnect",
         });
     });
 });

src/lib/react/useRoomConnection/types.ts

@@ -24,6 +24,7 @@ export type ConnectionStatus =
     | "initializing"
     | "connecting"
     | "connected"
+    | "reconnect"
     | "room_locked"
     | "knocking"
     | "disconnecting"