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

Move logic to open device selection outside of SettingsMenu so
it can be called independently by either SettingsMenu or by
the settings button itself if no other settings but devices will
be displayed.

conference.js

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

modules/UI/UI.js

     setAudioMuted,
     setVideoMuted
 } from '../../react/features/base/media';
+import {
+    openDeviceSelectionDialog
+} from '../../react/features/device-selection';
 import {
     checkAutoEnableDesktopSharing,
     dockToolbox,
         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

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

react/features/device-selection/actions.js

+/* 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

+export * from './actions';
 export * from './components';