您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

Toolbox.js 45KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482
  1. // @flow
  2. import React, { Component } from 'react';
  3. import * as wasmCheck from 'wasm-check';
  4. import {
  5. ACTION_SHORTCUT_TRIGGERED,
  6. createShortcutEvent,
  7. createToolbarEvent,
  8. sendAnalytics
  9. } from '../../../analytics';
  10. import { openDialog, toggleDialog } from '../../../base/dialog';
  11. import { isMobileBrowser } from '../../../base/environment/utils';
  12. import { translate } from '../../../base/i18n';
  13. import {
  14. IconChat,
  15. IconCodeBlock,
  16. IconExitFullScreen,
  17. IconFeedback,
  18. IconFullScreen,
  19. IconInviteMore,
  20. IconOpenInNew,
  21. IconPresentation,
  22. IconRaisedHand,
  23. IconRec,
  24. IconShareDesktop,
  25. IconShareVideo
  26. } from '../../../base/icons';
  27. import JitsiMeetJS from '../../../base/lib-jitsi-meet';
  28. import {
  29. getLocalParticipant,
  30. getParticipants,
  31. participantUpdated
  32. } from '../../../base/participants';
  33. import { connect, equals } from '../../../base/redux';
  34. import { OverflowMenuItem } from '../../../base/toolbox/components';
  35. import { getLocalVideoTrack, toggleScreensharing } from '../../../base/tracks';
  36. import { isVpaasMeeting } from '../../../billing-counter/functions';
  37. import { VideoBlurButton } from '../../../blur';
  38. import { CHAT_SIZE, ChatCounter, toggleChat } from '../../../chat';
  39. import { EmbedMeetingDialog } from '../../../embed-meeting';
  40. import { SharedDocumentButton } from '../../../etherpad';
  41. import { openFeedbackDialog } from '../../../feedback';
  42. import { beginAddPeople } from '../../../invite';
  43. import { openKeyboardShortcutsDialog } from '../../../keyboard-shortcuts';
  44. import {
  45. LocalRecordingButton,
  46. LocalRecordingInfoDialog
  47. } from '../../../local-recording';
  48. import {
  49. LiveStreamButton,
  50. RecordButton
  51. } from '../../../recording';
  52. import { SecurityDialogButton } from '../../../security';
  53. import {
  54. SETTINGS_TABS,
  55. SettingsButton,
  56. openSettingsDialog
  57. } from '../../../settings';
  58. import { toggleSharedVideo } from '../../../shared-video';
  59. import { SpeakerStats } from '../../../speaker-stats';
  60. import {
  61. ClosedCaptionButton
  62. } from '../../../subtitles';
  63. import {
  64. TileViewButton,
  65. shouldDisplayTileView,
  66. toggleTileView
  67. } from '../../../video-layout';
  68. import {
  69. OverflowMenuVideoQualityItem,
  70. VideoQualityDialog
  71. } from '../../../video-quality';
  72. import {
  73. setFullScreen,
  74. setOverflowMenuVisible,
  75. setToolbarHovered,
  76. setToolboxVisible
  77. } from '../../actions';
  78. import { isToolboxVisible } from '../../functions';
  79. import DownloadButton from '../DownloadButton';
  80. import HangupButton from '../HangupButton';
  81. import HelpButton from '../HelpButton';
  82. import MuteEveryoneButton from '../MuteEveryoneButton';
  83. import AudioSettingsButton from './AudioSettingsButton';
  84. import OverflowMenuButton from './OverflowMenuButton';
  85. import OverflowMenuProfileItem from './OverflowMenuProfileItem';
  86. import ToolbarButton from './ToolbarButton';
  87. import VideoSettingsButton from './VideoSettingsButton';
  88. /**
  89. * The type of the React {@code Component} props of {@link Toolbox}.
  90. */
  91. type Props = {
  92. /**
  93. * Whether or not the chat feature is currently displayed.
  94. */
  95. _chatOpen: boolean,
  96. /**
  97. * The {@code JitsiConference} for the current conference.
  98. */
  99. _conference: Object,
  100. /**
  101. * The tooltip key to use when screensharing is disabled. Or undefined
  102. * if non to be shown and the button to be hidden.
  103. */
  104. _desktopSharingDisabledTooltipKey: boolean,
  105. /**
  106. * Whether or not screensharing is initialized.
  107. */
  108. _desktopSharingEnabled: boolean,
  109. /**
  110. * Whether or not a dialog is displayed.
  111. */
  112. _dialog: boolean,
  113. /**
  114. * Whether or not call feedback can be sent.
  115. */
  116. _feedbackConfigured: boolean,
  117. /**
  118. * Whether or not the app is currently in full screen.
  119. */
  120. _fullScreen: boolean,
  121. /**
  122. * Whether or not the profile is disabled.
  123. */
  124. _isProfileDisabled: boolean,
  125. /**
  126. * Whether or not the tile view is enabled.
  127. */
  128. _tileViewEnabled: boolean,
  129. /**
  130. * Whether or not the current meeting belongs to a JaaS user.
  131. */
  132. _isVpaasMeeting: boolean,
  133. /**
  134. * The ID of the local participant.
  135. */
  136. _localParticipantID: String,
  137. /**
  138. * The subsection of Redux state for local recording
  139. */
  140. _localRecState: Object,
  141. /**
  142. * The value for how the conference is locked (or undefined if not locked)
  143. * as defined by room-lock constants.
  144. */
  145. _locked: boolean,
  146. /**
  147. * Whether or not the overflow menu is visible.
  148. */
  149. _overflowMenuVisible: boolean,
  150. /**
  151. * Whether or not the local participant's hand is raised.
  152. */
  153. _raisedHand: boolean,
  154. /**
  155. * Whether or not the local participant is screensharing.
  156. */
  157. _screensharing: boolean,
  158. /**
  159. * Whether or not the local participant is sharing a YouTube video.
  160. */
  161. _sharingVideo: boolean,
  162. /**
  163. * Flag showing whether toolbar is visible.
  164. */
  165. _visible: boolean,
  166. /**
  167. * Set with the buttons which this Toolbox should display.
  168. */
  169. _visibleButtons: Set<string>,
  170. /**
  171. * Invoked to active other features of the app.
  172. */
  173. dispatch: Function,
  174. /**
  175. * Invoked to obtain translated strings.
  176. */
  177. t: Function
  178. };
  179. /**
  180. * The type of the React {@code Component} state of {@link Toolbox}.
  181. */
  182. type State = {
  183. /**
  184. * The width of the browser's window.
  185. */
  186. windowWidth: number
  187. };
  188. declare var APP: Object;
  189. declare var interfaceConfig: Object;
  190. // XXX: We are not currently using state here, but in the future, when
  191. // interfaceConfig is part of redux we will. This will have to be retrieved from the store.
  192. const visibleButtons = new Set(interfaceConfig.TOOLBAR_BUTTONS);
  193. /**
  194. * Implements the conference toolbox on React/Web.
  195. *
  196. * @extends Component
  197. */
  198. class Toolbox extends Component<Props, State> {
  199. /**
  200. * Initializes a new {@code Toolbox} instance.
  201. *
  202. * @param {Props} props - The read-only React {@code Component} props with
  203. * which the new instance is to be initialized.
  204. */
  205. constructor(props: Props) {
  206. super(props);
  207. // Bind event handlers so they are only bound once per instance.
  208. this._onMouseOut = this._onMouseOut.bind(this);
  209. this._onMouseOver = this._onMouseOver.bind(this);
  210. this._onResize = this._onResize.bind(this);
  211. this._onSetOverflowVisible = this._onSetOverflowVisible.bind(this);
  212. this._onTabIn = this._onTabIn.bind(this);
  213. this._onShortcutToggleChat = this._onShortcutToggleChat.bind(this);
  214. this._onShortcutToggleFullScreen = this._onShortcutToggleFullScreen.bind(this);
  215. this._onShortcutToggleRaiseHand = this._onShortcutToggleRaiseHand.bind(this);
  216. this._onShortcutToggleScreenshare = this._onShortcutToggleScreenshare.bind(this);
  217. this._onShortcutToggleVideoQuality = this._onShortcutToggleVideoQuality.bind(this);
  218. this._onToolbarOpenFeedback = this._onToolbarOpenFeedback.bind(this);
  219. this._onToolbarOpenInvite = this._onToolbarOpenInvite.bind(this);
  220. this._onToolbarOpenKeyboardShortcuts = this._onToolbarOpenKeyboardShortcuts.bind(this);
  221. this._onToolbarOpenSpeakerStats = this._onToolbarOpenSpeakerStats.bind(this);
  222. this._onToolbarOpenEmbedMeeting = this._onToolbarOpenEmbedMeeting.bind(this);
  223. this._onToolbarOpenVideoQuality = this._onToolbarOpenVideoQuality.bind(this);
  224. this._onToolbarToggleChat = this._onToolbarToggleChat.bind(this);
  225. this._onToolbarToggleFullScreen = this._onToolbarToggleFullScreen.bind(this);
  226. this._onToolbarToggleProfile = this._onToolbarToggleProfile.bind(this);
  227. this._onToolbarToggleRaiseHand = this._onToolbarToggleRaiseHand.bind(this);
  228. this._onToolbarToggleScreenshare = this._onToolbarToggleScreenshare.bind(this);
  229. this._onToolbarToggleSharedVideo = this._onToolbarToggleSharedVideo.bind(this);
  230. this._onToolbarOpenLocalRecordingInfoDialog = this._onToolbarOpenLocalRecordingInfoDialog.bind(this);
  231. this._onShortcutToggleTileView = this._onShortcutToggleTileView.bind(this);
  232. this.state = {
  233. windowWidth: window.innerWidth
  234. };
  235. }
  236. /**
  237. * Sets keyboard shortcuts for to trigger ToolbarButtons actions.
  238. *
  239. * @inheritdoc
  240. * @returns {void}
  241. */
  242. componentDidMount() {
  243. const KEYBOARD_SHORTCUTS = [
  244. this._shouldShowButton('videoquality') && {
  245. character: 'A',
  246. exec: this._onShortcutToggleVideoQuality,
  247. helpDescription: 'toolbar.callQuality'
  248. },
  249. this._shouldShowButton('chat') && {
  250. character: 'C',
  251. exec: this._onShortcutToggleChat,
  252. helpDescription: 'keyboardShortcuts.toggleChat'
  253. },
  254. this._shouldShowButton('desktop') && {
  255. character: 'D',
  256. exec: this._onShortcutToggleScreenshare,
  257. helpDescription: 'keyboardShortcuts.toggleScreensharing'
  258. },
  259. this._shouldShowButton('raisehand') && {
  260. character: 'R',
  261. exec: this._onShortcutToggleRaiseHand,
  262. helpDescription: 'keyboardShortcuts.raiseHand'
  263. },
  264. this._shouldShowButton('fullscreen') && {
  265. character: 'S',
  266. exec: this._onShortcutToggleFullScreen,
  267. helpDescription: 'keyboardShortcuts.fullScreen'
  268. },
  269. this._shouldShowButton('tileview') && {
  270. character: 'W',
  271. exec: this._onShortcutToggleTileView,
  272. helpDescription: 'toolbar.tileViewToggle'
  273. }
  274. ];
  275. KEYBOARD_SHORTCUTS.forEach(shortcut => {
  276. if (typeof shortcut === 'object') {
  277. APP.keyboardshortcut.registerShortcut(
  278. shortcut.character,
  279. null,
  280. shortcut.exec,
  281. shortcut.helpDescription);
  282. }
  283. });
  284. window.addEventListener('resize', this._onResize);
  285. }
  286. /**
  287. * Update the visibility of the {@code OverflowMenuButton}.
  288. *
  289. * @inheritdoc
  290. */
  291. componentDidUpdate(prevProps) {
  292. // Ensure the dialog is closed when the toolbox becomes hidden.
  293. if (prevProps._overflowMenuVisible && !this.props._visible) {
  294. this._onSetOverflowVisible(false);
  295. }
  296. if (prevProps._overflowMenuVisible
  297. && !prevProps._dialog
  298. && this.props._dialog) {
  299. this._onSetOverflowVisible(false);
  300. this.props.dispatch(setToolbarHovered(false));
  301. }
  302. if (this.props._chatOpen !== prevProps._chatOpen) {
  303. this._onResize();
  304. }
  305. }
  306. /**
  307. * Removes keyboard shortcuts registered by this component.
  308. *
  309. * @inheritdoc
  310. * @returns {void}
  311. */
  312. componentWillUnmount() {
  313. [ 'A', 'C', 'D', 'R', 'S' ].forEach(letter =>
  314. APP.keyboardshortcut.unregisterShortcut(letter));
  315. window.removeEventListener('resize', this._onResize);
  316. }
  317. /**
  318. * Implements React's {@link Component#render()}.
  319. *
  320. * @inheritdoc
  321. * @returns {ReactElement}
  322. */
  323. render() {
  324. const { _chatOpen, _visible, _visibleButtons } = this.props;
  325. const rootClassNames = `new-toolbox ${_visible ? 'visible' : ''} ${
  326. _visibleButtons.size ? '' : 'no-buttons'} ${_chatOpen ? 'shift-right' : ''}`;
  327. return (
  328. <div
  329. className = { rootClassNames }
  330. id = 'new-toolbox'
  331. onFocus = { this._onTabIn }
  332. onMouseOut = { this._onMouseOut }
  333. onMouseOver = { this._onMouseOver }>
  334. <div className = 'toolbox-background' />
  335. { this._renderToolboxContent() }
  336. </div>
  337. );
  338. }
  339. /**
  340. * Callback invoked to display {@code FeedbackDialog}.
  341. *
  342. * @private
  343. * @returns {void}
  344. */
  345. _doOpenFeedback() {
  346. const { _conference } = this.props;
  347. this.props.dispatch(openFeedbackDialog(_conference));
  348. }
  349. /**
  350. * Callback invoked to display {@code FeedbackDialog}.
  351. *
  352. * @private
  353. * @returns {void}
  354. */
  355. _doOpenEmbedMeeting() {
  356. this.props.dispatch(openDialog(EmbedMeetingDialog));
  357. }
  358. /**
  359. * Dispatches an action to display {@code KeyboardShortcuts}.
  360. *
  361. * @private
  362. * @returns {void}
  363. */
  364. _doOpenKeyboardShorcuts() {
  365. this.props.dispatch(openKeyboardShortcutsDialog());
  366. }
  367. /**
  368. * Callback invoked to display {@code SpeakerStats}.
  369. *
  370. * @private
  371. * @returns {void}
  372. */
  373. _doOpenSpeakerStats() {
  374. this.props.dispatch(openDialog(SpeakerStats, {
  375. conference: this.props._conference
  376. }));
  377. }
  378. /**
  379. * Dispatches an action to open the video quality dialog.
  380. *
  381. * @private
  382. * @returns {void}
  383. */
  384. _doOpenVideoQuality() {
  385. this.props.dispatch(openDialog(VideoQualityDialog));
  386. }
  387. /**
  388. * Dispatches an action to toggle the display of chat.
  389. *
  390. * @private
  391. * @returns {void}
  392. */
  393. _doToggleChat() {
  394. this.props.dispatch(toggleChat());
  395. }
  396. /**
  397. * Dispatches an action to toggle screensharing.
  398. *
  399. * @private
  400. * @returns {void}
  401. */
  402. _doToggleFullScreen() {
  403. const fullScreen = !this.props._fullScreen;
  404. this.props.dispatch(setFullScreen(fullScreen));
  405. }
  406. /**
  407. * Dispatches an action to show or hide the profile edit panel.
  408. *
  409. * @private
  410. * @returns {void}
  411. */
  412. _doToggleProfile() {
  413. this.props.dispatch(openSettingsDialog(SETTINGS_TABS.PROFILE));
  414. }
  415. /**
  416. * Dispatches an action to toggle the local participant's raised hand state.
  417. *
  418. * @private
  419. * @returns {void}
  420. */
  421. _doToggleRaiseHand() {
  422. const { _localParticipantID, _raisedHand } = this.props;
  423. const newRaisedStatus = !_raisedHand;
  424. this.props.dispatch(participantUpdated({
  425. // XXX Only the local participant is allowed to update without
  426. // stating the JitsiConference instance (i.e. participant property
  427. // `conference` for a remote participant) because the local
  428. // participant is uniquely identified by the very fact that there is
  429. // only one local participant.
  430. id: _localParticipantID,
  431. local: true,
  432. raisedHand: newRaisedStatus
  433. }));
  434. APP.API.notifyRaiseHandUpdated(_localParticipantID, newRaisedStatus);
  435. }
  436. /**
  437. * Dispatches an action to toggle screensharing.
  438. *
  439. * @private
  440. * @returns {void}
  441. */
  442. _doToggleScreenshare() {
  443. if (this.props._desktopSharingEnabled) {
  444. this.props.dispatch(toggleScreensharing());
  445. }
  446. }
  447. /**
  448. * Dispatches an action to toggle YouTube video sharing.
  449. *
  450. * @private
  451. * @returns {void}
  452. */
  453. _doToggleSharedVideo() {
  454. this.props.dispatch(toggleSharedVideo());
  455. }
  456. /**
  457. * Dispatches an action to toggle the video quality dialog.
  458. *
  459. * @private
  460. * @returns {void}
  461. */
  462. _doToggleVideoQuality() {
  463. this.props.dispatch(toggleDialog(VideoQualityDialog));
  464. }
  465. /**
  466. * Dispaches an action to toggle tile view.
  467. *
  468. * @private
  469. * @returns {void}
  470. */
  471. _doToggleTileView() {
  472. this.props.dispatch(toggleTileView());
  473. }
  474. _onMouseOut: () => void;
  475. /**
  476. * Dispatches an action signaling the toolbar is not being hovered.
  477. *
  478. * @private
  479. * @returns {void}
  480. */
  481. _onMouseOut() {
  482. this.props.dispatch(setToolbarHovered(false));
  483. }
  484. _onMouseOver: () => void;
  485. /**
  486. * Dispatches an action signaling the toolbar is being hovered.
  487. *
  488. * @private
  489. * @returns {void}
  490. */
  491. _onMouseOver() {
  492. this.props.dispatch(setToolbarHovered(true));
  493. }
  494. _onResize: () => void;
  495. /**
  496. * A window resize handler used to calculate the number of buttons we can
  497. * fit in the toolbar.
  498. *
  499. * @private
  500. * @returns {void}
  501. */
  502. _onResize() {
  503. let widthToUse = window.innerWidth;
  504. // Take chat size into account when resizing toolbox.
  505. if (this.props._chatOpen) {
  506. widthToUse -= CHAT_SIZE;
  507. }
  508. if (this.state.windowWidth !== widthToUse) {
  509. this.setState({ windowWidth: widthToUse });
  510. }
  511. }
  512. _onSetOverflowVisible: (boolean) => void;
  513. /**
  514. * Sets the visibility of the overflow menu.
  515. *
  516. * @param {boolean} visible - Whether or not the overflow menu should be
  517. * displayed.
  518. * @private
  519. * @returns {void}
  520. */
  521. _onSetOverflowVisible(visible) {
  522. this.props.dispatch(setOverflowMenuVisible(visible));
  523. }
  524. _onShortcutToggleChat: () => void;
  525. /**
  526. * Creates an analytics keyboard shortcut event and dispatches an action for
  527. * toggling the display of chat.
  528. *
  529. * @private
  530. * @returns {void}
  531. */
  532. _onShortcutToggleChat() {
  533. sendAnalytics(createShortcutEvent(
  534. 'toggle.chat',
  535. {
  536. enable: !this.props._chatOpen
  537. }));
  538. this._doToggleChat();
  539. }
  540. _onShortcutToggleVideoQuality: () => void;
  541. /**
  542. * Creates an analytics keyboard shortcut event and dispatches an action for
  543. * toggling the display of Video Quality.
  544. *
  545. * @private
  546. * @returns {void}
  547. */
  548. _onShortcutToggleVideoQuality() {
  549. sendAnalytics(createShortcutEvent('video.quality'));
  550. this._doToggleVideoQuality();
  551. }
  552. _onShortcutToggleTileView: () => void;
  553. /**
  554. * Dispatches an action for toggling the tile view.
  555. *
  556. * @private
  557. * @returns {void}
  558. */
  559. _onShortcutToggleTileView() {
  560. sendAnalytics(createShortcutEvent(
  561. 'toggle.tileview',
  562. {
  563. enable: !this.props._tileViewEnabled
  564. }));
  565. this._doToggleTileView();
  566. }
  567. _onShortcutToggleFullScreen: () => void;
  568. /**
  569. * Creates an analytics keyboard shortcut event and dispatches an action for
  570. * toggling full screen mode.
  571. *
  572. * @private
  573. * @returns {void}
  574. */
  575. _onShortcutToggleFullScreen() {
  576. sendAnalytics(createShortcutEvent(
  577. 'toggle.fullscreen',
  578. {
  579. enable: !this.props._fullScreen
  580. }));
  581. this._doToggleFullScreen();
  582. }
  583. _onShortcutToggleRaiseHand: () => void;
  584. /**
  585. * Creates an analytics keyboard shortcut event and dispatches an action for
  586. * toggling raise hand.
  587. *
  588. * @private
  589. * @returns {void}
  590. */
  591. _onShortcutToggleRaiseHand() {
  592. sendAnalytics(createShortcutEvent(
  593. 'toggle.raise.hand',
  594. ACTION_SHORTCUT_TRIGGERED,
  595. { enable: !this.props._raisedHand }));
  596. this._doToggleRaiseHand();
  597. }
  598. _onShortcutToggleScreenshare: () => void;
  599. /**
  600. * Creates an analytics keyboard shortcut event and dispatches an action for
  601. * toggling screensharing.
  602. *
  603. * @private
  604. * @returns {void}
  605. */
  606. _onShortcutToggleScreenshare() {
  607. sendAnalytics(createToolbarEvent(
  608. 'screen.sharing',
  609. {
  610. enable: !this.props._screensharing
  611. }));
  612. this._doToggleScreenshare();
  613. }
  614. _onTabIn: () => void;
  615. /**
  616. * Toggle the toolbar visibility when tabbing into it.
  617. *
  618. * @returns {void}
  619. */
  620. _onTabIn() {
  621. if (!this.props._visible) {
  622. this.props.dispatch(setToolboxVisible(true));
  623. }
  624. }
  625. _onToolbarOpenFeedback: () => void;
  626. /**
  627. * Creates an analytics toolbar event and dispatches an action for toggling
  628. * display of feedback.
  629. *
  630. * @private
  631. * @returns {void}
  632. */
  633. _onToolbarOpenFeedback() {
  634. sendAnalytics(createToolbarEvent('feedback'));
  635. this._doOpenFeedback();
  636. }
  637. _onToolbarOpenInvite: () => void;
  638. /**
  639. * Creates an analytics toolbar event and dispatches an action for opening
  640. * the modal for inviting people directly into the conference.
  641. *
  642. * @private
  643. * @returns {void}
  644. */
  645. _onToolbarOpenInvite() {
  646. sendAnalytics(createToolbarEvent('invite'));
  647. this.props.dispatch(beginAddPeople());
  648. }
  649. _onToolbarOpenKeyboardShortcuts: () => void;
  650. /**
  651. * Creates an analytics toolbar event and dispatches an action for opening
  652. * the modal for showing available keyboard shortcuts.
  653. *
  654. * @private
  655. * @returns {void}
  656. */
  657. _onToolbarOpenKeyboardShortcuts() {
  658. sendAnalytics(createToolbarEvent('shortcuts'));
  659. this._doOpenKeyboardShorcuts();
  660. }
  661. _onToolbarOpenEmbedMeeting: () => void;
  662. /**
  663. * Creates an analytics toolbar event and dispatches an action for opening
  664. * the embed meeting modal.
  665. *
  666. * @private
  667. * @returns {void}
  668. */
  669. _onToolbarOpenEmbedMeeting() {
  670. sendAnalytics(createToolbarEvent('embed.meeting'));
  671. this._doOpenEmbedMeeting();
  672. }
  673. _onToolbarOpenSpeakerStats: () => void;
  674. /**
  675. * Creates an analytics toolbar event and dispatches an action for opening
  676. * the speaker stats modal.
  677. *
  678. * @private
  679. * @returns {void}
  680. */
  681. _onToolbarOpenSpeakerStats() {
  682. sendAnalytics(createToolbarEvent('speaker.stats'));
  683. this._doOpenSpeakerStats();
  684. }
  685. _onToolbarOpenVideoQuality: () => void;
  686. /**
  687. * Creates an analytics toolbar event and dispatches an action for toggling
  688. * open the video quality dialog.
  689. *
  690. * @private
  691. * @returns {void}
  692. */
  693. _onToolbarOpenVideoQuality() {
  694. sendAnalytics(createToolbarEvent('video.quality'));
  695. this._doOpenVideoQuality();
  696. }
  697. _onToolbarToggleChat: () => void;
  698. /**
  699. * Creates an analytics toolbar event and dispatches an action for toggling
  700. * the display of chat.
  701. *
  702. * @private
  703. * @returns {void}
  704. */
  705. _onToolbarToggleChat() {
  706. sendAnalytics(createToolbarEvent(
  707. 'toggle.chat',
  708. {
  709. enable: !this.props._chatOpen
  710. }));
  711. this._doToggleChat();
  712. }
  713. _onToolbarToggleFullScreen: () => void;
  714. /**
  715. * Creates an analytics toolbar event and dispatches an action for toggling
  716. * full screen mode.
  717. *
  718. * @private
  719. * @returns {void}
  720. */
  721. _onToolbarToggleFullScreen() {
  722. sendAnalytics(createToolbarEvent(
  723. 'toggle.fullscreen',
  724. {
  725. enable: !this.props._fullScreen
  726. }));
  727. this._doToggleFullScreen();
  728. }
  729. _onToolbarToggleProfile: () => void;
  730. /**
  731. * Creates an analytics toolbar event and dispatches an action for showing
  732. * or hiding the profile edit panel.
  733. *
  734. * @private
  735. * @returns {void}
  736. */
  737. _onToolbarToggleProfile() {
  738. sendAnalytics(createToolbarEvent('profile'));
  739. this._doToggleProfile();
  740. }
  741. _onToolbarToggleRaiseHand: () => void;
  742. /**
  743. * Creates an analytics toolbar event and dispatches an action for toggling
  744. * raise hand.
  745. *
  746. * @private
  747. * @returns {void}
  748. */
  749. _onToolbarToggleRaiseHand() {
  750. sendAnalytics(createToolbarEvent(
  751. 'raise.hand',
  752. { enable: !this.props._raisedHand }));
  753. this._doToggleRaiseHand();
  754. }
  755. _onToolbarToggleScreenshare: () => void;
  756. /**
  757. * Creates an analytics toolbar event and dispatches an action for toggling
  758. * screensharing.
  759. *
  760. * @private
  761. * @returns {void}
  762. */
  763. _onToolbarToggleScreenshare() {
  764. if (!this.props._desktopSharingEnabled) {
  765. return;
  766. }
  767. sendAnalytics(createShortcutEvent(
  768. 'toggle.screen.sharing',
  769. ACTION_SHORTCUT_TRIGGERED,
  770. { enable: !this.props._screensharing }));
  771. this._doToggleScreenshare();
  772. }
  773. _onToolbarToggleSharedVideo: () => void;
  774. /**
  775. * Creates an analytics toolbar event and dispatches an action for toggling
  776. * the sharing of a YouTube video.
  777. *
  778. * @private
  779. * @returns {void}
  780. */
  781. _onToolbarToggleSharedVideo() {
  782. sendAnalytics(createToolbarEvent('shared.video.toggled',
  783. {
  784. enable: !this.props._sharingVideo
  785. }));
  786. this._doToggleSharedVideo();
  787. }
  788. _onToolbarOpenLocalRecordingInfoDialog: () => void;
  789. /**
  790. * Opens the {@code LocalRecordingInfoDialog}.
  791. *
  792. * @private
  793. * @returns {void}
  794. */
  795. _onToolbarOpenLocalRecordingInfoDialog() {
  796. sendAnalytics(createToolbarEvent('local.recording'));
  797. this.props.dispatch(openDialog(LocalRecordingInfoDialog));
  798. }
  799. /**
  800. * Returns true if the the desktop sharing button should be visible and
  801. * false otherwise.
  802. *
  803. * @returns {boolean}
  804. */
  805. _isDesktopSharingButtonVisible() {
  806. const {
  807. _desktopSharingEnabled,
  808. _desktopSharingDisabledTooltipKey
  809. } = this.props;
  810. return _desktopSharingEnabled || _desktopSharingDisabledTooltipKey;
  811. }
  812. /**
  813. * Renders a button for toggleing screen sharing.
  814. *
  815. * @private
  816. * @param {boolean} isInOverflowMenu - True if the button is moved to the
  817. * overflow menu.
  818. * @returns {ReactElement|null}
  819. */
  820. _renderDesktopSharingButton(isInOverflowMenu = false) {
  821. const {
  822. _desktopSharingEnabled,
  823. _desktopSharingDisabledTooltipKey,
  824. _screensharing,
  825. t
  826. } = this.props;
  827. if (!this._isDesktopSharingButtonVisible()) {
  828. return null;
  829. }
  830. if (isInOverflowMenu) {
  831. return (
  832. <OverflowMenuItem
  833. accessibilityLabel
  834. = { t('toolbar.accessibilityLabel.shareYourScreen') }
  835. disabled = { _desktopSharingEnabled }
  836. icon = { IconShareDesktop }
  837. iconId = 'share-desktop'
  838. key = 'desktop'
  839. onClick = { this._onToolbarToggleScreenshare }
  840. text = {
  841. t(`toolbar.${
  842. _screensharing
  843. ? 'stopScreenSharing' : 'startScreenSharing'}`
  844. )
  845. } />
  846. );
  847. }
  848. const tooltip = t(
  849. _desktopSharingEnabled
  850. ? 'dialog.shareYourScreen' : _desktopSharingDisabledTooltipKey);
  851. return (
  852. <ToolbarButton
  853. accessibilityLabel
  854. = { t('toolbar.accessibilityLabel.shareYourScreen') }
  855. disabled = { !_desktopSharingEnabled }
  856. icon = { IconShareDesktop }
  857. onClick = { this._onToolbarToggleScreenshare }
  858. toggled = { _screensharing }
  859. tooltip = { tooltip } />
  860. );
  861. }
  862. /**
  863. * Returns true if the profile button is visible and false otherwise.
  864. *
  865. * @returns {boolean}
  866. */
  867. _isEmbedMeetingVisible() {
  868. return !this.props._isVpaasMeeting && this._shouldShowButton('embedmeeting');
  869. }
  870. /**
  871. * Returns true if the profile button is visible and false otherwise.
  872. *
  873. * @returns {boolean}
  874. */
  875. _isProfileVisible() {
  876. return !this.props._isProfileDisabled && this._shouldShowButton('profile');
  877. }
  878. /**
  879. * Renders the list elements of the overflow menu.
  880. *
  881. * @private
  882. * @returns {Array<ReactElement>}
  883. */
  884. _renderOverflowMenuContent() {
  885. const {
  886. _feedbackConfigured,
  887. _fullScreen,
  888. _screensharing,
  889. _sharingVideo,
  890. t
  891. } = this.props;
  892. return [
  893. this._isProfileVisible()
  894. && <OverflowMenuProfileItem
  895. key = 'profile'
  896. onClick = { this._onToolbarToggleProfile } />,
  897. this._shouldShowButton('videoquality')
  898. && <OverflowMenuVideoQualityItem
  899. key = 'videoquality'
  900. onClick = { this._onToolbarOpenVideoQuality } />,
  901. this._shouldShowButton('fullscreen')
  902. && <OverflowMenuItem
  903. accessibilityLabel = { t('toolbar.accessibilityLabel.fullScreen') }
  904. icon = { _fullScreen ? IconExitFullScreen : IconFullScreen }
  905. key = 'fullscreen'
  906. onClick = { this._onToolbarToggleFullScreen }
  907. text = { _fullScreen ? t('toolbar.exitFullScreen') : t('toolbar.enterFullScreen') } />,
  908. this._shouldShowButton('livestreaming')
  909. && <LiveStreamButton
  910. key = 'livestreaming'
  911. showLabel = { true } />,
  912. this._shouldShowButton('recording')
  913. && <RecordButton
  914. key = 'record'
  915. showLabel = { true } />,
  916. this._shouldShowButton('sharedvideo')
  917. && <OverflowMenuItem
  918. accessibilityLabel = { t('toolbar.accessibilityLabel.sharedvideo') }
  919. icon = { IconShareVideo }
  920. key = 'sharedvideo'
  921. onClick = { this._onToolbarToggleSharedVideo }
  922. text = { _sharingVideo ? t('toolbar.stopSharedVideo') : t('toolbar.sharedvideo') } />,
  923. this._shouldShowButton('etherpad')
  924. && <SharedDocumentButton
  925. key = 'etherpad'
  926. showLabel = { true } />,
  927. this._shouldShowButton('videobackgroundblur')
  928. && <VideoBlurButton
  929. key = 'videobackgroundblur'
  930. showLabel = { true }
  931. visible = { !_screensharing && wasmCheck.feature.simd } />,
  932. this._shouldShowButton('settings')
  933. && <SettingsButton
  934. key = 'settings'
  935. showLabel = { true } />,
  936. this._shouldShowButton('mute-everyone')
  937. && <MuteEveryoneButton
  938. key = 'mute-everyone'
  939. showLabel = { true } />,
  940. this._shouldShowButton('stats')
  941. && <OverflowMenuItem
  942. accessibilityLabel = { t('toolbar.accessibilityLabel.speakerStats') }
  943. icon = { IconPresentation }
  944. key = 'stats'
  945. onClick = { this._onToolbarOpenSpeakerStats }
  946. text = { t('toolbar.speakerStats') } />,
  947. this._isEmbedMeetingVisible()
  948. && <OverflowMenuItem
  949. accessibilityLabel = { t('toolbar.accessibilityLabel.embedMeeting') }
  950. icon = { IconCodeBlock }
  951. key = 'embed'
  952. onClick = { this._onToolbarOpenEmbedMeeting }
  953. text = { t('toolbar.embedMeeting') } />,
  954. this._shouldShowButton('feedback')
  955. && _feedbackConfigured
  956. && <OverflowMenuItem
  957. accessibilityLabel = { t('toolbar.accessibilityLabel.feedback') }
  958. icon = { IconFeedback }
  959. key = 'feedback'
  960. onClick = { this._onToolbarOpenFeedback }
  961. text = { t('toolbar.feedback') } />,
  962. this._shouldShowButton('shortcuts')
  963. && <OverflowMenuItem
  964. accessibilityLabel = { t('toolbar.accessibilityLabel.shortcuts') }
  965. icon = { IconOpenInNew }
  966. key = 'shortcuts'
  967. onClick = { this._onToolbarOpenKeyboardShortcuts }
  968. text = { t('toolbar.shortcuts') } />,
  969. this._shouldShowButton('download')
  970. && <DownloadButton
  971. key = 'download'
  972. showLabel = { true } />,
  973. this._shouldShowButton('help')
  974. && <HelpButton
  975. key = 'help'
  976. showLabel = { true } />
  977. ];
  978. }
  979. /**
  980. * Renders a list of buttons that are moved to the overflow menu.
  981. *
  982. * @private
  983. * @param {Array<string>} movedButtons - The names of the buttons to be
  984. * moved.
  985. * @returns {Array<ReactElement>}
  986. */
  987. _renderMovedButtons(movedButtons) {
  988. const {
  989. _chatOpen,
  990. _raisedHand,
  991. t
  992. } = this.props;
  993. return movedButtons.map(buttonName => {
  994. switch (buttonName) {
  995. case 'desktop':
  996. return this._renderDesktopSharingButton(true);
  997. case 'raisehand':
  998. return (
  999. <OverflowMenuItem
  1000. accessibilityLabel =
  1001. { t('toolbar.accessibilityLabel.raiseHand') }
  1002. icon = { IconRaisedHand }
  1003. key = 'raisedHand'
  1004. onClick = { this._onToolbarToggleRaiseHand }
  1005. text = {
  1006. t(`toolbar.${
  1007. _raisedHand
  1008. ? 'lowerYourHand' : 'raiseYourHand'}`
  1009. )
  1010. } />
  1011. );
  1012. case 'chat':
  1013. return (
  1014. <OverflowMenuItem
  1015. accessibilityLabel =
  1016. { t('toolbar.accessibilityLabel.chat') }
  1017. icon = { IconChat }
  1018. key = 'chat'
  1019. onClick = { this._onToolbarToggleChat }
  1020. text = {
  1021. t(`toolbar.${
  1022. _chatOpen ? 'closeChat' : 'openChat'}`
  1023. )
  1024. } />
  1025. );
  1026. case 'closedcaptions':
  1027. return (
  1028. <ClosedCaptionButton
  1029. key = 'closed-captions'
  1030. showLabel = { true } />
  1031. );
  1032. case 'security':
  1033. return (
  1034. <SecurityDialogButton
  1035. key = 'security'
  1036. showLabel = { true } />
  1037. );
  1038. case 'invite':
  1039. return (
  1040. <OverflowMenuItem
  1041. accessibilityLabel = { t('toolbar.accessibilityLabel.invite') }
  1042. icon = { IconInviteMore }
  1043. key = 'invite'
  1044. onClick = { this._onToolbarOpenInvite }
  1045. text = { t('toolbar.invite') } />
  1046. );
  1047. case 'tileview':
  1048. return <TileViewButton showLabel = { true } />;
  1049. case 'localrecording':
  1050. return (
  1051. <OverflowMenuItem
  1052. accessibilityLabel = { t('toolbar.accessibilityLabel.localRecording') }
  1053. icon = { IconRec }
  1054. key = 'localrecording'
  1055. onClick = { this._onToolbarOpenLocalRecordingInfoDialog }
  1056. text = { t('localRecording.dialogTitle') } />
  1057. );
  1058. default:
  1059. return null;
  1060. }
  1061. });
  1062. }
  1063. /**
  1064. * Renders the Audio controlling button.
  1065. *
  1066. * @returns {ReactElement}
  1067. */
  1068. _renderAudioButton() {
  1069. return this._shouldShowButton('microphone')
  1070. ? <AudioSettingsButton
  1071. key = 'asb'
  1072. visible = { true } />
  1073. : null;
  1074. }
  1075. /**
  1076. * Renders the Video controlling button.
  1077. *
  1078. * @returns {ReactElement}
  1079. */
  1080. _renderVideoButton() {
  1081. return this._shouldShowButton('camera')
  1082. ? <VideoSettingsButton
  1083. key = 'vsb'
  1084. visible = { true } />
  1085. : null;
  1086. }
  1087. /**
  1088. * Renders the toolbox content.
  1089. *
  1090. * @returns {Array<ReactElement>}
  1091. */
  1092. _renderToolboxContent() {
  1093. const {
  1094. _chatOpen,
  1095. _overflowMenuVisible,
  1096. _raisedHand,
  1097. t
  1098. } = this.props;
  1099. const overflowMenuContent = this._renderOverflowMenuContent();
  1100. const overflowHasItems = overflowMenuContent.some(item => Boolean(item));
  1101. const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
  1102. const buttonsLeft = [];
  1103. const buttonsRight = [];
  1104. const smallThreshold = 700;
  1105. const verySmallThreshold = 500;
  1106. let minSpaceBetweenButtons = 48;
  1107. let widthPlusPaddingOfButton = 56;
  1108. if (this.state.windowWidth <= verySmallThreshold && !isMobileBrowser()) {
  1109. minSpaceBetweenButtons = 26;
  1110. widthPlusPaddingOfButton = 28;
  1111. } else if (this.state.windowWidth <= smallThreshold && !isMobileBrowser()) {
  1112. minSpaceBetweenButtons = 36;
  1113. widthPlusPaddingOfButton = 40;
  1114. }
  1115. const maxNumberOfButtonsPerGroup = Math.floor(
  1116. (
  1117. this.state.windowWidth
  1118. - 168 // the width of the central group by design
  1119. - minSpaceBetweenButtons // the minimum space between the button groups
  1120. )
  1121. / widthPlusPaddingOfButton // the width + padding of a button
  1122. / 2 // divide by the number of groups(left and right group)
  1123. );
  1124. if (this._shouldShowButton('chat')) {
  1125. buttonsLeft.push('chat');
  1126. }
  1127. if (this._shouldShowButton('desktop')
  1128. && this._isDesktopSharingButtonVisible()) {
  1129. buttonsLeft.push('desktop');
  1130. }
  1131. if (this._shouldShowButton('raisehand')) {
  1132. buttonsLeft.push('raisehand');
  1133. }
  1134. if (this._shouldShowButton('closedcaptions')) {
  1135. buttonsLeft.push('closedcaptions');
  1136. }
  1137. if (overflowHasItems) {
  1138. buttonsRight.push('overflowmenu');
  1139. }
  1140. if (this._shouldShowButton('invite')) {
  1141. buttonsRight.push('invite');
  1142. }
  1143. if (this._shouldShowButton('security') || this._shouldShowButton('info')) {
  1144. buttonsRight.push('security');
  1145. }
  1146. if (this._shouldShowButton('tileview')) {
  1147. buttonsRight.push('tileview');
  1148. }
  1149. if (this._shouldShowButton('localrecording')) {
  1150. buttonsRight.push('localrecording');
  1151. }
  1152. const movedButtons = [];
  1153. if (buttonsLeft.length > maxNumberOfButtonsPerGroup) {
  1154. movedButtons.push(...buttonsLeft.splice(
  1155. maxNumberOfButtonsPerGroup,
  1156. buttonsLeft.length - maxNumberOfButtonsPerGroup));
  1157. if (buttonsRight.indexOf('overflowmenu') === -1) {
  1158. buttonsRight.unshift('overflowmenu');
  1159. }
  1160. }
  1161. if (buttonsRight.length > maxNumberOfButtonsPerGroup) {
  1162. if (buttonsRight.indexOf('overflowmenu') === -1) {
  1163. buttonsRight.unshift('overflowmenu');
  1164. }
  1165. let numberOfButtons = maxNumberOfButtonsPerGroup;
  1166. // make sure the more button will be displayed when we move buttons.
  1167. if (numberOfButtons === 0) {
  1168. numberOfButtons++;
  1169. }
  1170. movedButtons.push(...buttonsRight.splice(
  1171. numberOfButtons,
  1172. buttonsRight.length - numberOfButtons));
  1173. }
  1174. overflowMenuContent.splice(
  1175. 1, 0, ...this._renderMovedButtons(movedButtons));
  1176. return (
  1177. <div className = 'toolbox-content'>
  1178. <div className = 'button-group-left'>
  1179. { buttonsLeft.indexOf('chat') !== -1
  1180. && <div className = 'toolbar-button-with-badge'>
  1181. <ToolbarButton
  1182. accessibilityLabel = { t('toolbar.accessibilityLabel.chat') }
  1183. icon = { IconChat }
  1184. onClick = { this._onToolbarToggleChat }
  1185. toggled = { _chatOpen }
  1186. tooltip = { t('toolbar.chat') } />
  1187. <ChatCounter />
  1188. </div> }
  1189. { buttonsLeft.indexOf('desktop') !== -1
  1190. && this._renderDesktopSharingButton() }
  1191. { buttonsLeft.indexOf('raisehand') !== -1
  1192. && <ToolbarButton
  1193. accessibilityLabel = { t('toolbar.accessibilityLabel.raiseHand') }
  1194. icon = { IconRaisedHand }
  1195. onClick = { this._onToolbarToggleRaiseHand }
  1196. toggled = { _raisedHand }
  1197. tooltip = { t('toolbar.raiseHand') } /> }
  1198. {
  1199. buttonsLeft.indexOf('closedcaptions') !== -1
  1200. && <ClosedCaptionButton />
  1201. }
  1202. </div>
  1203. <div className = 'button-group-center'>
  1204. { this._renderAudioButton() }
  1205. <HangupButton
  1206. visible = { this._shouldShowButton('hangup') } />
  1207. { this._renderVideoButton() }
  1208. </div>
  1209. <div className = 'button-group-right'>
  1210. { buttonsRight.indexOf('localrecording') !== -1
  1211. && <LocalRecordingButton
  1212. onClick = {
  1213. this._onToolbarOpenLocalRecordingInfoDialog
  1214. } />
  1215. }
  1216. { buttonsRight.indexOf('tileview') !== -1
  1217. && <TileViewButton /> }
  1218. { buttonsRight.indexOf('invite') !== -1
  1219. && <ToolbarButton
  1220. accessibilityLabel =
  1221. { t('toolbar.accessibilityLabel.invite') }
  1222. icon = { IconInviteMore }
  1223. onClick = { this._onToolbarOpenInvite }
  1224. tooltip = { t('toolbar.invite') } /> }
  1225. { buttonsRight.indexOf('security') !== -1
  1226. && <SecurityDialogButton customClass = 'security-toolbar-button' /> }
  1227. { buttonsRight.indexOf('overflowmenu') !== -1
  1228. && <OverflowMenuButton
  1229. isOpen = { _overflowMenuVisible }
  1230. onVisibilityChange = { this._onSetOverflowVisible }>
  1231. <ul
  1232. aria-label = { t(toolbarAccLabel) }
  1233. className = 'overflow-menu'>
  1234. { overflowMenuContent }
  1235. </ul>
  1236. </OverflowMenuButton> }
  1237. </div>
  1238. </div>);
  1239. }
  1240. _shouldShowButton: (string) => boolean;
  1241. /**
  1242. * Returns if a button name has been explicitly configured to be displayed.
  1243. *
  1244. * @param {string} buttonName - The name of the button, as expected in
  1245. * {@link interfaceConfig}.
  1246. * @private
  1247. * @returns {boolean} True if the button should be displayed.
  1248. */
  1249. _shouldShowButton(buttonName) {
  1250. return this.props._visibleButtons.has(buttonName);
  1251. }
  1252. }
  1253. /**
  1254. * Maps (parts of) the redux state to {@link Toolbox}'s React {@code Component}
  1255. * props.
  1256. *
  1257. * @param {Object} state - The redux store/state.
  1258. * @private
  1259. * @returns {{}}
  1260. */
  1261. function _mapStateToProps(state) {
  1262. const { conference, locked } = state['features/base/conference'];
  1263. let desktopSharingEnabled = JitsiMeetJS.isDesktopSharingEnabled();
  1264. const {
  1265. callStatsID,
  1266. enableFeaturesBasedOnToken
  1267. } = state['features/base/config'];
  1268. const sharedVideoStatus = state['features/shared-video'].status;
  1269. const {
  1270. fullScreen,
  1271. overflowMenuVisible
  1272. } = state['features/toolbox'];
  1273. const localParticipant = getLocalParticipant(state);
  1274. const localRecordingStates = state['features/local-recording'];
  1275. const localVideo = getLocalVideoTrack(state['features/base/tracks']);
  1276. let desktopSharingDisabledTooltipKey;
  1277. if (enableFeaturesBasedOnToken) {
  1278. // we enable desktop sharing if any participant already have this
  1279. // feature enabled
  1280. desktopSharingEnabled = getParticipants(state)
  1281. .find(({ features = {} }) =>
  1282. String(features['screen-sharing']) === 'true') !== undefined;
  1283. desktopSharingDisabledTooltipKey = 'dialog.shareYourScreenDisabled';
  1284. }
  1285. // NB: We compute the buttons again here because if URL parameters were used to
  1286. // override them we'd miss it.
  1287. const buttons = new Set(interfaceConfig.TOOLBAR_BUTTONS);
  1288. return {
  1289. _chatOpen: state['features/chat'].isOpen,
  1290. _conference: conference,
  1291. _desktopSharingEnabled: desktopSharingEnabled,
  1292. _desktopSharingDisabledTooltipKey: desktopSharingDisabledTooltipKey,
  1293. _dialog: Boolean(state['features/base/dialog'].component),
  1294. _feedbackConfigured: Boolean(callStatsID),
  1295. _isProfileDisabled: Boolean(state['features/base/config'].disableProfile),
  1296. _isVpaasMeeting: isVpaasMeeting(state),
  1297. _fullScreen: fullScreen,
  1298. _tileViewEnabled: shouldDisplayTileView(state),
  1299. _localParticipantID: localParticipant.id,
  1300. _localRecState: localRecordingStates,
  1301. _locked: locked,
  1302. _overflowMenuVisible: overflowMenuVisible,
  1303. _raisedHand: localParticipant.raisedHand,
  1304. _screensharing: localVideo && localVideo.videoType === 'desktop',
  1305. _sharingVideo: sharedVideoStatus === 'playing'
  1306. || sharedVideoStatus === 'start'
  1307. || sharedVideoStatus === 'pause',
  1308. _visible: isToolboxVisible(state),
  1309. _visibleButtons: equals(visibleButtons, buttons) ? visibleButtons : buttons
  1310. };
  1311. }
  1312. export default translate(connect(_mapStateToProps)(Toolbox));