Groups devices notifications by type audio/video. (#4238)

* Groups devices notifications by type audio/video.

* Fixes passing correct device array.

conference.js

@@ -2402,17 +2402,26 @@ export default {
         // Let's handle unknown/non-preferred devices
         const newAvailDevices
             = APP.store.getState()['features/base/devices'].availableDevices;
+        let newAudioDevices = [];
+        let oldAudioDevices = [];
 
         if (typeof newDevices.audiooutput === 'undefined') {
-            APP.store.dispatch(
-                checkAndNotifyForNewDevice(newAvailDevices.audioOutput, oldDevices.audioOutput));
+            newAudioDevices = newAvailDevices.audioOutput;
+            oldAudioDevices = oldDevices.audioOutput;
         }
 
         if (!requestedInput.audio) {
-            APP.store.dispatch(
-                checkAndNotifyForNewDevice(newAvailDevices.audioInput, oldDevices.audioInput));
+            newAudioDevices = newAudioDevices.concat(newAvailDevices.audioInput);
+            oldAudioDevices = oldAudioDevices.concat(oldDevices.audioInput);
         }
 
+        // check for audio
+        if (newAudioDevices.length > 0) {
+            APP.store.dispatch(
+                checkAndNotifyForNewDevice(newAudioDevices, oldAudioDevices));
+        }
+
+        // check for video
         if (!requestedInput.video) {
             APP.store.dispatch(
                 checkAndNotifyForNewDevice(newAvailDevices.videoInput, oldDevices.videoInput));

lang/main.json

@@ -481,8 +481,7 @@
         "suboptimalExperienceDescription": "Eer... we are afraid your experience with __appName__ isn't going to be that great here. We are looking for ways to improve this but, until then, please try using one of the <a href='static/recommendedBrowsers.html' target='_blank'>fully supported browsers</a>.",
         "suboptimalExperienceTitle": "Browser Warning",
         "newDeviceCameraTitle": "New camera detected",
-        "newDeviceMicTitle": "New microphone detected",
-        "newDeviceCameraTitle": "New audio output detected",
+        "newDeviceAudioTitle": "New audio device detected",
         "newDeviceAction": "Use"
     },
     "passwordSetRemotely": "set by another member",

react/features/base/devices/middleware.js

@@ -79,7 +79,9 @@ function _conferenceJoined({ dispatch, getState }, next, action) {
 
 /**
  * Finds a new device by comparing new and old array of devices and dispatches
- * notification with the new device.
+ * notification with the new device. For new devices with same groupId only one
+ * notification will be shown, this is so to avoid showing multiple notifications
+ * for audio input and audio output devices.
  *
  * @param {Store} store - The redux store in which the specified {@code action}
  * is being dispatched.
@@ -97,7 +99,25 @@ function _checkAndNotifyForNewDevice(store, newDevices, oldDevices) {
         nDevice => !oldDevices.find(
             device => device.deviceId === nDevice.deviceId));
 
-    onlyNewDevices.forEach(newDevice => {
+    // we group devices by groupID which normally is the grouping by physical device
+    // plugging in headset we provide normally two device, one input and one output
+    // and we want to show only one notification for this physical audio device
+    const devicesGroupBy = onlyNewDevices.reduce((accumulated, value) => {
+        accumulated[value.groupId] = accumulated[value.groupId] || [];
+        accumulated[value.groupId].push(value);
+
+        return accumulated;
+    }, {});
+
+    Object.values(devicesGroupBy).forEach(devicesArray => {
+
+        if (devicesArray.length < 1) {
+            return;
+        }
+
+        // let's get the first device as a reference, we will use it for
+        // label and type
+        const newDevice = devicesArray[0];
 
         // we want to strip any device details that are not very
         // user friendly, like usb ids put in brackets at the end
@@ -115,12 +135,9 @@ function _checkAndNotifyForNewDevice(store, newDevices, oldDevices) {
             titleKey = 'notify.newDeviceCameraTitle';
             break;
         }
-        case 'audioinput': {
-            titleKey = 'notify.newDeviceMicTitle';
-            break;
-        }
+        case 'audioinput' :
         case 'audiooutput': {
-            titleKey = 'notify.newDeviceCameraTitle';
+            titleKey = 'notify.newDeviceAudioTitle';
             break;
         }
         }
@@ -129,7 +146,7 @@ function _checkAndNotifyForNewDevice(store, newDevices, oldDevices) {
             description,
             titleKey,
             customActionNameKey: 'notify.newDeviceAction',
-            customActionHandler: _useDevice.bind(undefined, store, newDevice)
+            customActionHandler: _useDevice.bind(undefined, store, devicesArray)
         }));
     });
 }
@@ -139,47 +156,49 @@ function _checkAndNotifyForNewDevice(store, newDevices, oldDevices) {
  *
  * @param {Store} store - The redux store in which the specified {@code action}
  * is being dispatched.
- * @param {MediaDeviceInfo} device - The device to save.
+ * @param {Array<MediaDeviceInfo|InputDeviceInfo>} devices - The devices to save.
  * @returns {boolean} - Returns true in order notifications to be dismissed.
  * @private
  */
-function _useDevice({ dispatch }, device) {
-    switch (device.kind) {
-    case 'videoinput': {
-        dispatch(updateSettings({
-            userSelectedCameraDeviceId: device.deviceId,
-            userSelectedCameraDeviceLabel: device.label
-        }));
+function _useDevice({ dispatch }, devices) {
+    devices.forEach(device => {
+        switch (device.kind) {
+        case 'videoinput': {
+            dispatch(updateSettings({
+                userSelectedCameraDeviceId: device.deviceId,
+                userSelectedCameraDeviceLabel: device.label
+            }));
 
-        dispatch(setVideoInputDevice(device.deviceId));
-        break;
-    }
-    case 'audioinput': {
-        dispatch(updateSettings({
-            userSelectedMicDeviceId: device.deviceId,
-            userSelectedMicDeviceLabel: device.label
-        }));
+            dispatch(setVideoInputDevice(device.deviceId));
+            break;
+        }
+        case 'audioinput': {
+            dispatch(updateSettings({
+                userSelectedMicDeviceId: device.deviceId,
+                userSelectedMicDeviceLabel: device.label
+            }));
 
-        dispatch(setAudioInputDevice(device.deviceId));
-        break;
-    }
-    case 'audiooutput': {
-        setAudioOutputDeviceId(
-            device.deviceId,
-            dispatch,
-            true,
-            device.label)
-            .then(() => logger.log('changed audio output device'))
-            .catch(err => {
-                logger.warn(
-                    'Failed to change audio output device.',
-                    'Default or previously set audio output device will',
-                    ' be used instead.',
-                    err);
-            });
-        break;
-    }
-    }
+            dispatch(setAudioInputDevice(device.deviceId));
+            break;
+        }
+        case 'audiooutput': {
+            setAudioOutputDeviceId(
+                device.deviceId,
+                dispatch,
+                true,
+                device.label)
+                .then(() => logger.log('changed audio output device'))
+                .catch(err => {
+                    logger.warn(
+                        'Failed to change audio output device.',
+                        'Default or previously set audio output device will',
+                        ' be used instead.',
+                        err);
+                });
+            break;
+        }
+        }
+    });
 
     return true;
 }