ソースを参照

ref(conference): move mousemove handler to react

master
Leonard Kim 8年前
コミット
323d38ac94
2個のファイルの変更38行の追加12行の削除
  1. 0
    10
      modules/UI/UI.js
  2. 38
    2
      react/features/conference/components/Conference.web.js

+ 0
- 10
modules/UI/UI.js ファイルの表示

4
 
4
 
5
 var UI = {};
5
 var UI = {};
6
 
6
 
7
-import _ from 'lodash';
8
-
9
 import Chat from "./side_pannels/chat/Chat";
7
 import Chat from "./side_pannels/chat/Chat";
10
 import SidePanels from "./side_pannels/SidePanels";
8
 import SidePanels from "./side_pannels/SidePanels";
11
 import Avatar from "./avatar/Avatar";
9
 import Avatar from "./avatar/Avatar";
273
 
271
 
274
     sharedVideoManager = new SharedVideoManager(eventEmitter);
272
     sharedVideoManager = new SharedVideoManager(eventEmitter);
275
     if (!interfaceConfig.filmStripOnly) {
273
     if (!interfaceConfig.filmStripOnly) {
276
-        let throttledShowToolbar
277
-            = _.throttle(
278
-                    () => UI.showToolbar(),
279
-                    100,
280
-                    { leading: true, trailing: false });
281
-
282
-        $("#videoconference_page").mousemove(throttledShowToolbar);
283
-
284
         // Initialise the recording module.
274
         // Initialise the recording module.
285
         if (config.enableRecording) {
275
         if (config.enableRecording) {
286
             Recording.init(eventEmitter, config.recordingType);
276
             Recording.init(eventEmitter, config.recordingType);

+ 38
- 2
react/features/conference/components/Conference.web.js ファイルの表示

1
 /* @flow */
1
 /* @flow */
2
 
2
 
3
+import _ from 'lodash';
3
 import PropTypes from 'prop-types';
4
 import PropTypes from 'prop-types';
4
 import React, { Component } from 'react';
5
 import React, { Component } from 'react';
5
 import { connect as reactReduxConnect } from 'react-redux';
6
 import { connect as reactReduxConnect } from 'react-redux';
10
 import { LargeVideo } from '../../large-video';
11
 import { LargeVideo } from '../../large-video';
11
 import { NotificationsContainer } from '../../notifications';
12
 import { NotificationsContainer } from '../../notifications';
12
 import { OverlayContainer } from '../../overlay';
13
 import { OverlayContainer } from '../../overlay';
13
-import { Toolbox } from '../../toolbox';
14
+import { showToolbox, Toolbox } from '../../toolbox';
14
 import { HideNotificationBarStyle } from '../../unsupported-browser';
15
 import { HideNotificationBarStyle } from '../../unsupported-browser';
15
 
16
 
16
 declare var $: Function;
17
 declare var $: Function;
21
  * The conference page of the Web application.
22
  * The conference page of the Web application.
22
  */
23
  */
23
 class Conference extends Component {
24
 class Conference extends Component {
25
+    _onShowToolbar: Function;
26
+    _originalOnShowToolbar: Function;
24
 
27
 
25
     /**
28
     /**
26
      * Conference component's property types.
29
      * Conference component's property types.
31
         dispatch: PropTypes.func
34
         dispatch: PropTypes.func
32
     };
35
     };
33
 
36
 
37
+    /**
38
+     * Initializes a new Conference instance.
39
+     *
40
+     * @param {Object} props - The read-only properties with which the new
41
+     * instance is to be initialized.
42
+     */
43
+    constructor(props) {
44
+        super(props);
45
+
46
+        // Throttle and bind this component's mousemove handler to prevent it
47
+        // from firing too often.
48
+        this._originalOnShowToolbar = this._onShowToolbar;
49
+        this._onShowToolbar = _.throttle(
50
+            () => this._originalOnShowToolbar(),
51
+            100,
52
+            {
53
+                leading: true,
54
+                trailing: false
55
+            });
56
+    }
57
+
34
     /**
58
     /**
35
      * Until we don't rewrite UI using react components
59
      * Until we don't rewrite UI using react components
36
      * we use UI.start from old app. Also method translates
60
      * we use UI.start from old app. Also method translates
71
         const { filmStripOnly } = interfaceConfig;
95
         const { filmStripOnly } = interfaceConfig;
72
 
96
 
73
         return (
97
         return (
74
-            <div id = 'videoconference_page'>
98
+            <div
99
+                id = 'videoconference_page'
100
+                onMouseMove = { this._onShowToolbar }>
75
                 <div id = 'videospace'>
101
                 <div id = 'videospace'>
76
                     <LargeVideo />
102
                     <LargeVideo />
77
                     <Filmstrip filmstripOnly = { filmStripOnly } />
103
                     <Filmstrip filmstripOnly = { filmStripOnly } />
94
             </div>
120
             </div>
95
         );
121
         );
96
     }
122
     }
123
+
124
+    /**
125
+     * Displays the toolbar.
126
+     *
127
+     * @private
128
+     * @returns {void}
129
+     */
130
+    _onShowToolbar() {
131
+        this.props.dispatch(showToolbox());
132
+    }
97
 }
133
 }
98
 
134
 
99
 export default reactReduxConnect()(Conference);
135
 export default reactReduxConnect()(Conference);

読み込み中…
キャンセル
保存