Better handling of reconnect. Clear the state properly and handle spotlights.

app/src/RoomClient.js

@@ -940,17 +940,13 @@ export default class RoomClient
 			{
 				if (consumer.kind === 'video')
 				{
-					if (spotlights.indexOf(consumer.appData.peerId) > -1)
+					if (spotlights.includes(consumer.appData.peerId))
-					{
 						await this._resumeConsumer(consumer);
-					}
 					else
-					{
 						await this._pauseConsumer(consumer);
 				}
 			}
 		}
-		}
 		catch (error)
 		{
 			logger.error('updateSpotlights() failed: %o', error);
@@ -1516,9 +1512,7 @@ export default class RoomClient
 				if (consumer.appData.peerId === peerId && consumer.appData.source === type)
 				{
 					if (mute)
-					{
 						await this._pauseConsumer(consumer);
-					}
 					else
 						await this._resumeConsumer(consumer);
 				}
@@ -1846,6 +1840,11 @@ export default class RoomClient
 				this._recvTransport = null;
 			}
 
+			this._spotlights.clearSpotlights();
+
+			store.dispatch(peerActions.clearPeers());
+			store.dispatch(consumerActions.clearConsumers());
+			store.dispatch(roomActions.clearSpotlights());
 			store.dispatch(roomActions.setRoomState('connecting'));
 		});
 
@@ -2561,8 +2560,6 @@ export default class RoomClient
 
 					case 'moderator:mute':
 					{
-						// const { peerId } = notification.data;
-
 						if (this._micProducer && !this._micProducer.paused)
 						{
 							this.muteMic();
@@ -2581,8 +2578,6 @@ export default class RoomClient
 
 					case 'moderator:stopVideo':
 					{
-						// const { peerId } = notification.data;
-
 						this.disableWebcam();
 						this.disableScreenSharing();
 

app/src/Spotlights.js

@@ -95,6 +95,15 @@ export default class Spotlights extends EventEmitter
 		});
 	}
 
+	clearSpotlights()
+	{
+		this._started = false;
+
+		this._peerList = [];
+		this._selectedSpotlights = [];
+		this._currentSpotlights = [];
+	}
+
 	_newPeer(id)
 	{
 		logger.debug(

app/src/actions/consumerActions.js

@@ -10,6 +10,11 @@ export const removeConsumer = (consumerId, peerId) =>
 		payload : { consumerId, peerId }
 	});
 
+export const clearConsumers = () =>
+	({
+		type : 'CLEAR_CONSUMERS'
+	});
+
 export const setConsumerPaused = (consumerId, originator) =>
 	({
 		type    : 'SET_CONSUMER_PAUSED',

app/src/actions/peerActions.js

@@ -10,6 +10,11 @@ export const removePeer = (peerId) =>
 		payload : { peerId }
 	});
 
+export const clearPeers = () =>
+	({
+		type : 'CLEAR_PEERS'
+	});
+
 export const setPeerDisplayName = (displayName, peerId) =>
 	({
 		type    : 'SET_PEER_DISPLAY_NAME',

app/src/actions/roomActions.js

@@ -130,6 +130,11 @@ export const setSpotlights = (spotlights) =>
 		payload : { spotlights }
 	});
 
+export const clearSpotlights = () =>
+	({
+		type : 'CLEAR_SPOTLIGHTS'
+	});
+
 export const toggleJoined = () =>
 	({
 		type : 'TOGGLE_JOINED'

app/src/reducers/consumers.js

@@ -110,6 +110,11 @@ const consumers = (state = initialState, action) =>
 			return { ...state, [consumerId]: newConsumer };
 		}
 
+		case 'CLEAR_CONSUMERS':
+		{
+			return initialState;
+		}
+
 		default:
 			return state;
 	}

app/src/reducers/peers.js

@@ -1,4 +1,6 @@
-const peer = (state = {}, action) =>
+const initialState = {};
+
+const peer = (state = initialState, action) =>
 {
 	switch (action.type) 
 	{
@@ -85,7 +87,7 @@ const peer = (state = {}, action) =>
 	}
 };
 
-const peers = (state = {}, action) =>
+const peers = (state = initialState, action) =>
 {
 	switch (action.type)
 	{
@@ -139,6 +141,11 @@ const peers = (state = {}, action) =>
 			return { ...state, [oldPeer.id]: peer(oldPeer, action) };
 		}
 
+		case 'CLEAR_PEERS':
+		{
+			return initialState;
+		}
+
 		default:
 			return state;
 	}

app/src/reducers/room.js

@@ -212,6 +212,11 @@ const room = (state = initialState, action) =>
 			return { ...state, spotlights };
 		}
 
+		case 'CLEAR_SPOTLIGHTS':
+		{
+			return { ...state, spotlights: [] };
+		}
+
 		case 'SET_LOBBY_PEERS_PROMOTION_IN_PROGRESS':
 			return { ...state, lobbyPeersPromotionInProgress: action.payload.flag };