diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/input-stream-live-selector/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/input-stream-live-selector/component.jsx index 39bbff8ebd..e49d396b88 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/input-stream-live-selector/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/input-stream-live-selector/component.jsx @@ -14,6 +14,7 @@ const AUDIO_INPUT = 'audioinput'; const AUDIO_OUTPUT = 'audiooutput'; const DEFAULT_DEVICE = 'default'; const DEVICE_LABEL_MAX_LENGTH = 40; +const SET_SINK_ID_SUPPORTED = 'setSinkId' in HTMLMediaElement.prototype; const intlMessages = defineMessages({ changeAudioDevice: { @@ -52,6 +53,10 @@ const intlMessages = defineMessages({ id: 'app.audioNotification.deviceChangeFailed', description: 'Device change failed', }, + defaultOutputDeviceLabel: { + id: 'app.audio.audioSettings.defaultOutputDeviceLabel', + description: 'Default output device label', + }, }); const propTypes = { @@ -263,8 +268,10 @@ class InputStreamLiveSelector extends Component { }, ]; - const deviceList = (listLength > 0) - ? list.map((device, index) => ( + let deviceList = []; + + if (listLength > 0) { + deviceList = list.map((device, index) => ( { key: `${device.deviceId}-${deviceKind}`, dataTest: `${deviceKind}-${index + 1}`, @@ -273,8 +280,21 @@ class InputStreamLiveSelector extends Component { iconRight: (device.deviceId === currentDeviceId) ? 'check' : null, onClick: () => this.onDeviceListClick(device.deviceId, deviceKind, callback), } - )) - : [ + )); + } else if (deviceKind === AUDIO_OUTPUT && !SET_SINK_ID_SUPPORTED && listLength === 0) { + // If the browser doesn't support setSinkId, show the chosen output device + // as a placeholder Default - like it's done in audio/device-selector + deviceList = [ + { + key: `defaultDeviceKey-${deviceKind}`, + label: intl.formatMessage(intlMessages.defaultOutputDeviceLabel), + customStyles: Styled.SelectedLabel, + iconRight: 'check', + disabled: true, + }, + ]; + } else { + deviceList = [ { key: `noDeviceFoundKey-${deviceKind}-`, label: listLength < 0 @@ -282,6 +302,8 @@ class InputStreamLiveSelector extends Component { : intl.formatMessage(intlMessages.noDeviceFound), }, ]; + } + return listTitle.concat(deviceList); }