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.

AbstractChat.js 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. // @flow
  2. import { Component } from 'react';
  3. import type { Dispatch } from 'redux';
  4. import { getLocalParticipant } from '../../base/participants';
  5. import { sendMessage, setIsPollsTabFocused } from '../actions';
  6. import { SMALL_WIDTH_THRESHOLD } from '../constants';
  7. /**
  8. * The type of the React {@code Component} props of {@code AbstractChat}.
  9. */
  10. export type Props = {
  11. /**
  12. * Whether the chat is opened in a modal or not (computed based on window width).
  13. */
  14. _isModal: boolean,
  15. /**
  16. * True if the chat window should be rendered.
  17. */
  18. _isOpen: boolean,
  19. /**
  20. * True if the polls feature is enabled.
  21. */
  22. _isPollsEnabled: boolean,
  23. /**
  24. * Whether the poll tab is focused or not.
  25. */
  26. _isPollsTabFocused: boolean,
  27. /**
  28. * All the chat messages in the conference.
  29. */
  30. _messages: Array<Object>,
  31. /**
  32. * Number of unread chat messages.
  33. */
  34. _nbUnreadMessages: number,
  35. /**
  36. * Number of unread poll messages.
  37. */
  38. _nbUnreadPolls: number,
  39. /**
  40. * Function to send a text message.
  41. *
  42. * @protected
  43. */
  44. _onSendMessage: Function,
  45. /**
  46. * Function to display the chat tab.
  47. *
  48. * @protected
  49. */
  50. _onToggleChatTab: Function,
  51. /**
  52. * Function to display the polls tab.
  53. *
  54. * @protected
  55. */
  56. _onTogglePollsTab: Function,
  57. /**
  58. * Function to toggle the chat window.
  59. */
  60. _onToggleChat: Function,
  61. /**
  62. * Whether or not to block chat access with a nickname input form.
  63. */
  64. _showNamePrompt: boolean,
  65. /**
  66. * The Redux dispatch function.
  67. */
  68. dispatch: Dispatch<any>,
  69. /**
  70. * Function to be used to translate i18n labels.
  71. */
  72. t: Function,
  73. };
  74. /**
  75. * Implements an abstract chat panel.
  76. */
  77. export default class AbstractChat<P: Props> extends Component<P> {
  78. /**
  79. * Initializes a new {@code AbstractChat} instance.
  80. *
  81. * @param {Props} props - The React {@code Component} props to initialize
  82. * the new {@code AbstractChat} instance with.
  83. */
  84. constructor(props: P) {
  85. super(props);
  86. // Bind event handlers so they are only bound once per instance.
  87. this._onSendMessage = this._onSendMessage.bind(this);
  88. this._onToggleChatTab = this._onToggleChatTab.bind(this);
  89. this._onTogglePollsTab = this._onTogglePollsTab.bind(this);
  90. }
  91. _onSendMessage: (string) => void;
  92. /**
  93. * Sends a text message.
  94. *
  95. * @private
  96. * @param {string} text - The text message to be sent.
  97. * @returns {void}
  98. * @type {Function}
  99. */
  100. _onSendMessage(text: string) {
  101. this.props.dispatch(sendMessage(text));
  102. }
  103. _onToggleChatTab: () => void;
  104. /**
  105. * Display the Chat tab.
  106. *
  107. * @private
  108. * @returns {void}
  109. */
  110. _onToggleChatTab() {
  111. this.props.dispatch(setIsPollsTabFocused(false));
  112. }
  113. _onTogglePollsTab: () => void;
  114. /**
  115. * Display the Polls tab.
  116. *
  117. * @private
  118. * @returns {void}
  119. */
  120. _onTogglePollsTab() {
  121. this.props.dispatch(setIsPollsTabFocused(true));
  122. }
  123. }
  124. /**
  125. * Maps (parts of) the redux state to {@link Chat} React {@code Component}
  126. * props.
  127. *
  128. * @param {Object} state - The redux store/state.
  129. * @private
  130. * @returns {{
  131. * _isOpen: boolean,
  132. * _messages: Array<Object>,
  133. * _showNamePrompt: boolean
  134. * }}
  135. */
  136. export function _mapStateToProps(state: Object) {
  137. const { isOpen, isPollsTabFocused, messages, nbUnreadMessages } = state['features/chat'];
  138. const { nbUnreadPolls } = state['features/polls'];
  139. const _localParticipant = getLocalParticipant(state);
  140. const { disablePolls } = state['features/base/config'];
  141. return {
  142. _isModal: window.innerWidth <= SMALL_WIDTH_THRESHOLD,
  143. _isOpen: isOpen,
  144. _isPollsEnabled: !disablePolls,
  145. _isPollsTabFocused: isPollsTabFocused,
  146. _messages: messages,
  147. _nbUnreadMessages: nbUnreadMessages,
  148. _nbUnreadPolls: nbUnreadPolls,
  149. _showNamePrompt: !_localParticipant?.name
  150. };
  151. }