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.

AbstractLiveStreamButton.js 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. // @flow
  2. import { openDialog } from '../../../base/dialog';
  3. import { IconLiveStreaming } from '../../../base/icons';
  4. import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
  5. import {
  6. getLocalParticipant,
  7. isLocalParticipantModerator
  8. } from '../../../base/participants';
  9. import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
  10. import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
  11. import { FEATURES } from '../../../jaas/constants';
  12. import { getActiveSession } from '../../functions';
  13. import {
  14. StartLiveStreamDialog,
  15. StopLiveStreamDialog
  16. } from './_';
  17. /**
  18. * The type of the React {@code Component} props of
  19. * {@link AbstractLiveStreamButton}.
  20. */
  21. export type Props = AbstractButtonProps & {
  22. /**
  23. * True if there is a running active live stream, false otherwise.
  24. */
  25. _isLiveStreamRunning: boolean,
  26. /**
  27. * True if the button needs to be disabled.
  28. */
  29. _disabled: Boolean,
  30. /**
  31. * The tooltip to display when hovering over the button.
  32. */
  33. _tooltip: ?String,
  34. /**
  35. * The redux {@code dispatch} function.
  36. */
  37. dispatch: Function,
  38. /**
  39. * The i18n translate function.
  40. */
  41. t: Function
  42. };
  43. /**
  44. * An abstract class of a button for starting and stopping live streaming.
  45. */
  46. export default class AbstractLiveStreamButton<P: Props> extends AbstractButton<P, *> {
  47. accessibilityLabel = 'dialog.accessibilityLabel.liveStreaming';
  48. icon = IconLiveStreaming;
  49. label = 'dialog.startLiveStreaming';
  50. toggledLabel = 'dialog.stopLiveStreaming';
  51. /**
  52. * Returns the tooltip that should be displayed when the button is disabled.
  53. *
  54. * @private
  55. * @returns {string}
  56. */
  57. _getTooltip() {
  58. return this.props._tooltip || '';
  59. }
  60. /**
  61. * Handles clicking / pressing the button.
  62. *
  63. * @override
  64. * @protected
  65. * @returns {void}
  66. */
  67. async _handleClick() {
  68. const { _isLiveStreamRunning, dispatch } = this.props;
  69. const dialogShown = await dispatch(maybeShowPremiumFeatureDialog(FEATURES.RECORDING));
  70. if (!dialogShown) {
  71. dispatch(openDialog(
  72. _isLiveStreamRunning ? StopLiveStreamDialog : StartLiveStreamDialog
  73. ));
  74. }
  75. }
  76. /**
  77. * Returns a boolean value indicating if this button is disabled or not.
  78. *
  79. * @protected
  80. * @returns {boolean}
  81. */
  82. _isDisabled() {
  83. return this.props._disabled;
  84. }
  85. /**
  86. * Indicates whether this button is in toggled state or not.
  87. *
  88. * @override
  89. * @protected
  90. * @returns {boolean}
  91. */
  92. _isToggled() {
  93. return this.props._isLiveStreamRunning;
  94. }
  95. }
  96. /**
  97. * Maps (parts of) the redux state to the associated props for the
  98. * {@code AbstractLiveStreamButton} component.
  99. *
  100. * @param {Object} state - The Redux state.
  101. * @param {Props} ownProps - The own props of the Component.
  102. * @private
  103. * @returns {{
  104. * _disabled: boolean,
  105. * _isLiveStreamRunning: boolean,
  106. * visible: boolean
  107. * }}
  108. */
  109. export function _mapStateToProps(state: Object, ownProps: Props) {
  110. let { visible } = ownProps;
  111. // A button can be disabled/enabled only if enableFeaturesBasedOnToken
  112. // is on or if the recording is running.
  113. let _disabled;
  114. let _tooltip = '';
  115. if (typeof visible === 'undefined') {
  116. // If the containing component provides the visible prop, that is one
  117. // above all, but if not, the button should be autonomus and decide on
  118. // its own to be visible or not.
  119. const isModerator = isLocalParticipantModerator(state);
  120. const {
  121. enableFeaturesBasedOnToken,
  122. liveStreamingEnabled
  123. } = state['features/base/config'];
  124. const { features = {} } = getLocalParticipant(state);
  125. visible = isModerator && liveStreamingEnabled;
  126. if (enableFeaturesBasedOnToken) {
  127. visible = visible && String(features.livestreaming) === 'true';
  128. _disabled = String(features.livestreaming) === 'disabled';
  129. if (!visible && !_disabled) {
  130. _disabled = true;
  131. visible = true;
  132. _tooltip = 'dialog.liveStreamingDisabledTooltip';
  133. }
  134. }
  135. }
  136. // disable the button if the recording is running.
  137. if (getActiveSession(state, JitsiRecordingConstants.mode.FILE)) {
  138. _disabled = true;
  139. _tooltip = 'dialog.liveStreamingDisabledBecauseOfActiveRecordingTooltip';
  140. }
  141. return {
  142. _disabled,
  143. _isLiveStreamRunning: Boolean(
  144. getActiveSession(state, JitsiRecordingConstants.mode.STREAM)),
  145. _tooltip,
  146. visible
  147. };
  148. }