change device data structure to array of objects

so that we can set falsey values, for unsetting device
                               most dolphinately needs testing

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/CallMediaHandler.js

@@ -23,15 +23,15 @@ export default {
         // Only needed for Electron atm, though should work in modern browsers
         // once permission has been granted to the webapp
         return navigator.mediaDevices.enumerateDevices().then(function(devices) {
-            const audioIn = {};
-            const videoIn = {};
+            const audioIn = [];
+            const videoIn = [];
 
             if (devices.some((device) => !device.label)) return false;
 
             devices.forEach((device) => {
                 switch (device.kind) {
-                    case 'audioinput': audioIn[device.deviceId] = device.label; break;
-                    case 'videoinput': videoIn[device.deviceId] = device.label; break;
+                    case 'audioinput': audioIn.push(device); break;
+                    case 'videoinput': videoIn.push(device); break;
                 }
             });
 

src/components/structures/UserSettings.js

@@ -269,8 +269,8 @@ module.exports = React.createClass({
             if (this._unmounted) return;
             this.setState({
                 mediaDevices,
-                activeAudioInput: this._localSettings['webrtc_audioinput'] || 'default',
-                activeVideoInput: this._localSettings['webrtc_videoinput'] || 'default',
+                activeAudioInput: this._localSettings['webrtc_audioinput'],
+                activeVideoInput: this._localSettings['webrtc_videoinput'],
             });
         });
     },
@@ -902,7 +902,7 @@ module.exports = React.createClass({
     },
 
     _mapWebRtcDevicesToSpans: function(devices) {
-        return Object.keys(devices).map((deviceId) => <span key={deviceId}>{devices[deviceId]}</span>);
+        return devices.map((device) => <span key={device.deviceId}>{devices[device.deviceId]}</span>);
     },
 
     _setAudioInput: function(deviceId) {
@@ -951,8 +951,14 @@ module.exports = React.createClass({
         let microphoneDropdown = <p>{_t('No Microphones detected')}</p>;
         let webcamDropdown = <p>{_t('No Webcams detected')}</p>;
 
+        const defaultOption = {
+            deviceId: undefined,
+            label: _t('Default Device'),
+        };
+
         const audioInputs = this.state.mediaDevices.audioinput;
-        if (Object.keys(audioInputs).length > 0) {
+        if (audioInputs.length > 0) {
+            audioInputs.unshift(defaultOption);
             microphoneDropdown = <div>
                 <h4>Microphone</h4>
                 <Dropdown
@@ -965,7 +971,8 @@ module.exports = React.createClass({
         }
 
         const videoInputs = this.state.mediaDevices.videoinput;
-        if (Object.keys(videoInputs).length > 0) {
+        if (videoInputs.length > 0) {
+            videoInputs.unshift(defaultOption);
             webcamDropdown = <div>
                 <h4>Cameras</h4>
                 <Dropdown

src/i18n/strings/en_EN.json

@@ -135,6 +135,7 @@
   "No Webcams detected": "No Webcams detected",
   "No media permissions": "No media permissions",
   "You may need to manually permit Riot to access your microphone/webcam": "You may need to manually permit Riot to access your microphone/webcam",
+  "Default Device": "Default Device",
   "Advanced": "Advanced",
   "Algorithm": "Algorithm",
   "Always show message timestamps": "Always show message timestamps",