Merge pull request #2023 from jitsi/remote_menu_analytics

feat(remote_menu): Add analytics

react/features/remote-video-menu/components/KickButton.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
+import JitsiMeetJS from '../../base/lib-jitsi-meet';
 import { kickParticipant } from '../../base/participants';
 
 import RemoteVideoMenuButton from './RemoteVideoMenuButton';
@@ -82,6 +83,13 @@ class KickButton extends Component {
     _onClick() {
         const { dispatch, onClick, participantID } = this.props;
 
+        JitsiMeetJS.analytics.sendEvent(
+            'remotevideomenu.kick',
+            {
+                value: 1,
+                label: participantID
+            }
+        );
         dispatch(kickParticipant(participantID));
 
         if (onClick) {

react/features/remote-video-menu/components/MuteButton.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
+import JitsiMeetJS from '../../base/lib-jitsi-meet';
 import { muteRemoteParticipant } from '../../base/participants';
 
 import RemoteVideoMenuButton from './RemoteVideoMenuButton';
@@ -96,6 +97,14 @@ class MuteButton extends Component {
     _onClick() {
         const { dispatch, onClick, participantID } = this.props;
 
+        JitsiMeetJS.analytics.sendEvent(
+            'remotevideomenu.mute',
+            {
+                value: 1,
+                label: participantID
+            }
+        );
+
         dispatch(muteRemoteParticipant(participantID));
 
         if (onClick) {

react/features/remote-video-menu/components/RemoteControlButton.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
+import JitsiMeetJS from '../../base/lib-jitsi-meet';
 import { translate } from '../../base/i18n';
 
 import RemoteVideoMenuButton from './RemoteVideoMenuButton';
@@ -50,6 +51,19 @@ class RemoteControlButton extends Component {
         t: PropTypes.func
     };
 
+    /**
+     * Initializes a new {@code RemoteControlButton} 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()}.
      *
@@ -58,7 +72,6 @@ class RemoteControlButton extends Component {
      */
     render() {
         const {
-            onClick,
             participantID,
             remoteControlState,
             t
@@ -92,9 +105,44 @@ class RemoteControlButton extends Component {
                 displayClass = { className }
                 iconClass = { icon }
                 id = { `remoteControl_${participantID}` }
-                onClick = { onClick } />
+                onClick = { this._onClick } />
         );
     }
+
+    /**
+     * Sends analytics event for pressing the button and executes the passed
+     * onClick handler.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onClick() {
+        const { onClick, participantID, remoteControlState } = this.props;
+
+        let eventName;
+
+        if (remoteControlState === REMOTE_CONTROL_MENU_STATES.STARTED) {
+            eventName = 'stop';
+        }
+
+        if (remoteControlState === REMOTE_CONTROL_MENU_STATES.NOT_STARTED) {
+            eventName = 'start';
+        }
+
+        if (eventName) {
+            JitsiMeetJS.analytics.sendEvent(
+                `remotevideomenu.remotecontrol.${eventName}`,
+                {
+                    value: 1,
+                    label: participantID
+                }
+            );
+        }
+
+        if (onClick) {
+            onClick();
+        }
+    }
 }
 
 export default translate(RemoteControlButton);