feat(overflow): Add responsive drawer at small screen width.

* Implement opening toolbar and participant overflows as drawers when below certain width.
* Fix dial-in copy button displaying incorrectly.
This commit is contained in:
Mihai-Andrei Uscat
2021-01-04 15:30:23 +02:00
committed by Saúl Ibarra Corretgé
parent 5ef60c3a7d
commit c752ea13f1
18 changed files with 523 additions and 48 deletions

View File

@@ -60,6 +60,11 @@ type Props = {
*/
_menuPosition: string,
/**
* Whether to display the Popover as a drawer.
*/
_overflowDrawer: boolean,
/**
* The current state of the participant's remote control session.
*/
@@ -122,6 +127,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
return (
<Popover
content = { content }
overflowDrawer = { this.props._overflowDrawer }
position = { this.props._menuPosition }>
<span
className = 'popover-trigger remote-video-menu-trigger'>
@@ -237,14 +243,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
* @param {Object} state - The Redux state.
* @param {Object} ownProps - The own props of the component.
* @private
* @returns {{
* _isAudioMuted: boolean,
* _isModerator: boolean,
* _disableKick: boolean,
* _disableRemoteMute: boolean,
* _menuPosition: string,
* _remoteControlState: number
* }}
* @returns {Props}
*/
function _mapStateToProps(state, ownProps) {
const { participantID } = ownProps;
@@ -259,6 +258,7 @@ function _mapStateToProps(state, ownProps) {
const { active, controller } = state['features/remote-control'];
const { requestedParticipant, controlled } = controller;
const activeParticipant = requestedParticipant || controlled;
const { overflowDrawer } = state['features/toolbox'];
if (_supportsRemoteControl
&& ((!active && !_isRemoteControlSessionActive) || activeParticipant === participantID)) {
@@ -291,7 +291,8 @@ function _mapStateToProps(state, ownProps) {
_disableKick: Boolean(disableKick),
_disableRemoteMute: Boolean(disableRemoteMute),
_remoteControlState,
_menuPosition
_menuPosition,
_overflowDrawer: overflowDrawer
};
}