diff --git a/conference.js b/conference.js index 8d2cbcd21..134a3e0ad 100644 --- 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(); }); } ); diff --git a/css/_device_settings_dialog.scss b/css/_device_settings_dialog.scss deleted file mode 100644 index 78862f5d4..000000000 --- a/css/_device_settings_dialog.scss +++ /dev/null @@ -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; - } - } - } -} \ No newline at end of file diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index 528ce39fb..362036c0b 100644 --- a/css/_side_toolbar_container.scss +++ b/css/_side_toolbar_container.scss @@ -113,6 +113,12 @@ text-align: center; } +#deviceOptionsWrapper { + button { + float: none; + } +} + /** * Profile */ diff --git a/css/main.scss b/css/main.scss index 55004580d..bb77dedda 100644 --- 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'; diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 56249e4cc..1d1c34baf 100644 --- 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 element to select camera ID from settings. - */ -UI.setSelectedCameraFromSettings = function () { - SettingsMenu.setSelectedCameraFromSettings(); -}; - -/** - * Sets audio outputs's - -
- - -
-
- - +
@@ -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 ''; - } - - var options = items.map(function (item) { - let attrs = { - value: item.deviceId - }; - - if (item.deviceId === selectedId) { - attrs.selected = 'selected'; - } - - let attrsStr = UIUtil.attrsToString(attrs); - return ``; - }); - - if (!items.length) { - options.unshift(''); - } - - 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 element to select camera ID from settings. - */ - setSelectedCameraFromSettings () { - $('#selectCamera').val(Settings.getCameraDeviceId()); - }, - - /** - * Sets audio outputs's