瀏覽代碼

fix(Filmstrip): Prevent Toolbox from being shown indefinitely when hovering filmstrip

j8
Mihai-Andrei Uscat 4 年之前
父節點
當前提交
c370c05701
沒有連結到貢獻者的電子郵件帳戶。

+ 0
- 11
react/features/filmstrip/actionTypes.js 查看文件

8
  */
8
  */
9
 export const SET_FILMSTRIP_ENABLED = 'SET_FILMSTRIP_ENABLED';
9
 export const SET_FILMSTRIP_ENABLED = 'SET_FILMSTRIP_ENABLED';
10
 
10
 
11
-/**
12
- * The type of (redux) action which sets whether or not the filmstrip is being
13
- * hovered with the cursor.
14
- *
15
- * {
16
- *     type: SET_FILMSTRIP_HOVERED,
17
- *     hovered: boolean
18
- * }
19
- */
20
-export const SET_FILMSTRIP_HOVERED = 'SET_FILMSTRIP_HOVERED';
21
-
22
 /**
11
 /**
23
  * The type of (redux) action which sets whether the filmstrip is visible.
12
  * The type of (redux) action which sets whether the filmstrip is visible.
24
  *
13
  *

+ 0
- 17
react/features/filmstrip/actions.native.js 查看文件

2
 
2
 
3
 import {
3
 import {
4
     SET_FILMSTRIP_ENABLED,
4
     SET_FILMSTRIP_ENABLED,
5
-    SET_FILMSTRIP_HOVERED,
6
     SET_FILMSTRIP_VISIBLE,
5
     SET_FILMSTRIP_VISIBLE,
7
     SET_TILE_VIEW_DIMENSIONS
6
     SET_TILE_VIEW_DIMENSIONS
8
 } from './actionTypes';
7
 } from './actionTypes';
23
     };
22
     };
24
 }
23
 }
25
 
24
 
26
-/**
27
- * Sets whether the filmstrip is being hovered (over).
28
- *
29
- * @param {boolean} hovered - Whether the filmstrip is being hovered (over).
30
- * @returns {{
31
- *     type: SET_FILMSTRIP_HOVERED,
32
- *     hovered: boolean
33
- * }}
34
- */
35
-export function setFilmstripHovered(hovered: boolean) {
36
-    return {
37
-        type: SET_FILMSTRIP_HOVERED,
38
-        hovered
39
-    };
40
-}
41
-
42
 /**
25
 /**
43
  * Sets whether the filmstrip is visible.
26
  * Sets whether the filmstrip is visible.
44
  *
27
  *

+ 4
- 75
react/features/filmstrip/components/web/Filmstrip.js 查看文件

1
 /* @flow */
1
 /* @flow */
2
 
2
 
3
-import _ from 'lodash';
4
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
5
 import type { Dispatch } from 'redux';
4
 import type { Dispatch } from 'redux';
6
 
5
 
12
 import { translate } from '../../../base/i18n';
11
 import { translate } from '../../../base/i18n';
13
 import { Icon, IconMenuDown, IconMenuUp } from '../../../base/icons';
12
 import { Icon, IconMenuDown, IconMenuUp } from '../../../base/icons';
14
 import { connect } from '../../../base/redux';
13
 import { connect } from '../../../base/redux';
15
-import { dockToolbox } from '../../../toolbox/actions.web';
16
 import { isButtonEnabled } from '../../../toolbox/functions.web';
14
 import { isButtonEnabled } from '../../../toolbox/functions.web';
17
-import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
18
-import { setFilmstripHovered, setFilmstripVisible } from '../../actions';
15
+import { LAYOUTS, getCurrentLayout } from '../../../video-layout';
16
+import { setFilmstripVisible } from '../../actions';
19
 import { shouldRemoteVideosBeVisible } from '../../functions';
17
 import { shouldRemoteVideosBeVisible } from '../../functions';
20
 
18
 
21
 declare var APP: Object;
19
 declare var APP: Object;
56
      */
54
      */
57
     _hideToolbar: boolean,
55
     _hideToolbar: boolean,
58
 
56
 
59
-    /**
60
-     * Whether or not remote videos are currently being hovered over. Hover
61
-     * handling is currently being handled detected outside of react.
62
-     */
63
-    _hovered: boolean,
64
-
65
     /**
57
     /**
66
      * The number of rows in tile view.
58
      * The number of rows in tile view.
67
      */
59
      */
95
  * @extends Component
87
  * @extends Component
96
  */
88
  */
97
 class Filmstrip extends Component <Props> {
89
 class Filmstrip extends Component <Props> {
98
-    _isHovered: boolean;
99
-
100
-    _notifyOfHoveredStateUpdate: Function;
101
-
102
-    _onMouseOut: Function;
103
-
104
-    _onMouseOver: Function;
105
 
90
 
106
     /**
91
     /**
107
      * Initializes a new {@code Filmstrip} instance.
92
      * Initializes a new {@code Filmstrip} instance.
112
     constructor(props: Props) {
97
     constructor(props: Props) {
113
         super(props);
98
         super(props);
114
 
99
 
115
-        // Debounce the method for dispatching the new filmstrip handled state
116
-        // so that it does not get called with each mouse movement event. This
117
-        // also works around an issue where mouseout and then a mouseover event
118
-        // is fired when hovering over remote thumbnails, which are not yet in
119
-        // react.
120
-        this._notifyOfHoveredStateUpdate = _.debounce(this._notifyOfHoveredStateUpdate, 100);
121
-
122
-        // Cache the current hovered state for _updateHoveredState to always
123
-        // send the last known hovered state.
124
-        this._isHovered = false;
125
-
126
         // Bind event handlers so they are only bound once for every instance.
100
         // Bind event handlers so they are only bound once for every instance.
127
-        this._onMouseOut = this._onMouseOut.bind(this);
128
-        this._onMouseOver = this._onMouseOver.bind(this);
129
         this._onShortcutToggleFilmstrip = this._onShortcutToggleFilmstrip.bind(this);
101
         this._onShortcutToggleFilmstrip = this._onShortcutToggleFilmstrip.bind(this);
130
         this._onToolbarToggleFilmstrip = this._onToolbarToggleFilmstrip.bind(this);
102
         this._onToolbarToggleFilmstrip = this._onToolbarToggleFilmstrip.bind(this);
131
     }
103
     }
212
                     id = 'remoteVideos'>
184
                     id = 'remoteVideos'>
213
                     <div
185
                     <div
214
                         className = 'filmstrip__videos'
186
                         className = 'filmstrip__videos'
215
-                        id = 'filmstripLocalVideo'
216
-                        onMouseOut = { this._onMouseOut }
217
-                        onMouseOver = { this._onMouseOver }>
187
+                        id = 'filmstripLocalVideo'>
218
                         <div id = 'filmstripLocalVideoThumbnail' />
188
                         <div id = 'filmstripLocalVideoThumbnail' />
219
                     </div>
189
                     </div>
220
                     <div
190
                     <div
228
                         <div
198
                         <div
229
                             className = { remoteVideoContainerClassName }
199
                             className = { remoteVideoContainerClassName }
230
                             id = 'filmstripRemoteVideosContainer'
200
                             id = 'filmstripRemoteVideosContainer'
231
-                            onMouseOut = { this._onMouseOut }
232
-                            onMouseOver = { this._onMouseOver }
233
                             style = { filmstripRemoteVideosContainerStyle }>
201
                             style = { filmstripRemoteVideosContainerStyle }>
234
                             <div id = 'localVideoTileViewContainer' />
202
                             <div id = 'localVideoTileViewContainer' />
235
                         </div>
203
                         </div>
249
         this.props.dispatch(setFilmstripVisible(!this.props._visible));
217
         this.props.dispatch(setFilmstripVisible(!this.props._visible));
250
     }
218
     }
251
 
219
 
252
-    /**
253
-     * If the current hover state does not match the known hover state in redux,
254
-     * dispatch an action to update the known hover state in redux.
255
-     *
256
-     * @private
257
-     * @returns {void}
258
-     */
259
-    _notifyOfHoveredStateUpdate() {
260
-        if (this.props._hovered !== this._isHovered) {
261
-            this.props.dispatch(dockToolbox(this._isHovered));
262
-            this.props.dispatch(setFilmstripHovered(this._isHovered));
263
-        }
264
-    }
265
-
266
-    /**
267
-     * Updates the currently known mouseover state and attempt to dispatch an
268
-     * update of the known hover state in redux.
269
-     *
270
-     * @private
271
-     * @returns {void}
272
-     */
273
-    _onMouseOut() {
274
-        this._isHovered = false;
275
-        this._notifyOfHoveredStateUpdate();
276
-    }
277
-
278
-    /**
279
-     * Updates the currently known mouseover state and attempt to dispatch an
280
-     * update of the known hover state in redux.
281
-     *
282
-     * @private
283
-     * @returns {void}
284
-     */
285
-    _onMouseOver() {
286
-        this._isHovered = true;
287
-        this._notifyOfHoveredStateUpdate();
288
-    }
289
-
290
     _onShortcutToggleFilmstrip: () => void;
220
     _onShortcutToggleFilmstrip: () => void;
291
 
221
 
292
     /**
222
     /**
358
  */
288
  */
359
 function _mapStateToProps(state) {
289
 function _mapStateToProps(state) {
360
     const { iAmSipGateway } = state['features/base/config'];
290
     const { iAmSipGateway } = state['features/base/config'];
361
-    const { hovered, visible } = state['features/filmstrip'];
291
+    const { visible } = state['features/filmstrip'];
362
     const reduceHeight
292
     const reduceHeight
363
         = state['features/toolbox'].visible && interfaceConfig.TOOLBAR_BUTTONS.length;
293
         = state['features/toolbox'].visible && interfaceConfig.TOOLBAR_BUTTONS.length;
364
     const remoteVideosVisible = shouldRemoteVideosBeVisible(state);
294
     const remoteVideosVisible = shouldRemoteVideosBeVisible(state);
376
         _filmstripWidth: filmstripWidth,
306
         _filmstripWidth: filmstripWidth,
377
         _hideScrollbar: Boolean(iAmSipGateway),
307
         _hideScrollbar: Boolean(iAmSipGateway),
378
         _hideToolbar: Boolean(iAmSipGateway),
308
         _hideToolbar: Boolean(iAmSipGateway),
379
-        _hovered: hovered,
380
         _rows: gridDimensions.rows,
309
         _rows: gridDimensions.rows,
381
         _videosClassName: videosClassName,
310
         _videosClassName: videosClassName,
382
         _visible: visible
311
         _visible: visible

+ 2
- 4
react/features/filmstrip/functions.web.js 查看文件

62
         participantCount > 2
62
         participantCount > 2
63
 
63
 
64
             // Always show the filmstrip when there is another participant to
64
             // Always show the filmstrip when there is another participant to
65
-            // show and the filmstrip is hovered, or local video is pinned, or
66
-            // the toolbar is displayed.
65
+            // show and the  local video is pinned, or the toolbar is displayed.
67
             || (participantCount > 1
66
             || (participantCount > 1
68
-                && (state['features/filmstrip'].hovered
69
-                    || state['features/toolbox'].visible
67
+                && (state['features/toolbox'].visible
70
                     || ((pinnedParticipant = getPinnedParticipant(state))
68
                     || ((pinnedParticipant = getPinnedParticipant(state))
71
                         && pinnedParticipant.local)))
69
                         && pinnedParticipant.local)))
72
 
70
 

+ 0
- 15
react/features/filmstrip/reducer.js 查看文件

4
 
4
 
5
 import {
5
 import {
6
     SET_FILMSTRIP_ENABLED,
6
     SET_FILMSTRIP_ENABLED,
7
-    SET_FILMSTRIP_HOVERED,
8
     SET_FILMSTRIP_VISIBLE,
7
     SET_FILMSTRIP_VISIBLE,
9
     SET_HORIZONTAL_VIEW_DIMENSIONS,
8
     SET_HORIZONTAL_VIEW_DIMENSIONS,
10
     SET_TILE_VIEW_DIMENSIONS
9
     SET_TILE_VIEW_DIMENSIONS
54
                 enabled: action.enabled
53
                 enabled: action.enabled
55
             };
54
             };
56
 
55
 
57
-        case SET_FILMSTRIP_HOVERED:
58
-            return {
59
-                ...state,
60
-
61
-                /**
62
-                 * The indicator which determines whether the {@link Filmstrip}
63
-                 * is being hovered (over).
64
-                 *
65
-                 * @public
66
-                 * @type {boolean}
67
-                 */
68
-                hovered: action.hovered
69
-            };
70
-
71
         case SET_FILMSTRIP_VISIBLE:
56
         case SET_FILMSTRIP_VISIBLE:
72
             return {
57
             return {
73
                 ...state,
58
                 ...state,

Loading…
取消
儲存