diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index c5b8e5f93..0611df3d0 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -163,6 +163,8 @@ RemoteVideo.prototype._generatePopupContent = function() { const onVolumeChange = this._setAudioVolume; const { isModerator } = APP.conference; const participantID = this.id; + const menuPosition = interfaceConfig.VERTICAL_FILMSTRIP + ? 'left bottom' : 'top center'; ReactDOM.render( @@ -172,6 +174,7 @@ RemoteVideo.prototype._generatePopupContent = function() { initialVolumeValue = { initialVolumeValue } isAudioMuted = { this.isAudioMuted } isModerator = { isModerator } + menuPosition = { menuPosition } onMenuDisplay = {this._onRemoteVideoMenuDisplay.bind(this)} onRemoteControlToggle = { onRemoteControlToggle } diff --git a/react/features/remote-video-menu/components/RemoteVideoMenuTriggerButton.js b/react/features/remote-video-menu/components/RemoteVideoMenuTriggerButton.js index f66309ecc..a0366f17d 100644 --- a/react/features/remote-video-menu/components/RemoteVideoMenuTriggerButton.js +++ b/react/features/remote-video-menu/components/RemoteVideoMenuTriggerButton.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { Popover } from '../../base/popover'; @@ -16,58 +15,70 @@ import { declare var $: Object; declare var interfaceConfig: Object; +/** + * The type of the React {@code Component} props of + * {@link RemoteVideoMenuTriggerButton}. + */ +type Props = { + + /** + * A value between 0 and 1 indicating the volume of the participant's + * audio element. + */ + initialVolumeValue: number, + + /** + * Whether or not the participant is currently muted. + */ + isAudioMuted: boolean, + + /** + * Whether or not the participant is a conference moderator. + */ + isModerator: boolean, + + /** + * Callback to invoke when the popover has been displayed. + */ + onMenuDisplay: Function, + + /** + * Callback to invoke choosing to start a remote control session with + * the participant. + */ + onRemoteControlToggle: Function, + + /** + * Callback to invoke when changing the level of the participant's + * audio element. + */ + onVolumeChange: Function, + + /** + * The position relative to the trigger the remote menu should display + * from. Valid values are those supported by AtlasKit + * {@code InlineDialog}. + */ + menuPosition: string, + + /** + * The ID for the participant on which the remote video menu will act. + */ + participantID: string, + + /** + * The current state of the participant's remote control session. + */ + remoteControlState: number +}; + /** * React {@code Component} for displaying an icon associated with opening the * the {@code RemoteVideoMenu}. * * @extends {Component} */ -class RemoteVideoMenuTriggerButton extends Component<*> { - static propTypes = { - /** - * A value between 0 and 1 indicating the volume of the participant's - * audio element. - */ - initialVolumeValue: PropTypes.number, - - /** - * Whether or not the participant is currently muted. - */ - isAudioMuted: PropTypes.bool, - - /** - * Whether or not the participant is a conference moderator. - */ - isModerator: PropTypes.bool, - - /** - * Callback to invoke when the popover has been displayed. - */ - onMenuDisplay: PropTypes.func, - - /** - * Callback to invoke choosing to start a remote control session with - * the participant. - */ - onRemoteControlToggle: PropTypes.func, - - /** - * Callback to invoke when changing the level of the participant's - * audio element. - */ - onVolumeChange: PropTypes.func, - - /** - * The ID for the participant on which the remote video menu will act. - */ - participantID: PropTypes.string, - - /** - * The current state of the participant's remote control session. - */ - remoteControlState: PropTypes.number - }; - +class RemoteVideoMenuTriggerButton extends Component { /** * The internal reference to topmost DOM/HTML element backing the React * {@code Component}. Accessed directly for associating an element as @@ -108,8 +119,7 @@ class RemoteVideoMenuTriggerButton extends Component<*> { + position = { this.props.menuPosition }>