feat: replace device selection in settings with button for modal

Cleanup existing logic for displaying and updating device selection settings in the settings menu. In its place is a button to open the device selection modal.
2017-03-29 10:54:56 -07:00 · 2017-03-29 10:54:56 -07:00 · eb7dda85a1
parent 2f994b1227
commit eb7dda85a1
6 changed files with 48 additions and 219 deletions
--- a/conference.js
+++ b/conference.js
@ -1643,7 +1643,6 @@ export default {
                })
                .catch((err) => {
                    APP.UI.showDeviceErrorDialog(null, err);
-                    APP.UI.setSelectedCameraFromSettings();
                });
            }
        );
@ -1665,7 +1664,6 @@ export default {
                })
                .catch((err) => {
                    APP.UI.showDeviceErrorDialog(err, null);
-                    APP.UI.setSelectedMicFromSettings();
                });
            }
        );
@ -1681,7 +1679,6 @@ export default {
                        logger.warn('Failed to change audio output device. ' +
                            'Default or previously set audio output device ' +
                            'will be used instead.', err);
-                        APP.UI.setSelectedAudioOutputFromSettings();
                    });
            }
        );
--- a/css/_device_settings_dialog.scss
+++ b/css/_device_settings_dialog.scss
@ -1,31 +0,0 @@
-.settingsContent {
-    display: flex;
-    display: -webkit-flex;
-
-    #localVideoPreview {
-        width: 50%;
-        align-self: baseline;
-    }
-
-    .deviceSelection {
-        display: flex;
-        display: -webkit-flex;
-        -webkit-flex: 1;
-        flex: 1;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-        align-items: left;
-        margin-left: 10px;
-
-        .device {
-            display: flex;
-            margin-bottom: 5px;
-
-            select {
-                flex: 1;
-                margin_right: 5px;
-            }
-        }
-    }
-}
--- a/css/_side_toolbar_container.scss
+++ b/css/_side_toolbar_container.scss
@ -113,6 +113,12 @@
    text-align: center;
 }

+#deviceOptionsWrapper {
+    button {
+        float: none;
+    }
+}
+
 /**
 * Profile
 */
--- a/css/main.scss
+++ b/css/main.scss
@ -55,7 +55,6 @@
@import 'welcome_page';
@import 'toolbars';
@import 'side_toolbar_container';
-@import 'device_settings_dialog';
@import 'jquery.contextMenu';
@import 'keyboard-shortcuts';
@import 'redirect_page';
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@ -1084,32 +1084,9 @@ UI.onLocalRaiseHandChanged = function (isRaisedHand) {
 * @param {object[]} devices new list of available devices
 */
 UI.onAvailableDevicesChanged = function (devices) {
-    SettingsMenu.changeDevicesList(devices);
    APP.store.dispatch(updateDeviceList(devices));
 };

-/**
- * Sets microphone's <select> element to select microphone ID from settings.
- */
-UI.setSelectedMicFromSettings = function () {
-    SettingsMenu.setSelectedMicFromSettings();
-};
-
-/**
- * Sets camera's <select> element to select camera ID from settings.
- */
-UI.setSelectedCameraFromSettings = function () {
-    SettingsMenu.setSelectedCameraFromSettings();
-};
-
-/**
- * Sets audio outputs's <select> element to select audio output ID from
- * settings.
- */
-UI.setSelectedAudioOutputFromSettings = function () {
-    SettingsMenu.setSelectedAudioOutputFromSettings();
-};
-
 /**
 * Returns the id of the current video shown on large.
 * Currently used by tests (torture).
--- a/modules/UI/side_pannels/settings/SettingsMenu.js
+++ b/modules/UI/side_pannels/settings/SettingsMenu.js
@ -1,12 +1,15 @@
 /* global $, APP, AJS, interfaceConfig, JitsiMeetJS */
-
+import { openDialog } from '../../../../react/features/base/dialog';
 import { LANGUAGES } from "../../../../react/features/base/i18n";
+import { DeviceSelectionDialog }
+    from '../../../../react/features/device-selection';

 import UIUtil from "../../util/UIUtil";
 import UIEvents from "../../../../service/UI/UIEvents";
-import Settings from '../../../settings/Settings';

 const sidePanelsContainerId = 'sideToolbarContainer';
+const deviceSelectionButtonClasses
+    = 'button-control button-control_primary button-control_full-width';
 const htmlStr = `
    <div id="settings_container" class="sideToolbarContainer__inner">
        <div class="title" data-i18n="settings.title"></div>
@ -19,17 +22,11 @@ const htmlStr = `
                <div id="deviceOptionsTitle" class="subTitle hide" 
                    data-i18n="settings.audioVideo"></div>
                <div class="sideToolbarBlock first">
-                    <label class="first" data-i18n="settings.selectCamera">
-                    </label>
-                    <select id="selectCamera"></select>
-                </div>
-                <div class="sideToolbarBlock">
-                    <label data-i18n="settings.selectMic"></label>
-                    <select id="selectMic"></select>
-                </div>
-                <div class="sideToolbarBlock">
-                    <label data-i18n="settings.selectAudioOutput"></label>
-                    <select id="selectAudioOutput"></select>
+                    <button
+                        class="${deviceSelectionButtonClasses}"
+                        data-i18n="deviceSelection.deviceSettings"
+                        id="deviceSelection"
+                        type="button"></button>
                </div>
            </div>
            <div id="moderatorOptionsWrapper" class="hide">
@ -89,40 +86,6 @@ function generateLanguagesOptions(items, currentLang) {
    }).join('');
 }

-/**
- * Generate html select options for available physical devices.
- *
- * @param {{ deviceId, label }[]} items available devices
- * @param {string} [selectedId] id of selected device
- * @param {boolean} permissionGranted if permission to use selected device type
- *      is granted
- * @returns {string}
- */
-function generateDevicesOptions(items, selectedId, permissionGranted) {
-    if (!permissionGranted && items.length) {
-        return '<option data-i18n="settings.noPermission"></option>';
-    }
-
-    var options = items.map(function (item) {
-        let attrs = {
-            value: item.deviceId
-        };
-
-        if (item.deviceId === selectedId) {
-            attrs.selected = 'selected';
-        }
-
-        let attrsStr = UIUtil.attrsToString(attrs);
-        return `<option ${attrsStr}>${item.label}</option>`;
-    });
-
-    if (!items.length) {
-        options.unshift('<option data-i18n="settings.noDevice"></option>');
-    }
-
-    return options.join('');
-}
-
 /**
 * Replace html select element to select2 custom dropdown
 *
@ -138,6 +101,34 @@ function initSelect2($el, onSelectedCb) {
    }
 }

+/**
+ * Open DeviceSelectionDialog with a configuration based on the environment's
+ * supported abilities.
+ *
+ * @param {boolean} isDeviceListAvailable - Whether or not device enumeration
+ * is possible. This is a value obtained through an async operation whereas all
+ * other configurations for the modal are obtained synchronously.
+ * @private
+ * @returns {void}
+ */
+function _openDeviceSelectionModal(isDeviceListAvailable) {
+    APP.store.dispatch(openDialog(DeviceSelectionDialog, {
+        currentAudioOutputId: APP.settings.getAudioOutputDeviceId(),
+        currentAudioTrack: APP.conference.getLocalAudioTrack(),
+        currentVideoTrack: APP.conference.getLocalVideoTrack(),
+        disableAudioInputChange: !JitsiMeetJS.isMultipleAudioInputSupported(),
+        disableDeviceChange: !isDeviceListAvailable
+            || !JitsiMeetJS.mediaDevices.isDeviceChangeAvailable(),
+        hasAudioPermission: JitsiMeetJS.mediaDevices
+            .isDevicePermissionGranted('audio'),
+        hasVideoPermission: JitsiMeetJS.mediaDevices
+            .isDevicePermissionGranted('video'),
+        hideAudioInputPreview: !JitsiMeetJS.isCollectingLocalStats(),
+        hideAudioOutputSelect: !JitsiMeetJS.mediaDevices
+            .isDeviceChangeAvailable('output')
+    }));
+}
+
 export default {
    init (emitter) {
        initHTML();
@ -181,11 +172,11 @@ export default {

            JitsiMeetJS.mediaDevices.isDeviceListAvailable()
                .then((isDeviceListAvailable) => {
-                    if (isDeviceListAvailable &&
-                        JitsiMeetJS.mediaDevices.isDeviceChangeAvailable()) {
-                        this._initializeDeviceSelectionSettings(emitter);
-                    }
+                    $('#deviceSelection').on('click', () => {
+                        _openDeviceSelectionModal(isDeviceListAvailable);
+                    });
                });
+
            // Only show the subtitle if this isn't the only setting section.
            if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
                UIUtil.setVisible("deviceOptionsTitle", true);
@ -219,30 +210,6 @@ export default {
        }
    },

-    _initializeDeviceSelectionSettings(emitter) {
-        this.changeDevicesList([]);
-
-        $('#selectCamera').change(function () {
-            let cameraDeviceId = $(this).val();
-            if (cameraDeviceId !== Settings.getCameraDeviceId()) {
-                emitter.emit(UIEvents.VIDEO_DEVICE_CHANGED, cameraDeviceId);
-            }
-        });
-        $('#selectMic').change(function () {
-            let micDeviceId = $(this).val();
-            if (micDeviceId !== Settings.getMicDeviceId()) {
-                emitter.emit(UIEvents.AUDIO_DEVICE_CHANGED, micDeviceId);
-            }
-        });
-        $('#selectAudioOutput').change(function () {
-            let audioOutputDeviceId = $(this).val();
-            if (audioOutputDeviceId !== Settings.getAudioOutputDeviceId()) {
-                emitter.emit(
-                    UIEvents.AUDIO_OUTPUT_DEVICE_CHANGED, audioOutputDeviceId);
-            }
-        });
-    },
-
    /**
     * If start audio muted/start video muted options should be visible or not.
     * @param {boolean} show
@ -286,91 +253,5 @@ export default {
     */
    isVisible () {
        return UIUtil.isVisible(document.getElementById("settings_container"));
-    },
-
-    /**
-     * Sets microphone's <select> element to select microphone ID from settings.
-     */
-    setSelectedMicFromSettings () {
-        $('#selectMic').val(Settings.getMicDeviceId());
-    },
-
-    /**
-     * Sets camera's <select> element to select camera ID from settings.
-     */
-    setSelectedCameraFromSettings () {
-        $('#selectCamera').val(Settings.getCameraDeviceId());
-    },
-
-    /**
-     * Sets audio outputs's <select> element to select audio output ID from
-     * settings.
-     */
-    setSelectedAudioOutputFromSettings () {
-        $('#selectAudioOutput').val(Settings.getAudioOutputDeviceId());
-    },
-
-    /**
-     * Change available cameras/microphones or hide selects completely if
-     * no devices available.
-     * @param {{ deviceId, label, kind }[]} devices list of available devices
-     */
-    changeDevicesList (devices) {
-        let $selectCamera= AJS.$('#selectCamera'),
-            $selectMic = AJS.$('#selectMic'),
-            $selectAudioOutput = AJS.$('#selectAudioOutput'),
-            $selectAudioOutputParent = $selectAudioOutput.parent();
-
-        let audio = devices.filter(device => device.kind === 'audioinput'),
-            video = devices.filter(device => device.kind === 'videoinput'),
-            audioOutput = devices
-                .filter(device => device.kind === 'audiooutput'),
-            selectedAudioDevice = audio.find(
-                d => d.deviceId === Settings.getMicDeviceId()) || audio[0],
-            selectedVideoDevice = video.find(
-                d => d.deviceId === Settings.getCameraDeviceId()) || video[0],
-            selectedAudioOutputDevice = audioOutput.find(
-                    d => d.deviceId === Settings.getAudioOutputDeviceId()),
-            videoPermissionGranted =
-                JitsiMeetJS.mediaDevices.isDevicePermissionGranted('video'),
-            audioPermissionGranted =
-                JitsiMeetJS.mediaDevices.isDevicePermissionGranted('audio');
-
-        $selectCamera
-            .html(generateDevicesOptions(
-                video,
-                selectedVideoDevice ? selectedVideoDevice.deviceId : '',
-                videoPermissionGranted))
-            .prop('disabled', !video.length || !videoPermissionGranted);
-
-        initSelect2($selectCamera);
-
-        $selectMic
-            .html(generateDevicesOptions(
-                audio,
-                selectedAudioDevice ? selectedAudioDevice.deviceId : '',
-                audioPermissionGranted))
-            .prop('disabled', !audio.length || !audioPermissionGranted);
-
-        initSelect2($selectMic);
-
-        if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) {
-            $selectAudioOutput
-                .html(generateDevicesOptions(
-                    audioOutput,
-                    selectedAudioOutputDevice
-                        ? selectedAudioOutputDevice.deviceId
-                        : 'default',
-                    videoPermissionGranted || audioPermissionGranted))
-                .prop('disabled', !audioOutput.length ||
-                    (!videoPermissionGranted && !audioPermissionGranted));
-            initSelect2($selectAudioOutput);
-
-            $selectAudioOutputParent.show();
-        } else {
-            $selectAudioOutputParent.hide();
-        }
-
-        APP.translation.translateElement($('#settings_container option'));
    }
 };