Translate react strings.

Split language detectors to be web/native dependent. Take care of strings that contain html.

lang/main.json

     },
     "welcomepage":{
         "go": "GO",
+        "join": "JOIN",
         "roomname": "Enter room name",
+        "roomnamePlaceHolder": "room name",
         "disable": "Don't show this page again",
         "feature1": {
             "title": "Simple to use",
         "feature8": {
             "title": "Usage statistics",
             "content": "Learn about your users through easy integration with Piwik, Google Analytics, and other usage monitoring and statistics systems."
-        }
+        },
+        "privacy": "Privacy",
+        "sendFeedback": "Send feedback",
+        "terms": "Terms"
     },
     "startupoverlay": {
         "policyText": " ",
         "profile": "Edit your profile",
         "raiseHand": "Raise / Lower your hand"
     },
+    "unsupportedPage": {
+        "onlySupportedBy": "This application is currently only supported by",
+        "download": "DOWNLOAD",
+        "joinConversation": "Join the conversation",
+        "startConference": "Start a conference",
+        "joinConversationMobile": "You need <strong>__app__</strong> to join a conversation on your mobile",
+        "downloadApp": "Download the App",
+        "availableApp": "or if you already have it<br /><strong>then</strong>"
+    },
     "bottomtoolbar": {
         "chat": "Open / close chat",
         "filmstrip": "Show / hide videos",

package.json

     "autosize": "^1.18.13",
     "bootstrap": "3.1.1",
     "i18next": "7.0.0",
-    "i18next-browser-languagedetector": "*",
+    "i18next-browser-languagedetector": "1.0.1",
     "i18next-xhr-backend": "1.3.0",
     "jitsi-meet-logger": "jitsi/jitsi-meet-logger",
     "jquery": "~2.1.1",
     "react-native-background-timer": "1.0.0",
     "react-native-immersive": "0.0.4",
     "react-native-keep-awake": "^2.0.2",
+    "react-native-locale-detector": "1.0.1 ",
     "react-native-prompt": "^1.0.0",
     "react-native-vector-icons": "^4.0.0",
     "react-native-webrtc": "jitsi/react-native-webrtc",

react/features/base/react/components/Watermarks.web.js

 /* @flow */
 
 import React, { Component } from 'react';
+import { translate } from '../../translation';
 
 declare var APP: Object;
 declare var interfaceConfig: Object;
  * A Web Component which renders watermarks such as Jits, brand, powered by,
  * etc.
  */
-export class Watermarks extends Component {
+class WatermarksComponent extends Component {
     state = {
         brandWatermarkLink: String,
         jitsiWatermarkLink: String,
      */
     _renderPoweredBy() {
         if (this.state.showPoweredBy) {
+            const { t } = this.props;
+
             return (
                 <a
                     className = 'poweredby'
                     href = 'http://jitsi.org'
                     target = '_new'>
-                    <span data-i18n = 'poweredby' /> jitsi.org
+                    <span>{t('poweredby')} jitsi.org</span>
                 </a>
             );
         }
         return null;
     }
 }
+
+export const Watermarks = translate(WatermarksComponent);

react/features/base/translation/ConfigLanguageDetector.js

     /**
      * The actual lookup.
      *
-     * @returns {string} the default language if any.
+     * @returns {string} The default language if any.
      */
     lookup() {
         return config.defaultLanguage;

react/features/base/translation/LanguageDetector.native.js

+import locale from 'react-native-locale-detector';
+
+/**
+ * A language detector that uses native locale.
+ */
+export default {
+    init: Function.prototype,
+    type: 'languageDetector',
+    detect: () => locale,
+    cacheUserLanguage: Function.prototype
+};

react/features/base/translation/LanguageDetector.web.js

+/* global interfaceConfig */
+import Browser from 'i18next-browser-languagedetector';
+import ConfigLanguageDetector from './ConfigLanguageDetector';
+
+/**
+ * List of detectors to use in their order.
+ *
+ * @type {[*]}
+ */
+const detectors = [ 'querystring', 'localStorage', 'configLanguageDetector' ];
+
+/**
+ * Allow i18n to detect the system language from the browser.
+ */
+if (interfaceConfig.LANG_DETECTION) {
+    detectors.push('navigator');
+}
+
+/**
+ * The language detectors.
+ */
+const browser = new Browser(null, {
+    order: detectors,
+    lookupQuerystring: 'lang',
+    lookupLocalStorage: 'language',
+    caches: [ 'localStorage' ]
+});
+
+/**
+ * adds a language detector that just checks the config
+ */
+browser.addDetector(ConfigLanguageDetector);
+
+export default browser;

react/features/base/translation/Translation.js

 import { DEFAULT_LANG, languages } from './constants';
 import languagesR from '../../../../lang/languages.json';
 import mainR from '../../../../lang/main.json';
-import Browser from 'i18next-browser-languagedetector';
-import ConfigLanguageDetector from './ConfigLanguageDetector';
+
+import LanguageDetector from './LanguageDetector';
 
 /**
  * Default options to initialize i18next.
     fallbackOnNull: true,
     fallbackOnEmpty: true,
     useDataAttrOptions: true,
-    app: interfaceConfig.APP_NAME
+    app: typeof interfaceConfig === 'undefined'
+        ? 'Jitsi Meet' : interfaceConfig.APP_NAME
 };
 
-/**
- * List of detectors to use in their order.
- *
- * @type {[*]}
- */
-const detectors = [ 'querystring', 'localStorage', 'configLanguageDetector' ];
-
-/**
- * Allow i18n to detect the system language from the browser.
- */
-if (interfaceConfig.LANG_DETECTION) {
-    detectors.push('navigator');
-}
-
-/**
- * The language detectors.
- */
-const browser = new Browser(null, {
-    order: detectors,
-    lookupQuerystring: 'lang',
-    lookupLocalStorage: 'language',
-    caches: [ 'localStorage' ]
-});
-
-// adds a language detector that just checks the config
-browser.addDetector(ConfigLanguageDetector);
-
 i18n.use(XHR)
-    .use(browser)
+    .use(LanguageDetector)
     .use({
         type: 'postProcessor',
         name: 'resolveAppName',

react/features/base/translation/functions.js

 import { translate as reactTranslate } from 'react-i18next';
+import React from 'react';
 
 /**
  * Wrap a translatable component.
  *
- * @param {Component} component - the component to wrap
- * @returns {Component} the wrapped component.
+ * @param {Component} component - The component to wrap.
+ * @returns {Component} The wrapped component.
  */
 export function translate(component) {
     // use the default list of namespaces
     return reactTranslate([ 'main', 'languages' ], { wait: true })(component);
 }
+
+/**
+ * Translates key and prepares data to be passed to dangerouslySetInnerHTML.
+ * Used when translation text contains html.
+ *
+ * @param {func} t - Translate function.
+ * @param {string} key - The key to translate.
+ * @param {Array} options - Optional options.
+ * @returns {XML} A span using dangerouslySetInnerHTML to insert html text.
+ */
+export function translateToHTML(t, key, options = {}) {
+    /* eslint-disable react/no-danger */
+    return (
+        <span
+            dangerouslySetInnerHTML = {{ __html: t(key, options) }} />
+    );
+
+    /* eslint-enable react/no-danger */
+}

react/features/conference/components/Conference.web.js

         APP.UI.registerListeners();
         APP.UI.bindEvents();
 
-        // XXX Temporary solution until we add React translation.
-        APP.translation.translateElement($('#videoconference_page'));
-
         this.props.dispatch(connect());
     }
 

react/features/conference/components/PasswordRequiredPrompt.native.js

 
 import { setPassword } from '../../base/conference';
 
+import { translate } from '../../base/translation';
+
 /**
  * Implements a React Component which prompts the user when a password is
  * required to join a conference.
          * @type {JitsiConference}
          */
         conference: React.PropTypes.object,
-        dispatch: React.PropTypes.func
+        dispatch: React.PropTypes.func,
+        t: React.PropTypes.func
     }
 
     /**
      * @returns {ReactElement}
      */
     render() {
+        const { t } = this.props;
+
         return (
             <Prompt
                 onCancel = { this._onCancel }
                 onSubmit = { this._onSubmit }
-                placeholder = 'Password'
-                title = 'Password required'
+                placeholder = { t('dialog.passwordLabel') }
+                title = { t('dialog.passwordRequired') }
                 visible = { true } />
         );
     }
     }
 }
 
-export default connect()(PasswordRequiredPrompt);
+export default translate(connect()(PasswordRequiredPrompt));

react/features/overlay/components/AbstractOverlay.js

-/* global $, APP */
+/* global APP */
 
 import React, { Component } from 'react';
 
         };
     }
 
-    /**
-     * This method is executed when comonent is mounted.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentDidMount() {
-        // XXX Temporary solution until we add React translation.
-        APP.translation.translateElement($('#overlay'));
-    }
-
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/overlay/components/PageReloadOverlay.js

 import AbstractOverlay from './AbstractOverlay';
 import ReloadTimer from './ReloadTimer';
 
+import { translate } from '../../base/translation';
+
 declare var APP: Object;
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
  * conference is reloaded. Shows a warning message and counts down towards the
  * reload.
  */
-export default class PageReloadOverlay extends AbstractOverlay {
+class PageReloadOverlay extends AbstractOverlay {
     /**
      * PageReloadOverlay component's property types.
      *
         if (this.props.isNetworkFailure) {
             const className
                 = 'button-control button-control_primary button-control_center';
+            const { t } = this.props;
 
             /* eslint-disable react/jsx-handler-names */
 
             return (
                 <button
                     className = { className }
-                    data-i18n = 'dialog.reconnectNow'
                     id = 'reconnectNow'
-                    onClick = { this._reconnectNow } />
+                    onClick = { this._reconnectNow }>
+                    { t('dialog.reconnectNow') }
+                </button>
             );
 
 
      * @protected
      */
     _renderOverlayContent() {
+        const { t } = this.props;
 
         /* eslint-disable react/jsx-handler-names */
 
         return (
             <div className = 'inlay'>
                 <span
-                    className = 'reload_overlay_title'
-                    data-i18n = { this.state.title } />
+                    className = 'reload_overlay_title'>
+                    { t(this.state.title) }
+                </span>
                 <span
-                    className = 'reload_overlay_text'
-                    data-i18n = { this.state.message } />
+                    className = 'reload_overlay_text'>
+                    { t(this.state.message) }
+                </span>
                 <ReloadTimer
                     end = { 0 }
                     interval = { 1 }
         /* eslint-enable react/jsx-handler-names */
     }
 }
+
+export default translate(PageReloadOverlay);

react/features/overlay/components/ReloadTimer.js

 import React, { Component } from 'react';
 
+import { translate } from '../../base/translation';
+
 declare var AJS: Object;
 
 /**
  * seconds until the current value reaches props.end. Also displays progress
  * bar.
  */
-export default class ReloadTimer extends Component {
+class ReloadTimer extends Component {
     /**
      * ReloadTimer component's property types.
      *
          * @public
          * @type {number}
          */
-        step: React.PropTypes.number
+        step: React.PropTypes.number,
+
+        /**
+         * The function used to translate strings.
+         *
+         * @public
+         * @type {func}
+         */
+        t: React.PropTypes.func
     }
 
     /**
      * @public
      */
     render() {
+        const { t } = this.props;
+
         return (
             <div>
                 <div
                     {
                         this.state.current
                     }
-                    <span data-i18n = 'dialog.conferenceReloadTimeLeft' />
+                    <span>
+                        { t('dialog.conferenceReloadTimeLeft') }
+                    </span>
                 </span>
             </div>
         );
     }
 }
+
+export default translate(ReloadTimer);

react/features/overlay/components/SuspendedOverlay.js

 
 import AbstractOverlay from './AbstractOverlay';
 
+import { translate } from '../../base/translation';
+
 /**
  * Implements a React Component for suspended overlay. Shown when a suspend is
  * detected.
  */
-export default class SuspendedOverlay extends AbstractOverlay {
+class SuspendedOverlay extends AbstractOverlay {
     /**
      * Constructs overlay body with the message and a button to rejoin.
      *
      */
     _renderOverlayContent() {
         const btnClass = 'inlay__button button-control button-control_primary';
+        const { t } = this.props;
 
         /* eslint-disable react/jsx-handler-names */
 
                 <span className = 'inlay__icon icon-microphone' />
                 <span className = 'inlay__icon icon-camera' />
                 <h3
-                    className = 'inlay__title'
-                    data-i18n = 'suspendedoverlay.title' />
+                    className = 'inlay__title'>
+                    { t('suspendedoverlay.title') }
+                </h3>
                 <button
                     className = { btnClass }
-                    data-i18n = 'suspendedoverlay.rejoinKeyTitle'
-                    onClick = { this._reconnectNow } />
+                    onClick = { this._reconnectNow }>
+                    { t('suspendedoverlay.rejoinKeyTitle') }
+                </button>
             </div>
         );
 
         /* eslint-enable react/jsx-handler-names */
     }
 }
+
+export default translate(SuspendedOverlay);

react/features/overlay/components/UserMediaPermissionsOverlay.js

 
 import AbstractOverlay from './AbstractOverlay';
 
+import { translate, translateToHTML } from '../../base/translation';
+
 /**
  * Implements a React Component for overlay with guidance how to proceed with
  * gUM prompt.
  */
-export default class UserMediaPermissionsOverlay extends AbstractOverlay {
+class UserMediaPermissionsOverlay extends AbstractOverlay {
     /**
      * UserMediaPermissionsOverlay component's property types.
      *
      * @protected
      */
     _renderOverlayContent() {
-        const textKey = `userMedia.${this.props.browser}GrantPermissions`;
+        const { t } = this.props;
 
         return (
             <div>
                 <div className = 'inlay'>
                     <span className = 'inlay__icon icon-microphone' />
                     <span className = 'inlay__icon icon-camera' />
-                    <h3
-                        className = 'inlay__title'
-                        data-i18n = 'startupoverlay.title'
-                        data-i18n-options
-                            = '{"postProcess": "resolveAppName"}' />
-                    <span
-                        className = 'inlay__text'
-                        data-i18n = { `[html]${textKey}` } />
+                    <h3 className = 'inlay__title'>
+                        { t('startupoverlay.title',
+                            { postProcess: 'resolveAppName' }) }
+                    </h3>
+                    <span className = 'inlay__text'>
+                        { translateToHTML(t,
+                            `userMedia.${this.props.browser}GrantPermissions`)}
+                    </span>
                 </div>
                 <div className = 'policy overlay__policy'>
-                    <p
-                        className = 'policy__text'
-                        data-i18n = '[html]startupoverlay.policyText' />
+                    <p className = 'policy__text'>
+                        { t('startupoverlay.policyText') }
+                    </p>
                     {
                         this._renderPolicyLogo()
                     }
         return null;
     }
 }
+
+export default translate(UserMediaPermissionsOverlay);

react/features/room-lock/components/RoomLockPrompt.native.js

 
 import { endRoomLockRequest } from '../actions';
 
+import { translate } from '../../base/translation';
+
 /**
  * Implements a React Component which prompts the user for a password to lock  a
  * conference/room.
          * @type {JitsiConference}
          */
         conference: React.PropTypes.object,
-        dispatch: React.PropTypes.func
+        dispatch: React.PropTypes.func,
+        t: React.PropTypes.func
     }
 
     /**
      * @returns {ReactElement}
      */
     render() {
+        const { t } = this.props;
+
         return (
             <Prompt
                 onCancel = { this._onCancel }
                 onSubmit = { this._onSubmit }
-                placeholder = 'Password'
-                title = 'Lock / Unlock room'
+                placeholder = { t('dialog.passwordLabel') }
+                title = { t('toolbar.lock') }
                 visible = { true } />
         );
     }
     }
 }
 
-export default connect()(RoomLockPrompt);
+export default translate(connect()(RoomLockPrompt));

react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js

 import React, { Component } from 'react';
 
 import { Platform } from '../../base/react';
+import { translate } from '../../base/translation';
 
 import { CHROME, FIREFOX, IE, SAFARI } from './browserLinks';
 import HideNotificationBarStyle from './HideNotificationBarStyle';
  *
  * @class UnsupportedDesktopBrowser
  */
-export default class UnsupportedDesktopBrowser extends Component {
+class UnsupportedDesktopBrowser extends Component {
+    /**
+     * UnsupportedDesktopBrowser component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        t: React.PropTypes.func
+    }
+
     /**
      * Renders the component.
      *
     }
 }
 
+export default translate(UnsupportedDesktopBrowser);

react/features/unsupported-browser/components/UnsupportedMobileBrowser.js

 import { connect } from 'react-redux';
 
 import { Platform } from '../../base/react';
+import { translate, translateToHTML } from '../../base/translation';
 
 import HideNotificationBarStyle from './HideNotificationBarStyle';
 
          * @private
          * @type {string}
          */
-        _room: React.PropTypes.string
+        _room: React.PropTypes.string,
+        t: React.PropTypes.func
     }
 
     /**
      */
     componentWillMount() {
         const joinText
-            = this.props._room ? 'Join the conversation' : 'Start a conference';
+            = this.props._room ? 'unsupportedPage.joinConversation'
+                : 'unsupportedPage.startConference';
 
         // If the user installed the app while this Component was displayed
         // (e.g. the user clicked the Download the App button), then we would
     render() {
         const ns = 'unsupported-mobile-browser';
         const downloadButtonClassName = `${ns}__button ${ns}__button_primary`;
+        const { t } = this.props;
 
         return (
             <div className = { ns }>
                         className = { `${ns}__logo` }
                         src = 'images/logo-blue.svg' />
                     <p className = { `${ns}__text` }>
-                        You need <strong>Jitsi Meet</strong> to join a
-                        conversation on mobile
+                        { translateToHTML(t,
+                            'unsupportedPage.joinConversationMobile',
+                            { postProcess: 'resolveAppName' }) }
                     </p>
                     <a href = { _URLS[Platform.OS] }>
                         <button className = { downloadButtonClassName }>
-                            Download the App
+                            { t('unsupportedPage.downloadApp') }
                         </button>
                     </a>
                     <p className = { `${ns}__text ${ns}__text_small` }>
-                        or if you already have it
-                        <br />
-                        <strong>then</strong>
+                        { translateToHTML(t, 'unsupportedPage.availableApp') }
                     </p>
                     <a href = { this.state.joinURL }>
                         <button className = { `${ns}__button` }>
-                            {
-                                this.state.joinText
-                            }
+                            { t(this.state.joinText) }
                         </button>
                     </a>
                 </div>
     };
 }
 
-export default connect(_mapStateToProps)(UnsupportedMobileBrowser);
+export default translate(connect(_mapStateToProps)(UnsupportedMobileBrowser));

react/features/welcome/components/WelcomePage.native.js

 import { AbstractWelcomePage, _mapStateToProps } from './AbstractWelcomePage';
 import { styles } from './styles';
 
+import { translate } from '../../base/translation';
+
 /**
  * The URL at which the privacy policy is available to the user.
  */
      * @returns {ReactElement}
      */
     _renderLegalese() {
+        const { t } = this.props;
+
         return (
             <View style = { styles.legaleseContainer }>
                 <Link
                     style = { styles.legaleseItem }
                     url = { TERMS_URL }>
-                    Terms
+                    { t('welcomepage.terms') }
                 </Link>
                 <Link
                     style = { styles.legaleseItem }
                     url = { PRIVACY_URL }>
-                    Privacy
+                    { t('welcomepage.privacy') }
                 </Link>
                 <Link
                     style = { styles.legaleseItem }
                     url = { SEND_FEEDBACK_URL }>
-                    Send feedback
+                    { t('welcomepage.sendFeedback') }
                 </Link>
             </View>
         );
      * @returns {ReactElement}
      */
     _renderLocalVideoOverlay() {
+        const { t } = this.props;
+
         return (
             <View style = { styles.localVideoOverlay }>
                 <View style = { styles.roomContainer }>
-                    <Text style = { styles.title }>Enter room name</Text>
+                    <Text style = { styles.title }>
+                        { t('welcomepage.roomname') }
+                    </Text>
                     <TextInput
                         accessibilityLabel = { 'Input room name.' }
                         autoCapitalize = 'none'
                         autoCorrect = { false }
                         autoFocus = { false }
                         onChangeText = { this._onRoomChange }
-                        placeholder = 'room name'
+                        placeholder = { t('welcomepage.roomnamePlaceHolder') }
                         style = { styles.textInput }
                         underlineColorAndroid = 'transparent'
                         value = { this.state.room } />
                         onPress = { this._onJoin }
                         style = { styles.button }
                         underlayColor = { ColorPalette.white }>
-                        <Text style = { styles.buttonText }>JOIN</Text>
+                        <Text style = { styles.buttonText }>
+                            { t('welcomepage.join') }
+                        </Text>
                     </TouchableHighlight>
                 </View>
                 {
     }
 }
 
-export default connect(_mapStateToProps)(WelcomePage);
+export default translate(connect(_mapStateToProps)(WelcomePage));

react/features/welcome/components/WelcomePage.web.js

-/* global $, APP, interfaceConfig */
+/* global APP, interfaceConfig */
 
 import React from 'react';
 import { connect } from 'react-redux';
 
 import { AbstractWelcomePage, _mapStateToProps } from './AbstractWelcomePage';
 
+import { translate } from '../../base/translation';
+
 /* eslint-disable require-jsdoc */
 
 /**
         if (this.state.generateRoomnames) {
             this._updateRoomname();
         }
-
-        // XXX Temporary solution until we add React translation.
-        APP.translation.translateElement($('#welcome_page'));
     }
 
     /**
      * @returns {ReactElement}
      */
     _renderFeature(index) {
+        const { t } = this.props;
+
         return (
             <div
                 className = 'feature_holder'
                 key = { index } >
                 <div
-                    className = 'feature_icon'
-                    data-i18n = { `welcomepage.feature${index}.title` } />
+                    className = 'feature_icon'>
+                    { t(`welcomepage.feature${index}.title`) }
+                </div>
                 <div
-                    className = 'feature_description'
-                    data-i18n = { `welcomepage.feature${index}.content` }
-                    data-i18n-options = { JSON.stringify({
-                        postProcess: 'resolveAppName'
-                    }) } />
+                    className = 'feature_description'>
+                    { t(`welcomepage.feature${index}.content`,
+                        { postProcess: 'resolveAppName' }) }
+                </div>
             </div>
         );
     }
     _renderHeader() {
 
 /* eslint-enable require-jsdoc */
+        const { t } = this.props;
 
         return (
             <div id = 'welcome_page_header'>
 
                             <button
                                 className = 'enter-room__button'
-                                data-i18n = 'welcomepage.go'
                                 id = 'enter_room_button'
                                 onClick = { this._onJoin }
-                                type = 'button' />
+                                type = 'button'>
+                                { t('welcomepage.go') }
+                            </button>
                         </div>
                     </div>
                 </div>
                     type = 'checkbox' />
                 <label
                     className = 'disable_welcome_position'
-                    data-i18n = 'welcomepage.disable'
-                    htmlFor = 'disable_welcome' />
+                    htmlFor = 'disable_welcome'>
+                    { t('welcomepage.disable') }
+                </label>
                 <div id = 'header_text' />
             </div>
         );
     }
 }
 
-export default connect(_mapStateToProps)(WelcomePage);
+export default translate(connect(_mapStateToProps)(WelcomePage));