fix(notif-sounds) Set correct audio output device for notifs (#13436)

react/features/base/devices/functions.web.ts

@@ -2,6 +2,7 @@ import { IReduxState, IStore } from '../../app/types';
 import JitsiMeetJS from '../lib-jitsi-meet';
 import { updateSettings } from '../settings/actions';
 import { ISettingsState } from '../settings/reducer';
+import { setNewAudioOutputDevice } from '../sounds/functions.web';
 import { parseURLParams } from '../util/parseURLParams';
 
 import logger from './logger';
@@ -265,6 +266,7 @@ export function setAudioOutputDeviceId(
 
     return JitsiMeetJS.mediaDevices.setAudioOutputDevice(newId)
         .then(() => {
+            dispatch(setNewAudioOutputDevice(newId));
             const newSettings: Partial<ISettingsState> = {
                 audioOutputDeviceId: newId,
                 userSelectedAudioOutputDeviceId: undefined,

react/features/base/sounds/functions.web.ts

@@ -1,3 +1,5 @@
+import { IStore } from '../../app/types';
+
 /**
  * Returns the location of the sounds. On Web it's the relative path to
  * the sounds folder placed in the source root.
@@ -7,3 +9,19 @@
 export function getSoundsPath() {
     return 'sounds';
 }
+
+/**
+ * Set new audio output device on the global sound elements.
+ *
+ * @param {string } deviceId - The new output deviceId.
+ * @returns {Function}
+ */
+export function setNewAudioOutputDevice(deviceId: string) {
+    return function(_dispatch: IStore['dispatch'], getState: IStore['getState']) {
+        const sounds = getState()['features/base/sounds'];
+
+        for (const [ , sound ] of sounds) {
+            sound.audioElement?.setSinkId?.(deviceId);
+        }
+    };
+}

react/features/base/sounds/middleware.any.ts

@@ -5,12 +5,13 @@ import { PLAY_SOUND, STOP_SOUND } from './actionTypes';
 import logger from './logger';
 
 /**
- * Implements the entry point of the middleware of the feature base/media.
+ * Implements the entry point of the middleware of the feature base/sounds.
  *
  * @param {Store} store - The redux store.
  * @returns {Function}
  */
 MiddlewareRegistry.register(store => next => action => {
+
     switch (action.type) {
     case PLAY_SOUND:
         _playSound(store, action.soundId);

react/features/base/sounds/middleware.native.ts

@@ -0,0 +1 @@
+import './middleware.any';

react/features/base/sounds/middleware.web.ts

@@ -0,0 +1,23 @@
+import { getAudioOutputDeviceId } from '../devices/functions.web';
+import MiddlewareRegistry from '../redux/MiddlewareRegistry';
+
+import { _ADD_AUDIO_ELEMENT } from './actionTypes';
+
+import './middleware.any';
+
+/**
+ * Implements the entry point of the middleware of the feature base/sounds.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(_store => next => action => {
+
+    switch (action.type) {
+    case _ADD_AUDIO_ELEMENT:
+        action.audioElement?.setSinkId?.(getAudioOutputDeviceId());
+        break;
+    }
+
+    return next(action);
+});