diff --git a/conference.js b/conference.js index b810f464e..5e5507db9 100644 --- a/conference.js +++ b/conference.js @@ -29,8 +29,7 @@ import { EMAIL_COMMAND, lockStateChanged, p2pStatusChanged, - sendLocalParticipant, - toggleAudioOnly + sendLocalParticipant } from './react/features/base/conference'; import { updateDeviceList } from './react/features/base/devices'; import { @@ -554,11 +553,6 @@ export default { let tryCreateLocalTracks; - // Enable audio only mode - if (config.startAudioOnly) { - APP.store.dispatch(toggleAudioOnly()); - } - // FIXME is there any simpler way to rewrite this spaghetti below ? if (options.startScreenSharing) { tryCreateLocalTracks = this._createDesktopTrack() diff --git a/css/modals/video-quality/_video-quality.scss b/css/modals/video-quality/_video-quality.scss index 736f40648..f7e3c3a0e 100644 --- a/css/modals/video-quality/_video-quality.scss +++ b/css/modals/video-quality/_video-quality.scss @@ -1,5 +1,4 @@ .video-quality-dialog { - .hide-warning { height: 0; visibility: hidden; @@ -27,7 +26,7 @@ @mixin sliderTrackStyles() { height: 15px; border-radius: 10px; - background: #0E1624; + background: rgb(14, 22, 36); } &::-ms-track { @@ -110,6 +109,30 @@ word-spacing: unset; } } + + &.video-not-supported { + .video-quality-dialog-labels { + color: gray; + } + + .video-quality-dialog-slider { + @mixin sliderTrackDisabledStyles() { + background: rgba(14, 22, 36, 0.1); + } + + &::-ms-track { + @include sliderTrackDisabledStyles(); + } + + &::-moz-range-track { + @include sliderTrackDisabledStyles(); + } + + &::-webkit-slider-runnable-track { + @include sliderTrackDisabledStyles(); + } + } + } } .video-state-indicator { diff --git a/lang/main.json b/lang/main.json index 1b03a106b..a649df3c4 100644 --- a/lang/main.json +++ b/lang/main.json @@ -470,6 +470,8 @@ "labelTooltipAudioOnly": "Audio-only mode enabled", "ld": "LD", "lowDefinition": "Low definition", + "onlyAudioAvailable": "Only audio is available", + "onlyAudioSupported": "We only support audio in this browser.", "p2pEnabled": "Peer to Peer Enabled", "p2pVideoQualityDescription": "In peer to peer mode, received call quality can only be toggled between high and audio only. Other settings will not be honored until peer to peer is exited.", "recHighDefinitionOnly": "Will prefer high definition.", diff --git a/react/features/base/media/middleware.js b/react/features/base/media/middleware.js index 12fde3019..a77e3685c 100644 --- a/react/features/base/media/middleware.js +++ b/react/features/base/media/middleware.js @@ -3,6 +3,7 @@ import { sendAnalyticsEvent } from '../../analytics'; import { SET_ROOM, setAudioOnly } from '../conference'; import { parseURLParams } from '../config'; +import JitsiMeetJS from '../lib-jitsi-meet'; import { MiddlewareRegistry } from '../redux'; import { setTrackMuted, TRACK_ADDED } from '../tracks'; @@ -108,10 +109,19 @@ function _setRoom({ dispatch, getState }, next, action) { // because it looks like config.startWithAudioMuted and // config.startWithVideoMuted. if (room) { - let audioOnly = urlParams && urlParams['config.startAudioOnly']; + let audioOnly; + + if (JitsiMeetJS.mediaDevices.supportsVideo()) { + audioOnly = urlParams && urlParams['config.startAudioOnly']; + typeof audioOnly === 'undefined' + && (audioOnly = config.startAudioOnly); + audioOnly = Boolean(audioOnly); + } else { + // Always default to being audio only if the current environment + // does not support sending or receiving video. + audioOnly = true; + } - typeof audioOnly === 'undefined' && (audioOnly = config.startAudioOnly); - audioOnly = Boolean(audioOnly); sendAnalyticsEvent( `startaudioonly.${audioOnly ? 'enabled' : 'disabled'}`); logger.log(`Start audio only set to ${audioOnly.toString()}`); diff --git a/react/features/device-selection/components/DeviceSelectionDialogBase.js b/react/features/device-selection/components/DeviceSelectionDialogBase.js index 51a5fcc1b..f2d199b4c 100644 --- a/react/features/device-selection/components/DeviceSelectionDialogBase.js +++ b/react/features/device-selection/components/DeviceSelectionDialogBase.js @@ -513,6 +513,10 @@ class DeviceSelectionDialogBase extends Component { this._disposeVideoPreview() .then(() => createLocalTrack('video', deviceId)) .then(jitsiLocalTrack => { + if (!jitsiLocalTrack) { + return Promise.reject(); + } + this.setState({ previewVideoTrack: jitsiLocalTrack, previewVideoTrackError: null diff --git a/react/features/video-quality/components/VideoQualityDialog.web.js b/react/features/video-quality/components/VideoQualityDialog.web.js index 97cc19f11..91cd12a65 100644 --- a/react/features/video-quality/components/VideoQualityDialog.web.js +++ b/react/features/video-quality/components/VideoQualityDialog.web.js @@ -10,6 +10,7 @@ import { VIDEO_QUALITY_LEVELS } from '../../base/conference'; import { translate } from '../../base/i18n'; +import JitsiMeetJS from '../../base/lib-jitsi-meet'; const logger = require('jitsi-meet-logger').getLogger(__filename); @@ -48,6 +49,12 @@ class VideoQualityDialog extends Component { */ _receiveVideoQuality: PropTypes.number, + /** + * Whether or not displaying video is supported in the current + * environment. If false, the slider will be disabled. + */ + _videoSupported: PropTypes.bool, + /** * Invoked to request toggling of audio only mode. */ @@ -116,17 +123,26 @@ class VideoQualityDialog extends Component { * @returns {ReactElement} */ render() { - const { _audioOnly, _p2p, t } = this.props; + const { _audioOnly, _p2p, _videoSupported, t } = this.props; const activeSliderOption = this._mapCurrentQualityToSliderValue(); - const showP2PWarning = _p2p && !_audioOnly; + + let classNames = 'video-quality-dialog'; + let warning = null; + + if (!_videoSupported) { + classNames += ' video-not-supported'; + warning = this._renderAudioOnlyLockedMessage(); + } else if (_p2p && !_audioOnly) { + warning = this._renderP2PMessage(); + } return ( -
+

{ t('videoStatus.callQuality') }

-
- { this._renderP2PMessage() } +
+ { warning }
@@ -136,6 +152,7 @@ class VideoQualityDialog extends Component { */ } + { t('videoStatus.onlyAudioSupported') } + + ); + } + /** * Creates React Elements for notifying that peer to peer is enabled. * @@ -330,7 +365,8 @@ function _mapStateToProps(state) { return { _audioOnly: audioOnly, _p2p: p2p, - _receiveVideoQuality: receiveVideoQuality + _receiveVideoQuality: receiveVideoQuality, + _videoSupported: JitsiMeetJS.mediaDevices.supportsVideo() }; }