mirror of https://github.com/jitsi/jitsi-meet
robertpin
3 years ago
committed by
GitHub
parent
2209394d09
commit
2d04f3852c
@ -0,0 +1,105 @@ |
||||
// @flow
|
||||
|
||||
import { type Dispatch } from 'redux'; |
||||
|
||||
import { |
||||
createToolbarEvent, |
||||
sendAnalytics |
||||
} from '../../../analytics'; |
||||
import { RAISE_HAND_ENABLED, getFeatureFlag } from '../../../base/flags'; |
||||
import { translate } from '../../../base/i18n'; |
||||
import { IconRaisedHand } from '../../../base/icons'; |
||||
import { |
||||
getLocalParticipant, |
||||
raiseHand |
||||
} from '../../../base/participants'; |
||||
import { connect } from '../../../base/redux'; |
||||
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components'; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} props of {@link RaiseHandButton}. |
||||
*/ |
||||
type Props = AbstractButtonProps & { |
||||
|
||||
/** |
||||
* The local participant. |
||||
*/ |
||||
_localParticipant: Object, |
||||
|
||||
/** |
||||
* Whether the participant raused their hand or not. |
||||
*/ |
||||
_raisedHand: boolean, |
||||
|
||||
/** |
||||
* The redux {@code dispatch} function. |
||||
*/ |
||||
dispatch: Dispatch<any> |
||||
}; |
||||
|
||||
/** |
||||
* An implementation of a button to raise or lower hand. |
||||
*/ |
||||
class RaiseHandButton extends AbstractButton<Props, *> { |
||||
accessibilityLabel = 'toolbar.accessibilityLabel.raiseHand'; |
||||
icon = IconRaisedHand; |
||||
label = 'toolbar.raiseYourHand'; |
||||
toggledLabel = 'toolbar.lowerYourHand'; |
||||
|
||||
/** |
||||
* Handles clicking / pressing the button. |
||||
* |
||||
* @override |
||||
* @protected |
||||
* @returns {void} |
||||
*/ |
||||
_handleClick() { |
||||
this._toggleRaisedHand(); |
||||
} |
||||
|
||||
/** |
||||
* Indicates whether this button is in toggled state or not. |
||||
* |
||||
* @override |
||||
* @protected |
||||
* @returns {boolean} |
||||
*/ |
||||
_isToggled() { |
||||
return this.props._raisedHand; |
||||
} |
||||
|
||||
/** |
||||
* Toggles the rased hand status of the local participant. |
||||
* |
||||
* @returns {void} |
||||
*/ |
||||
_toggleRaisedHand() { |
||||
const enable = !this.props._raisedHand; |
||||
|
||||
sendAnalytics(createToolbarEvent('raise.hand', { enable })); |
||||
|
||||
this.props.dispatch(raiseHand(enable)); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Maps part of the Redux state to the props of this component. |
||||
* |
||||
* @param {Object} state - The Redux state. |
||||
* @param {Object} ownProps - The properties explicitly passed to the component instance. |
||||
* @private |
||||
* @returns {Props} |
||||
*/ |
||||
function _mapStateToProps(state, ownProps): Object { |
||||
const _localParticipant = getLocalParticipant(state); |
||||
const enabled = getFeatureFlag(state, RAISE_HAND_ENABLED, true); |
||||
const { visible = enabled } = ownProps; |
||||
|
||||
return { |
||||
_localParticipant, |
||||
_raisedHand: _localParticipant.raisedHand, |
||||
visible |
||||
}; |
||||
} |
||||
|
||||
export default translate(connect(_mapStateToProps)(RaiseHandButton)); |
||||
@ -0,0 +1,83 @@ |
||||
// @flow
|
||||
|
||||
import { translate } from '../../../base/i18n'; |
||||
import { IconRaisedHand } from '../../../base/icons'; |
||||
import { getLocalParticipant } from '../../../base/participants'; |
||||
import { connect } from '../../../base/redux'; |
||||
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components'; |
||||
|
||||
type Props = AbstractButtonProps & { |
||||
|
||||
/** |
||||
* Whether or not the local participant's hand is raised. |
||||
*/ |
||||
_raisedHand: boolean, |
||||
|
||||
/** |
||||
* External handler for click action. |
||||
*/ |
||||
handleClick: Function |
||||
}; |
||||
|
||||
/** |
||||
* Implementation of a button for toggling raise hand functionality. |
||||
*/ |
||||
class RaiseHandButton extends AbstractButton<Props, *> { |
||||
accessibilityLabel = 'toolbar.accessibilityLabel.raiseHand'; |
||||
icon = IconRaisedHand |
||||
label = 'toolbar.raiseYourHand'; |
||||
toggledLabel = 'toolbar.lowerYourHand' |
||||
|
||||
/** |
||||
* Retrieves tooltip dynamically. |
||||
*/ |
||||
get tooltip() { |
||||
return this.props._raisedHand ? 'toolbar.lowerYourHand' : 'toolbar.raiseYourHand'; |
||||
} |
||||
|
||||
/** |
||||
* Required by linter due to AbstractButton overwritten prop being writable. |
||||
* |
||||
* @param {string} value - The value. |
||||
*/ |
||||
set tooltip(value) { |
||||
return value; |
||||
} |
||||
|
||||
/** |
||||
* Handles clicking / pressing the button, and opens the appropriate dialog. |
||||
* |
||||
* @protected |
||||
* @returns {void} |
||||
*/ |
||||
_handleClick() { |
||||
this.props.handleClick(); |
||||
} |
||||
|
||||
/** |
||||
* Indicates whether this button is in toggled state or not. |
||||
* |
||||
* @override |
||||
* @protected |
||||
* @returns {boolean} |
||||
*/ |
||||
_isToggled() { |
||||
return this.props._raisedHand; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Function that maps parts of Redux state tree into component props. |
||||
* |
||||
* @param {Object} state - Redux state. |
||||
* @returns {Object} |
||||
*/ |
||||
const mapStateToProps = state => { |
||||
const localParticipant = getLocalParticipant(state); |
||||
|
||||
return { |
||||
_raisedHand: localParticipant.raisedHand |
||||
}; |
||||
}; |
||||
|
||||
export default translate(connect(mapStateToProps)(RaiseHandButton)); |
||||
Loading…
Reference in new issue