haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
damencho 2016-10-21 12:11:22 -05:00
parent 040f4a6618
commit 5217bf0bb8
21 changed files with 143 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
conference.js
View File

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

2
index.html
View File

@ -174,7 +174,7 @@
</div> </div>
</div> </div>
<div id="contacts_container" class="sideToolbarContainer__inner"> <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> <ul id="contacts"></ul>
</div> </div>
<div id="settings_container" class="sideToolbarContainer__inner"> <div id="settings_container" class="sideToolbarContainer__inner">

4
lang/main.json
View File

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

38
modules/UI/UI.js
View File

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

2
modules/UI/authentication/AuthHandler.js
View File

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

24
modules/UI/authentication/LoginDialog.js
View File

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

8
modules/UI/feedback/FeedbackWindow.js
View File

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

4
modules/UI/invite/AskForPassword.js
View File

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

6
modules/UI/invite/Invite.js
View File

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

83
modules/UI/invite/InviteDialogView.js
View File

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

16
modules/UI/recording/Recording.js
View File

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

12
modules/UI/shared_video/SharedVideo.js
View File

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

26
modules/UI/side_pannels/contactlist/ContactListView.js
View File

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

6
modules/UI/util/JitsiPopover.js
View File

@ -1,4 +1,4 @@
/* global $ */ /* global $, APP */
var JitsiPopover = (function () { var JitsiPopover = (function () {
/** /**
* Constructs new JitsiPopover and attaches it to the element * Constructs new JitsiPopover and attaches it to the element
@ -76,7 +76,9 @@ var JitsiPopover = (function () {
*/ */
JitsiPopover.prototype.createPopover = function () { JitsiPopover.prototype.createPopover = function () {
$("body").append(this.template); $("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; var self = this;
$(".jitsipopover").on("mouseenter", function () { $(".jitsipopover").on("mouseenter", function () {
self.popoverIsHovered = true; self.popoverIsHovered = true;

34
modules/UI/util/MessageHandler.js
View File

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

47
modules/UI/videolayout/ConnectionIndicator.js
View File

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

8
modules/UI/videolayout/LargeVideoManager.js
View File

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

9
modules/UI/videolayout/LocalVideo.js
View File

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

17
modules/UI/videolayout/RemoteVideo.js
View File

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

3
modules/keyboardshortcut/keyboardshortcut.js
View File

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

11
modules/translation/translation.js
View File

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