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.

AbstractClosedCaptionButton.js 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. // @flow
  2. import { createToolbarEvent, sendAnalytics } from '../../analytics';
  3. import { isLocalParticipantModerator } from '../../base/participants';
  4. import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
  5. import { toggleRequestingSubtitles } from '../actions';
  6. export type AbstractProps = AbstractButtonProps & {
  7. /**
  8. * Invoked to obtain translated strings.
  9. */
  10. t: Function,
  11. /**
  12. * Invoked to Dispatch an Action to the redux store.
  13. */
  14. dispatch: Function,
  15. /**
  16. * Whether the local participant is currently requesting subtitles.
  17. */
  18. _requestingSubtitles: Boolean
  19. };
  20. /**
  21. * The button component which starts/stops the transcription.
  22. */
  23. export class AbstractClosedCaptionButton
  24. extends AbstractButton<AbstractProps, *> {
  25. /**
  26. * Handles clicking / pressing the button.
  27. *
  28. * @override
  29. * @protected
  30. * @returns {void}
  31. */
  32. _handleClick() {
  33. const { _requestingSubtitles, dispatch } = this.props;
  34. sendAnalytics(createToolbarEvent('transcribing.ccButton',
  35. {
  36. 'requesting_subtitles': Boolean(_requestingSubtitles)
  37. }));
  38. dispatch(toggleRequestingSubtitles());
  39. }
  40. /**
  41. * Indicates whether this button is disabled or not.
  42. *
  43. * @override
  44. * @protected
  45. * @returns {boolean}
  46. */
  47. _isDisabled() {
  48. return false;
  49. }
  50. /**
  51. * Indicates whether this button is in toggled state or not.
  52. *
  53. * @override
  54. * @protected
  55. * @returns {boolean}
  56. */
  57. _isToggled() {
  58. return this.props._requestingSubtitles;
  59. }
  60. }
  61. /**
  62. * Maps (parts of) the redux state to the associated props for the
  63. * {@code AbstractClosedCaptionButton} component.
  64. *
  65. * @param {Object} state - The redux state.
  66. * @param {Object} ownProps - The properties explicitly passed to the component
  67. * instance.
  68. * @private
  69. * @returns {{
  70. * _requestingSubtitles: boolean,
  71. * visible: boolean
  72. * }}
  73. */
  74. export function _abstractMapStateToProps(state: Object, ownProps: Object) {
  75. const { _requestingSubtitles } = state['features/subtitles'];
  76. const { transcribingEnabled } = state['features/base/config'];
  77. const { isTranscribing } = state['features/transcribing'];
  78. // if the participant is moderator, it can enable transcriptions and if
  79. // transcriptions are already started for the meeting, guests can just show them
  80. const { visible = Boolean(transcribingEnabled
  81. && (isLocalParticipantModerator(state) || isTranscribing)) } = ownProps;
  82. return {
  83. _requestingSubtitles,
  84. visible
  85. };
  86. }