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.

middleware.ts 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565
  1. import { AnyAction } from 'redux';
  2. import { IReduxState, IStore } from '../app/types';
  3. import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app/actionTypes';
  4. import { CONFERENCE_JOINED } from '../base/conference/actionTypes';
  5. import { getCurrentConference } from '../base/conference/functions';
  6. import { IJitsiConference } from '../base/conference/reducer';
  7. import { openDialog } from '../base/dialog/actions';
  8. import i18next from '../base/i18n/i18next';
  9. import {
  10. JitsiConferenceErrors,
  11. JitsiConferenceEvents
  12. } from '../base/lib-jitsi-meet';
  13. import {
  14. getLocalParticipant,
  15. getParticipantById,
  16. getParticipantDisplayName
  17. } from '../base/participants/functions';
  18. import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
  19. import StateListenerRegistry from '../base/redux/StateListenerRegistry';
  20. import { playSound, registerSound, unregisterSound } from '../base/sounds/actions';
  21. import { addGif } from '../gifs/actions';
  22. import { GIF_PREFIX } from '../gifs/constants';
  23. import { getGifDisplayMode, isGifMessage } from '../gifs/function.any';
  24. import { showMessageNotification } from '../notifications/actions';
  25. import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
  26. import { resetNbUnreadPollsMessages } from '../polls/actions';
  27. import { ADD_REACTION_MESSAGE } from '../reactions/actionTypes';
  28. import { pushReactions } from '../reactions/actions.any';
  29. import { ENDPOINT_REACTION_NAME } from '../reactions/constants';
  30. import { getReactionMessageFromBuffer, isReactionsEnabled } from '../reactions/functions.any';
  31. import { endpointMessageReceived } from '../subtitles/actions.any';
  32. import { showToolbox } from '../toolbox/actions';
  33. import { ADD_MESSAGE, CLOSE_CHAT, OPEN_CHAT, SEND_MESSAGE, SET_IS_POLL_TAB_FOCUSED } from './actionTypes';
  34. import { addMessage, clearMessages, closeChat } from './actions.any';
  35. import { ChatPrivacyDialog } from './components';
  36. import {
  37. INCOMING_MSG_SOUND_ID,
  38. LOBBY_CHAT_MESSAGE,
  39. MESSAGE_TYPE_ERROR,
  40. MESSAGE_TYPE_LOCAL,
  41. MESSAGE_TYPE_REMOTE
  42. } from './constants';
  43. import { getUnreadCount } from './functions';
  44. import { INCOMING_MSG_SOUND_FILE } from './sounds';
  45. /**
  46. * Timeout for when to show the privacy notice after a private message was received.
  47. *
  48. * E.g. If this value is 20 secs (20000ms), then we show the privacy notice when sending a non private
  49. * message after we have received a private message in the last 20 seconds.
  50. */
  51. const PRIVACY_NOTICE_TIMEOUT = 20 * 1000;
  52. /**
  53. * Implements the middleware of the chat feature.
  54. *
  55. * @param {Store} store - The redux store.
  56. * @returns {Function}
  57. */
  58. MiddlewareRegistry.register(store => next => action => {
  59. const { dispatch, getState } = store;
  60. const localParticipant = getLocalParticipant(getState());
  61. let isOpen, unreadCount;
  62. switch (action.type) {
  63. case ADD_MESSAGE:
  64. unreadCount = getUnreadCount(getState());
  65. if (action.isReaction) {
  66. action.hasRead = false;
  67. } else {
  68. unreadCount = action.hasRead ? 0 : unreadCount + 1;
  69. }
  70. isOpen = getState()['features/chat'].isOpen;
  71. if (typeof APP !== 'undefined') {
  72. APP.API.notifyChatUpdated(unreadCount, isOpen);
  73. }
  74. break;
  75. case APP_WILL_MOUNT:
  76. dispatch(
  77. registerSound(INCOMING_MSG_SOUND_ID, INCOMING_MSG_SOUND_FILE));
  78. break;
  79. case APP_WILL_UNMOUNT:
  80. dispatch(unregisterSound(INCOMING_MSG_SOUND_ID));
  81. break;
  82. case CONFERENCE_JOINED:
  83. _addChatMsgListener(action.conference, store);
  84. break;
  85. case OPEN_CHAT:
  86. unreadCount = 0;
  87. if (typeof APP !== 'undefined') {
  88. APP.API.notifyChatUpdated(unreadCount, true);
  89. }
  90. break;
  91. case CLOSE_CHAT: {
  92. const isPollTabOpen = getState()['features/chat'].isPollsTabFocused;
  93. unreadCount = 0;
  94. if (typeof APP !== 'undefined') {
  95. APP.API.notifyChatUpdated(unreadCount, false);
  96. }
  97. if (isPollTabOpen) {
  98. dispatch(resetNbUnreadPollsMessages());
  99. }
  100. break;
  101. }
  102. case SET_IS_POLL_TAB_FOCUSED: {
  103. dispatch(resetNbUnreadPollsMessages());
  104. break;
  105. }
  106. case SEND_MESSAGE: {
  107. const state = store.getState();
  108. const conference = getCurrentConference(state);
  109. if (conference) {
  110. // There may be cases when we intend to send a private message but we forget to set the
  111. // recipient. This logic tries to mitigate this risk.
  112. const shouldSendPrivateMessageTo = _shouldSendPrivateMessageTo(state, action);
  113. if (shouldSendPrivateMessageTo) {
  114. dispatch(openDialog(ChatPrivacyDialog, {
  115. message: action.message,
  116. participantID: shouldSendPrivateMessageTo
  117. }));
  118. } else {
  119. // Sending the message if privacy notice doesn't need to be shown.
  120. const { privateMessageRecipient, isLobbyChatActive, lobbyMessageRecipient }
  121. = state['features/chat'];
  122. if (typeof APP !== 'undefined') {
  123. APP.API.notifySendingChatMessage(action.message, Boolean(privateMessageRecipient));
  124. }
  125. if (isLobbyChatActive && lobbyMessageRecipient) {
  126. conference.sendLobbyMessage({
  127. type: LOBBY_CHAT_MESSAGE,
  128. message: action.message
  129. }, lobbyMessageRecipient.id);
  130. _persistSentPrivateMessage(store, lobbyMessageRecipient.id, action.message, true);
  131. } else if (privateMessageRecipient) {
  132. conference.sendPrivateTextMessage(privateMessageRecipient.id, action.message);
  133. _persistSentPrivateMessage(store, privateMessageRecipient.id, action.message);
  134. } else {
  135. conference.sendTextMessage(action.message);
  136. }
  137. }
  138. }
  139. break;
  140. }
  141. case ADD_REACTION_MESSAGE: {
  142. if (localParticipant?.id) {
  143. _handleReceivedMessage(store, {
  144. id: localParticipant.id,
  145. message: action.message,
  146. privateMessage: false,
  147. timestamp: Date.now(),
  148. lobbyChat: false
  149. }, false, true);
  150. }
  151. }
  152. }
  153. return next(action);
  154. });
  155. /**
  156. * Set up state change listener to perform maintenance tasks when the conference
  157. * is left or failed, e.g. Clear messages or close the chat modal if it's left
  158. * open.
  159. */
  160. StateListenerRegistry.register(
  161. state => getCurrentConference(state),
  162. (conference, { dispatch, getState }, previousConference) => {
  163. if (conference !== previousConference) {
  164. // conference changed, left or failed...
  165. if (getState()['features/chat'].isOpen) {
  166. // Closes the chat if it's left open.
  167. dispatch(closeChat());
  168. }
  169. // Clear chat messages.
  170. dispatch(clearMessages());
  171. }
  172. });
  173. StateListenerRegistry.register(
  174. state => state['features/chat'].isOpen,
  175. (isOpen, { dispatch }) => {
  176. if (typeof APP !== 'undefined' && isOpen) {
  177. dispatch(showToolbox());
  178. }
  179. }
  180. );
  181. /**
  182. * Registers listener for {@link JitsiConferenceEvents.MESSAGE_RECEIVED} that
  183. * will perform various chat related activities.
  184. *
  185. * @param {JitsiConference} conference - The conference instance on which the
  186. * new event listener will be registered.
  187. * @param {Object} store - The redux store object.
  188. * @private
  189. * @returns {void}
  190. */
  191. function _addChatMsgListener(conference: IJitsiConference, store: IStore) {
  192. if (store.getState()['features/base/config'].iAmRecorder) {
  193. // We don't register anything on web if we are in iAmRecorder mode
  194. return;
  195. }
  196. conference.on(
  197. JitsiConferenceEvents.MESSAGE_RECEIVED,
  198. // eslint-disable-next-line max-params
  199. (id: string, message: string, timestamp: number, displayName: string, isGuest?: boolean) => {
  200. _onConferenceMessageReceived(store, {
  201. id: id || displayName, // in case of messages coming from visitors we can have unknown id
  202. message,
  203. timestamp,
  204. displayName,
  205. isGuest,
  206. privateMessage: false });
  207. }
  208. );
  209. conference.on(
  210. JitsiConferenceEvents.PRIVATE_MESSAGE_RECEIVED,
  211. (id: string, message: string, timestamp: number) => {
  212. _onConferenceMessageReceived(store, {
  213. id,
  214. message,
  215. timestamp,
  216. privateMessage: true
  217. });
  218. }
  219. );
  220. conference.on(
  221. JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED,
  222. (...args: any) => {
  223. const state = store.getState();
  224. if (!isReactionsEnabled(state)) {
  225. return;
  226. }
  227. // @ts-ignore
  228. store.dispatch(endpointMessageReceived(...args));
  229. if (args && args.length >= 2) {
  230. const [ { _id }, eventData ] = args;
  231. if (eventData.name === ENDPOINT_REACTION_NAME) {
  232. store.dispatch(pushReactions(eventData.reactions));
  233. _handleReceivedMessage(store, {
  234. id: _id,
  235. message: getReactionMessageFromBuffer(eventData.reactions),
  236. privateMessage: false,
  237. lobbyChat: false,
  238. timestamp: eventData.timestamp
  239. }, false, true);
  240. }
  241. }
  242. });
  243. conference.on(
  244. JitsiConferenceEvents.CONFERENCE_ERROR, (errorType: string, error: Error) => {
  245. errorType === JitsiConferenceErrors.CHAT_ERROR && _handleChatError(store, error);
  246. });
  247. }
  248. /**
  249. * Handles a received message.
  250. *
  251. * @param {Object} store - Redux store.
  252. * @param {Object} message - The message object.
  253. * @returns {void}
  254. */
  255. function _onConferenceMessageReceived(store: IStore, { displayName, id, isGuest, message, timestamp, privateMessage }: {
  256. displayName?: string; id: string; isGuest?: boolean;
  257. message: string; privateMessage: boolean; timestamp: number; }) {
  258. const isGif = isGifMessage(message);
  259. if (isGif) {
  260. _handleGifMessageReceived(store, id, message);
  261. if (getGifDisplayMode(store.getState()) === 'tile') {
  262. return;
  263. }
  264. }
  265. _handleReceivedMessage(store, {
  266. displayName,
  267. id,
  268. isGuest,
  269. message,
  270. privateMessage,
  271. lobbyChat: false,
  272. timestamp
  273. }, true, isGif);
  274. }
  275. /**
  276. * Handles a received gif message.
  277. *
  278. * @param {Object} store - Redux store.
  279. * @param {string} id - Id of the participant that sent the message.
  280. * @param {string} message - The message sent.
  281. * @returns {void}
  282. */
  283. function _handleGifMessageReceived(store: IStore, id: string, message: string) {
  284. const url = message.substring(GIF_PREFIX.length, message.length - 1);
  285. store.dispatch(addGif(id, url));
  286. }
  287. /**
  288. * Handles a chat error received from the xmpp server.
  289. *
  290. * @param {Store} store - The Redux store.
  291. * @param {string} error - The error message.
  292. * @returns {void}
  293. */
  294. function _handleChatError({ dispatch }: IStore, error: Error) {
  295. dispatch(addMessage({
  296. hasRead: true,
  297. messageType: MESSAGE_TYPE_ERROR,
  298. message: error,
  299. privateMessage: false,
  300. timestamp: Date.now()
  301. }));
  302. }
  303. /**
  304. * Function to handle an incoming chat message from lobby room.
  305. *
  306. * @param {string} message - The message received.
  307. * @param {string} participantId - The participant id.
  308. * @returns {Function}
  309. */
  310. export function handleLobbyMessageReceived(message: string, participantId: string) {
  311. return async (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
  312. _handleReceivedMessage({ dispatch,
  313. getState }, { id: participantId,
  314. message,
  315. privateMessage: false,
  316. lobbyChat: true,
  317. timestamp: Date.now() });
  318. };
  319. }
  320. /**
  321. * Function to get lobby chat user display name.
  322. *
  323. * @param {Store} state - The Redux store.
  324. * @param {string} id - The knocking participant id.
  325. * @returns {string}
  326. */
  327. function getLobbyChatDisplayName(state: IReduxState, id: string) {
  328. const { knockingParticipants } = state['features/lobby'];
  329. const { lobbyMessageRecipient } = state['features/chat'];
  330. if (id === lobbyMessageRecipient?.id) {
  331. return lobbyMessageRecipient.name;
  332. }
  333. const knockingParticipant = knockingParticipants.find(p => p.id === id);
  334. if (knockingParticipant) {
  335. return knockingParticipant.name;
  336. }
  337. }
  338. /**
  339. * Function to handle an incoming chat message.
  340. *
  341. * @param {Store} store - The Redux store.
  342. * @param {Object} message - The message object.
  343. * @param {boolean} shouldPlaySound - Whether to play the incoming message sound.
  344. * @param {boolean} isReaction - Whether the message is a reaction message.
  345. * @returns {void}
  346. */
  347. function _handleReceivedMessage({ dispatch, getState }: IStore,
  348. { displayName, id, isGuest, message, privateMessage, timestamp, lobbyChat }: {
  349. displayName?: string; id: string; isGuest?: boolean; lobbyChat: boolean;
  350. message: string; privateMessage: boolean; timestamp: number; },
  351. shouldPlaySound = true,
  352. isReaction = false
  353. ) {
  354. // Logic for all platforms:
  355. const state = getState();
  356. const { isOpen: isChatOpen } = state['features/chat'];
  357. const { soundsIncomingMessage: soundEnabled, userSelectedNotifications } = state['features/base/settings'];
  358. if (soundEnabled && shouldPlaySound && !isChatOpen) {
  359. dispatch(playSound(INCOMING_MSG_SOUND_ID));
  360. }
  361. // Provide a default for the case when a message is being
  362. // backfilled for a participant that has left the conference.
  363. const participant = getParticipantById(state, id) || { local: undefined };
  364. const localParticipant = getLocalParticipant(getState);
  365. let displayNameToShow = lobbyChat
  366. ? getLobbyChatDisplayName(state, id)
  367. : displayName || getParticipantDisplayName(state, id);
  368. const hasRead = participant.local || isChatOpen;
  369. const timestampToDate = timestamp ? new Date(timestamp) : new Date();
  370. const millisecondsTimestamp = timestampToDate.getTime();
  371. // skip message notifications on join (the messages having timestamp - coming from the history)
  372. const shouldShowNotification = userSelectedNotifications?.['notify.chatMessages']
  373. && !hasRead && !isReaction && !timestamp;
  374. if (isGuest) {
  375. displayNameToShow = `${displayNameToShow} ${i18next.t('visitors.chatIndicator')}`;
  376. }
  377. dispatch(addMessage({
  378. displayName: displayNameToShow,
  379. hasRead,
  380. id,
  381. messageType: participant.local ? MESSAGE_TYPE_LOCAL : MESSAGE_TYPE_REMOTE,
  382. message,
  383. privateMessage,
  384. lobbyChat,
  385. recipient: getParticipantDisplayName(state, localParticipant?.id ?? ''),
  386. timestamp: millisecondsTimestamp,
  387. isReaction
  388. }));
  389. if (shouldShowNotification) {
  390. dispatch(showMessageNotification({
  391. title: displayNameToShow,
  392. description: message
  393. }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
  394. }
  395. if (typeof APP !== 'undefined') {
  396. // Logic for web only:
  397. APP.API.notifyReceivedChatMessage({
  398. body: message,
  399. id,
  400. nick: displayNameToShow,
  401. privateMessage,
  402. ts: timestamp
  403. });
  404. }
  405. }
  406. /**
  407. * Persists the sent private messages as if they were received over the muc.
  408. *
  409. * This is required as we rely on the fact that we receive all messages from the muc that we send
  410. * (as they are sent to everybody), but we don't receive the private messages we send to another participant.
  411. * But those messages should be in the store as well, otherwise they don't appear in the chat window.
  412. *
  413. * @param {Store} store - The Redux store.
  414. * @param {string} recipientID - The ID of the recipient the private message was sent to.
  415. * @param {string} message - The sent message.
  416. * @param {boolean} isLobbyPrivateMessage - Is a lobby message.
  417. * @returns {void}
  418. */
  419. function _persistSentPrivateMessage({ dispatch, getState }: IStore, recipientID: string,
  420. message: string, isLobbyPrivateMessage = false) {
  421. const state = getState();
  422. const localParticipant = getLocalParticipant(state);
  423. if (!localParticipant?.id) {
  424. return;
  425. }
  426. const displayName = getParticipantDisplayName(state, localParticipant.id);
  427. const { lobbyMessageRecipient } = state['features/chat'];
  428. dispatch(addMessage({
  429. displayName,
  430. hasRead: true,
  431. id: localParticipant.id,
  432. messageType: MESSAGE_TYPE_LOCAL,
  433. message,
  434. privateMessage: !isLobbyPrivateMessage,
  435. lobbyChat: isLobbyPrivateMessage,
  436. recipient: isLobbyPrivateMessage
  437. ? lobbyMessageRecipient?.name
  438. : getParticipantDisplayName(getState, recipientID),
  439. timestamp: Date.now()
  440. }));
  441. }
  442. /**
  443. * Returns the ID of the participant who we may have wanted to send the message
  444. * that we're about to send.
  445. *
  446. * @param {Object} state - The Redux state.
  447. * @param {Object} action - The action being dispatched now.
  448. * @returns {string?}
  449. */
  450. function _shouldSendPrivateMessageTo(state: IReduxState, action: AnyAction) {
  451. if (action.ignorePrivacy) {
  452. // Shortcut: this is only true, if we already displayed the notice, so no need to show it again.
  453. return undefined;
  454. }
  455. const { messages, privateMessageRecipient } = state['features/chat'];
  456. if (privateMessageRecipient) {
  457. // We're already sending a private message, no need to warn about privacy.
  458. return undefined;
  459. }
  460. if (!messages.length) {
  461. // No messages yet, no need to warn for privacy.
  462. return undefined;
  463. }
  464. // Platforms sort messages differently
  465. const lastMessage = navigator.product === 'ReactNative'
  466. ? messages[0] : messages[messages.length - 1];
  467. if (lastMessage.messageType === MESSAGE_TYPE_LOCAL) {
  468. // The sender is probably aware of any private messages as already sent
  469. // a message since then. Doesn't make sense to display the notice now.
  470. return undefined;
  471. }
  472. if (lastMessage.privateMessage) {
  473. // We show the notice if the last received message was private.
  474. return lastMessage.id;
  475. }
  476. // But messages may come rapidly, we want to protect our users from mis-sending a message
  477. // even when there was a reasonable recently received private message.
  478. const now = Date.now();
  479. const recentPrivateMessages = messages.filter(
  480. message =>
  481. message.messageType !== MESSAGE_TYPE_LOCAL
  482. && message.privateMessage
  483. && message.timestamp + PRIVACY_NOTICE_TIMEOUT > now);
  484. const recentPrivateMessage = navigator.product === 'ReactNative'
  485. ? recentPrivateMessages[0] : recentPrivateMessages[recentPrivateMessages.length - 1];
  486. if (recentPrivateMessage) {
  487. return recentPrivateMessage.id;
  488. }
  489. return undefined;
  490. }