feat: add ability to toggle toolbox from tile view
This commit is contained in:
parent
a91b49c2c1
commit
4c3ed190f3
|
@ -111,13 +111,6 @@ type Props = AbstractProps & {
|
|||
*/
|
||||
_toolboxVisible: boolean,
|
||||
|
||||
/**
|
||||
* The indicator which determines whether the Toolbox is always visible.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_toolboxAlwaysVisible: boolean,
|
||||
|
||||
/**
|
||||
* The redux {@code dispatch} function.
|
||||
*/
|
||||
|
@ -298,10 +291,6 @@ class Conference extends AbstractConference<Props, *> {
|
|||
* @returns {void}
|
||||
*/
|
||||
_onClick() {
|
||||
if (this.props._toolboxAlwaysVisible) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._setToolboxVisible(!this.props._toolboxVisible);
|
||||
}
|
||||
|
||||
|
@ -407,7 +396,7 @@ function _mapStateToProps(state) {
|
|||
leaving
|
||||
} = state['features/base/conference'];
|
||||
const { reducedUI } = state['features/base/responsive-ui'];
|
||||
const { alwaysVisible, visible } = state['features/toolbox'];
|
||||
const { visible } = state['features/toolbox'];
|
||||
|
||||
// XXX There is a window of time between the successful establishment of the
|
||||
// XMPP connection and the subsequent commencement of joining the MUC during
|
||||
|
@ -484,15 +473,7 @@ function _mapStateToProps(state) {
|
|||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
_toolboxVisible: visible,
|
||||
|
||||
/**
|
||||
* The indicator which determines whether the Toolbox is always visible.
|
||||
*
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
_toolboxAlwaysVisible: alwaysVisible
|
||||
_toolboxVisible: visible
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -21,6 +21,7 @@ import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
|
|||
import { ConnectionIndicator } from '../../../connection-indicator';
|
||||
import { DisplayNameLabel } from '../../../display-name';
|
||||
import { RemoteVideoMenu } from '../../../remote-video-menu';
|
||||
import { toggleToolboxVisible } from '../../../toolbox';
|
||||
|
||||
import AudioMutedIndicator from './AudioMutedIndicator';
|
||||
import DominantSpeakerIndicator from './DominantSpeakerIndicator';
|
||||
|
@ -74,12 +75,6 @@ type Props = {
|
|||
*/
|
||||
_videoTrack: Object,
|
||||
|
||||
/**
|
||||
* If true, tapping on the thumbnail will not pin the participant to large
|
||||
* video. By default tapping does pin the participant.
|
||||
*/
|
||||
disablePin?: boolean,
|
||||
|
||||
/**
|
||||
* If true, there will be no color overlay (tint) on the thumbnail
|
||||
* indicating the participant associated with the thumbnail is displayed on
|
||||
|
@ -105,7 +100,12 @@ type Props = {
|
|||
/**
|
||||
* Optional styling to add or override on the Thumbnail component root.
|
||||
*/
|
||||
styleOverrides?: Object
|
||||
styleOverrides?: Object,
|
||||
|
||||
/**
|
||||
* If true, it tells the thumbnail that it needs to behave differently. E.g. react differently to a single tap.
|
||||
*/
|
||||
tileView?: boolean
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -130,10 +130,10 @@ class Thumbnail extends Component<Props> {
|
|||
_onShowRemoteVideoMenu,
|
||||
_styles,
|
||||
_videoTrack: videoTrack,
|
||||
disablePin,
|
||||
disableTint,
|
||||
participant,
|
||||
renderDisplayName
|
||||
renderDisplayName,
|
||||
tileView
|
||||
} = this.props;
|
||||
|
||||
// We don't render audio in any of the following:
|
||||
|
@ -152,13 +152,13 @@ class Thumbnail extends Component<Props> {
|
|||
|
||||
return (
|
||||
<Container
|
||||
onClick = { disablePin ? undefined : _onClick }
|
||||
onClick = { _onClick }
|
||||
onLongPress = {
|
||||
showRemoteVideoMenu
|
||||
? _onShowRemoteVideoMenu : undefined }
|
||||
style = { [
|
||||
styles.thumbnail,
|
||||
participant.pinned && !disablePin
|
||||
participant.pinned && !tileView
|
||||
? _styles.thumbnailPinned : null,
|
||||
this.props.styleOverrides || null
|
||||
] }
|
||||
|
@ -234,10 +234,13 @@ function _mapDispatchToProps(dispatch: Function, ownProps): Object {
|
|||
* @returns {void}
|
||||
*/
|
||||
_onClick() {
|
||||
const { participant } = ownProps;
|
||||
const { participant, tileView } = ownProps;
|
||||
|
||||
dispatch(
|
||||
pinParticipant(participant.pinned ? null : participant.id));
|
||||
if (tileView) {
|
||||
dispatch(toggleToolboxVisible());
|
||||
} else {
|
||||
dispatch(pinParticipant(participant.pinned ? null : participant.id));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
@ -298,12 +298,12 @@ class TileView extends Component<Props, State> {
|
|||
return this._getSortedParticipants()
|
||||
.map(participant => (
|
||||
<Thumbnail
|
||||
disablePin = { true }
|
||||
disableTint = { true }
|
||||
key = { participant.id }
|
||||
participant = { participant }
|
||||
renderDisplayName = { true }
|
||||
styleOverrides = { styleOverrides } />));
|
||||
styleOverrides = { styleOverrides }
|
||||
tileView = { true } />));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -102,3 +102,12 @@ export const SET_TOOLBOX_TIMEOUT_MS = 'SET_TOOLBOX_TIMEOUT_MS';
|
|||
* }
|
||||
*/
|
||||
export const SET_TOOLBOX_VISIBLE = 'SET_TOOLBOX_VISIBLE';
|
||||
|
||||
/**
|
||||
* The type of the redux action which toggles the toolbox visibility regardless of it's current state.
|
||||
*
|
||||
* {
|
||||
* type: TOGGLE_TOOLBOX_VISIBLE
|
||||
* }
|
||||
*/
|
||||
export const TOGGLE_TOOLBOX_VISIBLE = 'TOGGLE_TOOLBOX_VISIBLE';
|
||||
|
|
|
@ -8,7 +8,8 @@ import {
|
|||
SET_TOOLBOX_ENABLED,
|
||||
SET_TOOLBOX_TIMEOUT,
|
||||
SET_TOOLBOX_TIMEOUT_MS,
|
||||
SET_TOOLBOX_VISIBLE
|
||||
SET_TOOLBOX_VISIBLE,
|
||||
TOGGLE_TOOLBOX_VISIBLE
|
||||
} from './actionTypes';
|
||||
|
||||
|
||||
|
@ -144,3 +145,16 @@ export function setToolboxVisible(visible: boolean): Object {
|
|||
visible
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Action to toggle the toolbox visibility.
|
||||
*
|
||||
* @returns {{
|
||||
* type: TOGGLE_TOOLBOX_VISIBLE
|
||||
* }}
|
||||
*/
|
||||
export function toggleToolboxVisible() {
|
||||
return {
|
||||
type: TOGGLE_TOOLBOX_VISIBLE
|
||||
};
|
||||
}
|
||||
|
|
|
@ -11,7 +11,8 @@ import {
|
|||
SET_TOOLBOX_ENABLED,
|
||||
SET_TOOLBOX_TIMEOUT,
|
||||
SET_TOOLBOX_TIMEOUT_MS,
|
||||
SET_TOOLBOX_VISIBLE
|
||||
SET_TOOLBOX_VISIBLE,
|
||||
TOGGLE_TOOLBOX_VISIBLE
|
||||
} from './actionTypes';
|
||||
|
||||
declare var interfaceConfig: Object;
|
||||
|
@ -165,7 +166,10 @@ ReducerRegistry.register(
|
|||
};
|
||||
|
||||
case SET_TOOLBOX_VISIBLE:
|
||||
return set(state, 'visible', action.visible);
|
||||
return set(state, 'visible', state.alwaysVisible || action.visible);
|
||||
|
||||
case TOGGLE_TOOLBOX_VISIBLE:
|
||||
return set(state, 'visible', state.alwaysVisible || !state.visible);
|
||||
}
|
||||
|
||||
return state;
|
||||
|
|
Loading…
Reference in New Issue