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.

Conference.tsx 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  1. import _ from 'lodash';
  2. import React from 'react';
  3. import { WithTranslation } from 'react-i18next';
  4. import { connect as reactReduxConnect } from 'react-redux';
  5. // @ts-expect-error
  6. import VideoLayout from '../../../../../modules/UI/videolayout/VideoLayout';
  7. import { IReduxState, IStore } from '../../../app/types';
  8. import { getConferenceNameForTitle } from '../../../base/conference/functions';
  9. import { hangup } from '../../../base/connection/actions.web';
  10. import { isMobileBrowser } from '../../../base/environment/utils';
  11. import { translate } from '../../../base/i18n/functions';
  12. import { setColorAlpha } from '../../../base/util/helpers';
  13. import Chat from '../../../chat/components/web/Chat';
  14. import MainFilmstrip from '../../../filmstrip/components/web/MainFilmstrip';
  15. import ScreenshareFilmstrip from '../../../filmstrip/components/web/ScreenshareFilmstrip';
  16. import StageFilmstrip from '../../../filmstrip/components/web/StageFilmstrip';
  17. import CalleeInfoContainer from '../../../invite/components/callee-info/CalleeInfoContainer';
  18. import LargeVideo from '../../../large-video/components/LargeVideo.web';
  19. import LobbyScreen from '../../../lobby/components/web/LobbyScreen';
  20. import { getIsLobbyVisible } from '../../../lobby/functions';
  21. import { getOverlayToRender } from '../../../overlay/functions.web';
  22. import ParticipantsPane from '../../../participants-pane/components/web/ParticipantsPane';
  23. import Prejoin from '../../../prejoin/components/web/Prejoin';
  24. import { isPrejoinPageVisible } from '../../../prejoin/functions';
  25. import ReactionAnimations from '../../../reactions/components/web/ReactionsAnimations';
  26. import { toggleToolboxVisible } from '../../../toolbox/actions.any';
  27. import { fullScreenChanged, showToolbox } from '../../../toolbox/actions.web';
  28. import JitsiPortal from '../../../toolbox/components/web/JitsiPortal';
  29. import Toolbox from '../../../toolbox/components/web/Toolbox';
  30. import { LAYOUT_CLASSNAMES } from '../../../video-layout/constants';
  31. import { getCurrentLayout } from '../../../video-layout/functions.any';
  32. import { init } from '../../actions.web';
  33. import { maybeShowSuboptimalExperienceNotification } from '../../functions.web';
  34. import {
  35. AbstractConference,
  36. abstractMapStateToProps
  37. } from '../AbstractConference';
  38. import type { AbstractProps } from '../AbstractConference';
  39. import ConferenceInfo from './ConferenceInfo';
  40. import { default as Notice } from './Notice';
  41. /**
  42. * DOM events for when full screen mode has changed. Different browsers need
  43. * different vendor prefixes.
  44. *
  45. * @private
  46. * @type {Array<string>}
  47. */
  48. const FULL_SCREEN_EVENTS = [
  49. 'webkitfullscreenchange',
  50. 'mozfullscreenchange',
  51. 'fullscreenchange'
  52. ];
  53. /**
  54. * The type of the React {@code Component} props of {@link Conference}.
  55. */
  56. interface IProps extends AbstractProps, WithTranslation {
  57. /**
  58. * The alpha(opacity) of the background.
  59. */
  60. _backgroundAlpha?: number;
  61. /**
  62. * Are any overlays visible?
  63. */
  64. _isAnyOverlayVisible: boolean;
  65. /**
  66. * The CSS class to apply to the root of {@link Conference} to modify the
  67. * application layout.
  68. */
  69. _layoutClassName: string;
  70. /**
  71. * The config specified interval for triggering mouseMoved iframe api events.
  72. */
  73. _mouseMoveCallbackInterval?: number;
  74. /**
  75. *Whether or not the notifications should be displayed in the overflow drawer.
  76. */
  77. _overflowDrawer: boolean;
  78. /**
  79. * Name for this conference room.
  80. */
  81. _roomName: string;
  82. /**
  83. * If lobby page is visible or not.
  84. */
  85. _showLobby: boolean;
  86. /**
  87. * If prejoin page is visible or not.
  88. */
  89. _showPrejoin: boolean;
  90. dispatch: IStore['dispatch'];
  91. }
  92. /**
  93. * The conference page of the Web application.
  94. */
  95. class Conference extends AbstractConference<IProps, any> {
  96. _originalOnMouseMove: Function;
  97. _originalOnShowToolbar: Function;
  98. /**
  99. * Initializes a new Conference instance.
  100. *
  101. * @param {Object} props - The read-only properties with which the new
  102. * instance is to be initialized.
  103. */
  104. constructor(props: IProps) {
  105. super(props);
  106. const { _mouseMoveCallbackInterval } = props;
  107. // Throttle and bind this component's mousemove handler to prevent it
  108. // from firing too often.
  109. this._originalOnShowToolbar = this._onShowToolbar;
  110. this._originalOnMouseMove = this._onMouseMove;
  111. this._onShowToolbar = _.throttle(
  112. () => this._originalOnShowToolbar(),
  113. 100,
  114. {
  115. leading: true,
  116. trailing: false
  117. });
  118. this._onMouseMove = _.throttle(
  119. event => this._originalOnMouseMove(event),
  120. _mouseMoveCallbackInterval,
  121. {
  122. leading: true,
  123. trailing: false
  124. });
  125. // Bind event handler so it is only bound once for every instance.
  126. this._onFullScreenChange = this._onFullScreenChange.bind(this);
  127. this._onVidespaceTouchStart = this._onVidespaceTouchStart.bind(this);
  128. this._setBackground = this._setBackground.bind(this);
  129. }
  130. /**
  131. * Start the connection and get the UI ready for the conference.
  132. *
  133. * @inheritdoc
  134. */
  135. componentDidMount() {
  136. document.title = `${this.props._roomName} | ${interfaceConfig.APP_NAME}`;
  137. this._start();
  138. }
  139. /**
  140. * Calls into legacy UI to update the application layout, if necessary.
  141. *
  142. * @inheritdoc
  143. * returns {void}
  144. */
  145. componentDidUpdate(prevProps: IProps) {
  146. if (this.props._shouldDisplayTileView
  147. === prevProps._shouldDisplayTileView) {
  148. return;
  149. }
  150. // TODO: For now VideoLayout is being called as LargeVideo and Filmstrip
  151. // sizing logic is still handled outside of React. Once all components
  152. // are in react they should calculate size on their own as much as
  153. // possible and pass down sizings.
  154. VideoLayout.refreshLayout();
  155. }
  156. /**
  157. * Disconnect from the conference when component will be
  158. * unmounted.
  159. *
  160. * @inheritdoc
  161. */
  162. componentWillUnmount() {
  163. APP.UI.unbindEvents();
  164. FULL_SCREEN_EVENTS.forEach(name =>
  165. document.removeEventListener(name, this._onFullScreenChange));
  166. APP.conference.isJoined() && this.props.dispatch(hangup());
  167. }
  168. /**
  169. * Implements React's {@link Component#render()}.
  170. *
  171. * @inheritdoc
  172. * @returns {ReactElement}
  173. */
  174. render() {
  175. const {
  176. _isAnyOverlayVisible,
  177. _layoutClassName,
  178. _notificationsVisible,
  179. _overflowDrawer,
  180. _showLobby,
  181. _showPrejoin,
  182. t
  183. } = this.props;
  184. return (
  185. <div
  186. id = 'layout_wrapper'
  187. onMouseEnter = { this._onMouseEnter }
  188. onMouseLeave = { this._onMouseLeave }
  189. onMouseMove = { this._onMouseMove }
  190. ref = { this._setBackground }>
  191. <Chat />
  192. <div
  193. className = { _layoutClassName }
  194. id = 'videoconference_page'
  195. onMouseMove = { isMobileBrowser() ? undefined : this._onShowToolbar }>
  196. <ConferenceInfo />
  197. <Notice />
  198. <div
  199. id = 'videospace'
  200. onTouchStart = { this._onVidespaceTouchStart }>
  201. <LargeVideo />
  202. {
  203. _showPrejoin || _showLobby || (<>
  204. <StageFilmstrip />
  205. <ScreenshareFilmstrip />
  206. <MainFilmstrip />
  207. </>)
  208. }
  209. </div>
  210. { _showPrejoin || _showLobby || (
  211. <>
  212. <span
  213. aria-level = { 1 }
  214. className = 'sr-only'
  215. role = 'heading'>
  216. { t('toolbar.accessibilityLabel.heading') }
  217. </span>
  218. <Toolbox />
  219. </>
  220. )}
  221. {_notificationsVisible && !_isAnyOverlayVisible && (_overflowDrawer
  222. ? <JitsiPortal className = 'notification-portal'>
  223. {this.renderNotificationsContainer({ portal: true })}
  224. </JitsiPortal>
  225. : this.renderNotificationsContainer())
  226. }
  227. <CalleeInfoContainer />
  228. { _showPrejoin && <Prejoin />}
  229. { _showLobby && <LobbyScreen />}
  230. </div>
  231. <ParticipantsPane />
  232. <ReactionAnimations />
  233. </div>
  234. );
  235. }
  236. /**
  237. * Sets custom background opacity based on config. It also applies the
  238. * opacity on parent element, as the parent element is not accessible directly,
  239. * only though it's child.
  240. *
  241. * @param {Object} element - The DOM element for which to apply opacity.
  242. *
  243. * @private
  244. * @returns {void}
  245. */
  246. _setBackground(element: HTMLDivElement) {
  247. if (!element) {
  248. return;
  249. }
  250. if (this.props._backgroundAlpha !== undefined) {
  251. const elemColor = element.style.background;
  252. const alphaElemColor = setColorAlpha(elemColor, this.props._backgroundAlpha);
  253. element.style.background = alphaElemColor;
  254. if (element.parentElement) {
  255. const parentColor = element.parentElement.style.background;
  256. const alphaParentColor = setColorAlpha(parentColor, this.props._backgroundAlpha);
  257. element.parentElement.style.background = alphaParentColor;
  258. }
  259. }
  260. }
  261. /**
  262. * Handler used for touch start on Video container.
  263. *
  264. * @private
  265. * @returns {void}
  266. */
  267. _onVidespaceTouchStart() {
  268. this.props.dispatch(toggleToolboxVisible());
  269. }
  270. /**
  271. * Updates the Redux state when full screen mode has been enabled or
  272. * disabled.
  273. *
  274. * @private
  275. * @returns {void}
  276. */
  277. _onFullScreenChange() {
  278. this.props.dispatch(fullScreenChanged(APP.UI.isFullScreen()));
  279. }
  280. /**
  281. * Triggers iframe API mouseEnter event.
  282. *
  283. * @param {MouseEvent} event - The mouse event.
  284. * @private
  285. * @returns {void}
  286. */
  287. _onMouseEnter(event: React.MouseEvent) {
  288. APP.API.notifyMouseEnter(event);
  289. }
  290. /**
  291. * Triggers iframe API mouseLeave event.
  292. *
  293. * @param {MouseEvent} event - The mouse event.
  294. * @private
  295. * @returns {void}
  296. */
  297. _onMouseLeave(event: React.MouseEvent) {
  298. APP.API.notifyMouseLeave(event);
  299. }
  300. /**
  301. * Triggers iframe API mouseMove event.
  302. *
  303. * @param {MouseEvent} event - The mouse event.
  304. * @private
  305. * @returns {void}
  306. */
  307. _onMouseMove(event: React.MouseEvent) {
  308. APP.API.notifyMouseMove(event);
  309. }
  310. /**
  311. * Displays the toolbar.
  312. *
  313. * @private
  314. * @returns {void}
  315. */
  316. _onShowToolbar() {
  317. this.props.dispatch(showToolbox());
  318. }
  319. /**
  320. * Until we don't rewrite UI using react components
  321. * we use UI.start from old app. Also method translates
  322. * component right after it has been mounted.
  323. *
  324. * @inheritdoc
  325. */
  326. _start() {
  327. APP.UI.start();
  328. APP.UI.bindEvents();
  329. FULL_SCREEN_EVENTS.forEach(name =>
  330. document.addEventListener(name, this._onFullScreenChange));
  331. const { dispatch, t } = this.props;
  332. dispatch(init());
  333. maybeShowSuboptimalExperienceNotification(dispatch, t);
  334. }
  335. }
  336. /**
  337. * Maps (parts of) the Redux state to the associated props for the
  338. * {@code Conference} component.
  339. *
  340. * @param {Object} state - The Redux state.
  341. * @private
  342. * @returns {IProps}
  343. */
  344. function _mapStateToProps(state: IReduxState) {
  345. const { backgroundAlpha, mouseMoveCallbackInterval } = state['features/base/config'];
  346. const { overflowDrawer } = state['features/toolbox'];
  347. return {
  348. ...abstractMapStateToProps(state),
  349. _backgroundAlpha: backgroundAlpha,
  350. _isAnyOverlayVisible: Boolean(getOverlayToRender(state)),
  351. _layoutClassName: LAYOUT_CLASSNAMES[getCurrentLayout(state) ?? ''],
  352. _mouseMoveCallbackInterval: mouseMoveCallbackInterval,
  353. _overflowDrawer: overflowDrawer,
  354. _roomName: getConferenceNameForTitle(state),
  355. _showLobby: getIsLobbyVisible(state),
  356. _showPrejoin: isPrejoinPageVisible(state)
  357. };
  358. }
  359. export default reactReduxConnect(_mapStateToProps)(translate(Conference));