fix(breakout-rooms) cleanup remote tracks when a conference is left

react/features/base/tracks/middleware.js

@@ -1,10 +1,13 @@
 // @flow
 
+import { batch } from 'react-redux';
+
 import UIEvents from '../../../../service/UI/UIEvents';
 import { showModeratedNotification } from '../../av-moderation/actions';
 import { shouldShowModeratedNotification } from '../../av-moderation/functions';
 import { hideNotification, isModerationNotificationDisplayed } from '../../notifications';
 import { isPrejoinPageVisible } from '../../prejoin/functions';
+import { getCurrentConference } from '../conference/functions';
 import { getAvailableDevices } from '../devices/actions';
 import {
     CAMERA_FACING_MODE,
@@ -17,7 +20,7 @@ import {
     toggleCameraFacingMode,
     VIDEO_TYPE
 } from '../media';
-import { MiddlewareRegistry } from '../redux';
+import { MiddlewareRegistry, StateListenerRegistry } from '../redux';
 
 import {
     TRACK_ADDED,
@@ -30,6 +33,7 @@ import {
     createLocalTracksA,
     showNoDataFromSourceVideoError,
     toggleScreensharing,
+    trackRemoved,
     trackNoDataFromSourceNotificationInfoChanged
 } from './actions';
 import {
@@ -204,6 +208,25 @@ MiddlewareRegistry.register(store => next => action => {
     return next(action);
 });
 
+/**
+ * Set up state change listener to perform maintenance tasks when the conference
+ * is left or failed, remove all remote tracks from the store.
+ */
+StateListenerRegistry.register(
+    state => getCurrentConference(state),
+    (conference, { dispatch, getState }, prevConference) => {
+        if (prevConference && !conference) {
+            // Clear all remote tracks.
+            const remoteTracks = getState()['features/base/tracks'].filter(t => !t.local);
+
+            batch(() => {
+                for (const track of remoteTracks) {
+                    dispatch(trackRemoved(track.jitsiTrack));
+                }
+            });
+        }
+    });
+
 /**
  * Handles no data from source errors.
  *