Talk while muted sound notification (#4473)

* Moves talk while muted as a new feature.

* Adds sound notification for talk while muted.

* Reorder imports and changes the dispatch of the notification.

* Introduces sounds.js for talk while muted.

conference.js

     setVideoAvailable,
     setVideoMuted
 } from './react/features/base/media';
-import {
-    hideNotification,
-    showNotification
-} from './react/features/notifications';
+import { showNotification } from './react/features/notifications';
 import {
     dominantSpeakerChanged,
     getLocalParticipant,
             APP.UI.setAudioLevel(id, newLvl);
         });
 
-        // we store the last start muted notification id that we showed,
-        // so we can hide it when unmuted mic is detected
-        let lastNotificationId;
-
         room.on(JitsiConferenceEvents.TRACK_MUTE_CHANGED, (track, participantThatMutedUs) => {
             if (participantThatMutedUs) {
                 APP.store.dispatch(participantMutedUs(participantThatMutedUs));
             }
-
-            if (lastNotificationId && track.isAudioTrack() && track.isLocal() && !track.isMuted()) {
-                APP.store.dispatch(hideNotification(lastNotificationId));
-                lastNotificationId = undefined;
-            }
         });
 
-        room.on(JitsiConferenceEvents.TALK_WHILE_MUTED, () => {
-            const action = APP.store.dispatch(showNotification({
-                titleKey: 'toolbar.talkWhileMutedPopup',
-                customActionNameKey: 'notify.unmute',
-                customActionHandler: muteLocalAudio.bind(this, false)
-            }));
-
-            lastNotificationId = action.uid;
-        });
         room.on(JitsiConferenceEvents.SUBJECT_CHANGED,
             subject => APP.store.dispatch(conferenceSubjectChanged(subject)));
 

react/features/app/components/App.web.js

 import '../../external-api';
 import '../../power-monitor';
 import '../../room-lock';
+import '../../talk-while-muted';
 import '../../video-layout';
 
 import { AbstractApp } from './AbstractApp';

react/features/talk-while-muted/actionTypes.js

+/**
+ * The type of Redux action which sets the pending notification UID
+ * to use it for when hiding the notification is necessary, or unsets it when
+ * undefined (or no param) is passed.
+ *
+ * {
+ *     type: SET_CURRENT_NOTIFICATION_UID,
+ *     uid: ?number
+ * }
+ * @public
+ */
+export const SET_CURRENT_NOTIFICATION_UID = 'SET_CURRENT_NOTIFICATION_UID';

react/features/talk-while-muted/actions.js

+// @flow
+
+import { SET_CURRENT_NOTIFICATION_UID } from './actionTypes';
+
+/**
+ * Sets UID of the the pending notification to use it when hiding
+ * the notification is necessary, or unsets it when undefined (or no param) is
+ * passed.
+ *
+ * @param {?number} uid - The UID of the notification.
+ * @returns {{
+ *     type: SET_CURRENT_NOTIFICATION_UID,
+ *     uid: number
+ * }}
+ */
+export function setCurrentNotificationUid(uid: ?number) {
+    return {
+        type: SET_CURRENT_NOTIFICATION_UID,
+        uid
+    };
+}

react/features/talk-while-muted/constants.js

+/**
+ * The identifier of the sound to be played when we got event for talking while muted.
+ *
+ * @type {string}
+ */
+export const TALK_WHILE_MUTED_SOUND_ID = 'TALK_WHILE_MUTED_SOUND_ID';

react/features/talk-while-muted/index.js

+// @flow
+
+import './middleware';
+import './reducer';

react/features/talk-while-muted/middleware.js

+// @flow
+
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app';
+import { CONFERENCE_JOINED } from '../base/conference';
+import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
+import { setAudioMuted } from '../base/media';
+import { MiddlewareRegistry } from '../base/redux';
+import { playSound, registerSound, unregisterSound } from '../base/sounds';
+import {
+    hideNotification,
+    showNotification
+} from '../notifications';
+
+import { setCurrentNotificationUid } from './actions';
+import { TALK_WHILE_MUTED_SOUND_ID } from './constants';
+import { TALK_WHILE_MUTED_SOUND_FILE } from './sounds';
+
+MiddlewareRegistry.register(store => next => action => {
+    const result = next(action);
+    const { dispatch, getState } = store;
+    const { conference } = action;
+
+    switch (action.type) {
+    case APP_WILL_MOUNT:
+        dispatch(registerSound(TALK_WHILE_MUTED_SOUND_ID, TALK_WHILE_MUTED_SOUND_FILE));
+        break;
+    case APP_WILL_UNMOUNT:
+        dispatch(unregisterSound(TALK_WHILE_MUTED_SOUND_ID));
+        break;
+
+    case CONFERENCE_JOINED: {
+        conference.on(
+            JitsiConferenceEvents.TRACK_MUTE_CHANGED,
+            track => {
+                const { currentNotificationUid } = getState()['features/talk-while-muted'];
+
+                if (currentNotificationUid && track.isAudioTrack() && track.isLocal() && !track.isMuted()) {
+                    dispatch(hideNotification(currentNotificationUid));
+                    dispatch(setCurrentNotificationUid());
+                }
+            });
+        conference.on(
+            JitsiConferenceEvents.TALK_WHILE_MUTED, () => {
+                const notification = showNotification({
+                    titleKey: 'toolbar.talkWhileMutedPopup',
+                    customActionNameKey: 'notify.unmute',
+                    customActionHandler: () => dispatch(setAudioMuted(false))
+                });
+
+                dispatch(notification);
+
+                dispatch(playSound(TALK_WHILE_MUTED_SOUND_ID));
+
+                // we store the last start muted notification id that we showed,
+                // so we can hide it when unmuted mic is detected
+                dispatch(setCurrentNotificationUid(notification.uid));
+            });
+        break;
+    }
+    }
+
+    return result;
+});

react/features/talk-while-muted/reducer.js

+// @flow
+
+import { ReducerRegistry, set } from '../base/redux';
+
+import { SET_CURRENT_NOTIFICATION_UID } from './actionTypes';
+
+/**
+ * Reduces the redux actions of the feature talk while muted.
+ */
+ReducerRegistry.register('features/talk-while-muted', (state = { }, action) => {
+    switch (action.type) {
+    case SET_CURRENT_NOTIFICATION_UID:
+        return set(state, 'currentNotificationUid', action.uid);
+    }
+
+    return state;
+});

react/features/talk-while-muted/sounds.js

+/**
+ * The file used for the talk while muted sound notification.
+ *
+ * @type {string}
+ */
+export const TALK_WHILE_MUTED_SOUND_FILE = 'talkWhileMuted.mp3';

webpack.config.js

 function devServerProxyBypass({ path }) {
     if (path.startsWith('/css/') || path.startsWith('/doc/')
             || path.startsWith('/fonts/') || path.startsWith('/images/')
+            || path.startsWith('/sounds/')
             || path.startsWith('/static/')) {
         return path;
     }