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.js 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593
  1. // @flow
  2. import { batch } from 'react-redux';
  3. import UIEvents from '../../../../service/UI/UIEvents';
  4. import { approveParticipant } from '../../av-moderation/actions';
  5. import { toggleE2EE } from '../../e2ee/actions';
  6. import { MAX_MODE } from '../../e2ee/constants';
  7. import { NOTIFICATION_TIMEOUT_TYPE, showNotification } from '../../notifications';
  8. import { isForceMuted } from '../../participants-pane/functions';
  9. import { CALLING, INVITED } from '../../presence-status';
  10. import { RAISE_HAND_SOUND_ID } from '../../reactions/constants';
  11. import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../app';
  12. import {
  13. CONFERENCE_WILL_JOIN,
  14. forEachConference,
  15. getCurrentConference
  16. } from '../conference';
  17. import { getDisableRemoveRaisedHandOnFocus } from '../config/functions.any';
  18. import { JitsiConferenceEvents } from '../lib-jitsi-meet';
  19. import { MEDIA_TYPE } from '../media';
  20. import { MiddlewareRegistry, StateListenerRegistry } from '../redux';
  21. import { playSound, registerSound, unregisterSound } from '../sounds';
  22. import {
  23. DOMINANT_SPEAKER_CHANGED,
  24. GRANT_MODERATOR,
  25. KICK_PARTICIPANT,
  26. LOCAL_PARTICIPANT_RAISE_HAND,
  27. MUTE_REMOTE_PARTICIPANT,
  28. PARTICIPANT_DISPLAY_NAME_CHANGED,
  29. PARTICIPANT_JOINED,
  30. PARTICIPANT_LEFT,
  31. PARTICIPANT_UPDATED,
  32. RAISE_HAND_UPDATED
  33. } from './actionTypes';
  34. import {
  35. localParticipantIdChanged,
  36. localParticipantJoined,
  37. localParticipantLeft,
  38. participantLeft,
  39. participantUpdated,
  40. raiseHandUpdateQueue,
  41. setLoadableAvatarUrl
  42. } from './actions';
  43. import {
  44. LOCAL_PARTICIPANT_DEFAULT_ID,
  45. PARTICIPANT_JOINED_SOUND_ID,
  46. PARTICIPANT_LEFT_SOUND_ID
  47. } from './constants';
  48. import {
  49. getFirstLoadableAvatarUrl,
  50. getLocalParticipant,
  51. getParticipantById,
  52. getParticipantCount,
  53. getParticipantDisplayName,
  54. getRaiseHandsQueue,
  55. getRemoteParticipants,
  56. isLocalParticipantModerator
  57. } from './functions';
  58. import { PARTICIPANT_JOINED_FILE, PARTICIPANT_LEFT_FILE } from './sounds';
  59. import { hasRaisedHand, raiseHand } from '.';
  60. declare var APP: Object;
  61. /**
  62. * Middleware that captures CONFERENCE_JOINED and CONFERENCE_LEFT actions and
  63. * updates respectively ID of local participant.
  64. *
  65. * @param {Store} store - The redux store.
  66. * @returns {Function}
  67. */
  68. MiddlewareRegistry.register(store => next => action => {
  69. switch (action.type) {
  70. case APP_WILL_MOUNT:
  71. _registerSounds(store);
  72. return _localParticipantJoined(store, next, action);
  73. case APP_WILL_UNMOUNT:
  74. _unregisterSounds(store);
  75. return _localParticipantLeft(store, next, action);
  76. case CONFERENCE_WILL_JOIN:
  77. store.dispatch(localParticipantIdChanged(action.conference.myUserId()));
  78. break;
  79. case DOMINANT_SPEAKER_CHANGED: {
  80. // Lower hand through xmpp when local participant becomes dominant speaker.
  81. const { id } = action.participant;
  82. const state = store.getState();
  83. const participant = getLocalParticipant(state);
  84. const isLocal = participant && participant.id === id;
  85. if (isLocal && hasRaisedHand(participant) && !getDisableRemoveRaisedHandOnFocus(state)) {
  86. store.dispatch(raiseHand(false));
  87. }
  88. break;
  89. }
  90. case GRANT_MODERATOR: {
  91. const { conference } = store.getState()['features/base/conference'];
  92. conference.grantOwner(action.id);
  93. break;
  94. }
  95. case KICK_PARTICIPANT: {
  96. const { conference } = store.getState()['features/base/conference'];
  97. conference.kickParticipant(action.id);
  98. break;
  99. }
  100. case LOCAL_PARTICIPANT_RAISE_HAND: {
  101. const { raisedHandTimestamp } = action;
  102. const localId = getLocalParticipant(store.getState())?.id;
  103. store.dispatch(participantUpdated({
  104. // XXX Only the local participant is allowed to update without
  105. // stating the JitsiConference instance (i.e. participant property
  106. // `conference` for a remote participant) because the local
  107. // participant is uniquely identified by the very fact that there is
  108. // only one local participant.
  109. id: localId,
  110. local: true,
  111. raisedHandTimestamp
  112. }));
  113. store.dispatch(raiseHandUpdateQueue({
  114. id: localId,
  115. raisedHandTimestamp
  116. }));
  117. if (typeof APP !== 'undefined') {
  118. APP.API.notifyRaiseHandUpdated(localId, raisedHandTimestamp);
  119. }
  120. break;
  121. }
  122. case MUTE_REMOTE_PARTICIPANT: {
  123. const { conference } = store.getState()['features/base/conference'];
  124. conference.muteParticipant(action.id, action.mediaType);
  125. break;
  126. }
  127. // TODO Remove this middleware when the local display name update flow is
  128. // fully brought into redux.
  129. case PARTICIPANT_DISPLAY_NAME_CHANGED: {
  130. if (typeof APP !== 'undefined') {
  131. const participant = getLocalParticipant(store.getState());
  132. if (participant && participant.id === action.id) {
  133. APP.UI.emitEvent(UIEvents.NICKNAME_CHANGED, action.name);
  134. }
  135. }
  136. break;
  137. }
  138. case RAISE_HAND_UPDATED: {
  139. const { participant } = action;
  140. let queue = getRaiseHandsQueue(store.getState());
  141. if (participant.raisedHandTimestamp) {
  142. queue.push({
  143. id: participant.id,
  144. raisedHandTimestamp: participant.raisedHandTimestamp
  145. });
  146. // sort the queue before adding to store.
  147. queue = queue.sort(({ raisedHandTimestamp: a }, { raisedHandTimestamp: b }) => a - b);
  148. } else {
  149. // no need to sort on remove value.
  150. queue = queue.filter(({ id }) => id !== participant.id);
  151. }
  152. action.queue = queue;
  153. break;
  154. }
  155. case PARTICIPANT_JOINED: {
  156. _maybePlaySounds(store, action);
  157. return _participantJoinedOrUpdated(store, next, action);
  158. }
  159. case PARTICIPANT_LEFT:
  160. _maybePlaySounds(store, action);
  161. break;
  162. case PARTICIPANT_UPDATED:
  163. return _participantJoinedOrUpdated(store, next, action);
  164. }
  165. return next(action);
  166. });
  167. /**
  168. * Syncs the redux state features/base/participants up with the redux state
  169. * features/base/conference by ensuring that the former does not contain remote
  170. * participants no longer relevant to the latter. Introduced to address an issue
  171. * with multiplying thumbnails in the filmstrip.
  172. */
  173. StateListenerRegistry.register(
  174. /* selector */ state => getCurrentConference(state),
  175. /* listener */ (conference, { dispatch, getState }) => {
  176. batch(() => {
  177. for (const [ id, p ] of getRemoteParticipants(getState())) {
  178. (!conference || p.conference !== conference)
  179. && dispatch(participantLeft(id, p.conference, p.isReplaced));
  180. }
  181. });
  182. });
  183. /**
  184. * Reset the ID of the local participant to
  185. * {@link LOCAL_PARTICIPANT_DEFAULT_ID}. Such a reset is deemed possible only if
  186. * the local participant and, respectively, her ID is not involved in a
  187. * conference which is still of interest to the user and, consequently, the app.
  188. * For example, a conference which is in the process of leaving is no longer of
  189. * interest the user, is unrecoverable from the perspective of the user and,
  190. * consequently, the app.
  191. */
  192. StateListenerRegistry.register(
  193. /* selector */ state => state['features/base/conference'],
  194. /* listener */ ({ leaving }, { dispatch, getState }) => {
  195. const state = getState();
  196. const localParticipant = getLocalParticipant(state);
  197. let id;
  198. if (!localParticipant
  199. || (id = localParticipant.id)
  200. === LOCAL_PARTICIPANT_DEFAULT_ID) {
  201. // The ID of the local participant has been reset already.
  202. return;
  203. }
  204. // The ID of the local may be reset only if it is not in use.
  205. const dispatchLocalParticipantIdChanged
  206. = forEachConference(
  207. state,
  208. conference =>
  209. conference === leaving || conference.myUserId() !== id);
  210. dispatchLocalParticipantIdChanged
  211. && dispatch(
  212. localParticipantIdChanged(LOCAL_PARTICIPANT_DEFAULT_ID));
  213. });
  214. /**
  215. * Registers listeners for participant change events.
  216. */
  217. StateListenerRegistry.register(
  218. state => state['features/base/conference'].conference,
  219. (conference, store) => {
  220. if (conference) {
  221. const propertyHandlers = {
  222. 'e2ee.enabled': (participant, value) => _e2eeUpdated(store, conference, participant.getId(), value),
  223. 'features_e2ee': (participant, value) =>
  224. store.dispatch(participantUpdated({
  225. conference,
  226. id: participant.getId(),
  227. e2eeSupported: value
  228. })),
  229. 'features_jigasi': (participant, value) =>
  230. store.dispatch(participantUpdated({
  231. conference,
  232. id: participant.getId(),
  233. isJigasi: value
  234. })),
  235. 'features_screen-sharing': (participant, value) => // eslint-disable-line no-unused-vars
  236. store.dispatch(participantUpdated({
  237. conference,
  238. id: participant.getId(),
  239. features: { 'screen-sharing': true }
  240. })),
  241. 'raisedHand': (participant, value) =>
  242. _raiseHandUpdated(store, conference, participant.getId(), value),
  243. 'remoteControlSessionStatus': (participant, value) =>
  244. store.dispatch(participantUpdated({
  245. conference,
  246. id: participant.getId(),
  247. remoteControlSessionStatus: value
  248. }))
  249. };
  250. // update properties for the participants that are already in the conference
  251. conference.getParticipants().forEach(participant => {
  252. Object.keys(propertyHandlers).forEach(propertyName => {
  253. const value = participant.getProperty(propertyName);
  254. if (value !== undefined) {
  255. propertyHandlers[propertyName](participant, value);
  256. }
  257. });
  258. });
  259. // We joined a conference
  260. conference.on(
  261. JitsiConferenceEvents.PARTICIPANT_PROPERTY_CHANGED,
  262. (participant, propertyName, oldValue, newValue) => {
  263. if (propertyHandlers.hasOwnProperty(propertyName)) {
  264. propertyHandlers[propertyName](participant, newValue);
  265. }
  266. });
  267. } else {
  268. const localParticipantId = getLocalParticipant(store.getState).id;
  269. // We left the conference, the local participant must be updated.
  270. _e2eeUpdated(store, conference, localParticipantId, false);
  271. _raiseHandUpdated(store, conference, localParticipantId, 0);
  272. }
  273. }
  274. );
  275. /**
  276. * Handles a E2EE enabled status update.
  277. *
  278. * @param {Store} store - The redux store.
  279. * @param {Object} conference - The conference for which we got an update.
  280. * @param {string} participantId - The ID of the participant from which we got an update.
  281. * @param {boolean} newValue - The new value of the E2EE enabled status.
  282. * @returns {void}
  283. */
  284. function _e2eeUpdated({ getState, dispatch }, conference, participantId, newValue) {
  285. const e2eeEnabled = newValue === 'true';
  286. const { e2ee = {} } = getState()['features/base/config'];
  287. dispatch(participantUpdated({
  288. conference,
  289. id: participantId,
  290. e2eeEnabled
  291. }));
  292. if (e2ee.externallyManagedKey) {
  293. return;
  294. }
  295. const { maxMode } = getState()['features/e2ee'] || {};
  296. if (maxMode !== MAX_MODE.THRESHOLD_EXCEEDED || !e2eeEnabled) {
  297. dispatch(toggleE2EE(e2eeEnabled));
  298. }
  299. }
  300. /**
  301. * Initializes the local participant and signals that it joined.
  302. *
  303. * @private
  304. * @param {Store} store - The redux store.
  305. * @param {Dispatch} next - The redux dispatch function to dispatch the
  306. * specified action to the specified store.
  307. * @param {Action} action - The redux action which is being dispatched
  308. * in the specified store.
  309. * @private
  310. * @returns {Object} The value returned by {@code next(action)}.
  311. */
  312. function _localParticipantJoined({ getState, dispatch }, next, action) {
  313. const result = next(action);
  314. const settings = getState()['features/base/settings'];
  315. dispatch(localParticipantJoined({
  316. avatarURL: settings.avatarURL,
  317. email: settings.email,
  318. name: settings.displayName
  319. }));
  320. return result;
  321. }
  322. /**
  323. * Signals that the local participant has left.
  324. *
  325. * @param {Store} store - The redux store.
  326. * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
  327. * specified {@code action} into the specified {@code store}.
  328. * @param {Action} action - The redux action which is being dispatched in the
  329. * specified {@code store}.
  330. * @private
  331. * @returns {Object} The value returned by {@code next(action)}.
  332. */
  333. function _localParticipantLeft({ dispatch }, next, action) {
  334. const result = next(action);
  335. dispatch(localParticipantLeft());
  336. return result;
  337. }
  338. /**
  339. * Plays sounds when participants join/leave conference.
  340. *
  341. * @param {Store} store - The redux store.
  342. * @param {Action} action - The redux action. Should be either
  343. * {@link PARTICIPANT_JOINED} or {@link PARTICIPANT_LEFT}.
  344. * @private
  345. * @returns {void}
  346. */
  347. function _maybePlaySounds({ getState, dispatch }, action) {
  348. const state = getState();
  349. const { startAudioMuted } = state['features/base/config'];
  350. const { soundsParticipantJoined: joinSound, soundsParticipantLeft: leftSound } = state['features/base/settings'];
  351. // We're not playing sounds for local participant
  352. // nor when the user is joining past the "startAudioMuted" limit.
  353. // The intention there was to not play user joined notification in big
  354. // conferences where 100th person is joining.
  355. if (!action.participant.local
  356. && (!startAudioMuted
  357. || getParticipantCount(state) < startAudioMuted)) {
  358. const { isReplacing, isReplaced } = action.participant;
  359. if (action.type === PARTICIPANT_JOINED) {
  360. if (!joinSound) {
  361. return;
  362. }
  363. const { presence } = action.participant;
  364. // The sounds for the poltergeist are handled by features/invite.
  365. if (presence !== INVITED && presence !== CALLING && !isReplacing) {
  366. dispatch(playSound(PARTICIPANT_JOINED_SOUND_ID));
  367. }
  368. } else if (action.type === PARTICIPANT_LEFT && !isReplaced && leftSound) {
  369. dispatch(playSound(PARTICIPANT_LEFT_SOUND_ID));
  370. }
  371. }
  372. }
  373. /**
  374. * Notifies the feature base/participants that the action
  375. * {@code PARTICIPANT_JOINED} or {@code PARTICIPANT_UPDATED} is being dispatched
  376. * within a specific redux store.
  377. *
  378. * @param {Store} store - The redux store in which the specified {@code action}
  379. * is being dispatched.
  380. * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
  381. * specified {@code action} in the specified {@code store}.
  382. * @param {Action} action - The redux action {@code PARTICIPANT_JOINED} or
  383. * {@code PARTICIPANT_UPDATED} which is being dispatched in the specified
  384. * {@code store}.
  385. * @private
  386. * @returns {Object} The value returned by {@code next(action)}.
  387. */
  388. function _participantJoinedOrUpdated(store, next, action) {
  389. const { dispatch, getState } = store;
  390. const { participant: { avatarURL, email, id, local, name, raisedHandTimestamp } } = action;
  391. // Send an external update of the local participant's raised hand state
  392. // if a new raised hand state is defined in the action.
  393. if (typeof raisedHandTimestamp !== 'undefined') {
  394. if (local) {
  395. const { conference } = getState()['features/base/conference'];
  396. const rHand = parseInt(raisedHandTimestamp, 10);
  397. // Send raisedHand signalling only if there is a change
  398. if (conference && rHand !== getLocalParticipant(getState()).raisedHandTimestamp) {
  399. conference.setLocalParticipantProperty('raisedHand', rHand);
  400. }
  401. }
  402. }
  403. // Allow the redux update to go through and compare the old avatar
  404. // to the new avatar and emit out change events if necessary.
  405. const result = next(action);
  406. // Only run this if the config is populated, otherwise we preload external resources
  407. // even if disableThirdPartyRequests is set to true in config
  408. if (Object.keys(getState()['features/base/config']).length) {
  409. const { disableThirdPartyRequests } = getState()['features/base/config'];
  410. if (!disableThirdPartyRequests && (avatarURL || email || id || name)) {
  411. const participantId = !id && local ? getLocalParticipant(getState()).id : id;
  412. const updatedParticipant = getParticipantById(getState(), participantId);
  413. getFirstLoadableAvatarUrl(updatedParticipant, store)
  414. .then(url => {
  415. dispatch(setLoadableAvatarUrl(participantId, url));
  416. });
  417. }
  418. }
  419. // Notify external listeners of potential avatarURL changes.
  420. if (typeof APP === 'object') {
  421. const currentKnownId = local ? APP.conference.getMyUserId() : id;
  422. // Force update of local video getting a new id.
  423. APP.UI.refreshAvatarDisplay(currentKnownId);
  424. }
  425. return result;
  426. }
  427. /**
  428. * Handles a raise hand status update.
  429. *
  430. * @param {Function} dispatch - The Redux dispatch function.
  431. * @param {Object} conference - The conference for which we got an update.
  432. * @param {string} participantId - The ID of the participant from which we got an update.
  433. * @param {boolean} newValue - The new value of the raise hand status.
  434. * @returns {void}
  435. */
  436. function _raiseHandUpdated({ dispatch, getState }, conference, participantId, newValue) {
  437. let raisedHandTimestamp;
  438. switch (newValue) {
  439. case undefined:
  440. case 'false':
  441. raisedHandTimestamp = 0;
  442. break;
  443. case 'true':
  444. raisedHandTimestamp = Date.now();
  445. break;
  446. default:
  447. raisedHandTimestamp = parseInt(newValue, 10);
  448. }
  449. const state = getState();
  450. dispatch(participantUpdated({
  451. conference,
  452. id: participantId,
  453. raisedHandTimestamp
  454. }));
  455. dispatch(raiseHandUpdateQueue({
  456. id: participantId,
  457. raisedHandTimestamp
  458. }));
  459. if (typeof APP !== 'undefined') {
  460. APP.API.notifyRaiseHandUpdated(participantId, raisedHandTimestamp);
  461. }
  462. const isModerator = isLocalParticipantModerator(state);
  463. const participant = getParticipantById(state, participantId);
  464. let shouldDisplayAllowAction = false;
  465. if (isModerator) {
  466. shouldDisplayAllowAction = isForceMuted(participant, MEDIA_TYPE.AUDIO, state)
  467. || isForceMuted(participant, MEDIA_TYPE.VIDEO, state);
  468. }
  469. const action = shouldDisplayAllowAction ? {
  470. customActionNameKey: 'notify.allowAction',
  471. customActionHandler: () => dispatch(approveParticipant(participantId))
  472. } : {};
  473. if (raisedHandTimestamp) {
  474. dispatch(showNotification({
  475. titleKey: 'notify.somebody',
  476. title: getParticipantDisplayName(state, participantId),
  477. descriptionKey: 'notify.raisedHand',
  478. raiseHandNotification: true,
  479. concatText: true,
  480. ...action
  481. }, shouldDisplayAllowAction ? NOTIFICATION_TIMEOUT_TYPE.MEDIUM : NOTIFICATION_TIMEOUT_TYPE.SHORT));
  482. dispatch(playSound(RAISE_HAND_SOUND_ID));
  483. }
  484. }
  485. /**
  486. * Registers sounds related with the participants feature.
  487. *
  488. * @param {Store} store - The redux store.
  489. * @private
  490. * @returns {void}
  491. */
  492. function _registerSounds({ dispatch }) {
  493. dispatch(
  494. registerSound(PARTICIPANT_JOINED_SOUND_ID, PARTICIPANT_JOINED_FILE));
  495. dispatch(registerSound(PARTICIPANT_LEFT_SOUND_ID, PARTICIPANT_LEFT_FILE));
  496. }
  497. /**
  498. * Unregisters sounds related with the participants feature.
  499. *
  500. * @param {Store} store - The redux store.
  501. * @private
  502. * @returns {void}
  503. */
  504. function _unregisterSounds({ dispatch }) {
  505. dispatch(unregisterSound(PARTICIPANT_JOINED_SOUND_ID));
  506. dispatch(unregisterSound(PARTICIPANT_LEFT_SOUND_ID));
  507. }