You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Filmstrip.js 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. /* @flow */
  2. import _ from 'lodash';
  3. import React, { Component } from 'react';
  4. import { connect } from 'react-redux';
  5. import { dockToolbox } from '../../../toolbox';
  6. import { setFilmstripHovered } from '../../actions';
  7. import { shouldRemoteVideosBeVisible } from '../../functions';
  8. import Toolbar from './Toolbar';
  9. declare var interfaceConfig: Object;
  10. /**
  11. * The type of the React {@code Component} props of {@link Filmstrip}.
  12. */
  13. type Props = {
  14. /**
  15. * Additional CSS class names top add to the root.
  16. */
  17. _className: string,
  18. /**
  19. * Whether the UI/UX is filmstrip-only.
  20. */
  21. _filmstripOnly: boolean,
  22. /**
  23. * Whether or not remote videos are currently being hovered over. Hover
  24. * handling is currently being handled detected outside of react.
  25. */
  26. _hovered: boolean,
  27. /**
  28. * The redux {@code dispatch} function.
  29. */
  30. dispatch: Dispatch<*>
  31. };
  32. /**
  33. * Implements a React {@link Component} which represents the filmstrip on
  34. * Web/React.
  35. *
  36. * @extends Component
  37. */
  38. class Filmstrip extends Component <Props> {
  39. _isHovered: boolean;
  40. _notifyOfHoveredStateUpdate: Function;
  41. _onMouseOut: Function;
  42. _onMouseOver: Function;
  43. /**
  44. * Initializes a new {@code Filmstrip} instance.
  45. *
  46. * @param {Object} props - The read-only properties with which the new
  47. * instance is to be initialized.
  48. */
  49. constructor(props: Props) {
  50. super(props);
  51. // Debounce the method for dispatching the new filmstrip handled state
  52. // so that it does not get called with each mouse movement event. This
  53. // also works around an issue where mouseout and then a mouseover event
  54. // is fired when hovering over remote thumbnails, which are not yet in
  55. // react.
  56. this._notifyOfHoveredStateUpdate
  57. = _.debounce(this._notifyOfHoveredStateUpdate, 100);
  58. // Cache the current hovered state for _updateHoveredState to always
  59. // send the last known hovered state.
  60. this._isHovered = false;
  61. // Bind event handlers so they are only bound once for every instance.
  62. this._onMouseOut = this._onMouseOut.bind(this);
  63. this._onMouseOver = this._onMouseOver.bind(this);
  64. }
  65. /**
  66. * Implements React's {@link Component#render()}.
  67. *
  68. * @inheritdoc
  69. * @returns {ReactElement}
  70. */
  71. render() {
  72. // Note: Appending of {@code RemoteVideo} views is handled through
  73. // VideoLayout. The views do not get blown away on render() because
  74. // ReactDOMComponent is only aware of the given JSX and not new appended
  75. // DOM. As such, when updateDOMProperties gets called, only attributes
  76. // will get updated without replacing the DOM. If the known DOM gets
  77. // modified, then the views will get blown away.
  78. return (
  79. <div className = { `filmstrip ${this.props._className}` }>
  80. { this.props._filmstripOnly && <Toolbar /> }
  81. <div
  82. className = 'filmstrip__videos'
  83. id = 'remoteVideos'>
  84. <div
  85. className = 'filmstrip__videos'
  86. id = 'filmstripLocalVideo'
  87. onMouseOut = { this._onMouseOut }
  88. onMouseOver = { this._onMouseOver }>
  89. <div id = 'filmstripLocalVideoThumbnail' />
  90. </div>
  91. <div
  92. className = 'filmstrip__videos'
  93. id = 'filmstripRemoteVideos'>
  94. {/*
  95. * XXX This extra video container is needed for
  96. * scrolling thumbnails in Firefox; otherwise, the flex
  97. * thumbnails resize instead of causing overflow.
  98. */}
  99. <div
  100. className = 'remote-videos-container'
  101. id = 'filmstripRemoteVideosContainer'
  102. onMouseOut = { this._onMouseOut }
  103. onMouseOver = { this._onMouseOver }>
  104. <div id = 'localVideoTileViewContainer' />
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. );
  110. }
  111. /**
  112. * If the current hover state does not match the known hover state in redux,
  113. * dispatch an action to update the known hover state in redux.
  114. *
  115. * @private
  116. * @returns {void}
  117. */
  118. _notifyOfHoveredStateUpdate() {
  119. if (this.props._hovered !== this._isHovered) {
  120. this.props.dispatch(dockToolbox(this._isHovered));
  121. this.props.dispatch(setFilmstripHovered(this._isHovered));
  122. }
  123. }
  124. /**
  125. * Updates the currently known mouseover state and attempt to dispatch an
  126. * update of the known hover state in redux.
  127. *
  128. * @private
  129. * @returns {void}
  130. */
  131. _onMouseOut() {
  132. this._isHovered = false;
  133. this._notifyOfHoveredStateUpdate();
  134. }
  135. /**
  136. * Updates the currently known mouseover state and attempt to dispatch an
  137. * update of the known hover state in redux.
  138. *
  139. * @private
  140. * @returns {void}
  141. */
  142. _onMouseOver() {
  143. this._isHovered = true;
  144. this._notifyOfHoveredStateUpdate();
  145. }
  146. }
  147. /**
  148. * Maps (parts of) the Redux state to the associated {@code Filmstrip}'s props.
  149. *
  150. * @param {Object} state - The Redux state.
  151. * @private
  152. * @returns {{
  153. * _className: string,
  154. * _hovered: boolean,
  155. * _filmstripOnly: boolean
  156. * }}
  157. */
  158. function _mapStateToProps(state) {
  159. const { hovered } = state['features/filmstrip'];
  160. const isFilmstripOnly = Boolean(interfaceConfig.filmStripOnly);
  161. const reduceHeight = !isFilmstripOnly
  162. && state['features/toolbox'].visible
  163. && interfaceConfig.TOOLBAR_BUTTONS.length;
  164. const remoteVideosVisible = shouldRemoteVideosBeVisible(state);
  165. const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${
  166. reduceHeight ? 'reduce-height' : ''}`.trim();
  167. return {
  168. _className: className,
  169. _filmstripOnly: isFilmstripOnly,
  170. _hovered: hovered
  171. };
  172. }
  173. export default connect(_mapStateToProps)(Filmstrip);