Merge pull request #1481 from virtuacoplenny/device-picker-settings

fix: open device selection if it is the only available setting

conference.js

@@ -1058,15 +1058,6 @@ export default {
             });
     },
 
-    /**
-     * Returns the current local video track in use.
-     *
-     * @returns {JitsiLocalTrack}
-     */
-    getLocalVideoTrack() {
-        return room.getLocalVideoTrack();
-    },
-
     /**
      * Start using provided audio stream.
      * Stops previous audio stream.
@@ -1096,14 +1087,6 @@ export default {
             });
     },
 
-    /**
-     * Returns the current local audio track in use.
-     *
-     * @returns {JitsiLocalTrack}
-     */
-    getLocalAudioTrack() {
-        return room.getLocalAudioTrack();
-    },
 
     videoSwitchInProgress: false,
     toggleScreenSharing(shareScreen = !this.isSharingScreen) {

modules/UI/UI.js

@@ -31,6 +31,9 @@ import {
     setAudioMuted,
     setVideoMuted
 } from '../../react/features/base/media';
+import {
+    openDeviceSelectionDialog
+} from '../../react/features/device-selection';
 import {
     checkAutoEnableDesktopSharing,
     dockToolbox,
@@ -1369,7 +1372,18 @@ const UIListeners = new Map([
         UI.toggleChat
     ], [
         UIEvents.TOGGLE_SETTINGS,
-        () => UI.toggleSidePanel("settings_container")
+        () => {
+            // Opening of device selection is special-cased as it is a dialog
+            // opened through a button in settings and not directly displayed in
+            // settings itself. As it is not useful to only have a settings menu
+            // with a button to open a dialog, open the dialog directly instead.
+            if (interfaceConfig.SETTINGS_SECTIONS.length === 1
+                    && UIUtil.isSettingEnabled('devices')) {
+                APP.store.dispatch(openDeviceSelectionDialog());
+            } else {
+                UI.toggleSidePanel("settings_container");
+            }
+        }
     ], [
         UIEvents.TOGGLE_CONTACT_LIST,
         UI.toggleContactList

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -1,7 +1,6 @@
-/* global $, APP, AJS, interfaceConfig, JitsiMeetJS */
+/* global $, APP, AJS, interfaceConfig */
-import { openDialog } from '../../../../react/features/base/dialog';
 import { LANGUAGES } from "../../../../react/features/base/i18n";
-import { DeviceSelectionDialog }
+import { openDeviceSelectionDialog }
     from '../../../../react/features/device-selection';
 
 import UIUtil from "../../util/UIUtil";
@@ -101,34 +100,6 @@ 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();
@@ -170,12 +141,8 @@ export default {
         if (UIUtil.isSettingEnabled('devices')) {
             const wrapperId = 'deviceOptionsWrapper';
 
-            JitsiMeetJS.mediaDevices.isDeviceListAvailable()
+            $('#deviceSelection').on('click', () =>
-                .then((isDeviceListAvailable) => {
+                APP.store.dispatch(openDeviceSelectionDialog()));
-                    $('#deviceSelection').on('click', () => {
-                        _openDeviceSelectionModal(isDeviceListAvailable);
-                    });
-                });
 
             // Only show the subtitle if this isn't the only setting section.
             if (interfaceConfig.SETTINGS_SECTIONS.length > 1)

react/features/device-selection/actions.js

@@ -0,0 +1,40 @@
+/* globals APP */
+
+import { openDialog } from '../base/dialog';
+import JitsiMeetJS from '../base/lib-jitsi-meet';
+
+import { DeviceSelectionDialog } from './components';
+
+/**
+ * Open DeviceSelectionDialog with a configuration based on the environment's
+ * supported abilities.
+ *
+ * @returns {Function}
+ */
+export function openDeviceSelectionDialog() {
+    return (dispatch, getState) => {
+        JitsiMeetJS.mediaDevices.isDeviceListAvailable()
+            .then(isDeviceListAvailable => {
+                const state = getState();
+                const conference = state['features/base/conference'].conference;
+
+                dispatch(openDialog(DeviceSelectionDialog, {
+                    currentAudioOutputId: APP.settings.getAudioOutputDeviceId(),
+                    currentAudioTrack: conference.getLocalAudioTrack(),
+                    currentVideoTrack: 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')
+                }));
+            });
+    };
+}

react/features/device-selection/index.js

@@ -1 +1,2 @@
+export * from './actions';
 export * from './components';