ref(toolbar): remove Video Quality Button
This commit is contained in:
Leonard Kim
Saúl Ibarra Corretgé
parent
60fde5efb8
commit
7d86e3f8e7
|
|
@ -78,7 +78,7 @@ class InfoDialogButton extends Component {
|
|||
};
|
||||
|
||||
/**
|
||||
* Initializes new {@code ToolbarButtonWithDialog} instance.
|
||||
* Initializes new {@code InfoDialogButton} instance.
|
||||
*
|
||||
* @param {Object} props - The read-only properties with which the new
|
||||
* instance is to be initialized.
|
||||
|
|
|
|||
|
|
@ -1,152 +0,0 @@
|
|||
import InlineDialog from '@atlaskit/inline-dialog';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { TOOLTIP_TO_POPUP_POSITION } from '../constants';
|
||||
import ToolbarButton from './ToolbarButton';
|
||||
|
||||
/**
|
||||
* React {@code Component} for displaying a button which will open an inline
|
||||
* dialog.
|
||||
*
|
||||
* @extends Component
|
||||
*/
|
||||
class ToolbarButtonWithDialog extends Component {
|
||||
/**
|
||||
* {@code ToolbarButtonWithDialog}'s property types.
|
||||
*
|
||||
* @static
|
||||
*/
|
||||
static propTypes = {
|
||||
/**
|
||||
* Whether or not the button is visible, based on the visibility of the
|
||||
* toolbar. Used to automatically hide {@code InlineDialog} if not
|
||||
* visible.
|
||||
*/
|
||||
_visible: PropTypes.bool,
|
||||
|
||||
/**
|
||||
* A configuration object to describe how {@code ToolbarButton} should
|
||||
* render.
|
||||
*
|
||||
*/
|
||||
button: PropTypes.object,
|
||||
|
||||
/**
|
||||
* The React Component to show within {@code InlineDialog}.
|
||||
*/
|
||||
content: PropTypes.func,
|
||||
|
||||
/**
|
||||
* From which side tooltips should display. Will be re-used for
|
||||
* displaying the inline dialog for video quality adjustment.
|
||||
*/
|
||||
tooltipPosition: PropTypes.string
|
||||
};
|
||||
|
||||
/**
|
||||
* Initializes new {@code ToolbarButtonWithDialog} instance.
|
||||
*
|
||||
* @param {Object} props - The read-only properties with which the new
|
||||
* instance is to be initialized.
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
/**
|
||||
* Whether or not the inline dialog should be displayed.
|
||||
*/
|
||||
showDialog: false
|
||||
};
|
||||
|
||||
// Bind event handlers so they are only bound once for every instance.
|
||||
this._onDialogClose = this._onDialogClose.bind(this);
|
||||
this._onDialogToggle = this._onDialogToggle.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Automatically close the inline dialog if the button will not be visible.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {void}
|
||||
*/
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps._visible) {
|
||||
this._onDialogClose();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
const { _visible, content, tooltipPosition } = this.props;
|
||||
const buttonConfiguration = {
|
||||
...this.props.button,
|
||||
classNames: [
|
||||
...this.props.button.classNames,
|
||||
this.state.showDialog ? 'toggled button-active' : ''
|
||||
]
|
||||
};
|
||||
|
||||
const Content = content;
|
||||
|
||||
return (
|
||||
<InlineDialog
|
||||
content = { <Content onClose = { this._onDialogClose } /> }
|
||||
isOpen = { _visible && this.state.showDialog }
|
||||
onClose = { this._onDialogClose }
|
||||
position = { TOOLTIP_TO_POPUP_POSITION[tooltipPosition] }>
|
||||
<ToolbarButton
|
||||
button = { buttonConfiguration }
|
||||
onClick = { this._onDialogToggle }
|
||||
tooltipPosition = { tooltipPosition } />
|
||||
</InlineDialog>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides the attached inline dialog.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onDialogClose() {
|
||||
this.setState({ showDialog: false });
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles the display of the dialog.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onDialogToggle() {
|
||||
this.setState({
|
||||
showDialog: !this.state.showDialog
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps (parts of) the Redux state to the associated
|
||||
* {@code ToolbarButtonWithDialog} component's props.
|
||||
*
|
||||
* @param {Object} state - The Redux state.
|
||||
* @private
|
||||
* @returns {{
|
||||
* _visible: boolean
|
||||
* }}
|
||||
*/
|
||||
function _mapStateToProps(state) {
|
||||
return {
|
||||
_visible: state['features/toolbox'].visible
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(_mapStateToProps)(ToolbarButtonWithDialog);
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
export { default as ToolbarButton } from './ToolbarButton';
|
||||
export { default as ToolbarButtonV2 } from './ToolbarButtonV2';
|
||||
export { default as ToolbarButtonWithDialog }
|
||||
from './ToolbarButtonWithDialog';
|
||||
export { default as ToolboxFilmstrip } from './ToolboxFilmstrip';
|
||||
export { default as Toolbox } from './Toolbox';
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { ToolbarButtonWithDialog } from '../../toolbox';
|
||||
|
||||
import VideoQualitySlider from './VideoQualitySlider';
|
||||
|
||||
/**
|
||||
* A configuration object to describe how {@code ToolbarButton} should render
|
||||
* the button.
|
||||
*
|
||||
* @type {object}
|
||||
*/
|
||||
const DEFAULT_BUTTON_CONFIGURATION = {
|
||||
buttonName: 'videoquality',
|
||||
classNames: [ 'button', 'icon-visibility' ],
|
||||
enabled: true,
|
||||
id: 'toolbar_button_videoquality',
|
||||
tooltipKey: 'videoStatus.qualityButtonTip'
|
||||
};
|
||||
|
||||
/**
|
||||
* React {@code Component} for displaying a button which will open an inline
|
||||
* dialog for changing received video quality settings.
|
||||
*
|
||||
* @extends Component
|
||||
*/
|
||||
class VideoQualityButton extends Component {
|
||||
/**
|
||||
* {@code VideoQualityButton}'s property types.
|
||||
*
|
||||
* @static
|
||||
*/
|
||||
static propTypes = {
|
||||
/**
|
||||
* From which side tooltips should display. Will be re-used for
|
||||
* displaying the inline dialog for video quality adjustment.
|
||||
*/
|
||||
tooltipPosition: PropTypes.string
|
||||
};
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
return (
|
||||
<ToolbarButtonWithDialog
|
||||
button = { DEFAULT_BUTTON_CONFIGURATION }
|
||||
content = { VideoQualitySlider }
|
||||
tooltipPosition = { this.props.tooltipPosition } />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default VideoQualityButton;
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
export { default as VideoQualityButton } from './VideoQualityButton';
|
||||
export { default as VideoQualityDialog } from './VideoQualityDialog';
|
||||
export { default as VideoQualityLabel } from './VideoQualityLabel';
|
||||
|
|
|
|||
Loading…
Reference in New Issue