From 979b773c3cdcf170bbd7662ec1595078ff2fdd1d Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Tue, 25 Jun 2019 15:25:43 -0700 Subject: [PATCH] ref(notifications): move join notification firing to notifications feature --- react/features/base/participants/actions.js | 72 ------------------ .../features/base/participants/middleware.js | 13 +--- react/features/notifications/actions.js | 76 ++++++++++++++++++- react/features/notifications/middleware.js | 35 ++++++++- 4 files changed, 110 insertions(+), 86 deletions(-) diff --git a/react/features/base/participants/actions.js b/react/features/base/participants/actions.js index bf585ef8ef..28618b50f1 100644 --- a/react/features/base/participants/actions.js +++ b/react/features/base/participants/actions.js @@ -1,5 +1,3 @@ -import throttle from 'lodash/throttle'; - import { set } from '../redux'; import { NOTIFICATION_TIMEOUT, showNotification } from '../../notifications'; @@ -449,73 +447,3 @@ export function pinParticipant(id) { } }; } - -/** - * An array of names of participants that have joined the conference. The array - * is replaced with an empty array as notifications are displayed. - * - * @private - * @type {string[]} - */ -let joinedParticipantsNames = []; - -/** - * A throttled internal function that takes the internal list of participant - * names, {@code joinedParticipantsNames}, and triggers the display of a - * notification informing of their joining. - * - * @private - * @type {Function} - */ -const _throttledNotifyParticipantConnected = throttle(dispatch => { - const joinedParticipantsCount = joinedParticipantsNames.length; - - let notificationProps; - - if (joinedParticipantsCount >= 3) { - notificationProps = { - titleArguments: { - name: joinedParticipantsNames[0], - count: joinedParticipantsCount - 1 - }, - titleKey: 'notify.connectedThreePlusMembers' - }; - } else if (joinedParticipantsCount === 2) { - notificationProps = { - titleArguments: { - first: joinedParticipantsNames[0], - second: joinedParticipantsNames[1] - }, - titleKey: 'notify.connectedTwoMembers' - }; - } else if (joinedParticipantsCount) { - notificationProps = { - titleArguments: { - name: joinedParticipantsNames[0] - }, - titleKey: 'notify.connectedOneMember' - }; - } - - if (notificationProps) { - dispatch( - showNotification(notificationProps, NOTIFICATION_TIMEOUT)); - } - - joinedParticipantsNames = []; - -}, 500, { leading: false }); - -/** - * Queues the display of a notification of a participant having connected to - * the meeting. The notifications are batched so that quick consecutive - * connection events are shown in one notification. - * - * @param {string} displayName - The name of the participant that connected. - * @returns {Function} - */ -export function showParticipantJoinedNotification(displayName) { - joinedParticipantsNames.push(displayName); - - return dispatch => _throttledNotifyParticipantConnected(dispatch); -} diff --git a/react/features/base/participants/middleware.js b/react/features/base/participants/middleware.js index 1beb1093b9..9131ea9098 100644 --- a/react/features/base/participants/middleware.js +++ b/react/features/base/participants/middleware.js @@ -20,8 +20,7 @@ import { localParticipantJoined, localParticipantLeft, participantLeft, - participantUpdated, - showParticipantJoinedNotification + participantUpdated } from './actions'; import { DOMINANT_SPEAKER_CHANGED, @@ -118,15 +117,7 @@ MiddlewareRegistry.register(store => next => action => { case PARTICIPANT_JOINED: { _maybePlaySounds(store, action); - const result = _participantJoinedOrUpdated(store, next, action); - - const { participant: p } = action; - - if (!p.local) { - store.dispatch(showParticipantJoinedNotification(getParticipantDisplayName(store.getState, p.id))); - } - - return result; + return _participantJoinedOrUpdated(store, next, action); } case PARTICIPANT_LEFT: diff --git a/react/features/notifications/actions.js b/react/features/notifications/actions.js index 8d9bf47ba2..30c99826b1 100644 --- a/react/features/notifications/actions.js +++ b/react/features/notifications/actions.js @@ -1,5 +1,9 @@ // @flow +import throttle from 'lodash/throttle'; + +import type { Dispatch } from 'redux'; + import { CLEAR_NOTIFICATIONS, HIDE_NOTIFICATION, @@ -7,7 +11,7 @@ import { SHOW_NOTIFICATION } from './actionTypes'; -import { NOTIFICATION_TYPE } from './constants'; +import { NOTIFICATION_TIMEOUT, NOTIFICATION_TYPE } from './constants'; /** * Clears (removes) all the notifications. @@ -102,3 +106,73 @@ export function showWarningNotification(props: Object) { appearance: NOTIFICATION_TYPE.WARNING }); } + +/** + * An array of names of participants that have joined the conference. The array + * is replaced with an empty array as notifications are displayed. + * + * @private + * @type {string[]} + */ +let joinedParticipantsNames = []; + +/** + * A throttled internal function that takes the internal list of participant + * names, {@code joinedParticipantsNames}, and triggers the display of a + * notification informing of their joining. + * + * @private + * @type {Function} + */ +const _throttledNotifyParticipantConnected = throttle((dispatch: Dispatch) => { + const joinedParticipantsCount = joinedParticipantsNames.length; + + let notificationProps; + + if (joinedParticipantsCount >= 3) { + notificationProps = { + titleArguments: { + name: joinedParticipantsNames[0], + count: joinedParticipantsCount - 1 + }, + titleKey: 'notify.connectedThreePlusMembers' + }; + } else if (joinedParticipantsCount === 2) { + notificationProps = { + titleArguments: { + first: joinedParticipantsNames[0], + second: joinedParticipantsNames[1] + }, + titleKey: 'notify.connectedTwoMembers' + }; + } else if (joinedParticipantsCount) { + notificationProps = { + titleArguments: { + name: joinedParticipantsNames[0] + }, + titleKey: 'notify.connectedOneMember' + }; + } + + if (notificationProps) { + dispatch( + showNotification(notificationProps, NOTIFICATION_TIMEOUT)); + } + + joinedParticipantsNames = []; + +}, 500, { leading: false }); + +/** + * Queues the display of a notification of a participant having connected to + * the meeting. The notifications are batched so that quick consecutive + * connection events are shown in one notification. + * + * @param {string} displayName - The name of the participant that connected. + * @returns {Function} + */ +export function showParticipantJoinedNotification(displayName: string) { + joinedParticipantsNames.push(displayName); + + return (dispatch: Dispatch) => _throttledNotifyParticipantConnected(dispatch); +} diff --git a/react/features/notifications/middleware.js b/react/features/notifications/middleware.js index 4d3e35b07a..7e2e2ddb31 100644 --- a/react/features/notifications/middleware.js +++ b/react/features/notifications/middleware.js @@ -1,9 +1,40 @@ /* @flow */ import { getCurrentConference } from '../base/conference'; -import { StateListenerRegistry } from '../base/redux'; +import { + PARTICIPANT_JOINED, + getParticipantDisplayName +} from '../base/participants'; +import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux'; -import { clearNotifications } from './actions'; +import { + clearNotifications, + showParticipantJoinedNotification +} from './actions'; + +/** + * Middleware that captures actions to display notifications. + * + * @param {Store} store - The redux store. + * @returns {Function} + */ +MiddlewareRegistry.register(store => next => action => { + const result = next(action); + + switch (action.type) { + case PARTICIPANT_JOINED: { + const { participant: p } = action; + + if (!p.local) { + store.dispatch(showParticipantJoinedNotification( + getParticipantDisplayName(store.getState, p.id) + )); + } + } + } + + return result; +}); /** * StateListenerRegistry provides a reliable way to detect the leaving of a