-
- { this._renderIcon() }
-
+
+
+
+
+
+ { this._renderIcon() }
+
+
+
);
}
+ /**
+ * Sets the state not to show the Statistics Table popover.
+ *
+ * @private
+ * @returns {void}
+ */
+ _onStatsClose() {
+ this.setState({ showStats: false });
+ }
+
+ /**
+ * Sets the state to show or hide the Statistics Table popover.
+ *
+ * @private
+ * @returns {void}
+ */
+ _onStatsToggle() {
+ if (this.props.enableStatsDisplay) {
+ this.setState({ showStats: !this.state.showStats });
+ }
+ }
+
/**
* Callback invoked when new connection stats associated with the passed in
* user ID are available. Will update the component's display of current
@@ -314,17 +323,6 @@ class ConnectionIndicator extends Component {
transport = { transport } />
);
}
-
- /**
- * Sets an internal reference to the component's root element.
- *
- * @param {Object} element - The highest DOM element in the component.
- * @private
- * @returns {void}
- */
- _setRootElement(element) {
- this._rootElement = element;
- }
}
export default ConnectionIndicator;
diff --git a/react/features/connection-stats/components/ConnectionStatsTable.js b/react/features/connection-stats/components/ConnectionStatsTable.js
index ccc1c842d..2de2ed66f 100644
--- a/react/features/connection-stats/components/ConnectionStatsTable.js
+++ b/react/features/connection-stats/components/ConnectionStatsTable.js
@@ -292,7 +292,7 @@ class ConnectionStatsTable extends Component {
return (
{ this.props.t(translationKey) }
diff --git a/react/features/filmstrip/components/web/BaseIndicator.js b/react/features/filmstrip/components/web/BaseIndicator.js
index 56e7392a7..c61610320 100644
--- a/react/features/filmstrip/components/web/BaseIndicator.js
+++ b/react/features/filmstrip/components/web/BaseIndicator.js
@@ -27,7 +27,7 @@ class BaseIndicator extends Component {
iconClassName: React.PropTypes.string,
/**
- * The front size for the icon.
+ * The font size for the icon.
*/
iconSize: React.PropTypes.string,
diff --git a/react/features/remote-video-menu/components/KickButton.js b/react/features/remote-video-menu/components/KickButton.js
index 7504c6a56..64e04642b 100644
--- a/react/features/remote-video-menu/components/KickButton.js
+++ b/react/features/remote-video-menu/components/KickButton.js
@@ -1,6 +1,8 @@
import React, { Component } from 'react';
+import { connect } from 'react-redux';
import { translate } from '../../base/i18n';
+import { kickParticipant } from '../../base/participants';
import RemoteVideoMenuButton from './RemoteVideoMenuButton';
@@ -18,7 +20,13 @@ class KickButton extends Component {
*/
static propTypes = {
/**
- * The callback to invoke when the component is clicked.
+ * Invoked to signal the participant with the passed in participantID
+ * should be removed from the conference.
+ */
+ dispatch: React.PropTypes.func,
+
+ /**
+ * Callback to invoke when {@code KickButton} is clicked.
*/
onClick: React.PropTypes.func,
@@ -33,6 +41,19 @@ class KickButton extends Component {
t: React.PropTypes.func
};
+ /**
+ * Initializes a new {@code KickButton} instance.
+ *
+ * @param {Object} props - The read-only React Component props with which
+ * the new instance is to be initialized.
+ */
+ constructor(props) {
+ super(props);
+
+ // Bind event handlers so they are only bound once for every instance.
+ this._onClick = this._onClick.bind(this);
+ }
+
/**
* Implements React's {@link Component#render()}.
*
@@ -40,16 +61,32 @@ class KickButton extends Component {
* @returns {ReactElement}
*/
render() {
- const { onClick, participantID, t } = this.props;
+ const { participantID, t } = this.props;
return (
+ onClick = { this._onClick } />
);
}
+
+ /**
+ * Remove the participant with associated participantID from the conference.
+ *
+ * @private
+ * @returns {void}
+ */
+ _onClick() {
+ const { dispatch, onClick, participantID } = this.props;
+
+ dispatch(kickParticipant(participantID));
+
+ if (onClick) {
+ onClick();
+ }
+ }
}
-export default translate(KickButton);
+export default translate(connect()(KickButton));
diff --git a/react/features/remote-video-menu/components/MuteButton.js b/react/features/remote-video-menu/components/MuteButton.js
index 2f59e3040..fbc340aac 100644
--- a/react/features/remote-video-menu/components/MuteButton.js
+++ b/react/features/remote-video-menu/components/MuteButton.js
@@ -1,6 +1,8 @@
import React, { Component } from 'react';
+import { connect } from 'react-redux';
import { translate } from '../../base/i18n';
+import { muteRemoteParticipant } from '../../base/participants';
import RemoteVideoMenuButton from './RemoteVideoMenuButton';
@@ -17,13 +19,19 @@ class MuteButton extends Component {
* @static
*/
static propTypes = {
+ /**
+ * Invoked to send a request for muting the participant with the passed
+ * in participantID.
+ */
+ dispatch: React.PropTypes.func,
+
/**
* Whether or not the participant is currently audio muted.
*/
isAudioMuted: React.PropTypes.bool,
/**
- * The callback to invoke when the component is clicked.
+ * Callback to invoke when {@code MuteButton} is clicked.
*/
onClick: React.PropTypes.func,
@@ -38,6 +46,19 @@ class MuteButton extends Component {
t: React.PropTypes.func
};
+ /**
+ * Initializes a new {@code MuteButton} instance.
+ *
+ * @param {Object} props - The read-only React Component props with which
+ * the new instance is to be initialized.
+ */
+ constructor(props) {
+ super(props);
+
+ // Bind event handlers so they are only bound once for every instance.
+ this._onClick = this._onClick.bind(this);
+ }
+
/**
* Implements React's {@link Component#render()}.
*
@@ -45,7 +66,7 @@ class MuteButton extends Component {
* @returns {ReactElement}
*/
render() {
- const { isAudioMuted, onClick, participantID, t } = this.props;
+ const { isAudioMuted, participantID, t } = this.props;
const muteConfig = isAudioMuted ? {
translationKey: 'videothumbnail.muted',
muteClassName: 'mutelink disabled'
@@ -60,9 +81,26 @@ class MuteButton extends Component {
displayClass = { muteConfig.muteClassName }
iconClass = 'icon-mic-disabled'
id = { `mutelink_${participantID}` }
- onClick = { onClick } />
+ onClick = { this._onClick } />
);
}
+
+ /**
+ * Dispatches a request to mute the participant with the passed in
+ * participantID.
+ *
+ * @private
+ * @returns {void}
+ */
+ _onClick() {
+ const { dispatch, onClick, participantID } = this.props;
+
+ dispatch(muteRemoteParticipant(participantID));
+
+ if (onClick) {
+ onClick();
+ }
+ }
}
-export default translate(MuteButton);
+export default translate(connect()(MuteButton));
diff --git a/react/features/remote-video-menu/components/RemoteVideoMenuTriggerButton.js b/react/features/remote-video-menu/components/RemoteVideoMenuTriggerButton.js
new file mode 100644
index 000000000..99f11b593
--- /dev/null
+++ b/react/features/remote-video-menu/components/RemoteVideoMenuTriggerButton.js
@@ -0,0 +1,194 @@
+import AKInlineDialog from '@atlaskit/inline-dialog';
+import React, { Component } from 'react';
+
+import {
+ MuteButton,
+ KickButton,
+ RemoteControlButton,
+ RemoteVideoMenu,
+ VolumeSlider
+} from './';
+
+declare var $: Object;
+declare var interfaceConfig: Object;
+
+/**
+ * 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: React.PropTypes.number,
+
+ /**
+ * Whether or not the participant is currently muted.
+ */
+ isAudioMuted: React.PropTypes.bool,
+
+ /**
+ * Whether or not the participant is a conference moderator.
+ */
+ isModerator: React.PropTypes.bool,
+
+ /**
+ * Callback to invoke when the popover has been displayed.
+ */
+ onMenuDisplay: React.PropTypes.func,
+
+ /**
+ * Callback to invoke choosing to start a remote control session with
+ * the participant.
+ */
+ onRemoteControlToggle: React.PropTypes.func,
+
+ /**
+ * Callback to invoke when changing the level of the participant's
+ * audio element.
+ */
+ onVolumeChange: React.PropTypes.func,
+
+ /**
+ * The ID for the participant on which the remote video menu will act.
+ */
+ participantID: React.PropTypes.string,
+
+ /**
+ * The current state of the participant's remote control session.
+ */
+ remoteControlState: React.PropTypes.number
+ };
+
+ /**
+ * Initializes a new {#@code RemoteVideoMenuTriggerButton} instance.
+ *
+ * @param {Object} props - The read-only properties with which the new
+ * instance is to be initialized.
+ */
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ showRemoteMenu: false
+ };
+
+ /**
+ * The internal reference to topmost DOM/HTML element backing the React
+ * {@code Component}. Accessed directly for associating an element as
+ * the trigger for a popover.
+ *
+ * @private
+ * @type {HTMLDivElement}
+ */
+ this._rootElement = null;
+
+ // Bind event handlers so they are only bound once for every instance.
+ this._onRemoteMenuClose = this._onRemoteMenuClose.bind(this);
+ this._onRemoteMenuToggle = this._onRemoteMenuToggle.bind(this);
+ }
+
+ /**
+ * Implements React's {@link Component#render()}.
+ *
+ * @inheritdoc
+ * @returns {ReactElement}
+ */
+ render() {
+ return (
+
+
+
+
+
+ );
+ }
+
+ /**
+ * Closes the {@code RemoteVideoMenu}.
+ *
+ * @private
+ * @returns {void}
+ */
+ _onRemoteMenuClose() {
+ this.setState({ showRemoteMenu: false });
+ }
+
+ /**
+ * Opens or closes the {@code RemoteVideoMenu}.
+ *
+ * @private
+ * @returns {void}
+ */
+ _onRemoteMenuToggle() {
+ const willShowRemoteMenu = !this.state.showRemoteMenu;
+
+ if (willShowRemoteMenu) {
+ this.props.onMenuDisplay();
+ }
+
+ this.setState({ showRemoteMenu: willShowRemoteMenu });
+ }
+
+ /**
+ * Creates a new {@code RemoteVideoMenu} with buttons for interacting with
+ * the remote participant.
+ *
+ * @private
+ * @returns {ReactElement}
+ */
+ _renderRemoteVideoMenu() {
+ const {
+ initialVolumeValue,
+ isAudioMuted,
+ isModerator,
+ onRemoteControlToggle,
+ onVolumeChange,
+ remoteControlState,
+ participantID
+ } = this.props;
+
+ return (
+
+ { isModerator
+ ?
+ : null }
+ { isModerator
+ ?
+ : null }
+ { remoteControlState
+ ?
+ : null }
+ { onVolumeChange
+ ?
+ : null }
+
+ );
+ }
+}
+
+export default RemoteVideoMenuTriggerButton;
diff --git a/react/features/remote-video-menu/components/index.js b/react/features/remote-video-menu/components/index.js
index 214fda9e8..b8daab3b9 100644
--- a/react/features/remote-video-menu/components/index.js
+++ b/react/features/remote-video-menu/components/index.js
@@ -5,4 +5,7 @@ export {
default as RemoteControlButton
} from './RemoteControlButton';
export { default as RemoteVideoMenu } from './RemoteVideoMenu';
+export {
+ default as RemoteVideoMenuTriggerButton
+} from './RemoteVideoMenuTriggerButton';
export { default as VolumeSlider } from './VolumeSlider';