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.
2016-10-21 12:11:22 -05:00 · 2016-10-21 12:11:22 -05:00 · 5217bf0bb8
parent 040f4a6618
commit 5217bf0bb8
21 changed files with 143 additions and 237 deletions
--- a/conference.js
+++ b/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(
--- a/index.html
+++ b/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">
--- a/lang/main.json
+++ b/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":
--- a/modules/UI/UI.js
+++ b/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";

--- a/modules/UI/authentication/AuthHandler.js
+++ b/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);
--- a/modules/UI/authentication/LoginDialog.js
+++ b/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,
--- a/modules/UI/feedback/FeedbackWindow.js
+++ b/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"
@ -68,7 +67,6 @@ function createRateFeedbackHTML() {
            </div>
            <div class="details">
                <textarea id="feedbackTextArea" class="input-control__input" 
-                    placeholder="${ feedbackHelp }" 
                    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 = {
--- a/modules/UI/invite/AskForPassword.js
+++ b/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,
--- a/modules/UI/invite/Invite.js
+++ b/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();
--- a/modules/UI/invite/InviteDialogView.js
+++ b/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();

--- a/modules/UI/recording/Recording.js
+++ b/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);
    },

    /**
--- a/modules/UI/shared_video/SharedVideo.js
+++ b/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
        });
-
    });
 }
--- a/modules/UI/side_pannels/contactlist/ContactListView.js
+++ b/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);
--- a/modules/UI/util/JitsiPopover.js
+++ b/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;
--- a/modules/UI/util/MessageHandler.js
+++ b/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;
    },

    /**
--- a/modules/UI/videolayout/ConnectionIndicator.js
+++ b/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"));
    }
 };

--- a/modules/UI/videolayout/LargeVideoManager.js
+++ b/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'));
    }

    /**
--- a/modules/UI/videolayout/LocalVideo.js
+++ b/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");
            }
        }
    });
--- a/modules/UI/videolayout/RemoteVideo.js
+++ b/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;
 };

--- a/modules/keyboardshortcut/keyboardshortcut.js
+++ b/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);
--- a/modules/translation/translation.js
+++ b/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;