feat(tracks): place remote tracks into the redux store

- Use actions trackAdded and trackRemoved to add and remove remote
  tracks from the redux store
- Emit out to non-react components on track added and removed in
  the track middleware
- Emit out to existing non-react components on track mute and
  video type changes

conference.js

@@ -42,6 +42,7 @@ import {
     participantRoleChanged,
     participantUpdated
 } from './react/features/base/participants';
+import { trackAdded, trackRemoved } from './react/features/base/tracks';
 import {
     showDesktopPicker
 } from  './react/features/desktop-picker';
@@ -1327,36 +1328,32 @@ export default {
             if(!track || track.isLocal())
                 return;
 
-            track.on(TrackEvents.TRACK_VIDEOTYPE_CHANGED, (type) => {
-                APP.UI.onPeerVideoTypeChanged(track.getParticipantId(), type);
-            });
-            APP.UI.addRemoteStream(track);
+            APP.store.dispatch(trackAdded(track));
         });
 
         room.on(ConferenceEvents.TRACK_REMOVED, (track) => {
             if(!track || track.isLocal())
                 return;
 
-            APP.UI.removeRemoteStream(track);
+            APP.store.dispatch(trackRemoved(track));
         });
 
         room.on(ConferenceEvents.TRACK_MUTE_CHANGED, (track) => {
-            if(!track)
+            if (!track || !track.isLocal()) {
                 return;
+            }
+
             const handler = (track.getType() === "audio")?
                 APP.UI.setAudioMuted : APP.UI.setVideoMuted;
-            let id;
             const mute = track.isMuted();
-            if(track.isLocal()){
-                id = APP.conference.getMyUserId();
-                if(track.getType() === "audio") {
-                    this.audioMuted = mute;
-                } else {
-                    this.videoMuted = mute;
-                }
+            const id = APP.conference.getMyUserId();
+
+            if (track.getType() === "audio") {
+                this.audioMuted = mute;
             } else {
-                id = track.getParticipantId();
+                this.videoMuted = mute;
             }
+
             handler(id , mute);
         });
         room.on(ConferenceEvents.TRACK_AUDIO_LEVEL_CHANGED, (id, lvl) => {

react/features/base/tracks/middleware.js

@@ -18,9 +18,11 @@ import {
     createLocalTracks,
     destroyLocalTracks
 } from './actions';
-import { TRACK_UPDATED } from './actionTypes';
+import { TRACK_ADDED, TRACK_REMOVED, TRACK_UPDATED } from './actionTypes';
 import { getLocalTrack, setTrackMuted } from './functions';
 
+declare var APP: Object;
+
 /**
  * Middleware that captures LIB_DID_DISPOSE and LIB_DID_INIT actions and,
  * respectively, creates/destroys local media tracks. Also listens to
@@ -92,7 +94,40 @@ MiddlewareRegistry.register(store => next => action => {
         break;
     }
 
+    case TRACK_ADDED:
+        // TODO Remove this middleware case once all UI interested in new tracks
+        // being added are converted to react and listening for store changes.
+        if (typeof APP !== 'undefined' && !action.track.local) {
+            APP.UI.addRemoteStream(action.track.jitsiTrack);
+        }
+        break;
+
+    case TRACK_REMOVED:
+        // TODO Remove this middleware case once all UI interested in tracks
+        // being removed are converted to react and listening for store changes.
+        if (typeof APP !== 'undefined' && !action.track.local) {
+            APP.UI.removeRemoteStream(action.track.jitsiTrack);
+        }
+        break;
+
     case TRACK_UPDATED:
+        // TODO Remove the below calls to APP.UI once components interested in
+        // track mute changes are moved into react.
+        if (typeof APP !== 'undefined' && !action.track.local) {
+            const { jitsiTrack } = action.track;
+            const isMuted = jitsiTrack.isMuted();
+            const participantID = jitsiTrack.getParticipantId();
+            const { videoType } = jitsiTrack;
+
+            if (videoType) {
+                APP.UI.setVideoMuted(participantID, isMuted);
+                APP.UI.onPeerVideoTypeChanged(
+                    participantID, jitsiTrack.videoType);
+            } else {
+                APP.UI.setAudioMuted(participantID, isMuted);
+            }
+        }
+
         return _trackUpdated(store, next, action);
     }