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) {
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(

2
index.html
View File

@ -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">

4
lang/main.json
View File

@ -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":

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() {
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";

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

@ -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);

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

@ -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,

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

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

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

@ -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,

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

@ -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();

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

@ -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();

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

@ -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);
},
/**

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

@ -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
});
});
}

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

@ -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);

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

@ -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;

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

@ -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;
},
/**

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

@ -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"));
}
};

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

@ -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'));
}
/**

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

@ -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");
}
}
});

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 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;
};

3
modules/keyboardshortcut/keyboardshortcut.js
View File

@ -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);

11
modules/translation/translation.js
View File

@ -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;