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.5KB

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