Merge pull request #15665 from ramonlsouza/add-locale-format

Support @ notation for localization files

bigbluebutton-html5/imports/startup/client/intl.jsx

@@ -8,6 +8,7 @@ import getFromUserSettings from '/imports/ui/services/users-settings';
 import _ from 'lodash';
 import { Session } from 'meteor/session';
 import Logger from '/imports/startup/client/logger';
+import { formatLocaleCode } from '/imports/utils/string-utils';
 
 const propTypes = {
   locale: PropTypes.string,
@@ -136,6 +137,8 @@ class IntlStartup extends Component {
               }
 
               const dasherizedLocale = normalizedLocale.replace('_', '-');
+              const { language, formattedLocale } = formatLocaleCode(dasherizedLocale);
+
               this.setState({ messages: mergedMessages, fetching: false, normalizedLocale: dasherizedLocale }, () => {
                 Settings.application.locale = dasherizedLocale;
                 if (RTL_LANGUAGES.includes(dasherizedLocale.substring(0, 2))) {
@@ -147,6 +150,8 @@ class IntlStartup extends Component {
                 }
                 Session.set('isLargeFont', LARGE_FONT_LANGUAGES.includes(dasherizedLocale.substring(0, 2)));
                 window.dispatchEvent(new Event('localeChanged'));
+                document.getElementsByTagName('html')[0].lang = formattedLocale;
+                document.body.classList.add(`lang-${language}`);
                 Settings.save();
               });
             });
@@ -157,6 +162,7 @@ class IntlStartup extends Component {
   render() {
     const { fetching, normalizedLocale, messages } = this.state;
     const { children } = this.props;
+    const { formattedLocale } = formatLocaleCode(normalizedLocale);
 
     return (
       <>
@@ -164,7 +170,7 @@ class IntlStartup extends Component {
 
         {normalizedLocale
           && (
-          <IntlProvider fallbackOnEmptyString={FALLBACK_ON_EMPTY_STRING} locale={normalizedLocale} messages={messages}>
+          <IntlProvider fallbackOnEmptyString={FALLBACK_ON_EMPTY_STRING} locale={formattedLocale} messages={messages}>
             {children}
           </IntlProvider>
           )

bigbluebutton-html5/imports/ui/components/app/component.jsx

@@ -52,7 +52,6 @@ const MOBILE_MEDIA = 'only screen and (max-width: 40em)';
 const APP_CONFIG = Meteor.settings.public.app;
 const DESKTOP_FONT_SIZE = APP_CONFIG.desktopFontSize;
 const MOBILE_FONT_SIZE = APP_CONFIG.mobileFontSize;
-const OVERRIDE_LOCALE = APP_CONFIG.defaultSettings.application.overrideLocale;
 const LAYOUT_CONFIG = Meteor.settings.public.layout;
 
 const intlMessages = defineMessages({
@@ -117,14 +116,12 @@ const intlMessages = defineMessages({
 const propTypes = {
   actionsbar: PropTypes.element,
   captions: PropTypes.element,
-  locale: PropTypes.string,
   darkTheme: PropTypes.bool.isRequired,
 };
 
 const defaultProps = {
   actionsbar: null,
   captions: null,
-  locale: OVERRIDE_LOCALE || navigator.language,
 };
 
 const isLayeredView = window.matchMedia(`(max-width: ${SMALL_VIEWPORT_BREAKPOINT}px)`);
@@ -145,7 +142,6 @@ class App extends Component {
 
   componentDidMount() {
     const {
-      locale,
       notify,
       intl,
       validIOSVersion,
@@ -165,7 +161,6 @@ class App extends Component {
     Modal.setAppElement('#app');
 
     const fontSize = isMobile() ? MOBILE_FONT_SIZE : DESKTOP_FONT_SIZE;
-    document.getElementsByTagName('html')[0].lang = locale;
     document.getElementsByTagName('html')[0].style.fontSize = fontSize;
 
     layoutContextDispatch({
@@ -182,8 +177,6 @@ class App extends Component {
 
     body.classList.add(`os-${osName.split(' ').shift().toLowerCase()}`);
 
-    body.classList.add(`lang-${locale.split('-')[0]}`);
-
     if (!validIOSVersion()) {
       notify(
         intl.formatMessage(intlMessages.iOSWarning), 'error', 'warning',

bigbluebutton-html5/imports/ui/components/settings/component.jsx

@@ -8,6 +8,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { withModalMounter } from '/imports/ui/components/common/modal/service';
 import Styled from './styles';
+import { formatLocaleCode } from '/imports/utils/string-utils';
 
 const intlMessages = defineMessages({
   appTabLabel: {
@@ -268,9 +269,12 @@ class Settings extends Component {
         confirm={{
           callback: () => {
             this.updateSettings(current, intl.formatMessage(intlMessages.savedAlertLabel));
-            document.body.classList.remove(`lang-${saved.application.locale.split('-')[0]}`);
-            document.body.classList.add(`lang-${current.application.locale.split('-')[0]}`);
-            document.getElementsByTagName('html')[0].lang = current.application.locale;
+
+            if (saved.application.locale !== current.application.locale) {
+              const { language } = formatLocaleCode(saved.application.locale);
+              document.body.classList.remove(`lang-${language}`);
+            }
+
             /* We need to use mountModal(null) here to prevent submenu state updates,
             *  from re-opening the modal.
             */

bigbluebutton-html5/imports/utils/string-utils.js

@@ -31,10 +31,20 @@ export const unescapeHtml = (input) => {
   return e.value;
 };
 
+export const formatLocaleCode = (locale) => {
+  const formattedLocale = locale?.replace('_', '-').replace('@', '-');
+
+  return {
+    language: formattedLocale?.split('-')[0],
+    formattedLocale,
+  }
+}
+
 export default {
   capitalizeFirstLetter,
   getDateString,
   stripTags,
   escapeHtml,
   unescapeHtml,
+  formatLocaleCode,
 };

bigbluebutton-html5/private/config/fallbackLocales.json

@@ -22,5 +22,9 @@
   "oc": {
     "englishName": "Occitan",
     "nativeName": "Occitan"
+  },
+  "uz@Cyrl": {
+    "englishName": "Uzbek (Cyrillic)",
+    "nativeName": "ўзбек тили"
   }
 }