feat(sounds) use audio files based on locale (#14104)

react/features/base/media/components/native/Audio.ts

@@ -1,7 +1,7 @@
 import Sound from 'react-native-sound';
 
 import logger from '../../logger';
-import AbstractAudio from '../AbstractAudio';
+import AbstractAudio, { IProps } from '../AbstractAudio';
 
 /**
  * The React Native/mobile {@link Component} which is similar to Web's
@@ -31,12 +31,25 @@ export default class Audio extends AbstractAudio {
         }
     }
 
+    /**
+     * Implements React's {@link Component#componentDidUpdate()}.
+     *
+     * @inheritdoc
+     */
+    async componentDidUpdate(prevProps: IProps): Promise<void> {
+        // source is different !! call didunmount and call didmount
+        if (prevProps.src !== this.props.src) {
+            await this.componentWillUnmount();
+            await this.componentDidMount();
+        }
+    }
+
     /**
      * Will load the sound, after the component did mount.
      *
      * @returns {void}
      */
-    componentDidMount() {
+    async componentDidMount() {
         this._sound
             = this.props.src
                 ? new Sound(
@@ -50,7 +63,7 @@ export default class Audio extends AbstractAudio {
      *
      * @returns {void}
      */
-    componentWillUnmount() {
+    async componentWillUnmount() {
         if (this._sound) {
             this._sound.release();
             this._sound = null;

react/features/base/media/constants.ts

@@ -38,6 +38,15 @@ export const SCREENSHARE_MUTISM_AUTHORITY = {
     USER: 1 << 2
 };
 
+/**
+ * The languages supported for audio files.
+ */
+export enum AudioSupportedLanguage {
+    en = 'en',
+    fr = 'fr',
+    frCA = 'frCA'
+}
+
 /**
  * The types of authorities which may mute/unmute the local video.
  *

react/features/base/media/functions.ts

@@ -2,7 +2,7 @@ import { IStateful } from '../app/types';
 import { toState } from '../redux/functions';
 import { getPropertyValue } from '../settings/functions';
 
-import { VIDEO_MUTISM_AUTHORITY } from './constants';
+import { AudioSupportedLanguage, VIDEO_MUTISM_AUTHORITY } from './constants';
 
 
 // XXX The configurations/preferences/settings startWithAudioMuted and startWithVideoMuted were introduced for
@@ -127,3 +127,20 @@ export function shouldRenderVideoTrack(
             && !videoTrack.muted
             && (!waitForVideoStarted || videoTrack.videoStarted));
 }
+
+/**
+ * Computes the localized sound file source.
+ *
+ * @param {string} file - The default file source.
+ * @param {string} language - The language to use for localization.
+ * @returns {string}
+ */
+export const getSoundFileSrc = (file: string, language: string): string => {
+    if (!AudioSupportedLanguage[language as keyof typeof AudioSupportedLanguage]
+        || language === AudioSupportedLanguage.en) {
+        return file;
+    }
+    const fileTokens = file.split('.');
+
+    return `${fileTokens[0]}_${language}.${fileTokens[1]}`;
+};

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

@@ -1,5 +1,11 @@
+import i18next from 'i18next';
+
+import { registerE2eeAudioFiles } from '../../../features/e2ee/functions';
+import { registerRecordingAudioFiles } from '../../../features/recording/functions';
 import { IStore } from '../../app/types';
+import { AudioSupportedLanguage } from '../media/constants';
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
+import StateListenerRegistry from '../redux/StateListenerRegistry';
 
 import { PLAY_SOUND, STOP_SOUND } from './actionTypes';
 import logger from './logger';
@@ -71,3 +77,53 @@ function _stopSound({ getState }: IStore, soundId: string) {
         logger.warn(`STOP_SOUND: no sound found for id: ${soundId}`);
     }
 }
+
+/**
+ * Returns whether the language is supported for audio messages.
+ *
+ * @param {string} language - The requested language.
+ * @returns {boolean}
+ */
+function isLanguageSupported(language: string): Boolean {
+    return Boolean(AudioSupportedLanguage[language as keyof typeof AudioSupportedLanguage]);
+}
+
+/**
+ * Checking if it's necessary to reload the translated files.
+ *
+ * @param {string} language - The next language.
+ * @param {string} prevLanguage - The previous language.
+ * @returns {boolean}
+ */
+function shouldReloadAudioFiles(language: string, prevLanguage: string): Boolean {
+    const isNextLanguageSupported = isLanguageSupported(language);
+    const isPrevLanguageSupported = isLanguageSupported(prevLanguage);
+
+    return (
+
+        // From an unsupported language (which defaulted to English) to a supported language (that isn't English).
+        isNextLanguageSupported && language !== AudioSupportedLanguage.en && !isPrevLanguageSupported
+    ) || (
+
+        // From a supported language (that wasn't English) to English.
+        !isNextLanguageSupported && isPrevLanguageSupported && prevLanguage !== AudioSupportedLanguage.en
+    ) || (
+
+        // From a supported language to another.
+        isNextLanguageSupported && isPrevLanguageSupported
+    );
+}
+
+/**
+ * Set up state change listener for language.
+ */
+StateListenerRegistry.register(
+    () => i18next.language,
+    (language, { dispatch }, prevLanguage): void => {
+
+        if (language !== prevLanguage && shouldReloadAudioFiles(language, prevLanguage)) {
+            registerE2eeAudioFiles(dispatch, true);
+            registerRecordingAudioFiles(dispatch, true);
+        }
+    }
+);

react/features/e2ee/functions.ts

@@ -1,10 +1,23 @@
-import { IReduxState } from '../app/types';
+import i18next from 'i18next';
+
+import { IReduxState, IStore } from '../app/types';
 import { IStateful } from '../base/app/types';
+import { getSoundFileSrc } from '../base/media/functions';
 import { getParticipantById, getParticipantCount, getParticipantCountWithFake } from '../base/participants/functions';
 import { toState } from '../base/redux/functions';
+import { registerSound, unregisterSound } from '../base/sounds/actions';
 
+import {
+    E2EE_OFF_SOUND_ID,
+    E2EE_ON_SOUND_ID,
+    MAX_MODE_LIMIT,
+    MAX_MODE_THRESHOLD
+} from './constants';
+import {
+    E2EE_OFF_SOUND_FILE,
+    E2EE_ON_SOUND_FILE
+} from './sounds';
 
-import { MAX_MODE_LIMIT, MAX_MODE_THRESHOLD } from './constants';
 
 /**
  * Gets the value of a specific React {@code Component} prop of the currently
@@ -73,3 +86,35 @@ export function displayVerification(state: IReduxState, pId: string) {
         && participant?.e2eeVerificationAvailable
         && participant?.e2eeVerified === undefined);
 }
+
+/**
+ * Unregisters the audio files based on locale.
+ *
+ * @param {Dispatch<any>} dispatch - The redux dispatch function.
+ * @returns {void}
+ */
+export function unregisterE2eeAudioFiles(dispatch: IStore['dispatch']) {
+    dispatch(unregisterSound(E2EE_OFF_SOUND_ID));
+    dispatch(unregisterSound(E2EE_ON_SOUND_ID));
+}
+
+/**
+ * Registers the audio files based on locale.
+ *
+ * @param {Dispatch<any>} dispatch - The redux dispatch function.
+ * @param {boolean|undefined} shouldUnregister - Whether the sounds should be unregistered.
+ * @returns {void}
+ */
+export function registerE2eeAudioFiles(dispatch: IStore['dispatch'], shouldUnregister?: boolean) {
+    const language = i18next.language;
+
+    shouldUnregister && unregisterE2eeAudioFiles(dispatch);
+
+    dispatch(registerSound(
+        E2EE_OFF_SOUND_ID,
+        getSoundFileSrc(E2EE_OFF_SOUND_FILE, language)));
+
+    dispatch(registerSound(
+        E2EE_ON_SOUND_ID,
+        getSoundFileSrc(E2EE_ON_SOUND_FILE, language)));
+}

react/features/e2ee/middleware.ts

@@ -1,4 +1,3 @@
-
 import { IStore } from '../app/types';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app/actionTypes';
 import { CONFERENCE_JOINED } from '../base/conference/actionTypes';
@@ -14,16 +13,19 @@ import {
 } from '../base/participants/functions';
 import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 import StateListenerRegistry from '../base/redux/StateListenerRegistry';
-import { playSound, registerSound, unregisterSound } from '../base/sounds/actions';
+import { playSound } from '../base/sounds/actions';
 
 import { PARTICIPANT_VERIFIED, SET_MEDIA_ENCRYPTION_KEY, START_VERIFICATION, TOGGLE_E2EE } from './actionTypes';
 import { setE2EEMaxMode, toggleE2EE } from './actions';
 import ParticipantVerificationDialog from './components/ParticipantVerificationDialog';
 import { E2EE_OFF_SOUND_ID, E2EE_ON_SOUND_ID, MAX_MODE } from './constants';
-import { isMaxModeReached, isMaxModeThresholdReached } from './functions';
+import {
+    isMaxModeReached,
+    isMaxModeThresholdReached,
+    registerE2eeAudioFiles,
+    unregisterE2eeAudioFiles
+} from './functions';
 import logger from './logger';
-import { E2EE_OFF_SOUND_FILE, E2EE_ON_SOUND_FILE } from './sounds';
-
 
 /**
  * Middleware that captures actions related to E2EE.
@@ -36,18 +38,11 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
 
     switch (action.type) {
     case APP_WILL_MOUNT:
-        dispatch(registerSound(
-            E2EE_OFF_SOUND_ID,
-            E2EE_OFF_SOUND_FILE));
-
-        dispatch(registerSound(
-            E2EE_ON_SOUND_ID,
-            E2EE_ON_SOUND_FILE));
+        registerE2eeAudioFiles(dispatch);
         break;
 
     case APP_WILL_UNMOUNT:
-        dispatch(unregisterSound(E2EE_OFF_SOUND_ID));
-        dispatch(unregisterSound(E2EE_ON_SOUND_ID));
+        unregisterE2eeAudioFiles(dispatch);
         break;
 
     case CONFERENCE_JOINED:

react/features/recording/functions.ts

@@ -1,19 +1,36 @@
-import { IReduxState } from '../app/types';
+import i18next from 'i18next';
+
+import { IReduxState, IStore } from '../app/types';
 import { isMobileBrowser } from '../base/environment/utils';
 import { isJwtFeatureEnabled } from '../base/jwt/functions';
 import { JitsiRecordingConstants, browser } from '../base/lib-jitsi-meet';
+import { getSoundFileSrc } from '../base/media/functions';
 import {
     getLocalParticipant,
     getRemoteParticipants,
     isLocalParticipantModerator
 } from '../base/participants/functions';
+import { registerSound, unregisterSound } from '../base/sounds/actions';
 import { isInBreakoutRoom } from '../breakout-rooms/functions';
 import { isEnabled as isDropboxEnabled } from '../dropbox/functions';
 import { extractFqnFromPath } from '../dynamic-branding/functions.any';
 
 import LocalRecordingManager from './components/Recording/LocalRecordingManager';
-import { RECORDING_STATUS_PRIORITIES, RECORDING_TYPES } from './constants';
+import {
+    LIVE_STREAMING_OFF_SOUND_ID,
+    LIVE_STREAMING_ON_SOUND_ID,
+    RECORDING_OFF_SOUND_ID,
+    RECORDING_ON_SOUND_ID,
+    RECORDING_STATUS_PRIORITIES,
+    RECORDING_TYPES
+} from './constants';
 import logger from './logger';
+import {
+    LIVE_STREAMING_OFF_SOUND_FILE,
+    LIVE_STREAMING_ON_SOUND_FILE,
+    RECORDING_OFF_SOUND_FILE,
+    RECORDING_ON_SOUND_FILE
+} from './sounds';
 
 /**
  * Searches in the passed in redux state for an active recording session of the
@@ -278,3 +295,47 @@ function isRemoteParticipantRecordingLocally(state: IReduxState) {
 
     return false;
 }
+
+/**
+ * Unregisters the audio files based on locale.
+ *
+ * @param {Dispatch<any>} dispatch - The redux dispatch function.
+ * @returns {void}
+ */
+export function unregisterRecordingAudioFiles(dispatch: IStore['dispatch']) {
+    dispatch(unregisterSound(LIVE_STREAMING_OFF_SOUND_FILE));
+    dispatch(unregisterSound(LIVE_STREAMING_ON_SOUND_FILE));
+    dispatch(unregisterSound(RECORDING_OFF_SOUND_FILE));
+    dispatch(unregisterSound(RECORDING_ON_SOUND_FILE));
+}
+
+/**
+ * Registers the audio files based on locale.
+ *
+ * @param {Dispatch<any>} dispatch - The redux dispatch function.
+ * @param {boolean|undefined} shouldUnregister - Whether the sounds should be unregistered.
+ * @returns {void}
+ */
+export function registerRecordingAudioFiles(dispatch: IStore['dispatch'], shouldUnregister?: boolean) {
+    const language = i18next.language;
+
+    if (shouldUnregister) {
+        unregisterRecordingAudioFiles(dispatch);
+    }
+
+    dispatch(registerSound(
+        LIVE_STREAMING_OFF_SOUND_ID,
+        getSoundFileSrc(LIVE_STREAMING_OFF_SOUND_FILE, language)));
+
+    dispatch(registerSound(
+        LIVE_STREAMING_ON_SOUND_ID,
+        getSoundFileSrc(LIVE_STREAMING_ON_SOUND_FILE, language)));
+
+    dispatch(registerSound(
+        RECORDING_OFF_SOUND_ID,
+        getSoundFileSrc(RECORDING_OFF_SOUND_FILE, language)));
+
+    dispatch(registerSound(
+        RECORDING_ON_SOUND_ID,
+        getSoundFileSrc(RECORDING_ON_SOUND_FILE, language)));
+}

react/features/recording/middleware.ts

@@ -15,9 +15,7 @@ import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 import {
     playSound,
-    registerSound,
-    stopSound,
-    unregisterSound
+    stopSound
 } from '../base/sounds/actions';
 import { TRACK_ADDED } from '../base/tracks/actionTypes';
 import { showErrorNotification, showNotification } from '../notifications/actions';
@@ -44,15 +42,11 @@ import {
 } from './constants';
 import {
     getResourceId,
-    getSessionById
+    getSessionById,
+    registerRecordingAudioFiles,
+    unregisterRecordingAudioFiles
 } from './functions';
 import logger from './logger';
-import {
-    LIVE_STREAMING_OFF_SOUND_FILE,
-    LIVE_STREAMING_ON_SOUND_FILE,
-    RECORDING_OFF_SOUND_FILE,
-    RECORDING_ON_SOUND_FILE
-} from './sounds';
 
 /**
  * StateListenerRegistry provides a reliable way to detect the leaving of a
@@ -85,29 +79,12 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => async action =>
 
     switch (action.type) {
     case APP_WILL_MOUNT:
-        dispatch(registerSound(
-            LIVE_STREAMING_OFF_SOUND_ID,
-            LIVE_STREAMING_OFF_SOUND_FILE));
-
-        dispatch(registerSound(
-            LIVE_STREAMING_ON_SOUND_ID,
-            LIVE_STREAMING_ON_SOUND_FILE));
-
-        dispatch(registerSound(
-            RECORDING_OFF_SOUND_ID,
-            RECORDING_OFF_SOUND_FILE));
-
-        dispatch(registerSound(
-            RECORDING_ON_SOUND_ID,
-            RECORDING_ON_SOUND_FILE));
+        registerRecordingAudioFiles(dispatch);
 
         break;
 
     case APP_WILL_UNMOUNT:
-        dispatch(unregisterSound(LIVE_STREAMING_OFF_SOUND_ID));
-        dispatch(unregisterSound(LIVE_STREAMING_ON_SOUND_ID));
-        dispatch(unregisterSound(RECORDING_OFF_SOUND_ID));
-        dispatch(unregisterSound(RECORDING_ON_SOUND_ID));
+        unregisterRecordingAudioFiles(dispatch);
 
         break;