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

Merge pull request #1056 from jitsi/translations-update 

Translations update
This commit is contained in:
hristoterezov 2016-10-25 18:11:15 -05:00 committed by GitHub
parent d2ccd20c78 ea0f0da8a4
commit 221f6d1d68
24 changed files with 237 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
conference.js
View File

@ -195,11 +195,7 @@ function maybeRedirectToWelcomePage(showThankYou) {
if (showThankYou) {
APP.UI.messageHandler.openMessageDialog(
null, null, null,
APP.translation.translateString(
"dialog.thankYou", {appName:interfaceConfig.APP_NAME}
)
);
null, "dialog.thankYou", {appName:interfaceConfig.APP_NAME});
}
if (!config.enableWelcomePage) {
@ -1045,21 +1041,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(

8
index.html
View File

@ -105,7 +105,7 @@
<div id="subject" class="hide"></div>
<div id="extendedToolbar" class="toolbar">
<a class="button" id="toolbar_button_profile" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile" content="Edit your profile">
<a class="button" id="toolbar_button_profile" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile">
<img id="avatar" src="images/avatar2.png"/>
</a>
<a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
@ -138,11 +138,11 @@
<div class="title" data-i18n="profile.title"></div>
<div class="sideToolbarBlock first">
<label class="first" data-i18n="profile.setDisplayNameLabel"></label>
<input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name" placeholder="Name">
<input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name">
</div>
<div class="sideToolbarBlock">
<label data-i18n="profile.setEmailLabel"></label>
<input type="text" id="setEmail" placeholder="Enter e-mail">
<input data-i18n="[placeholder]profile.setEmailInput" type="text" id="setEmail">
</div>
<div class="sideToolbarBlock auth_container" id="authenticationContainer">
<p data-i18n="toolbar.authenticate"></p>
@ -175,7 +175,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">

8
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",
@ -99,6 +99,7 @@
"cameraDisabled": "Camera is not available",
"micDisabled": "Microphone is not available",
"filmstrip": "Show / hide videos",
"profile": "Edit your profile",
"raiseHand": "Raise hand to speak"
},
"bottomtoolbar": {
@ -135,7 +136,8 @@
"profile": {
"title": "Profile",
"setDisplayNameLabel": "Set your display name",
"setEmailLabel": "Set your gravatar email"
"setEmailLabel": "Set your gravatar email",
"setEmailInput": "Enter e-mail"
},
"videothumbnail":
{
@ -342,7 +344,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":

22
lang/readme.md
View File

@ -1,20 +1,20 @@
Jitsi Meet Translation
==========================
Jitsi Meet uses [i18next](http://i18next.com) library for translation.
i18next uses separate json files for each language.
Jitsi Meet uses [i18next](http://i18next.com) library for translation.
i18next uses separate json files for each language.
Translating Jitsi Meet
======================
The translation of Jitsi Meet is integrated with Pootle. You can translate Jitsi Meet via our Pootle user interface on
[http://translate.jitsi.org](http://translate.jitsi.org).
The translation of Jitsi Meet is integrated with Pootle. You can translate Jitsi Meet via our Pootle user interface on
[http://translate.jitsi.org](http://translate.jitsi.org).
**WARNING: Please don't create or edit manually the language files! Please use our Pootle user interface!**
Development
===========
If you want to add new functionality for Jitsi Meet and you have texts that need to be translated please use our translation module.
It is located in modules/translation. You must add key and value in main.json file in English for each translatable text.
It is located in modules/translation. You must add key and value in main.json file in English for each translatable text.
Than you can use the key to get the translated text for the current language.
**WARNING: Please don't change the other language files except main.json! They must be updated and translated via our Pootle user interface!**
@ -36,21 +36,19 @@ You can add translatable text in the HTML:
```
APP.translation.generateTranslationHTML("dialog.OK") // returns <span data-i18n="dialog.OK">OK</span>
```
The value in the options parameter will be added in data-i18n-options attribute of the element.
**Note:** If you dynamically add HTML elements don't forget to call APP.translation.translateElement(jquery_selector) to translate the text initially.
* **via Javascript string** - call APP.translation.translateString(key, options). You can use that method to get the translated string in Javascript and then attach it in the HTML.
```
APP.translation.translateString("dialog.OK") // returns the value for the key of the current language file. "OK" for example.
APP.translation.translateString("dialog.OK") // returns the value for the key of the current language file. "OK" for example.
```
For the available values of ``options`` parameter for the above methods of translation module see [i18next documentation](http://i18next.com/pages/doc_features).
For the available values of ``options`` parameter for the above methods of translation module see [i18next documentation](http://i18next.com/pages/doc_features).
**Note:** It is useful to add attributes in the HTML for persistent HTML elements because when the language is changed the text will be automatically translated.
Otherwise you should call ``APP.translation.translateString`` and manually change the text every time the language is changed.

60
modules/UI/UI.js
View File

@ -75,17 +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 titleStr
= APP.translation.translateString('dialog.displayNameRequired');
let defaultNickMsg = APP.translation.translateString("defaultNickname");
let message = (
`<div class="input-control">
<label 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>`
);
@ -94,7 +90,7 @@ function promptDisplayName() {
let buttons = {Ok:true};
let dialog = messageHandler.openDialog(
titleStr,
'dialog.displayNameRequired',
message,
true,
buttons,
@ -167,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);
};
/**
@ -190,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);
};
/**
@ -750,8 +744,6 @@ UI.connectionIndicatorShowMore = function(id) {
// FIXME check if someone user this
UI.showLoginPopup = function(callback) {
console.log('password is required');
let titleKey = "dialog.passwordRequired";
let titleString = APP.translation.translateString(titleKey);
let message = (
`<input name="username" type="text"
@ -770,8 +762,7 @@ UI.showLoginPopup = function(callback) {
};
messageHandler.openTwoButtonDialog({
titleKey,
titleString,
titleKey : "dialog.passwordRequired",
msgString: message,
leftButtonKey: 'dialog.Ok',
submitFunction,
@ -904,9 +895,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(
@ -916,7 +904,7 @@ UI.notifyConnectionFailed = function (stropheErrorMsg) {
"dialog.connectError");
}
messageHandler.openDialog(title, message, true, {}, () => false);
messageHandler.openDialog("dialog.error", message, true, {}, () => false);
};
@ -924,13 +912,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);
};
/**
@ -1046,7 +1031,7 @@ UI.updateDTMFSupport = function (isDTMFSupported) {
* @returns {Promise} Resolved with value - false if the dialog is enabled and
* resolved with true if the dialog is disabled or the feedback was already
* submitted. Rejected if another dialog is already displayed. This values are
* used to display or not display the thank you dialog from
* used to display or not display the thank you dialog from
* conference.maybeRedirectToWelcomePage method.
*/
UI.requestFeedbackOnHangup = function () {
@ -1191,10 +1176,8 @@ UI.getLargeVideo = function () {
UI.showExtensionRequiredDialog = function (url) {
messageHandler.openMessageDialog(
"dialog.extensionRequired",
null,
null,
APP.translation.generateTranslationHTML(
"dialog.firefoxExtensionPrompt", {url: url}));
"dialog.firefoxExtensionPrompt",
{url: url});
};
/**
@ -1216,9 +1199,7 @@ UI.showExtensionExternalInstallationDialog = function (url) {
messageHandler.openTwoButtonDialog({
titleKey: 'dialog.externalInstallationTitle',
titleString: '',
msgKey: 'dialog.externalInstallationMsg',
msgString: '',
leftButtonKey: 'dialog.goToStore',
submitFunction,
loadedFunction: $.noop,
@ -1263,8 +1244,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;
@ -1318,7 +1297,7 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
deviceErrorDialog && deviceErrorDialog.close();
deviceErrorDialog = messageHandler.openDialog(
titleMsg,
getTitleKey(),
message,
false,
{Ok: true},
@ -1342,8 +1321,6 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
}
);
APP.translation.translateElement($(".jqibox"));
function getTitleKey() {
let title = "dialog.error";
@ -1369,9 +1346,7 @@ UI.showTrackNotWorkingDialog = function (stream) {
messageHandler.openMessageDialog(
"dialog.error",
stream.isAudioTrack()? "dialog.micNotSendingData" :
"dialog.cameraNotSendingData",
null,
null);
"dialog.cameraNotSendingData");
};
UI.updateDevicesAvailability = function (id, devices) {
@ -1483,12 +1458,11 @@ UI.hideUserMediaPermissionsGuidanceOverlay = function () {
*/
UI.toggleKeyboardShortcutsPanel = function() {
if (!messageHandler.isDialogOpened()) {
let titleKey = 'keyboardShortcuts.keyboardShortcuts';
let title = APP.translation.translateString(titleKey);
let msg = $('#keyboard-shortcuts').html();
let buttons = { Close: true };
messageHandler.openDialog(title, msg, true, buttons);
messageHandler.openDialog(
'keyboardShortcuts.keyboardShortcuts', msg, true, buttons);
} else {
messageHandler.closeDialog();
}

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

@ -146,16 +146,13 @@ function doXmppAuth (room, lockPassword) {
room.getName(), APP.conference._getConferenceOptions()
);
loginDialog.displayConnectionStatus(
APP.translation.translateString('connection.FETCH_SESSION_ID')
);
loginDialog.displayConnectionStatus('connection.FETCH_SESSION_ID');
newRoom.room.moderator.authenticate().then(function () {
connection.disconnect();
loginDialog.displayConnectionStatus(
APP.translation.translateString('connection.GOT_SESSION_ID')
);
'connection.GOT_SESSION_ID');
// authenticate conference on the fly
room.join(lockPassword);
@ -166,11 +163,8 @@ function doXmppAuth (room, lockPassword) {
console.error('Auth on the fly failed', error);
let errorMsg = APP.translation.translateString(
'connection.GET_SESSION_ID_ERROR'
);
loginDialog.displayError(errorMsg + code);
loginDialog.displayError(
'connection.GET_SESSION_ID_ERROR', {code: code});
});
}, function (err) {
loginDialog.displayError(err);

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

@ -1,4 +1,4 @@
/* global APP, config */
/* global $, APP, config */
/**
* Build html for "password required" dialog.
@ -15,8 +15,7 @@ function getPasswordInputHtml() {
placeholder=${placeholder} autofocus>
<input name="password" type="password"
class="input-control__input"
data-i18n="[placeholder]dialog.userPassword"
placeholder="user password">`;
data-i18n="[placeholder]dialog.userPassword">`;
}
/**
@ -67,7 +66,7 @@ function LoginDialog(successCallback, cancelCallback) {
value: true
}];
let finishedButtons = [{
title: APP.translation.translateString('dialog.retry'),
title: APP.translation.generateTranslationHTML('dialog.retry'),
value: 'retry'
}];
@ -79,7 +78,7 @@ function LoginDialog(successCallback, cancelCallback) {
const states = {
login: {
title: APP.translation.translateString('dialog.passwordRequired'),
titleKey: 'dialog.passwordRequired',
html: getPasswordInputHtml(),
buttons: loginButtons,
focus: ':input:first',
@ -99,13 +98,13 @@ function LoginDialog(successCallback, cancelCallback) {
}
},
connecting: {
title: APP.translation.translateString('dialog.connecting'),
titleKey: 'dialog.connecting',
html: '<div id="connectionStatus"></div>',
buttons: [],
defaultButton: 0
},
finished: {
title: APP.translation.translateString('dialog.error'),
titleKey: 'dialog.error',
html: '<div id="errorMessage"></div>',
buttons: finishedButtons,
defaultButton: 0,
@ -128,27 +127,31 @@ function LoginDialog(successCallback, cancelCallback) {
/**
* Displays error message in 'finished' state which allows either to cancel
* or retry.
* @param message the final message to be displayed.
* @param messageKey the key to the message to be displayed.
* @param options the options to the error message (optional)
*/
this.displayError = function (message) {
this.displayError = function (messageKey, options) {
let finishedState = connDialog.getState('finished');
let errorMessageElem = finishedState.find('#errorMessage');
errorMessageElem.text(message);
errorMessageElem.attr("data-i18n", messageKey);
APP.translation.translateElement($(errorMessageElem), options);
connDialog.goToState('finished');
};
/**
* Show message as connection status.
* @param {string} message
* @param {string} messageKey the key to the message
*/
this.displayConnectionStatus = function (message) {
this.displayConnectionStatus = function (messageKey) {
let connectingState = connDialog.getState('connecting');
let connectionStatus = connectingState.find('#connectionStatus');
connectionStatus.text(message);
connectionStatus.attr("data-i18n", messageKey);
APP.translation.translateElement($(connectionStatus));
};
/**
@ -202,9 +205,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}
);
@ -215,7 +215,7 @@ export default {
var buttons = [{title: buttonTxt, value: "authNow"}];
return APP.UI.messageHandler.openDialog(
title,
"dialog.WaitingForHost",
msg,
true,
buttons,

9
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,8 @@ function createRateFeedbackHTML() {
</div>
</div>
<div class="details">
<textarea id="feedbackTextArea" class="input-control__input"
placeholder="${ feedbackHelp }"></textarea>
<textarea id="feedbackTextArea" class="input-control__input"
data-i18n="[placeholder]dialog.feedbackHelp"></textarea>
</div>
</form>`;
}
@ -147,10 +146,10 @@ export default class Dialog {
this.submitted = false;
this.onCloseCallback = function() {};
this.setDefoulOptions();
this.setDefaultOptions();
}
setDefoulOptions() {
setDefaultOptions() {
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

@ -191,8 +191,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();

95
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]inviteUrlDefaultMsg" 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();
@ -43,11 +38,7 @@ export default class InviteDialogView {
dialog.submitFunction = this.submitFunction.bind(this);
dialog.loadedFunction = this.loadedFunction.bind(this);
let titleKey = "dialog.shareLink";
let titleString = APP.translation.generateTranslationHTML(titleKey);
dialog.titleKey = titleKey;
dialog.titleString = titleString;
dialog.titleKey = "dialog.shareLink";
this.dialog = dialog;
this.dialog.states = this.getStates();
@ -101,21 +92,20 @@ export default class InviteDialogView {
*/
getStates() {
let {
titleString
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;
states[States.UNLOCKED] = {
title: titleString,
titleKey,
html: this.getShareLinkBlock() + this.getAddPasswordBlock(),
buttons
};
states[States.LOCKED] = {
title: titleString,
titleKey,
html: this.getShareLinkBlock() + this.getPasswordBlock(),
buttons
};
@ -128,34 +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';
return (
`<div class="input-control">
<label class="input-control__label" for="inviteLinkRef">
${this.dialog.titleString}
</label>
<label class="input-control__label" for="inviteLinkRef"
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>`
);
@ -166,27 +146,21 @@ 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="[placeholder]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>
@ -204,22 +178,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}
@ -227,9 +195,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>
`);
@ -355,10 +321,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').text(pass);
$('#newPasswordInput').val('');
this.disableAddPassIfInputEmpty();

20
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 () {
@ -365,7 +361,7 @@ var Recording = {
dialog = APP.UI.messageHandler.openMessageDialog(
self.recordingTitle,
self.recordingBusy,
null, null,
null,
function () {
dialog = null;
}
@ -376,7 +372,7 @@ var Recording = {
dialog = APP.UI.messageHandler.openMessageDialog(
self.recordingTitle,
self.recordingUnavailable,
null, null,
null,
function () {
dialog = null;
}
@ -505,7 +501,7 @@ var Recording = {
moveToCorner(labelSelector, !isCentered);
labelTextSelector.attr("data-i18n", textKey);
labelTextSelector.text(APP.translation.translateString(textKey));
APP.translation.translateElement(labelSelector);
},
/**

11
modules/UI/reload_overlay/PageReloadOverlay.js
View File

@ -40,7 +40,9 @@ class PageReloadOverlayImpl extends Overlay{
<div id='reloadProgressBar' class="aui-progress-indicator">
<span class="aui-progress-indicator-value"></span>
</div>
<span id='reloadSecRemaining' class='reload_overlay_msg'>
<span id='reloadSecRemaining'
data-i18n="dialog.conferenceReloadTimeLeft"
class='reload_overlay_msg'>
</span>
</div>`;
}
@ -50,11 +52,8 @@ class PageReloadOverlayImpl extends Overlay{
*/
updateDisplay() {
const timeLeftTxt
= APP.translation.translateString(
"dialog.conferenceReloadTimeLeft",
{ seconds: this.timeLeft });
$("#reloadSecRemaining").text(timeLeftTxt);
APP.translation.translateElement(
$("#reloadSecRemaining"), { seconds: this.timeLeft });
const ratio = (this.timeout - this.timeLeft) / this.timeout;
AJS.progressBars.update("#reloadProgressBar", ratio);

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

@ -93,7 +93,7 @@ export default class SharedVideoManager {
dialog = APP.UI.messageHandler.openMessageDialog(
"dialog.shareVideoTitle",
"dialog.alreadySharedVideoMsg",
null, null,
null,
function () {
dialog = null;
}
@ -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);

2
modules/UI/toolbars/Toolbar.js
View File

@ -279,7 +279,6 @@ function showSipNumberInput () {
? config.defaultSipNumber
: '';
let titleKey = "dialog.sipMsg";
let sipMsg = APP.translation.generateTranslationHTML("dialog.sipMsg");
let msgString = (`
<input name="sipNumber" type="text"
value="${defaultNumber}" autofocus>
@ -287,7 +286,6 @@ function showSipNumberInput () {
APP.UI.messageHandler.openTwoButtonDialog({
titleKey,
titleString: sipMsg,
msgString,
leftButtonKey: "dialog.Dial",
submitFunction: function (e, v, m, f) {

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

@ -1,22 +1,26 @@
/* global $ */
var JitsiPopover = (function () {
/**
* The default options
*/
const defaultOptions = {
skin: 'white',
content: '',
hasArrow: true,
onBeforePosition: undefined
};
/**
* Constructs new JitsiPopover and attaches it to the element
* @param element jquery selector
* @param options the options for the popover.
* - {Function} onBeforePosition - function executed just before
* positioning the popover. Useful for translation.
* @constructor
*/
function JitsiPopover(element, options)
{
let { skin, content, hasArrow } = options;
this.options = {};
this.options.skin = skin || 'white';
this.options.content = content || '';
this.options.hasArrow = true;
if (typeof(hasArrow) !== 'undefined') {
this.options.hasArrow = false;
}
this.options = Object.assign({}, defaultOptions, options);
this.elementIsHovered = false;
this.popoverIsHovered = false;
@ -86,7 +90,11 @@ 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);
if(typeof this.options.onBeforePosition === "function") {
this.options.onBeforePosition($(".jitsipopover"));
}
var self = this;
$(".jitsipopover").on("mouseenter", function () {
self.popoverIsHovered = true;
@ -136,4 +144,4 @@ var JitsiPopover = (function () {
return JitsiPopover;
})();
module.exports = JitsiPopover;
module.exports = JitsiPopover;

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

@ -29,30 +29,20 @@ var messageHandler = {
*
* @param titleKey the key used to find the translation of the title of the
* message, if a message title is not provided.
* @param messageKey the key used to find the translation of the message,
* if a message is not provided.
* @param title the title of the message. If a falsy value is provided,
* titleKey will be used to get a title via the translation API.
* @param message the message to show. If a falsy value is provided,
* messageKey will be used to get a message via the translation API.
* @param messageKey the key used to find the translation of the message
* @param i18nOptions the i18n options (optional)
* @param closeFunction function to be called after
* the prompt is closed (optional)
* @return the prompt that was created, or null
*/
openMessageDialog: function(titleKey, messageKey, title, message,
closeFunction) {
openMessageDialog:
function(titleKey, messageKey, i18nOptions, closeFunction) {
if (!popupEnabled)
return null;
if (!title) {
title = APP.translation.generateTranslationHTML(titleKey);
}
if (!message) {
message = APP.translation.generateTranslationHTML(messageKey);
}
return $.prompt(message, {
title: this._getFormattedTitleString(title),
let dialog = $.prompt(
APP.translation.generateTranslationHTML(messageKey, i18nOptions), {
title: this._getFormattedTitleString(titleKey),
persistent: false,
promptspeed: 0,
classes: this._getDialogClasses(),
@ -61,12 +51,14 @@ var messageHandler = {
closeFunction(e, v, m, f);
}
});
APP.translation.translateElement(dialog, i18nOptions);
return dialog;
},
/**
* Shows a message to the user with two buttons: first is given as a
* parameter and the second is Cancel.
*
* @param titleString the title of the message
* @param titleKey the key for the title of the message
* @param msgString the text of the message
* @param persistent boolean value which determines whether the message is
* persistent or not
@ -84,7 +76,6 @@ var messageHandler = {
openTwoButtonDialog: function(options) {
let {
titleKey,
titleString,
msgKey,
msgString,
leftButtonKey,
@ -112,10 +103,7 @@ var messageHandler = {
= APP.translation.generateTranslationHTML("dialog.Cancel");
buttons.push({title: cancelButton, value: false});
var message = msgString, title = titleString;
if (titleKey) {
title = APP.translation.generateTranslationHTML(titleKey);
}
var message = msgString;
if (msgKey) {
message = APP.translation.generateTranslationHTML(msgKey);
}
@ -125,7 +113,7 @@ var messageHandler = {
}
twoButtonDialog = $.prompt(message, {
title: this._getFormattedTitleString(title),
title: this._getFormattedTitleString(titleKey),
persistent: false,
buttons: buttons,
defaultButton: defaultButton,
@ -147,6 +135,7 @@ var messageHandler = {
}
}
});
APP.translation.translateElement(twoButtonDialog);
return twoButtonDialog;
},
@ -154,7 +143,7 @@ var messageHandler = {
* Shows a message to the user with two buttons: first is given as a
* parameter and the second is Cancel.
*
* @param titleString the title of the message
* @param titleKey the key for the title of the message
* @param msgString the text of the message
* @param persistent boolean value which determines whether the message is
* persistent or not
@ -166,13 +155,13 @@ var messageHandler = {
* loaded
* @param closeFunction function to be called on dialog close
*/
openDialog: function (titleString, msgString, persistent, buttons,
openDialog: function (titleKey, msgString, persistent, buttons,
submitFunction, loadedFunction, closeFunction) {
if (!popupEnabled)
return;
let args = {
title: this._getFormattedTitleString(titleString),
title: this._getFormattedTitleString(titleKey),
persistent: persistent,
buttons: buttons,
defaultButton: 1,
@ -187,7 +176,9 @@ var messageHandler = {
args.closeText = '';
}
return new Impromptu(msgString, args);
let dialog = new Impromptu(msgString, args);
APP.translation.translateElement(dialog.getPrompt());
return dialog;
},
/**
@ -195,13 +186,11 @@ var messageHandler = {
*
* @return the title string formatted as a div.
*/
_getFormattedTitleString(titleString) {
_getFormattedTitleString(titleKey) {
let $titleString = $('<h2>');
$titleString.addClass('aui-dialog2-header-main');
$titleString.append(titleString);
titleString = $('<div>').append($titleString).html();
return titleString;
$titleString.attr('data-i18n',titleKey);
return $('<div>').append($titleString).html();
},
/**
@ -235,8 +224,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;
@ -246,12 +237,14 @@ var messageHandler = {
for (let state in statesObject) {
let currentState = statesObject[state];
if(currentState.title) {
let title = currentState.title;
currentState.title = this._getFormattedTitleString(title);
if(currentState.titleKey) {
currentState.title
= this._getFormattedTitleString(currentState.titleKey);
}
}
return new Impromptu(statesObject, options);
let dialog = new Impromptu(statesObject, options);
APP.translation.translateElement(dialog.getPrompt(), translateOptions);
return dialog;
},
/**
@ -340,20 +333,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;
},
/**

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

@ -1,4 +1,4 @@
/* global APP, $, config */
/* global $, APP, 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";
@ -99,9 +97,7 @@ ConnectionIndicator.prototype.generateText = function () {
`<table class="connection-info__container" style='width:100%'>
<tr>
<td>
<span data-i18n='connectionindicator.bitrate'>
${translate("connectionindicator.bitrate")}
</span>
<span data-i18n='connectionindicator.bitrate'></span>
</td>
<td>
<span class='connection-info__download'>&darr;</span>${downloadBitrate}
@ -110,17 +106,13 @@ ConnectionIndicator.prototype.generateText = function () {
</tr>
<tr>
<td>
<span data-i18n='connectionindicator.packetloss'>
${translate("connectionindicator.packetloss")}
</span>
<span data-i18n='connectionindicator.packetloss'></span>
</td>
<td>${packetLoss}</td>
</tr>
<tr>
<td>
<span data-i18n='connectionindicator.resolution'>
${translate("connectionindicator.resolution")}
</span>
<span data-i18n='connectionindicator.resolution'></span>
</td>
<td>
${resolutionStr}
@ -134,9 +126,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")) +
"</a>";
(this.showMoreValue ? "less" : "more") + "'></a>";
}
if (this.showMoreValue) {
@ -156,8 +146,7 @@ ConnectionIndicator.prototype.generateText = function () {
if (!this.transport || this.transport.length === 0) {
transport = "<tr>" +
"<td><span " +
"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:[]};
@ -190,18 +179,15 @@ ConnectionIndicator.prototype.generateText = function () {
var localTransport =
"<tr><td><span 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 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>";
@ -212,16 +198,14 @@ ConnectionIndicator.prototype.generateText = function () {
"<td>" +
"<span 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 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);
@ -231,7 +215,7 @@ ConnectionIndicator.prototype.generateText = function () {
transport += localTransport + "</td></tr>";
transport +="<tr>" +
"<td><span data-i18n='connectionindicator.transport'>" +
translate("connectionindicator.transport") + "</span></td>" +
"</span></td>" +
"<td>" + this.transport[0].type + "</td></tr>";
}
@ -239,8 +223,7 @@ ConnectionIndicator.prototype.generateText = function () {
result += "<table class='connection-info__container' style='width:100%'>" +
"<tr>" +
"<td>" +
"<span data-i18n='connectionindicator.bandwidth'>" +
translate("connectionindicator.bandwidth") + "</span>" +
"<span data-i18n='connectionindicator.bandwidth'></span>" +
"</td><td>" +
"<span class='connection-info__download'>&darr;</span>" +
downloadBandwidth +
@ -282,10 +265,12 @@ ConnectionIndicator.prototype.create = function () {
this.videoContainer.container.appendChild(
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>",
skin: "black"});
$("#" + this.videoContainer.videoSpanId + " > .connectionindicator"), {
content: "<div class=\"connection-info\" " +
"data-i18n='connectionindicator.na'></div>",
skin: "black",
onBeforePosition: el => APP.translation.translateElement(el)
});
// override popover show method to make sure we will update the content
// before showing the popover
@ -398,7 +383,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");
}
}
});

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

@ -78,7 +78,8 @@ RemoteVideo.prototype._initPopupMenu = function (popupMenuElement) {
let options = {
content: popupMenuElement.outerHTML,
skin: "black",
hasArrow: false
hasArrow: false,
onBeforePosition: el => APP.translation.translateElement(el)
};
let element = $("#" + this.videoSpanId + " .remotevideomenu");
this.popover = new JitsiPopover(element, options);
@ -112,16 +113,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;
@ -153,10 +148,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;
@ -170,6 +162,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);

14
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,19 @@ module.exports = {
getCurrentLanguage: function () {
return i18n.lng();
},
translateElement: function (selector) {
selector.i18n();
translateElement: function (selector, options) {
// i18next expects undefined if options are missing, check if its null
selector.i18n(
options === null ? undefined : 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);
// i18next expects undefined if options ARE missing, check if its null
str += i18n.t(key, options === null ? undefined : options);
str += "</span>";
return str;