feat(iframe-api): Add deviceListChanged event.

conference.js

@@ -2417,7 +2417,7 @@ export default {
      */
     updateAudioIconEnabled() {
         const audioMediaDevices
-            = APP.store.getState()['features/base/devices'].audioInput;
+            = APP.store.getState()['features/base/devices'].devices.audioInput;
         const audioDeviceCount
             = audioMediaDevices ? audioMediaDevices.length : 0;
 
@@ -2440,7 +2440,7 @@ export default {
      */
     updateVideoIconEnabled() {
         const videoMediaDevices
-            = APP.store.getState()['features/base/devices'].videoInput;
+            = APP.store.getState()['features/base/devices'].devices.videoInput;
         const videoDeviceCount
             = videoMediaDevices ? videoMediaDevices.length : 0;
 

doc/api.md

@@ -300,6 +300,14 @@ changes. The listener will receive an object with the following structure:
 }
 ```
 
+* **deviceListChanged** - event notifications about device list changes. The listener will receive an object with the following structure:
+```javascript
+{
+"devices": devices // the new list of available devices.
+}
+```
+NOTE: The devices object has the same format as the getAvailableDevices result format.
+
 * **emailChange** - event notifications about email
 changes. The listener will receive an object with the following structure:
 ```javascript

modules/API/API.js

@@ -386,6 +386,19 @@ class API {
         });
     }
 
+    /**
+     * Notify external application (if API is enabled) that the device list has
+     * changed.
+     *
+     * @param {Object} devices - The new device list.
+     * @returns {void}
+     */
+    notifyDeviceListChanged(devices: Object) {
+        this._sendEvent({
+            name: 'device-list-changed',
+            devices });
+    }
+
     /**
      * Notify external application (if API is enabled) that user changed their
      * nickname.

modules/API/external/external_api.js

@@ -50,6 +50,7 @@ const events = {
     'avatar-changed': 'avatarChanged',
     'audio-availability-changed': 'audioAvailabilityChanged',
     'audio-mute-status-changed': 'audioMuteStatusChanged',
+    'device-list-changed': 'deviceListChanged',
     'display-name-change': 'displayNameChange',
     'email-change': 'emailChange',
     'feedback-submitted': 'feedbackSubmitted',

react/features/base/devices/functions.js

@@ -20,7 +20,7 @@ export function areDeviceLabelsInitialized(state: Object) {
     }
 
     for (const type of [ 'audioInput', 'audioOutput', 'videoInput' ]) {
-        if (state['features/base/devices'][type].find(d => Boolean(d.label))) {
+        if (state['features/base/devices'].devices[type].find(d => Boolean(d.label))) {
             return true;
         }
     }
@@ -50,7 +50,8 @@ export function getDeviceIdByLabel(state: Object, label: string) {
 
     for (const type of types) {
         const device
-            = state['features/base/devices'][type].find(d => d.label === label);
+            = state['features/base/devices'].devices[type]
+                .find(d => d.label === label);
 
         if (device) {
             return device.deviceId;

react/features/base/devices/reducer.js

@@ -10,9 +10,11 @@ import { groupDevicesByKind } from './functions';
 import { ReducerRegistry } from '../redux';
 
 const DEFAULT_STATE = {
-    audioInput: [],
+    devices: {
-    audioOutput: [],
+        audioInput: [],
-    videoInput: [],
+        audioOutput: [],
+        videoInput: []
+    },
     pendingRequests: []
 };
 
@@ -34,8 +36,8 @@ ReducerRegistry.register(
             const deviceList = groupDevicesByKind(action.devices);
 
             return {
-                pendingRequests: state.pendingRequests,
+                ...state,
-                ...deviceList
+                devices: deviceList
             };
         }
 

react/features/device-selection/functions.js

@@ -28,7 +28,7 @@ export function getDeviceSelectionDialogProps(stateful: Object | Function) {
     const settings = state['features/base/settings'];
 
     return {
-        availableDevices: state['features/base/devices'],
+        availableDevices: state['features/base/devices'].devices,
         disableAudioInputChange:
             !JitsiMeetJS.isMultipleAudioInputSupported(),
         disableDeviceChange:

react/features/device-selection/middleware.js

@@ -1,6 +1,10 @@
+// @flow
+
 import { UPDATE_DEVICE_LIST } from '../base/devices';
 import { MiddlewareRegistry } from '../base/redux';
 
+declare var APP: Object;
+
 /**
  * Implements the middleware of the feature device-selection.
  *
@@ -12,11 +16,19 @@ MiddlewareRegistry.register(store => next => action => {
     const result = next(action);
 
     if (action.type === UPDATE_DEVICE_LIST) {
-        const { popupDialogData }
+        const state = store.getState();
-            = store.getState()['features/device-selection'];
+        const { popupDialogData } = state['features/device-selection'];
+        const { devices } = state['features/base/devices'];
 
         if (popupDialogData) {
-            popupDialogData.transport.sendEvent({ name: 'deviceListChanged' });
+            popupDialogData.transport.sendEvent({
+                name: 'deviceListChanged',
+                devices
+            });
+        }
+
+        if (typeof APP !== 'undefined') {
+            APP.API.notifyDeviceListChanged(devices);
         }
     }