mirror of https://github.com/jitsi/jitsi-meet
parent
60fde5efb8
commit
7d86e3f8e7
@ -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