Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

SmallVideo.js 28KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877
  1. /* global $, APP, config, interfaceConfig */
  2. /* eslint-disable no-unused-vars */
  3. import { AtlasKitThemeProvider } from '@atlaskit/theme';
  4. import Logger from 'jitsi-meet-logger';
  5. import React from 'react';
  6. import ReactDOM from 'react-dom';
  7. import { I18nextProvider } from 'react-i18next';
  8. import { Provider } from 'react-redux';
  9. import { AudioLevelIndicator } from '../../../react/features/audio-level-indicator';
  10. import { Avatar as AvatarDisplay } from '../../../react/features/base/avatar';
  11. import { i18next } from '../../../react/features/base/i18n';
  12. import { MEDIA_TYPE } from '../../../react/features/base/media';
  13. import {
  14. getLocalParticipant,
  15. getParticipantById,
  16. getParticipantCount,
  17. getPinnedParticipant,
  18. pinParticipant
  19. } from '../../../react/features/base/participants';
  20. import { isLocalTrackMuted, isRemoteTrackMuted } from '../../../react/features/base/tracks';
  21. import { ConnectionIndicator } from '../../../react/features/connection-indicator';
  22. import { DisplayName } from '../../../react/features/display-name';
  23. import {
  24. DominantSpeakerIndicator,
  25. RaisedHandIndicator,
  26. StatusIndicators
  27. } from '../../../react/features/filmstrip';
  28. import {
  29. LAYOUTS,
  30. getCurrentLayout,
  31. setTileView,
  32. shouldDisplayTileView
  33. } from '../../../react/features/video-layout';
  34. /* eslint-enable no-unused-vars */
  35. const logger = Logger.getLogger(__filename);
  36. /**
  37. * Display mode constant used when video is being displayed on the small video.
  38. * @type {number}
  39. * @constant
  40. */
  41. const DISPLAY_VIDEO = 0;
  42. /**
  43. * Display mode constant used when the user's avatar is being displayed on
  44. * the small video.
  45. * @type {number}
  46. * @constant
  47. */
  48. const DISPLAY_AVATAR = 1;
  49. /**
  50. * Display mode constant used when neither video nor avatar is being displayed
  51. * on the small video. And we just show the display name.
  52. * @type {number}
  53. * @constant
  54. */
  55. const DISPLAY_BLACKNESS_WITH_NAME = 2;
  56. /**
  57. * Display mode constant used when video is displayed and display name
  58. * at the same time.
  59. * @type {number}
  60. * @constant
  61. */
  62. const DISPLAY_VIDEO_WITH_NAME = 3;
  63. /**
  64. * Display mode constant used when neither video nor avatar is being displayed
  65. * on the small video. And we just show the display name.
  66. * @type {number}
  67. * @constant
  68. */
  69. const DISPLAY_AVATAR_WITH_NAME = 4;
  70. /**
  71. *
  72. */
  73. export default class SmallVideo {
  74. /**
  75. * Constructor.
  76. */
  77. constructor(VideoLayout) {
  78. this.isScreenSharing = false;
  79. this.videoStream = null;
  80. this.audioStream = null;
  81. this.VideoLayout = VideoLayout;
  82. this.videoIsHovered = false;
  83. this.videoType = undefined;
  84. /**
  85. * The current state of the user's bridge connection. The value should be
  86. * a string as enumerated in the library's participantConnectionStatus
  87. * constants.
  88. *
  89. * @private
  90. * @type {string|null}
  91. */
  92. this._connectionStatus = null;
  93. /**
  94. * Whether or not the connection indicator should be displayed.
  95. *
  96. * @private
  97. * @type {boolean}
  98. */
  99. this._showConnectionIndicator = !interfaceConfig.CONNECTION_INDICATOR_DISABLED;
  100. /**
  101. * Whether or not the dominant speaker indicator should be displayed.
  102. *
  103. * @private
  104. * @type {boolean}
  105. */
  106. this._showDominantSpeaker = false;
  107. /**
  108. * Whether or not the raised hand indicator should be displayed.
  109. *
  110. * @private
  111. * @type {boolean}
  112. */
  113. this._showRaisedHand = false;
  114. // Bind event handlers so they are only bound once for every instance.
  115. this.updateView = this.updateView.bind(this);
  116. this._onContainerClick = this._onContainerClick.bind(this);
  117. }
  118. /**
  119. * Returns the identifier of this small video.
  120. *
  121. * @returns the identifier of this small video
  122. */
  123. getId() {
  124. return this.id;
  125. }
  126. /**
  127. * Indicates if this small video is currently visible.
  128. *
  129. * @return <tt>true</tt> if this small video isn't currently visible and
  130. * <tt>false</tt> - otherwise.
  131. */
  132. isVisible() {
  133. return this.$container.is(':visible');
  134. }
  135. /**
  136. * Creates an audio or video element for a particular MediaStream.
  137. */
  138. static createStreamElement(stream) {
  139. const isVideo = stream.isVideoTrack();
  140. const element = isVideo ? document.createElement('video') : document.createElement('audio');
  141. if (isVideo) {
  142. element.setAttribute('muted', 'true');
  143. element.setAttribute('playsInline', 'true'); /* for Safari on iOS to work */
  144. } else if (config.startSilent) {
  145. element.muted = true;
  146. }
  147. element.autoplay = !config.testing?.noAutoPlayVideo;
  148. element.id = SmallVideo.getStreamElementID(stream);
  149. return element;
  150. }
  151. /**
  152. * Returns the element id for a particular MediaStream.
  153. */
  154. static getStreamElementID(stream) {
  155. return (stream.isVideoTrack() ? 'remoteVideo_' : 'remoteAudio_') + stream.getId();
  156. }
  157. /**
  158. * Configures hoverIn/hoverOut handlers. Depends on connection indicator.
  159. */
  160. bindHoverHandler() {
  161. // Add hover handler
  162. this.$container.hover(
  163. () => {
  164. this.videoIsHovered = true;
  165. this.updateView();
  166. this.updateIndicators();
  167. },
  168. () => {
  169. this.videoIsHovered = false;
  170. this.updateView();
  171. this.updateIndicators();
  172. }
  173. );
  174. }
  175. /**
  176. * Unmounts the ConnectionIndicator component.
  177. * @returns {void}
  178. */
  179. removeConnectionIndicator() {
  180. this._showConnectionIndicator = false;
  181. this.updateIndicators();
  182. }
  183. /**
  184. * Updates the connectionStatus stat which displays in the ConnectionIndicator.
  185. * @returns {void}
  186. */
  187. updateConnectionStatus(connectionStatus) {
  188. this._connectionStatus = connectionStatus;
  189. this.updateIndicators();
  190. }
  191. /**
  192. * Shows / hides the screen-share indicator over small videos.
  193. *
  194. * @param {boolean} isScreenSharing indicates if the screen-share element should be shown
  195. * or hidden
  196. */
  197. setScreenSharing(isScreenSharing) {
  198. if (isScreenSharing === this.isScreenSharing) {
  199. return;
  200. }
  201. this.isScreenSharing = isScreenSharing;
  202. this.updateView();
  203. this.updateStatusBar();
  204. }
  205. /**
  206. * Create or updates the ReactElement for displaying status indicators about
  207. * audio mute, video mute, and moderator status.
  208. *
  209. * @returns {void}
  210. */
  211. updateStatusBar() {
  212. const statusBarContainer = this.container.querySelector('.videocontainer__toolbar');
  213. if (!statusBarContainer) {
  214. return;
  215. }
  216. ReactDOM.render(
  217. <Provider store = { APP.store }>
  218. <I18nextProvider i18n = { i18next }>
  219. <StatusIndicators
  220. showScreenShareIndicator = { this.isScreenSharing }
  221. participantID = { this.id } />
  222. </I18nextProvider>
  223. </Provider>,
  224. statusBarContainer);
  225. }
  226. /**
  227. * Adds the element indicating the audio level of the participant.
  228. *
  229. * @returns {void}
  230. */
  231. addAudioLevelIndicator() {
  232. let audioLevelContainer = this._getAudioLevelContainer();
  233. if (audioLevelContainer) {
  234. return;
  235. }
  236. audioLevelContainer = document.createElement('span');
  237. audioLevelContainer.className = 'audioindicator-container';
  238. this.container.appendChild(audioLevelContainer);
  239. this.updateAudioLevelIndicator();
  240. }
  241. /**
  242. * Removes the element indicating the audio level of the participant.
  243. *
  244. * @returns {void}
  245. */
  246. removeAudioLevelIndicator() {
  247. const audioLevelContainer = this._getAudioLevelContainer();
  248. if (audioLevelContainer) {
  249. ReactDOM.unmountComponentAtNode(audioLevelContainer);
  250. }
  251. }
  252. /**
  253. * Updates the audio level for this small video.
  254. *
  255. * @param lvl the new audio level to set
  256. * @returns {void}
  257. */
  258. updateAudioLevelIndicator(lvl = 0) {
  259. const audioLevelContainer = this._getAudioLevelContainer();
  260. if (audioLevelContainer) {
  261. ReactDOM.render(<AudioLevelIndicator audioLevel = { lvl }/>, audioLevelContainer);
  262. }
  263. }
  264. /**
  265. * Queries the component's DOM for the element that should be the parent to the
  266. * AudioLevelIndicator.
  267. *
  268. * @returns {HTMLElement} The DOM element that holds the AudioLevelIndicator.
  269. */
  270. _getAudioLevelContainer() {
  271. return this.container.querySelector('.audioindicator-container');
  272. }
  273. /**
  274. * This is an especially interesting function. A naive reader might think that
  275. * it returns this SmallVideo's "video" element. But it is much more exciting.
  276. * It first finds this video's parent element using jquery, then uses a utility
  277. * from lib-jitsi-meet to extract the video element from it (with two more
  278. * jquery calls), and finally uses jquery again to encapsulate the video element
  279. * in an array. This last step allows (some might prefer "forces") users of
  280. * this function to access the video element via the 0th element of the returned
  281. * array (after checking its length of course!).
  282. */
  283. selectVideoElement() {
  284. return $($(this.container).find('video')[0]);
  285. }
  286. /**
  287. * Selects the HTML image element which displays user's avatar.
  288. *
  289. * @return {jQuery|HTMLElement} a jQuery selector pointing to the HTML image
  290. * element which displays the user's avatar.
  291. */
  292. $avatar() {
  293. return this.$container.find('.avatar-container');
  294. }
  295. /**
  296. * Returns the display name element, which appears on the video thumbnail.
  297. *
  298. * @return {jQuery} a jQuery selector pointing to the display name element of
  299. * the video thumbnail
  300. */
  301. $displayName() {
  302. return this.$container.find('.displayNameContainer');
  303. }
  304. /**
  305. * Creates or updates the participant's display name that is shown over the
  306. * video preview.
  307. *
  308. * @param {Object} props - The React {@code Component} props to pass into the
  309. * {@code DisplayName} component.
  310. * @returns {void}
  311. */
  312. _renderDisplayName(props) {
  313. const displayNameContainer = this.container.querySelector('.displayNameContainer');
  314. if (displayNameContainer) {
  315. ReactDOM.render(
  316. <Provider store = { APP.store }>
  317. <I18nextProvider i18n = { i18next }>
  318. <DisplayName { ...props } />
  319. </I18nextProvider>
  320. </Provider>,
  321. displayNameContainer);
  322. }
  323. }
  324. /**
  325. * Removes the component responsible for showing the participant's display name,
  326. * if its container is present.
  327. *
  328. * @returns {void}
  329. */
  330. removeDisplayName() {
  331. const displayNameContainer = this.container.querySelector('.displayNameContainer');
  332. if (displayNameContainer) {
  333. ReactDOM.unmountComponentAtNode(displayNameContainer);
  334. }
  335. }
  336. /**
  337. * Enables / disables the css responsible for focusing/pinning a video
  338. * thumbnail.
  339. *
  340. * @param isFocused indicates if the thumbnail should be focused/pinned or not
  341. */
  342. focus(isFocused) {
  343. const focusedCssClass = 'videoContainerFocused';
  344. const isFocusClassEnabled = this.$container.hasClass(focusedCssClass);
  345. if (!isFocused && isFocusClassEnabled) {
  346. this.$container.removeClass(focusedCssClass);
  347. } else if (isFocused && !isFocusClassEnabled) {
  348. this.$container.addClass(focusedCssClass);
  349. }
  350. }
  351. /**
  352. *
  353. */
  354. hasVideo() {
  355. return this.selectVideoElement().length !== 0;
  356. }
  357. /**
  358. * Checks whether the user associated with this <tt>SmallVideo</tt> is currently
  359. * being displayed on the "large video".
  360. *
  361. * @return {boolean} <tt>true</tt> if the user is displayed on the large video
  362. * or <tt>false</tt> otherwise.
  363. */
  364. isCurrentlyOnLargeVideo() {
  365. return APP.store.getState()['features/large-video']?.participantId === this.id;
  366. }
  367. /**
  368. * Checks whether there is a playable video stream available for the user
  369. * associated with this <tt>SmallVideo</tt>.
  370. *
  371. * @return {boolean} <tt>true</tt> if there is a playable video stream available
  372. * or <tt>false</tt> otherwise.
  373. */
  374. isVideoPlayable() {
  375. const state = APP.store.getState();
  376. const tracks = state['features/base/tracks'];
  377. const participant = this.id ? getParticipantById(state, this.id) : getLocalParticipant(state);
  378. let isVideoMuted = true;
  379. if (participant?.local) {
  380. isVideoMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.VIDEO);
  381. } else if (!participant?.isFakeParticipant) { // remote participants excluding shared video
  382. isVideoMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.VIDEO, this.id);
  383. }
  384. return this.videoStream && !isVideoMuted && !APP.conference.isAudioOnly();
  385. }
  386. /**
  387. * Determines what should be display on the thumbnail.
  388. *
  389. * @return {number} one of <tt>DISPLAY_VIDEO</tt>,<tt>DISPLAY_AVATAR</tt>
  390. * or <tt>DISPLAY_BLACKNESS_WITH_NAME</tt>.
  391. */
  392. selectDisplayMode(input) {
  393. if (!input.tileViewActive && input.isScreenSharing) {
  394. return input.isHovered ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
  395. } else if (input.isCurrentlyOnLargeVideo && !input.tileViewActive) {
  396. // Display name is always and only displayed when user is on the stage
  397. return input.isVideoPlayable && !input.isAudioOnly ? DISPLAY_BLACKNESS_WITH_NAME : DISPLAY_AVATAR_WITH_NAME;
  398. } else if (input.isVideoPlayable && input.hasVideo && !input.isAudioOnly) {
  399. // check hovering and change state to video with name
  400. return input.isHovered ? DISPLAY_VIDEO_WITH_NAME : DISPLAY_VIDEO;
  401. }
  402. // check hovering and change state to avatar with name
  403. return input.isHovered ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
  404. }
  405. /**
  406. * Computes information that determine the display mode.
  407. *
  408. * @returns {Object}
  409. */
  410. computeDisplayModeInput() {
  411. return {
  412. isCurrentlyOnLargeVideo: this.isCurrentlyOnLargeVideo(),
  413. isHovered: this._isHovered(),
  414. isAudioOnly: APP.conference.isAudioOnly(),
  415. tileViewActive: shouldDisplayTileView(APP.store.getState()),
  416. isVideoPlayable: this.isVideoPlayable(),
  417. hasVideo: Boolean(this.selectVideoElement().length),
  418. connectionStatus: APP.conference.getParticipantConnectionStatus(this.id),
  419. mutedWhileDisconnected: this.mutedWhileDisconnected,
  420. canPlayEventReceived: this._canPlayEventReceived,
  421. videoStream: Boolean(this.videoStream),
  422. isScreenSharing: this.isScreenSharing,
  423. videoStreamMuted: this.videoStream ? this.videoStream.isMuted() : 'no stream'
  424. };
  425. }
  426. /**
  427. * Checks whether current video is considered hovered. Currently it is hovered
  428. * if the mouse is over the video, or if the connection
  429. * indicator is shown(hovered).
  430. * @private
  431. */
  432. _isHovered() {
  433. return this.videoIsHovered;
  434. }
  435. /**
  436. * Updates the css classes of the thumbnail based on the current state.
  437. */
  438. updateView() {
  439. this.$container.removeClass((index, classNames) =>
  440. classNames.split(' ').filter(name => name.startsWith('display-')));
  441. const oldDisplayMode = this.displayMode;
  442. let displayModeString = '';
  443. const displayModeInput = this.computeDisplayModeInput();
  444. // Determine whether video, avatar or blackness should be displayed
  445. this.displayMode = this.selectDisplayMode(displayModeInput);
  446. switch (this.displayMode) {
  447. case DISPLAY_AVATAR_WITH_NAME:
  448. displayModeString = 'avatar-with-name';
  449. this.$container.addClass('display-avatar-with-name');
  450. break;
  451. case DISPLAY_BLACKNESS_WITH_NAME:
  452. displayModeString = 'blackness-with-name';
  453. this.$container.addClass('display-name-on-black');
  454. break;
  455. case DISPLAY_VIDEO:
  456. displayModeString = 'video';
  457. this.$container.addClass('display-video');
  458. break;
  459. case DISPLAY_VIDEO_WITH_NAME:
  460. displayModeString = 'video-with-name';
  461. this.$container.addClass('display-name-on-video');
  462. break;
  463. case DISPLAY_AVATAR:
  464. default:
  465. displayModeString = 'avatar';
  466. this.$container.addClass('display-avatar-only');
  467. break;
  468. }
  469. if (this.displayMode !== oldDisplayMode) {
  470. logger.debug(`Displaying ${displayModeString} for ${this.id}, data: [${JSON.stringify(displayModeInput)}]`);
  471. }
  472. }
  473. /**
  474. * Updates the react component displaying the avatar with the passed in avatar
  475. * url.
  476. *
  477. * @returns {void}
  478. */
  479. initializeAvatar() {
  480. const thumbnail = this.$avatar().get(0);
  481. if (thumbnail) {
  482. // Maybe add a special case for local participant, as on init of
  483. // LocalVideo.js the id is set to "local" but will get updated later.
  484. ReactDOM.render(
  485. <Provider store = { APP.store }>
  486. <AvatarDisplay
  487. className = 'userAvatar'
  488. participantId = { this.id } />
  489. </Provider>,
  490. thumbnail
  491. );
  492. }
  493. }
  494. /**
  495. * Unmounts any attached react components (particular the avatar image) from
  496. * the avatar container.
  497. *
  498. * @returns {void}
  499. */
  500. removeAvatar() {
  501. const thumbnail = this.$avatar().get(0);
  502. if (thumbnail) {
  503. ReactDOM.unmountComponentAtNode(thumbnail);
  504. }
  505. }
  506. /**
  507. * Shows or hides the dominant speaker indicator.
  508. * @param show whether to show or hide.
  509. */
  510. showDominantSpeakerIndicator(show) {
  511. // Don't create and show dominant speaker indicator if
  512. // DISABLE_DOMINANT_SPEAKER_INDICATOR is true
  513. if (interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR) {
  514. return;
  515. }
  516. if (!this.container) {
  517. logger.warn(`Unable to set dominant speaker indicator - ${this.videoSpanId} does not exist`);
  518. return;
  519. }
  520. if (this._showDominantSpeaker === show) {
  521. return;
  522. }
  523. this._showDominantSpeaker = show;
  524. this.$container.toggleClass('active-speaker', this._showDominantSpeaker);
  525. this.updateIndicators();
  526. this.updateView();
  527. }
  528. /**
  529. * Shows or hides the raised hand indicator.
  530. * @param show whether to show or hide.
  531. */
  532. showRaisedHandIndicator(show) {
  533. if (!this.container) {
  534. logger.warn(`Unable to raised hand indication - ${
  535. this.videoSpanId} does not exist`);
  536. return;
  537. }
  538. this._showRaisedHand = show;
  539. this.updateIndicators();
  540. }
  541. /**
  542. * Initalizes any browser specific properties. Currently sets the overflow
  543. * property for Qt browsers on Windows to hidden, thus fixing the following
  544. * problem:
  545. * Some browsers don't have full support of the object-fit property for the
  546. * video element and when we set video object-fit to "cover" the video
  547. * actually overflows the boundaries of its container, so it's important
  548. * to indicate that the "overflow" should be hidden.
  549. *
  550. * Setting this property for all browsers will result in broken audio levels,
  551. * which makes this a temporary solution, before reworking audio levels.
  552. */
  553. initBrowserSpecificProperties() {
  554. const userAgent = window.navigator.userAgent;
  555. if (userAgent.indexOf('QtWebEngine') > -1
  556. && (userAgent.indexOf('Windows') > -1 || userAgent.indexOf('Linux') > -1)) {
  557. this.$container.css('overflow', 'hidden');
  558. }
  559. }
  560. /**
  561. * Cleans up components on {@code SmallVideo} and removes itself from the DOM.
  562. *
  563. * @returns {void}
  564. */
  565. remove() {
  566. logger.log('Remove thumbnail', this.id);
  567. this.removeAudioLevelIndicator();
  568. const toolbarContainer
  569. = this.container.querySelector('.videocontainer__toolbar');
  570. if (toolbarContainer) {
  571. ReactDOM.unmountComponentAtNode(toolbarContainer);
  572. }
  573. this.removeConnectionIndicator();
  574. this.removeDisplayName();
  575. this.removeAvatar();
  576. this._unmountIndicators();
  577. // Remove whole container
  578. if (this.container.parentNode) {
  579. this.container.parentNode.removeChild(this.container);
  580. }
  581. }
  582. /**
  583. * Helper function for re-rendering multiple react components of the small
  584. * video.
  585. *
  586. * @returns {void}
  587. */
  588. rerender() {
  589. this.updateIndicators();
  590. this.updateStatusBar();
  591. this.updateView();
  592. }
  593. /**
  594. * Updates the React element responsible for showing connection status, dominant
  595. * speaker, and raised hand icons. Uses instance variables to get the necessary
  596. * state to display. Will create the React element if not already created.
  597. *
  598. * @private
  599. * @returns {void}
  600. */
  601. updateIndicators() {
  602. const indicatorToolbar = this.container.querySelector('.videocontainer__toptoolbar');
  603. if (!indicatorToolbar) {
  604. return;
  605. }
  606. const { NORMAL = 8 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
  607. const iconSize = NORMAL;
  608. const showConnectionIndicator = this.videoIsHovered || !interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED;
  609. const state = APP.store.getState();
  610. const currentLayout = getCurrentLayout(state);
  611. const participantCount = getParticipantCount(state);
  612. let statsPopoverPosition, tooltipPosition;
  613. if (currentLayout === LAYOUTS.TILE_VIEW) {
  614. statsPopoverPosition = 'right top';
  615. tooltipPosition = 'right';
  616. } else if (currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) {
  617. statsPopoverPosition = this.statsPopoverLocation;
  618. tooltipPosition = 'left';
  619. } else {
  620. statsPopoverPosition = this.statsPopoverLocation;
  621. tooltipPosition = 'top';
  622. }
  623. ReactDOM.render(
  624. <Provider store = { APP.store }>
  625. <I18nextProvider i18n = { i18next }>
  626. <div>
  627. <AtlasKitThemeProvider mode = 'dark'>
  628. { this._showConnectionIndicator
  629. ? <ConnectionIndicator
  630. alwaysVisible = { showConnectionIndicator }
  631. connectionStatus = { this._connectionStatus }
  632. iconSize = { iconSize }
  633. isLocalVideo = { this.isLocal }
  634. enableStatsDisplay = { !interfaceConfig.filmStripOnly }
  635. participantId = { this.id }
  636. statsPopoverPosition = { statsPopoverPosition } />
  637. : null }
  638. <RaisedHandIndicator
  639. iconSize = { iconSize }
  640. participantId = { this.id }
  641. tooltipPosition = { tooltipPosition } />
  642. { this._showDominantSpeaker && participantCount > 2
  643. ? <DominantSpeakerIndicator
  644. iconSize = { iconSize }
  645. tooltipPosition = { tooltipPosition } />
  646. : null }
  647. </AtlasKitThemeProvider>
  648. </div>
  649. </I18nextProvider>
  650. </Provider>,
  651. indicatorToolbar
  652. );
  653. }
  654. /**
  655. * Callback invoked when the thumbnail is clicked and potentially trigger
  656. * pinning of the participant.
  657. *
  658. * @param {MouseEvent} event - The click event to intercept.
  659. * @private
  660. * @returns {void}
  661. */
  662. _onContainerClick(event) {
  663. const triggerPin = this._shouldTriggerPin(event);
  664. if (event.stopPropagation && triggerPin) {
  665. event.stopPropagation();
  666. event.preventDefault();
  667. }
  668. if (triggerPin) {
  669. this.togglePin();
  670. }
  671. return false;
  672. }
  673. /**
  674. * Returns whether or not a click event is targeted at certain elements which
  675. * should not trigger a pin.
  676. *
  677. * @param {MouseEvent} event - The click event to intercept.
  678. * @private
  679. * @returns {boolean}
  680. */
  681. _shouldTriggerPin(event) {
  682. // TODO Checking the classes is a workround to allow events to bubble into
  683. // the DisplayName component if it was clicked. React's synthetic events
  684. // will fire after jQuery handlers execute, so stop propogation at this
  685. // point will prevent DisplayName from getting click events. This workaround
  686. // should be removeable once LocalVideo is a React Component because then
  687. // the components share the same eventing system.
  688. const $source = $(event.target || event.srcElement);
  689. return $source.parents('.displayNameContainer').length === 0
  690. && $source.parents('.popover').length === 0
  691. && !event.target.classList.contains('popover');
  692. }
  693. /**
  694. * Pins the participant displayed by this thumbnail or unpins if already pinned.
  695. *
  696. * @returns {void}
  697. */
  698. togglePin() {
  699. const pinnedParticipant = getPinnedParticipant(APP.store.getState()) || {};
  700. const participantIdToPin = pinnedParticipant && pinnedParticipant.id === this.id ? null : this.id;
  701. APP.store.dispatch(pinParticipant(participantIdToPin));
  702. }
  703. /**
  704. * Removes the React element responsible for showing connection status, dominant
  705. * speaker, and raised hand icons.
  706. *
  707. * @private
  708. * @returns {void}
  709. */
  710. _unmountIndicators() {
  711. const indicatorToolbar = this.container.querySelector('.videocontainer__toptoolbar');
  712. if (indicatorToolbar) {
  713. ReactDOM.unmountComponentAtNode(indicatorToolbar);
  714. }
  715. }
  716. /**
  717. * Sets the size of the thumbnail.
  718. */
  719. _setThumbnailSize() {
  720. const layout = getCurrentLayout(APP.store.getState());
  721. const heightToWidthPercent = 100
  722. / (this.isLocal ? interfaceConfig.LOCAL_THUMBNAIL_RATIO : interfaceConfig.REMOTE_THUMBNAIL_RATIO);
  723. switch (layout) {
  724. case LAYOUTS.VERTICAL_FILMSTRIP_VIEW: {
  725. this.$container.css('padding-top', `${heightToWidthPercent}%`);
  726. this.$avatar().css({
  727. height: '50%',
  728. width: `${heightToWidthPercent / 2}%`
  729. });
  730. break;
  731. }
  732. case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW: {
  733. const state = APP.store.getState();
  734. const { local, remote } = state['features/filmstrip'].horizontalViewDimensions;
  735. const size = this.isLocal ? local : remote;
  736. if (typeof size !== 'undefined') {
  737. const { height, width } = size;
  738. const avatarSize = height / 2;
  739. this.$container.css({
  740. height: `${height}px`,
  741. 'min-height': `${height}px`,
  742. 'min-width': `${width}px`,
  743. width: `${width}px`
  744. });
  745. this.$avatar().css({
  746. height: `${avatarSize}px`,
  747. width: `${avatarSize}px`
  748. });
  749. }
  750. break;
  751. }
  752. case LAYOUTS.TILE_VIEW: {
  753. const state = APP.store.getState();
  754. const { thumbnailSize } = state['features/filmstrip'].tileViewDimensions;
  755. if (typeof thumbnailSize !== 'undefined') {
  756. const { height, width } = thumbnailSize;
  757. const avatarSize = height / 2;
  758. this.$container.css({
  759. height: `${height}px`,
  760. 'min-height': `${height}px`,
  761. 'min-width': `${width}px`,
  762. width: `${width}px`
  763. });
  764. this.$avatar().css({
  765. height: `${avatarSize}px`,
  766. width: `${avatarSize}px`
  767. });
  768. }
  769. break;
  770. }
  771. }
  772. }
  773. }