Removes translateString and use translateElement.

Removing translateString forces using data-i18n attributes, to make sure we do not forget to set them. Missing data-i18n attributes is a problem with late loading where we can end up without translation, without text. Missing data-i18n attributes is also problem that strings will not be translated when changing language.
Fixes a bug in invite dialog, where remove password button was shown for non moderators.

conference.js

@@ -194,12 +194,9 @@ function maybeRedirectToWelcomePage(showThankYou) {
     }
 
     if (showThankYou) {
-        APP.UI.messageHandler.openMessageDialog(
-            null, "dialog.thankYou",
-            APP.translation.translateString(
-                "dialog.thankYou", {appName:interfaceConfig.APP_NAME}
-            )
-        );
+        APP.UI.messageHandler.openMessageDialog(null, null,
+            APP.translation.generateTranslationHTML(
+                "dialog.thankYou", {appName:interfaceConfig.APP_NAME}));
     }
 
     if (!config.enableWelcomePage) {
@@ -1050,21 +1047,20 @@ export default {
                 // TrackErrors.GENERAL
                 // and any other
                 let dialogTxt;
-                let dialogTitle;
+                let dialogTitleKey;
 
                 if (err.name === TrackErrors.PERMISSION_DENIED) {
                     dialogTxt = APP.translation.generateTranslationHTML(
                         "dialog.screenSharingPermissionDeniedError");
-                    dialogTitle = APP.translation.generateTranslationHTML(
-                        "dialog.error");
+                    dialogTitleKey = "dialog.error";
                 } else {
                     dialogTxt = APP.translation.generateTranslationHTML(
                         "dialog.failtoinstall");
-                    dialogTitle = APP.translation.generateTranslationHTML(
-                        "dialog.permissionDenied");
+                    dialogTitleKey = "dialog.permissionDenied";
                 }
 
-                APP.UI.messageHandler.openDialog(dialogTitle, dialogTxt, false);
+                APP.UI.messageHandler.openDialog(
+                    dialogTitleKey, dialogTxt, false);
             });
         } else {
             createLocalTracks({ devices: ['video'] }).then(

index.html

@@ -174,7 +174,7 @@
                     </div>
                 </div>
                 <div id="contacts_container" class="sideToolbarContainer__inner">
-                    <div class="title" data-i18n="contactlist"></div>
+                    <div class="title" data-i18n="contactlist" data-i18n-options='{"pcount":"1"}'></div>
                     <ul id="contacts"></ul>
                 </div>
                 <div id="settings_container" class="sideToolbarContainer__inner">

lang/main.json

@@ -1,5 +1,5 @@
 {
-    "contactlist": "Participants",
+    "contactlist": "Participants (__pcount__)",
     "addParticipants": "Add Participants",
     "roomLocked": "Callers must enter a password",
     "roomUnlocked": "Anyone with the link can join",
@@ -340,7 +340,7 @@
         "ATTACHED": "Attached",
         "FETCH_SESSION_ID": "Obtaining session-id...",
         "GOT_SESSION_ID": "Obtaining session-id... Done",
-        "GET_SESSION_ID_ERROR": "Get session-id error: ",
+        "GET_SESSION_ID_ERROR": "Get session-id error: __code__",
         "USER_CONNECTION_INTERRUPTED": "__displayName__ is having connectivity issues..."
     },
     "recording":

modules/UI/UI.js

@@ -75,16 +75,13 @@ JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.NO_DATA_FROM_SOURCE]
  */
 function promptDisplayName() {
     let labelKey = 'dialog.enterDisplayName';
-    let labelStr = APP.translation.translateString(labelKey);
-    let defaultNickMsg = APP.translation.translateString("defaultNickname");
     let message = (
         `<div class="input-control">
-            <label data-i18n="${labelKey}" 
-                class="input-control__label">${labelStr}</label>
+            <label data-i18n="${labelKey}" class="input-control__label"></label>
             <input name="displayName" type="text"
                data-i18n="[placeholder]defaultNickname"
                class="input-control__input"
-               placeholder="${defaultNickMsg}" autofocus>
+               autofocus>
          </div>`
     );
 
@@ -166,11 +163,10 @@ UI.notifyGracefulShutdown = function () {
  * Notify user that reservation error happened.
  */
 UI.notifyReservationError = function (code, msg) {
-    var title = APP.translation.generateTranslationHTML(
-        "dialog.reservationError");
     var message = APP.translation.generateTranslationHTML(
         "dialog.reservationErrorMsg", {code: code, msg: msg});
-    messageHandler.openDialog(title, message, true, {}, () => false);
+    messageHandler.openDialog(
+        "dialog.reservationError", message, true, {}, () => false);
 };
 
 /**
@@ -189,9 +185,8 @@ UI.notifyKicked = function () {
 UI.notifyConferenceDestroyed = function (reason) {
     //FIXME: use Session Terminated from translation, but
     // 'reason' text comes from XMPP packet and is not translated
-    const title
-        = APP.translation.generateTranslationHTML("dialog.sessTerminated");
-    messageHandler.openDialog(title, reason, true, {}, () => false);
+    messageHandler.openDialog(
+        "dialog.sessTerminated", reason, true, {}, () => false);
 };
 
 /**
@@ -919,9 +914,6 @@ UI.setUserAvatarUrl = function (id, url) {
  * @param {string} stropheErrorMsg raw Strophe error message
  */
 UI.notifyConnectionFailed = function (stropheErrorMsg) {
-    var title = APP.translation.generateTranslationHTML(
-        "dialog.error");
-
     var message;
     if (stropheErrorMsg) {
         message = APP.translation.generateTranslationHTML(
@@ -931,7 +923,7 @@ UI.notifyConnectionFailed = function (stropheErrorMsg) {
             "dialog.connectError");
     }
 
-    messageHandler.openDialog(title, message, true, {}, () => false);
+    messageHandler.openDialog("dialog.error", message, true, {}, () => false);
 };
 
 
@@ -939,13 +931,10 @@ UI.notifyConnectionFailed = function (stropheErrorMsg) {
  * Notify user that maximum users limit has been reached.
  */
 UI.notifyMaxUsersLimitReached = function () {
-    var title = APP.translation.generateTranslationHTML(
-        "dialog.error");
-
     var message = APP.translation.generateTranslationHTML(
             "dialog.maxUsersLimitReached");
 
-    messageHandler.openDialog(title, message, true, {}, () => false);
+    messageHandler.openDialog("dialog.error", message, true, {}, () => false);
 };
 
 /**
@@ -1112,14 +1101,11 @@ UI.notifyFocusDisconnected = function (focus, retrySec) {
  * Notify user that focus left the conference so page should be reloaded.
  */
 UI.notifyFocusLeft = function () {
-    let title = APP.translation.generateTranslationHTML(
-        'dialog.serviceUnavailable'
-    );
     let msg = APP.translation.generateTranslationHTML(
         'dialog.jicofoUnavailable'
     );
     messageHandler.openDialog(
-        title,
+        'dialog.serviceUnavailable',
         msg,
         true, // persistent
         [{title: 'retry'}],
@@ -1284,8 +1270,6 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
         }
     }
 
-    let title = getTitleKey();
-    let titleMsg = `<span data-i18n="${title}"></span>`;
     let cameraJitsiTrackErrorMsg = cameraError
         ? JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[cameraError.name]
         : undefined;
@@ -1339,7 +1323,7 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
     deviceErrorDialog && deviceErrorDialog.close();
 
     deviceErrorDialog = messageHandler.openDialog(
-        titleMsg,
+        getTitleKey(),
         message,
         false,
         {Ok: true},
@@ -1363,8 +1347,6 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
         }
     );
 
-    APP.translation.translateElement($(".jqibox"));
-
     function getTitleKey() {
         let title = "dialog.error";
 

modules/UI/authentication/AuthHandler.js

@@ -164,7 +164,7 @@ function doXmppAuth (room, lockPassword) {
                 console.error('Auth on the fly failed', error);
 
                 loginDialog.displayError(
-                    'connection.GET_SESSION_ID_ERROR', code);
+                    'connection.GET_SESSION_ID_ERROR', {code: code});
             });
         }, function (err) {
             loginDialog.displayError(err);

modules/UI/authentication/LoginDialog.js

@@ -1,4 +1,4 @@
-/* global APP, config */
+/* global $, APP, config */
 
 /**
  * Build html for "password required" dialog.
@@ -8,11 +8,8 @@ function getPasswordInputHtml() {
     let placeholder = config.hosts.authdomain
         ? "user identity"
         : "user@domain.net";
-    let passRequiredMsg = APP.translation.translateString(
-        "dialog.passwordRequired"
-    );
     return `
-        <h2 data-i18n="dialog.passwordRequired">${passRequiredMsg}</h2>
+        <h2 data-i18n="dialog.passwordRequired"></h2>
         <input name="username" type="text" placeholder=${placeholder} autofocus>
         <input name="password" type="password"
                data-i18n="[placeholder]dialog.userPassword"
@@ -68,7 +65,7 @@ function LoginDialog(successCallback, cancelCallback) {
         value: true
     }];
     let finishedButtons = [{
-        title: APP.translation.translateString('dialog.retry'),
+        title: APP.translation.generateTranslationHTML('dialog.retry'),
         value: 'retry'
     }];
 
@@ -129,16 +126,16 @@ function LoginDialog(successCallback, cancelCallback) {
      * Displays error message in 'finished' state which allows either to cancel
      * or retry.
      * @param messageKey the key to the message to be displayed.
-     * @param code the code error (optional)
+     * @param options the options to the error message (optional)
      */
-    this.displayError = function (messageKey, code) {
+    this.displayError = function (messageKey, options) {
 
         let finishedState = connDialog.getState('finished');
 
         let errorMessageElem = finishedState.find('#errorMessage');
         errorMessageElem.attr("data-i18n", messageKey);
-        errorMessageElem.text(
-            APP.translation.translateString(messageKey) + (code ? code : ''));
+
+        APP.translation.translateElement($(errorMessageElem), options);
 
         connDialog.goToState('finished');
     };
@@ -152,7 +149,7 @@ function LoginDialog(successCallback, cancelCallback) {
 
         let connectionStatus = connectingState.find('#connectionStatus');
         connectionStatus.attr("data-i18n", messageKey);
-        connectionStatus.text(APP.translation.translateString(messageKey));
+        APP.translation.translateElement($(connectionStatus));
     };
 
     /**
@@ -206,9 +203,6 @@ export default {
      * @returns dialog
      */
     showAuthRequiredDialog: function (roomName, onAuthNow) {
-        var title = APP.translation.generateTranslationHTML(
-            "dialog.WaitingForHost"
-        );
         var msg = APP.translation.generateTranslationHTML(
             "dialog.WaitForHostMsg", {room: roomName}
         );
@@ -219,7 +213,7 @@ export default {
         var buttons = [{title: buttonTxt, value: "authNow"}];
 
         return APP.UI.messageHandler.openDialog(
-            title,
+            "dialog.WaitingForHost",
             msg,
             true,
             buttons,

modules/UI/feedback/FeedbackWindow.js

@@ -35,7 +35,6 @@ function toggleStars(starCount) {
  * @returns {string} the contructed html string
  */
 function createRateFeedbackHTML() {
-    let feedbackHelp = APP.translation.translateString('dialog.feedbackHelp');
 
     let starClassName = (interfaceConfig.ENABLE_FEEDBACK_ANIMATION)
         ? "icon-star-full shake-rotate"
@@ -67,8 +66,7 @@ function createRateFeedbackHTML() {
                 </div>
             </div>
             <div class="details">
-                <textarea id="feedbackTextArea" class="input-control__input"
-                    placeholder="${ feedbackHelp }" 
+                <textarea id="feedbackTextArea" class="input-control__input" 
                     data-i18n="[placeholder]dialog.feedbackHelp"></textarea>
             </div>
         </form>`;
@@ -148,10 +146,10 @@ export default class Dialog {
         this.submitted = false;
         this.onCloseCallback = function() {};
 
-        this.setDefoulOptions();
+        this.setDefaulOptions();
     }
 
-    setDefoulOptions() {
+    setDefaulOptions() {
         var self = this;
 
         this.options = {

modules/UI/invite/AskForPassword.js

@@ -8,12 +8,10 @@ import UIUtil from '../util/UIUtil';
  */
 export default function askForPassword () {
     let titleKey = "dialog.passwordRequired";
-    let passMsg = APP.translation.translateString("dialog.password");
     let msgString = `
         <input name="lockKey" type="text"
                data-i18n="[placeholder]dialog.password"
-               placeholder="${passMsg}" autofocus>
-    `;
+               autofocus>`;
     return new Promise(function (resolve, reject) {
         APP.UI.messageHandler.openTwoButtonDialog({
             titleKey,

modules/UI/invite/Invite.js

@@ -203,8 +203,10 @@ class Invite {
      * @param isLocked
      */
     setLockedFromElsewhere(isLocked) {
-        let oldLockState = this.roomLocker.lockedElsewhere;
-        if (oldLockState !== isLocked) {
+        // isLocked can be 1, true or false
+        let newLockState = (isLocked === 1) || isLocked;
+        let oldLockState = this.roomLocker.isLocked;
+        if (oldLockState !== newLockState) {
             this.roomLocker.lockedElsewhere = isLocked;
             APP.UI.emitEvent(UIEvents.TOGGLE_ROOM_LOCK);
             this.updateView();

modules/UI/invite/InviteDialogView.js

@@ -15,20 +15,15 @@ const States = {
  */
 export default class InviteDialogView {
     constructor(model) {
-        let inviteAttributesKey = 'inviteUrlDefaultMsg';
-        let title = APP.translation.translateString(inviteAttributesKey);
-
         this.unlockHint = "unlockHint";
         this.lockHint = "lockHint";
         this.model = model;
 
         if (this.model.inviteUrl === null) {
-            this.inviteAttributes = (
-                `data-i18n="[value]${inviteAttributesKey}" value="${title}"`
-            );
+            this.inviteAttributes = `data-i18n="[value]inviteUrlDefaultMsg"`;
         } else {
-            let encodedInviteUrl = this.model.getEncodedInviteUrl();
-            this.inviteAttributes = `value="${encodedInviteUrl}"`;
+            this.inviteAttributes
+                = `value="${this.model.getEncodedInviteUrl()}"`;
         }
 
         this.initDialog();
@@ -99,8 +94,7 @@ export default class InviteDialogView {
         let {
             titleKey
         } = this.dialog;
-        let doneKey = 'dialog.done';
-        let doneMsg = APP.translation.translateString(doneKey);
+        let doneMsg = APP.translation.generateTranslationHTML('dialog.done');
         let states = {};
         let buttons = {};
         buttons[`${doneMsg}`] = true;
@@ -124,36 +118,24 @@ export default class InviteDialogView {
      * @returns {string}
      */
     getShareLinkBlock() {
-        let copyKey = 'dialog.copy';
-        let copyText = APP.translation.translateString(copyKey);
-        let roomLockDescKey = 'dialog.roomLocked';
-        let roomLockDesc = APP.translation.translateString(roomLockDescKey);
-        let roomUnlockKey = 'roomUnlocked';
-        let roomUnlock = APP.translation.translateString(roomUnlockKey);
         let classes = 'button-control button-control_light copyInviteLink';
-        let title = APP.translation.translateString(this.dialog.titleKey);
         return (
             `<div class="input-control">
                 <label class="input-control__label" for="inviteLinkRef"
-                    data-i18n="${this.dialog.titleKey}">
-                        ${title}
-                </label>
+                    data-i18n="${this.dialog.titleKey}"></label>
                 <div class="input-control__container">
                     <input class="input-control__input inviteLink"
                            id="inviteLinkRef" type="text"
                            ${this.inviteAttributes} readonly>
-                    <button data-i18n="${copyKey}"
-                            class="${classes}">
-                        ${copyText}
-                    </button>
+                    <button data-i18n="dialog.copy" class="${classes}"></button>
                 </div>
                 <p class="input-control__hint ${this.lockHint}">
                    <span class="icon-security-locked"></span>
-                   <span data-i18n="${roomLockDescKey}">${roomLockDesc}</span>
+                   <span data-i18n="dialog.roomLocked"></span>
                 </p>
                 <p class="input-control__hint ${this.unlockHint}">
                    <span class="icon-security"></span>
-                   <span data-i18n="${roomUnlockKey}">${roomUnlock}</span>
+                   <span data-i18n="roomUnlocked"></span>
                 </p>
             </div>`
         );
@@ -164,27 +146,20 @@ export default class InviteDialogView {
      * @returns {string}
      */
     getAddPasswordBlock() {
-        let addPassKey = 'dialog.addPassword';
-        let addPassText = APP.translation.translateString(addPassKey);
-        let addKey = 'dialog.add';
-        let addText = APP.translation.translateString(addKey);
-        let hintKey = 'dialog.createPassword';
-        let hintMsg = APP.translation.translateString(hintKey);
         let html;
 
         if (this.model.isModerator) {
             html = (`
             <div class="input-control">
-                <label class="input-control__label
-                       for="newPasswordInput"
-                       data-i18n="${addPassKey}">${addPassText}</label>
+                <label class="input-control__label"
+                       for="newPasswordInput" data-i18n="dialog.addPassword">
+               </label>
                 <div class="input-control__container">
                     <input class="input-control__input" id="newPasswordInput"
-                           type="text" placeholder="${hintMsg}">
+                           type="text" data-i18n="dialog.createPassword">
                     <button id="addPasswordBtn" id="inviteDialogAddPassword"
-                            disabled data-i18n="${addKey}"
+                            disabled data-i18n="dialog.add"
                             class="button-control button-control_light">
-                        ${addText}
                     </button>
                 </div>
             </div>
@@ -202,22 +177,16 @@ export default class InviteDialogView {
      */
     getPasswordBlock() {
         let { password, isModerator } = this.model;
-        let removePassKey = 'dialog.removePassword';
-        let removePassText = APP.translation.translateString(removePassKey);
-        let currentPassKey = 'dialog.currentPassword';
-        let currentPassText = APP.translation.translateString(currentPassKey);
-        let passwordKey = "dialog.passwordLabel";
-        let passwordText = APP.translation.translateString(passwordKey);
 
         if (isModerator) {
             return (`
                 <div class="input-control">
                     <label class="input-control__label"
-                           data-i18n="${passwordKey}">${passwordText}</label>
+                           data-i18n="dialog.passwordLabel"></label>
                     <div class="input-control__container">
-                        <p class="input-control__text"
-                           data-i18n="${currentPassKey}">
-                            ${currentPassText}
+                        <p>
+                            <span class="input-control__text"
+                                  data-i18n="dialog.currentPassword"></span>
                             <span id="inviteDialogPassword"
                                   class="input-control__em">
                                 ${password}
@@ -225,9 +194,7 @@ export default class InviteDialogView {
                         </p>
                         <a class="link input-control__right"
                            id="inviteDialogRemovePassword"
-                           data-i18n="${removePassKey}">
-                           ${removePassText}
-                       </a>
+                           data-i18n="dialog.removePassword"></a>
                     </div>
                 </div>
             `);
@@ -349,11 +316,17 @@ export default class InviteDialogView {
      */
     updateView() {
         let pass = this.model.getPassword();
-        if (!pass)
-            pass = APP.translation.translateString("passwordSetRemotely");
+        if (this.model.getRoomLocker().lockedElsewhere || !pass)
+            $('#inviteDialogPassword').attr("data-i18n", "passwordSetRemotely");
+        else
+            $('#inviteDialogPassword').text(pass);
+
+        // if we are not moderator we cannot remove password
+        if (APP.conference.isModerator)
+            $('#inviteDialogRemovePassword').show();
+        else
+            $('#inviteDialogRemovePassword').hide();
 
-        $('#inviteDialogPassword').attr("data-i18n", "passwordSetRemotely");
-        $('#inviteDialogPassword').text(pass);
         $('#newPasswordInput').val('');
         this.disableAddPassIfInputEmpty();
 

modules/UI/recording/Recording.js

@@ -41,8 +41,6 @@ function _isRecordingButtonEnabled() {
  * @returns {Promise}
  */
 function _requestLiveStreamId() {
-    const msg = APP.translation.generateTranslationHTML("dialog.liveStreaming");
-    const token = APP.translation.translateString("dialog.streamKey");
     const cancelButton
         = APP.translation.generateTranslationHTML("dialog.Cancel");
     const backButton = APP.translation.generateTranslationHTML("dialog.Back");
@@ -55,11 +53,11 @@ function _requestLiveStreamId() {
     return new Promise(function (resolve, reject) {
         dialog = APP.UI.messageHandler.openDialogWithStates({
             state0: {
-                title: msg,
+                titleKey: "dialog.liveStreaming",
                 html:
                     `<input name="streamId" type="text"
                     data-i18n="[placeholder]dialog.streamKey"
-                    placeholder="${token}" autofocus>`,
+                    autofocus>`,
                 persistent: false,
                 buttons: [
                     {title: cancelButton, value: false},
@@ -89,7 +87,7 @@ function _requestLiveStreamId() {
             },
 
             state1: {
-                title: msg,
+                titleKey: "dialog.liveStreaming",
                 html: streamIdRequired,
                 persistent: false,
                 buttons: [
@@ -122,11 +120,10 @@ function _requestLiveStreamId() {
  */
 function _requestRecordingToken () {
     let titleKey = "dialog.recordingToken";
-    let token = APP.translation.translateString("dialog.token");
     let messageString = (
         `<input name="recordingToken" type="text"
                 data-i18n="[placeholder]dialog.token"
-                placeholder="${token}" autofocus>`
+                autofocus>`
     );
     return new Promise(function (resolve, reject) {
         dialog = APP.UI.messageHandler.openTwoButtonDialog({
@@ -297,8 +294,7 @@ var Recording = {
 
         selector.addClass(this.baseClass);
         selector.attr("data-i18n", "[content]" + this.recordingButtonTooltip);
-        selector.attr("content",
-            APP.translation.translateString(this.recordingButtonTooltip));
+        APP.translation.translateElement(selector);
 
         var self = this;
         selector.click(function () {
@@ -505,7 +501,7 @@ var Recording = {
         moveToCorner(labelSelector, !isCentered);
 
         labelTextSelector.attr("data-i18n", textKey);
-        labelTextSelector.text(APP.translation.translateString(textKey));
+        APP.translation.translateElement(labelSelector);
     },
 
     /**

modules/UI/shared_video/SharedVideo.js

@@ -750,24 +750,19 @@ function showStopVideoPropmpt() {
  */
 function requestVideoLink() {
     let i18n = APP.translation;
-    const title = i18n.generateTranslationHTML("dialog.shareVideoTitle");
     const cancelButton = i18n.generateTranslationHTML("dialog.Cancel");
     const shareButton = i18n.generateTranslationHTML("dialog.Share");
     const backButton = i18n.generateTranslationHTML("dialog.Back");
     const linkError
         = i18n.generateTranslationHTML("dialog.shareVideoLinkError");
-    const i18nOptions = {url: defaultSharedVideoLink};
-    const defaultUrl = i18n.translateString("defaultLink", i18nOptions);
 
     return new Promise(function (resolve, reject) {
         dialog = APP.UI.messageHandler.openDialogWithStates({
             state0: {
-                title: title,
+                titleKey: "dialog.shareVideoTitle",
                 html:  `
                     <input name="sharedVideoUrl" type="text"
                            data-i18n="[placeholder]defaultLink"
-                           data-i18n-options="${JSON.stringify(i18nOptions)}"
-                           placeholder="${defaultUrl}"
                            autofocus>`,
                 persistent: false,
                 buttons: [
@@ -802,7 +797,7 @@ function requestVideoLink() {
             },
 
             state1: {
-                title: title,
+                titleKey: "dialog.shareVideoTitle",
                 html: linkError,
                 persistent: false,
                 buttons: [
@@ -825,7 +820,8 @@ function requestVideoLink() {
             close: function () {
                 dialog = null;
             }
+        }, {
+            url: defaultSharedVideoLink
         });
-
     });
 }

modules/UI/side_pannels/contactlist/ContactListView.js

@@ -21,9 +21,8 @@ function updateNumberOfParticipants(delta) {
 
     $("#numberOfParticipants").text(numberOfContacts);
 
-    $("#contacts_container>div.title").text(
-        APP.translation.translateString("contactlist")
-            + ' (' + numberOfContacts + ')');
+    APP.translation.translateElement(
+        $("#contacts_container>div.title"), {pcount: numberOfContacts});
 }
 
 /**
@@ -50,7 +49,6 @@ function createDisplayNameParagraph(key, displayName) {
         p.innerHTML = displayName;
     } else if(key) {
         p.setAttribute("data-i18n",key);
-        p.innerHTML = APP.translation.translateString(key);
     }
 
     return p;
@@ -82,10 +80,11 @@ var ContactListView = {
      */
     addInviteButton() {
         let container = document.getElementById('contacts_container');
-        let title = container.firstElementChild;
 
-        let htmlLayout =  this.getInviteButtonLayout();
-        title.insertAdjacentHTML('afterend', htmlLayout);
+        container.firstElementChild // this is the title
+            .insertAdjacentHTML('afterend', this.getInviteButtonLayout());
+
+        APP.translation.translateElement($(container));
         $(document).on('click', '#addParticipantsBtn', () => {
             APP.UI.emitEvent(UIEvents.INVITE_CLICKED);
         });
@@ -97,32 +96,26 @@ var ContactListView = {
         let classes = 'button-control button-control_primary';
         classes += ' button-control_full-width';
         let key = 'addParticipants';
-        let text = APP.translation.translateString(key);
 
         let lockedHtml = this.getLockDescriptionLayout(this.lockKey);
         let unlockedHtml = this.getLockDescriptionLayout(this.unlockKey);
 
-        let html = (
+        return (
             `<div class="sideToolbarBlock first">
                 <button id="addParticipantsBtn" 
                          data-i18n="${key}" 
-                         class="${classes}">
-                    ${text}
-                </button>
+                         class="${classes}"></button>
                 <div>
                     ${lockedHtml}
                     ${unlockedHtml}
                 </div>
             </div>`);
-
-        return html;
     },
     /**
      * Adds layout for lock description
      */
     getLockDescriptionLayout(key) {
         let classes = "input-control__hint input-control_full-width";
-        let description = APP.translation.translateString(key);
         let padlockSuffix = '';
         if (key === this.lockKey) {
             padlockSuffix = '-locked';
@@ -130,7 +123,7 @@ var ContactListView = {
 
         return `<p id="contactList${key}" class="${classes}">
                     <span class="icon-security${padlockSuffix}"></span>
-                    <span data-i18n="${key}">${description}</span>
+                    <span data-i18n="${key}"></span>
                 </p>`;
     },
     /**
@@ -198,6 +191,7 @@ var ContactListView = {
             createDisplayNameParagraph(
                 isLocal ? interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME : null,
                 isLocal ? null : interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME));
+        APP.translation.translateElement($(newContact));
 
         if (APP.conference.isLocalId(id)) {
             contactlist.prepend(newContact);

modules/UI/util/JitsiPopover.js

@@ -1,4 +1,4 @@
-/* global $ */
+/* global $, APP */
 var JitsiPopover = (function () {
     /**
      * Constructs new JitsiPopover and attaches it to the element
@@ -76,7 +76,9 @@ var JitsiPopover = (function () {
      */
     JitsiPopover.prototype.createPopover = function () {
         $("body").append(this.template);
-        $(".jitsipopover > .jitsipopover-content").html(this.options.content);
+        let popoverElem = $(".jitsipopover > .jitsipopover-content");
+        popoverElem.html(this.options.content);
+        APP.translation.translateElement(popoverElem);
         var self = this;
         $(".jitsipopover").on("mouseenter", function () {
             self.popoverIsHovered = true;

modules/UI/util/MessageHandler.js

@@ -45,7 +45,7 @@ var messageHandler = {
             message = APP.translation.generateTranslationHTML(messageKey);
         }
 
-        return $.prompt(message, {
+        let dialog = $.prompt(message, {
             title: this._getFormattedTitleString(titleKey),
             persistent: false,
             promptspeed: 0,
@@ -55,6 +55,8 @@ var messageHandler = {
                     closeFunction(e, v, m, f);
             }
         });
+        APP.translation.translateElement(dialog);
+        return dialog;
     },
     /**
      * Shows a message to the user with two buttons: first is given as a
@@ -137,6 +139,7 @@ var messageHandler = {
                 }
             }
         });
+        APP.translation.translateElement(twoButtonDialog);
         return twoButtonDialog;
     },
 
@@ -177,7 +180,9 @@ var messageHandler = {
             args.closeText = '';
         }
 
-        return new Impromptu(msgString, args);
+        let dialog = new Impromptu(msgString, args);
+        APP.translation.translateElement(dialog.getPrompt());
+        return dialog;
     },
 
     /**
@@ -189,7 +194,6 @@ var messageHandler = {
         let $titleString = $('<h2>');
         $titleString.addClass('aui-dialog2-header-main');
         $titleString.attr('data-i18n',titleKey);
-        $titleString.append(APP.translation.translateString(titleKey));
         return $('<div>').append($titleString).html();
     },
 
@@ -224,8 +228,10 @@ var messageHandler = {
      * Shows a dialog with different states to the user.
      *
      * @param statesObject object containing all the states of the dialog.
+     * @param options impromptu options
+     * @param translateOptions options passed to translation
      */
-    openDialogWithStates: function (statesObject, options) {
+    openDialogWithStates: function (statesObject, options, translateOptions) {
         if (!popupEnabled)
             return;
         let { classes, size } = options;
@@ -240,7 +246,9 @@ var messageHandler = {
                     = this._getFormattedTitleString(currentState.titleKey);
             }
         }
-        return new Impromptu(statesObject, options);
+        let dialog = new Impromptu(statesObject, options);
+        APP.translation.translateElement(dialog.getPrompt(), translateOptions);
+        return dialog;
     },
 
     /**
@@ -329,20 +337,18 @@ var messageHandler = {
         if (displayName) {
             displayNameSpan += ">" + UIUtil.escapeHtml(displayName);
         } else {
-            displayNameSpan += "data-i18n='" + displayNameKey +
-                "'>" + APP.translation.translateString(displayNameKey);
+            displayNameSpan += "data-i18n='" + displayNameKey + "'>";
         }
         displayNameSpan += "</span>";
-        return toastr.info(
+        let element = toastr.info(
             displayNameSpan + '<br>' +
             '<span class=' + cls + ' data-i18n="' + messageKey + '"' +
                 (messageArguments?
-                    " data-i18n-options='" + JSON.stringify(messageArguments)
-                        + "'"
-                    : "") + ">" +
-            APP.translation.translateString(messageKey,
-                messageArguments) +
-            '</span>', null, options);
+                    " data-i18n-options='"
+                        + JSON.stringify(messageArguments) + "'"
+                    : "") + "></span>", null, options);
+        APP.translation.translateElement(element);
+        return element;
     },
 
     /**

modules/UI/videolayout/ConnectionIndicator.js

@@ -1,4 +1,4 @@
-/* global APP, $, config */
+/* global $, config */
 /* jshint -W101 */
 import JitsiPopover from "../util/JitsiPopover";
 import VideoLayout from "./VideoLayout";
@@ -63,8 +63,6 @@ ConnectionIndicator.getStringFromArray = function (array) {
 ConnectionIndicator.prototype.generateText = function () {
     var downloadBitrate, uploadBitrate, packetLoss, i;
 
-    var translate = APP.translation.translateString;
-
     if(this.bitrate === null) {
         downloadBitrate = "N/A";
         uploadBitrate = "N/A";
@@ -97,18 +95,15 @@ ConnectionIndicator.prototype.generateText = function () {
 
     var result = "<table style='width:100%'>" +
         "<tr>" +
-        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.bitrate'>" +
-        translate("connectionindicator.bitrate") + "</span></td>" +
+        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.bitrate'></span></td>" +
         "<td><span class='jitsipopover_green'>&darr;</span>" +
         downloadBitrate + " <span class='jitsipopover_orange'>&uarr;</span>" +
         uploadBitrate + "</td>" +
         "</tr><tr>" +
-        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.packetloss'>" +
-        translate("connectionindicator.packetloss") + "</span></td>" +
+        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.packetloss'></span></td>" +
         "<td>" + packetLoss  + "</td>" +
         "</tr><tr>" +
-        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.resolution'>" +
-        translate("connectionindicator.resolution") + "</span></td>" +
+        "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.resolution'></span></td>" +
         "<td>" + resolutionStr + "</td></tr></table>";
 
     if(this.videoContainer.videoSpanId == "localVideoContainer") {
@@ -117,9 +112,7 @@ ConnectionIndicator.prototype.generateText = function () {
             // FIXME: we do not know local id when this text is generated
             //this.id + "')\"  data-i18n='connectionindicator." +
             "local')\"  data-i18n='connectionindicator." +
-                (this.showMoreValue ? "less" : "more") + "'>" +
-            translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) +
-            "</div><br />";
+                (this.showMoreValue ? "less" : "more") + "'></div><br />";
     }
 
     if (this.showMoreValue) {
@@ -139,8 +132,7 @@ ConnectionIndicator.prototype.generateText = function () {
         if (!this.transport || this.transport.length === 0) {
             transport = "<tr>" +
                 "<td><span class='jitsipopover_blue' " +
-                "data-i18n='connectionindicator.address'>" +
-                translate("connectionindicator.address") + "</span></td>" +
+                "data-i18n='connectionindicator.address'></span></td>" +
                 "<td> N/A</td></tr>";
         } else {
             var data = {remoteIP: [], localIP:[], remotePort:[], localPort:[]};
@@ -173,18 +165,13 @@ ConnectionIndicator.prototype.generateText = function () {
             var localTransport =
                 "<tr><td><span class='jitsipopover_blue' data-i18n='" +
                 local_address_key +"' data-i18n-options='" +
-                    JSON.stringify({count: data.localIP.length}) + "'>" +
-                    translate(local_address_key, {count: data.localIP.length}) +
-                    "</span></td><td> " +
+                    JSON.stringify({count: data.localIP.length}) + "'></span></td><td> " +
                 ConnectionIndicator.getStringFromArray(data.localIP) +
                 "</td></tr>";
             transport =
                 "<tr><td><span class='jitsipopover_blue' data-i18n='" +
                 remote_address_key + "' data-i18n-options='" +
-                    JSON.stringify({count: data.remoteIP.length}) + "'>" +
-                    translate(remote_address_key,
-                        {count: data.remoteIP.length}) +
-                    "</span></td><td> " +
+                    JSON.stringify({count: data.remoteIP.length}) + "'></span></td><td> " +
                 ConnectionIndicator.getStringFromArray(data.remoteIP) +
                 "</td></tr>";
 
@@ -195,16 +182,12 @@ ConnectionIndicator.prototype.generateText = function () {
                 "<td>" +
                 "<span class='jitsipopover_blue' data-i18n='" + key_remote +
                 "' data-i18n-options='" +
-                JSON.stringify({count: this.transport.length}) + "'>" +
-                translate(key_remote, {count: this.transport.length}) +
-                "</span></td><td>";
+                JSON.stringify({count: this.transport.length}) + "'></span></td><td>";
             localTransport += "<tr>" +
                 "<td>" +
                 "<span class='jitsipopover_blue' data-i18n='" + key_local +
                 "' data-i18n-options='" +
-                JSON.stringify({count: this.transport.length}) + "'>" +
-                translate(key_local, {count: this.transport.length}) +
-                "</span></td><td>";
+                JSON.stringify({count: this.transport.length}) + "'></span></td><td>";
 
             transport +=
                 ConnectionIndicator.getStringFromArray(data.remotePort);
@@ -213,8 +196,7 @@ ConnectionIndicator.prototype.generateText = function () {
             transport += "</td></tr>";
             transport += localTransport + "</td></tr>";
             transport +="<tr>" +
-                "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.transport'>" +
-                translate("connectionindicator.transport") + "</span></td>" +
+                "<td><span class='jitsipopover_blue' data-i18n='connectionindicator.transport'></span></td>" +
                 "<td>" + this.transport[0].type + "</td></tr>";
 
         }
@@ -222,8 +204,7 @@ ConnectionIndicator.prototype.generateText = function () {
         result += "<table  style='width:100%'>" +
             "<tr>" +
             "<td>" +
-            "<span class='jitsipopover_blue' data-i18n='connectionindicator.bandwidth'>" +
-            translate("connectionindicator.bandwidth") + "</span>" +
+            "<span class='jitsipopover_blue' data-i18n='connectionindicator.bandwidth'></span>" +
             "</td><td>" +
             "<span class='jitsipopover_green'>&darr;</span>" +
             downloadBandwidth +
@@ -266,8 +247,7 @@ ConnectionIndicator.prototype.create = function () {
         this.connectionIndicatorContainer);
     this.popover = new JitsiPopover(
         $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"),
-        {content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" +
-            APP.translation.translateString("connectionindicator.na") + "</div>",
+        {content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'></div>",
             skin: "black"});
 
     // override popover show method to make sure we will update the content
@@ -381,7 +361,6 @@ ConnectionIndicator.prototype.updatePopoverData = function (force) {
         this.popover.updateContent(
             `<div class="connection_info">${this.generateText()}</div>`
         );
-        APP.translation.translateElement($(".connection_info"));
     }
 };
 

modules/UI/videolayout/LargeVideoManager.js

@@ -379,9 +379,10 @@ export default class LargeVideoManager {
      */
     _setRemoteConnectionMessage (msgKey, msgOptions) {
         if (msgKey) {
-            let text = APP.translation.translateString(msgKey, msgOptions);
             $('#remoteConnectionMessage')
-                .attr("data-i18n", msgKey).text(text);
+                .attr("data-i18n", msgKey)
+                .attr("data-i18n-options", JSON.stringify(msgOptions));
+            APP.translation.translateElement($('#remoteConnectionMessage'));
         }
 
         this.videoContainer.positionRemoteConnectionMessage();
@@ -400,7 +401,8 @@ export default class LargeVideoManager {
     _setLocalConnectionMessage (msgKey, msgOptions) {
         $('#localConnectionMessage')
             .attr("data-i18n", msgKey)
-            .text(APP.translation.translateString(msgKey, msgOptions));
+            .attr("data-i18n-options", JSON.stringify(msgOptions));
+        APP.translation.translateElement($('#localConnectionMessage'));
     }
 
     /**

modules/UI/videolayout/LocalVideo.js

@@ -96,14 +96,12 @@ LocalVideo.prototype.setDisplayName = function(displayName) {
             editableText.value = displayName;
         }
 
-        var defaultNickname = APP.translation.translateString(
-            "defaultNickname", {name: "Jane Pink"});
         editableText.setAttribute('style', 'display:none;');
-        editableText.setAttribute('data-18n',
+        editableText.setAttribute('data-i18n',
             '[placeholder]defaultNickname');
         editableText.setAttribute("data-i18n-options",
             JSON.stringify({name: "Jane Pink"}));
-        editableText.setAttribute("placeholder", defaultNickname);
+        APP.translation.translateElement($(editableText));
 
         this.container
             .querySelector('.videocontainer__toolbar')
@@ -253,7 +251,8 @@ LocalVideo.prototype._buildContextMenu = function () {
         events: {
             show : function(options){
                 options.items.flip.name =
-                    APP.translation.translateString("videothumbnail.flip");
+                    APP.translation.generateTranslationHTML(
+                        "videothumbnail.flip");
             }
         }
     });

modules/UI/videolayout/RemoteVideo.js

@@ -109,16 +109,10 @@ RemoteVideo.prototype._generatePopupContent = function () {
     var mutedIndicator = "<i class='icon-mic-disabled'></i>";
 
     var doMuteHTML = mutedIndicator +
-        " <div " +
-        "data-i18n='videothumbnail.domute'>" +
-        APP.translation.translateString("videothumbnail.domute") +
-        "</div>";
+        " <div data-i18n='videothumbnail.domute'></div>";
 
     var mutedHTML = mutedIndicator +
-        " <div " +
-        "data-i18n='videothumbnail.muted'>" +
-        APP.translation.translateString("videothumbnail.muted") +
-        "</div>";
+        " <div data-i18n='videothumbnail.muted'></div>";
 
     muteLinkItem.id = "mutelink_" + this.id;
 
@@ -150,10 +144,7 @@ RemoteVideo.prototype._generatePopupContent = function () {
     var ejectMenuItem = document.createElement('li');
     var ejectLinkItem = document.createElement('a');
 
-    var ejectText = "<div " +
-        "data-i18n='videothumbnail.kick'>" +
-        APP.translation.translateString("videothumbnail.kick") +
-        "</div>";
+    var ejectText = "<div data-i18n='videothumbnail.kick'></div>";
 
     ejectLinkItem.className = 'ejectlink';
     ejectLinkItem.innerHTML = ejectIndicator + ' ' + ejectText;
@@ -167,6 +158,8 @@ RemoteVideo.prototype._generatePopupContent = function () {
     ejectMenuItem.appendChild(ejectLinkItem);
     popupmenuElement.appendChild(ejectMenuItem);
 
+    APP.translation.translateElement($(popupmenuElement));
+
     return popupmenuElement;
 };
 

modules/keyboardshortcut/keyboardshortcut.js

@@ -190,8 +190,7 @@ var KeyboardShortcut = {
         let descriptionClass = "shortcuts-list__description";
         descriptionElement.className = descriptionClass;
         descriptionElement.setAttribute("data-i18n", shortcutDescriptionKey);
-        descriptionElement.innerHTML
-            = APP.translation.translateString(shortcutDescriptionKey);
+        APP.translation.translateElement($(descriptionElement));
 
         listElement.appendChild(spanElement);
         listElement.appendChild(descriptionElement);

modules/translation/translation.js

@@ -89,9 +89,6 @@ module.exports = {
 
         i18n.init(options, initCompleted);
     },
-    translateString: function (key, options) {
-        return i18n.t(key, options);
-    },
     setLanguage: function (lang) {
         if(!lang)
             lang = DEFAULT_LANG;
@@ -100,16 +97,16 @@ module.exports = {
     getCurrentLanguage: function () {
         return i18n.lng();
     },
-    translateElement: function (selector) {
-        selector.i18n();
+    translateElement: function (selector, options) {
+        selector.i18n(options);
     },
     generateTranslationHTML: function (key, options) {
         var str = "<span data-i18n=\"" + key + "\"";
         if (options) {
-            str += " data-i18n-options=\"" + JSON.stringify(options) + "\"";
+            str += " data-i18n-options='" + JSON.stringify(options) + "'";
         }
         str += ">";
-        str += this.translateString(key, options);
+        str += i18n.t(key, options);
         str += "</span>";
         return str;