handle device list changes

conference.js

@@ -10,6 +10,8 @@ import ConnectionQuality from './modules/connectionquality/connectionquality';
 import CQEvents from './service/connectionquality/CQEvents';
 import UIEvents from './service/UI/UIEvents';
 
+const LibraryEvents = JitsiMeetJS.events.library;
+
 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
 
@@ -331,12 +333,14 @@ export default {
                 JitsiMeetJS.isDesktopSharingEnabled();
 
             // update list of available devices
-            if (JitsiMeetJS.isDeviceListAvailable() &&
-                JitsiMeetJS.isDeviceChangeAvailable()) {
-                JitsiMeetJS.enumerateDevices(
-                    devices => APP.UI.onAvailableDevicesChanged(devices)
-                );
-            }
+            APP.UI.updateDevicesList(JitsiMeetJS.getDevicesList());
+            JitsiMeetJS.on(
+                LibraryEvents.DEVICES_LIST_CHANGED,
+                function () {
+                    APP.UI.updateDevicesList(JitsiMeetJS.getDevicesList());
+                }
+            );
+
             // XXX The API will take care of disconnecting from the XMPP server
             // (and, thus, leaving the room) on unload.
             return new Promise((resolve, reject) => {

modules/UI/UI.js

@@ -1018,7 +1018,7 @@ UI.onStartMutedChanged = function (startAudioMuted, startVideoMuted) {
  * Update list of available physical devices.
  * @param {object[]} devices new list of available devices
  */
-UI.onAvailableDevicesChanged = function (devices) {
+UI.updateDevicesList = function (devices) {
     SettingsMenu.changeDevicesList(devices);
 };
 

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -33,7 +33,7 @@ function generateLanguagesOptions(items, currentLang) {
  * @returns {string}
  */
 function generateDevicesOptions(items, selectedId) {
-    return items.map(function (item) {
+    let options = items.map(function (item) {
         let attrs = {
             value: item.deviceId
         };
@@ -44,7 +44,10 @@ function generateDevicesOptions(items, selectedId) {
 
         let attrsStr = UIUtil.attrsToString(attrs);
         return `<option ${attrsStr}>${item.label}</option>`;
-    }).join('\n');
+    });
+    options.unshift('<option label=" "></option>');
+
+    return options.join('\n');
 }
 
 
@@ -103,7 +106,6 @@ export default {
 
 
         // DEVICES LIST
-        this.changeDevicesList([]);
         $('#selectCamera').change(function () {
             let cameraDeviceId = $(this).val();
             if (cameraDeviceId !== Settings.getCameraDeviceId()) {
@@ -164,22 +166,24 @@ export default {
      * no devices available.
      * @param {{ deviceId, label, kind }[]} devices list of available devices
      */
-    changeDevicesList (devices) {
-        if (!devices.length) {
-            $('#devicesOptions').hide();
-            return;
+    changeDevicesList ({ audio = [], video = []}) {
+        let audioSelect = $('#selectMic');
+        if (audio.length) {
+            audioSelect.html(
+                generateDevicesOptions(audio, Settings.getMicDeviceId())
+            );
         }
+        audioSelect.parent().toggle(!!audio.length);
 
-        let audio = devices.filter(device => device.kind === 'audioinput');
-        let video = devices.filter(device => device.kind === 'videoinput');
 
-        $('#selectCamera').html(
-            generateDevicesOptions(video, Settings.getCameraDeviceId())
-        );
-        $('#selectMic').html(
-            generateDevicesOptions(audio, Settings.getMicDeviceId())
-        );
+        let videoSelect = $('#selectCamera');
+        if (video.length) {
+            videoSelect.html(
+                generateDevicesOptions(video, Settings.getCameraDeviceId())
+            );
+        }
+        videoSelect.parent().toggle(!!video.length);
 
-        $('#devicesOptions').show();
+        $('#devicesOptions').toggle(!!(audio.length || video.length));
     }
 };

package.json

@@ -35,7 +35,7 @@
     "browserify": "11.1.x",
     "browserify-shim": "^3.8.10",
     "exorcist": "*",
-    "jshint": "2.8.0",
+    "jshint": "2.9.1",
     "precommit-hook": "3.0.0",
     "uglify-js": "2.4.24",
     "clean-css": "*",