From a1476c68f1b05676cc339c645e595f0278c88454 Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Thu, 18 May 2017 16:09:22 -0700 Subject: [PATCH] fix(audio-only): remove button from toolbar and set label cursor Audio only mode will be toggleable only from the VideoStatusLabel, so remove AudioOnlyButton from the toolbar and delete the component itself. As a result of the button being removed, a truthy check in VideoStatusLabel was also removed to ensure it will display as it is now the only way to toggle audio only mode. Also set the cursor on VideoStatusLabel to always be default, so it can never show the text cursor. --- css/_videolayout_default.scss | 2 +- interface_config.js | 2 +- .../toolbox/components/AudioOnlyButton.js | 103 ------------------ react/features/toolbox/components/index.js | 1 - .../features/toolbox/defaultToolbarButtons.js | 10 -- .../components/VideoStatusLabel.js | 12 +- 6 files changed, 6 insertions(+), 124 deletions(-) delete mode 100644 react/features/toolbox/components/AudioOnlyButton.js diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 824ca9b96..1d7e429ca 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -496,7 +496,6 @@ } .audio-only-label { - cursor: default; display: flex; height: auto; justify-content: center; @@ -507,6 +506,7 @@ .video-state-indicator { background: $videoStateIndicatorBackground; color: $videoStateIndicatorColor; + cursor: default; font-size: 13px; height: 40px; line-height: 20px; diff --git a/interface_config.js b/interface_config.js index a9d0a1d59..5bd0545f4 100644 --- a/interface_config.js +++ b/interface_config.js @@ -38,7 +38,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars //main toolbar 'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup', //extended toolbar - 'profile', 'contacts', 'chat', 'audioonly', 'recording', 'etherpad', 'sharedvideo', 'sip', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line + 'profile', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'sip', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line /** * Main Toolbar Buttons * All of them should be in TOOLBAR_BUTTONS diff --git a/react/features/toolbox/components/AudioOnlyButton.js b/react/features/toolbox/components/AudioOnlyButton.js deleted file mode 100644 index f61bf8886..000000000 --- a/react/features/toolbox/components/AudioOnlyButton.js +++ /dev/null @@ -1,103 +0,0 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; - -import { toggleAudioOnly } from '../../base/conference'; - -import ToolbarButton from './ToolbarButton'; - -/** - * React {@code Component} for toggling audio only mode. - * - * @extends Component - */ -class AudioOnlyButton extends Component { - /** - * {@code AudioOnlyButton}'s property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not audio only mode is enabled. - */ - _audioOnly: React.PropTypes.bool, - - /** - * Invoked to toggle audio only mode. - */ - dispatch: React.PropTypes.func, - - /** - * From which side the button tooltip should appear. - */ - tooltipPosition: React.PropTypes.string - } - - /** - * Initializes a new {@code AudioOnlyButton} instance. - * - * @param {Object} props - The read-only properties with which the new - * instance is to be initialized. - */ - constructor(props) { - super(props); - - // Bind event handlers so they are only bound once for every instance. - this._onClick = this._onClick.bind(this); - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - const buttonConfiguration = { - buttonName: 'audioonly', - classNames: [ 'button', 'icon-visibility' ], - enabled: true, - id: 'toolbar_button_audioonly', - tooltipKey: 'toolbar.audioonly' - }; - - if (this.props._audioOnly) { - buttonConfiguration.classNames.push('toggled button-active'); - } - - return ( - - ); - } - - /** - * Dispatches an action to toggle audio only mode. - * - * @private - * @returns {void} - */ - _onClick() { - this.props.dispatch(toggleAudioOnly()); - } -} - -/** - * Maps (parts of) the Redux state to the associated {@code AudioOnlyButton}'s - * props. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * _audioOnly: boolean - * }} - */ -function _mapStateToProps(state) { - return { - _audioOnly: state['features/base/conference'].audioOnly - }; -} - -export default connect(_mapStateToProps)(AudioOnlyButton); diff --git a/react/features/toolbox/components/index.js b/react/features/toolbox/components/index.js index aa46c81ec..70fb4807a 100644 --- a/react/features/toolbox/components/index.js +++ b/react/features/toolbox/components/index.js @@ -1,2 +1 @@ -export { default as AudioOnlyButton } from './AudioOnlyButton'; export { default as Toolbox } from './Toolbox'; diff --git a/react/features/toolbox/defaultToolbarButtons.js b/react/features/toolbox/defaultToolbarButtons.js index 9fc2d7cba..b7a6015d6 100644 --- a/react/features/toolbox/defaultToolbarButtons.js +++ b/react/features/toolbox/defaultToolbarButtons.js @@ -6,8 +6,6 @@ import UIEvents from '../../../service/UI/UIEvents'; import { openInviteDialog } from '../invite'; -import { AudioOnlyButton } from './components'; - declare var APP: Object; declare var config: Object; declare var JitsiMeetJS: Object; @@ -44,14 +42,6 @@ function _showSIPNumberInput() { * All toolbar buttons' descriptors. */ export default { - /** - * The descriptor of the audio only toolbar button. Defers actual - * descriptor implementation to the {@code AudioOnlyButton} component. - */ - audioonly: { - component: AudioOnlyButton - }, - /** * The descriptor of the camera toolbar button. */ diff --git a/react/features/video-status-label/components/VideoStatusLabel.js b/react/features/video-status-label/components/VideoStatusLabel.js index 860bd415b..cc4370bce 100644 --- a/react/features/video-status-label/components/VideoStatusLabel.js +++ b/react/features/video-status-label/components/VideoStatusLabel.js @@ -66,14 +66,10 @@ export class VideoStatusLabel extends Component { render() { const { _audioOnly, _conferenceStarted, _largeVideoHD, t } = this.props; - // FIXME These truthy checks should not be necessary. The - // _conferenceStarted check is used to be defensive against toggling - // audio only mode while there is no conference and hides the need for - // error handling around audio only mode toggling. The _largeVideoHD - // check is used to prevent the label from displaying while the video - // resolution status is unknown but ties this component to the - // LargeVideoManager. - if (!_conferenceStarted || _largeVideoHD === undefined) { + // FIXME The _conferenceStarted check is used to be defensive against + // toggling audio only mode while there is no conference and hides the + // need for error handling around audio only mode toggling. + if (!_conferenceStarted) { return null; }