ref(conference): move mousemove handler to react

modules/UI/UI.js

@@ -4,8 +4,6 @@ const logger = require("jitsi-meet-logger").getLogger(__filename);
 
 var UI = {};
 
-import _ from 'lodash';
-
 import Chat from "./side_pannels/chat/Chat";
 import SidePanels from "./side_pannels/SidePanels";
 import Avatar from "./avatar/Avatar";
@@ -273,14 +271,6 @@ UI.start = function () {
 
     sharedVideoManager = new SharedVideoManager(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
-        let throttledShowToolbar
-            = _.throttle(
-                    () => UI.showToolbar(),
-                    100,
-                    { leading: true, trailing: false });
-
-        $("#videoconference_page").mousemove(throttledShowToolbar);
-
         // Initialise the recording module.
         if (config.enableRecording) {
             Recording.init(eventEmitter, config.recordingType);

react/features/conference/components/Conference.web.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect as reactReduxConnect } from 'react-redux';
@@ -10,7 +11,7 @@ import { Filmstrip } from '../../filmstrip';
 import { LargeVideo } from '../../large-video';
 import { NotificationsContainer } from '../../notifications';
 import { OverlayContainer } from '../../overlay';
-import { Toolbox } from '../../toolbox';
+import { showToolbox, Toolbox } from '../../toolbox';
 import { HideNotificationBarStyle } from '../../unsupported-browser';
 
 declare var $: Function;
@@ -21,6 +22,8 @@ declare var interfaceConfig: Object;
  * The conference page of the Web application.
  */
 class Conference extends Component {
+    _onShowToolbar: Function;
+    _originalOnShowToolbar: Function;
 
     /**
      * Conference component's property types.
@@ -31,6 +34,27 @@ class Conference extends Component {
         dispatch: PropTypes.func
     };
 
+    /**
+     * Initializes a new Conference instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props) {
+        super(props);
+
+        // Throttle and bind this component's mousemove handler to prevent it
+        // from firing too often.
+        this._originalOnShowToolbar = this._onShowToolbar;
+        this._onShowToolbar = _.throttle(
+            () => this._originalOnShowToolbar(),
+            100,
+            {
+                leading: true,
+                trailing: false
+            });
+    }
+
     /**
      * Until we don't rewrite UI using react components
      * we use UI.start from old app. Also method translates
@@ -71,7 +95,9 @@ class Conference extends Component {
         const { filmStripOnly } = interfaceConfig;
 
         return (
-            <div id = 'videoconference_page'>
+            <div
+                id = 'videoconference_page'
+                onMouseMove = { this._onShowToolbar }>
                 <div id = 'videospace'>
                     <LargeVideo />
                     <Filmstrip filmstripOnly = { filmStripOnly } />
@@ -94,6 +120,16 @@ class Conference extends Component {
             </div>
         );
     }
+
+    /**
+     * Displays the toolbar.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onShowToolbar() {
+        this.props.dispatch(showToolbox());
+    }
 }
 
 export default reactReduxConnect()(Conference);