PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Merge pull request #1608 from pafcu/simplify-translation

Browse source 
Refactor translations
This commit is contained in:
Luke Barnard 2017-11-16 11:29:03 +00:00 committed by GitHub
commit 29e6627a75
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 376 additions and 226 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
scripts/gen-i18n.js
View file

@ -32,7 +32,7 @@ const walk = require('walk');
const flowParser = require('flow-parser'); const flowParser = require('flow-parser');
const estreeWalker = require('estree-walker'); const estreeWalker = require('estree-walker');
const TRANSLATIONS_FUNCS = ['_t', '_td', '_tJsx']; const TRANSLATIONS_FUNCS = ['_t', '_td'];
const INPUT_TRANSLATIONS_FILE = 'src/i18n/strings/en_EN.json'; const INPUT_TRANSLATIONS_FILE = 'src/i18n/strings/en_EN.json';
const OUTPUT_FILE = 'src/i18n/strings/en_EN.json'; const OUTPUT_FILE = 'src/i18n/strings/en_EN.json';
@ -126,7 +126,7 @@ function getTranslationsJs(file) {
if (tKey === null) return; if (tKey === null) return;
// check the format string against the args // check the format string against the args
// We only check _t: _tJsx is much more complex and _td has no args // We only check _t: _td has no args
if (node.callee.name === '_t') { if (node.callee.name === '_t') {
try { try {
const placeholders = getFormatStrings(tKey); const placeholders = getFormatStrings(tKey);
@ -139,6 +139,22 @@ function getTranslationsJs(file) {
throw new Error(`No value found for placeholder '${placeholder}'`); throw new Error(`No value found for placeholder '${placeholder}'`);
} }
} }
// Validate tag replacements
if (node.arguments.length > 2) {
const tagMap = node.arguments[2];
for (const prop of tagMap.properties) {
if (prop.key.type === 'Literal') {
const tag = prop.key.value;
// RegExp same as in src/languageHandler.js
const regexp = new RegExp(`(<${tag}>(.*?)<\\/${tag}>|<${tag}>|<${tag}\\s*\\/>)`);
if (!tKey.match(regexp)) {
throw new Error(`No match for ${regexp} in ${tKey}`);
}
}
}
}
} catch (e) { } catch (e) {
console.log(); console.log();
console.error(`ERROR: ${file}:${node.loc.start.line} ${tKey}`); console.error(`ERROR: ${file}:${node.loc.start.line} ${tKey}`);

7
src/components/structures/FilePanel.js
View file

@ -19,7 +19,7 @@ import React from 'react';
import Matrix from 'matrix-js-sdk'; import Matrix from 'matrix-js-sdk';
import sdk from '../../index'; import sdk from '../../index';
import MatrixClientPeg from '../../MatrixClientPeg'; import MatrixClientPeg from '../../MatrixClientPeg';
import { _t, _tJsx } from '../../languageHandler'; import { _t } from '../../languageHandler';
/* /*
* Component which shows the filtered file using a TimelinePanel * Component which shows the filtered file using a TimelinePanel
@ -92,7 +92,10 @@ const FilePanel = React.createClass({
if (MatrixClientPeg.get().isGuest()) { if (MatrixClientPeg.get().isGuest()) {
return <div className="mx_FilePanel mx_RoomView_messageListWrapper"> return <div className="mx_FilePanel mx_RoomView_messageListWrapper">
<div className="mx_RoomView_empty"> <div className="mx_RoomView_empty">
{ _tJsx("You must <a>register</a> to use this functionality", /<a>(.*?)<\/a>/, (sub) => <a href="#/register" key="sub">{ sub }</a>) } { _t("You must <a>register</a> to use this functionality",
{},
{ 'a': (sub) => <a href="#/register" key="sub">{ sub }</a> })
}
</div> </div>
</div>; </div>;
} else if (this.noRoom) { } else if (this.noRoom) {

10
src/components/structures/GroupView.js
View file

@ -22,7 +22,7 @@ import MatrixClientPeg from '../../MatrixClientPeg';
import sdk from '../../index'; import sdk from '../../index';
import dis from '../../dispatcher'; import dis from '../../dispatcher';
import { sanitizedHtmlNode } from '../../HtmlUtils'; import { sanitizedHtmlNode } from '../../HtmlUtils';
import { _t, _td, _tJsx } from '../../languageHandler'; import { _t, _td } from '../../languageHandler';
import AccessibleButton from '../views/elements/AccessibleButton'; import AccessibleButton from '../views/elements/AccessibleButton';
import Modal from '../../Modal'; import Modal from '../../Modal';
import classnames from 'classnames'; import classnames from 'classnames';
@ -932,12 +932,12 @@ export default React.createClass({
className="mx_GroupView_groupDesc_placeholder" className="mx_GroupView_groupDesc_placeholder"
onClick={this._onEditClick} onClick={this._onEditClick}
> >
{ _tJsx( { _t(
'Your community hasn\'t got a Long Description, a HTML page to show to community members.<br />' + 'Your community hasn\'t got a Long Description, a HTML page to show to community members.<br />' +
'Click here to open settings and give it one!', 'Click here to open settings and give it one!',
[/<br \/>/], {},
[(sub) => <br />]) { 'br': <br /> },
} ) }
</div>; </div>;
} }
const groupDescEditingClasses = classnames({ const groupDescEditingClasses = classnames({

10
src/components/structures/MyGroups.js
View file

@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
import GeminiScrollbar from 'react-gemini-scrollbar'; import GeminiScrollbar from 'react-gemini-scrollbar';
import {MatrixClient} from 'matrix-js-sdk'; import {MatrixClient} from 'matrix-js-sdk';
import sdk from '../../index'; import sdk from '../../index';
import { _t, _tJsx } from '../../languageHandler'; import { _t } from '../../languageHandler';
import withMatrixClient from '../../wrappers/withMatrixClient'; import withMatrixClient from '../../wrappers/withMatrixClient';
import AccessibleButton from '../views/elements/AccessibleButton'; import AccessibleButton from '../views/elements/AccessibleButton';
import dis from '../../dispatcher'; import dis from '../../dispatcher';
@ -165,13 +165,13 @@ export default withMatrixClient(React.createClass({
<div className="mx_MyGroups_headerCard_header"> <div className="mx_MyGroups_headerCard_header">
{ _t('Join an existing community') } { _t('Join an existing community') }
</div> </div>
{ _tJsx( { _t(
'To join an existing community you\'ll have to '+ 'To join an existing community you\'ll have to '+
'know its community identifier; this will look '+ 'know its community identifier; this will look '+
'something like <i>+example:matrix.org</i>.', 'something like <i>+example:matrix.org</i>.',
/<i>(.*)<\/i>/, {},
(sub) => <i>{ sub }</i>, { 'i': (sub) => <i>{ sub }</i> })
) } }
</div> </div>
</div> </div>
</div> </div>

34
src/components/structures/RoomStatusBar.js
View file

@ -15,13 +15,12 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import { _t, _tJsx } from '../../languageHandler'; import { _t } from '../../languageHandler';
import sdk from '../../index'; import sdk from '../../index';
import WhoIsTyping from '../../WhoIsTyping'; import WhoIsTyping from '../../WhoIsTyping';
import MatrixClientPeg from '../../MatrixClientPeg'; import MatrixClientPeg from '../../MatrixClientPeg';
import MemberAvatar from '../views/avatars/MemberAvatar'; import MemberAvatar from '../views/avatars/MemberAvatar';
const HIDE_DEBOUNCE_MS = 10000;
const STATUS_BAR_HIDDEN = 0; const STATUS_BAR_HIDDEN = 0;
const STATUS_BAR_EXPANDED = 1; const STATUS_BAR_EXPANDED = 1;
const STATUS_BAR_EXPANDED_LARGE = 2; const STATUS_BAR_EXPANDED_LARGE = 2;
@ -272,12 +271,16 @@ module.exports = React.createClass({
{ this.props.unsentMessageError } { this.props.unsentMessageError }
</div> </div>
<div className="mx_RoomStatusBar_connectionLostBar_desc"> <div className="mx_RoomStatusBar_connectionLostBar_desc">
{ _tJsx("<a>Resend all</a> or <a>cancel all</a> now. You can also select individual messages to resend or cancel.", {
[/<a>(.*?)<\/a>/, /<a>(.*?)<\/a>/], _t("<resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. " +
[ "You can also select individual messages to resend or cancel.",
(sub) => <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this.props.onResendAllClick}>{ sub }</a>, {},
(sub) => <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this.props.onCancelAllClick}>{ sub }</a>, {
], 'resendText': (sub) =>
<a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this.props.onResendAllClick}>{ sub }</a>,
'cancelText': (sub) =>
<a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this.props.onCancelAllClick}>{ sub }</a>,
},
) } ) }
</div> </div>
</div> </div>
@ -322,12 +325,15 @@ module.exports = React.createClass({
if (this.props.sentMessageAndIsAlone) { if (this.props.sentMessageAndIsAlone) {
return ( return (
<div className="mx_RoomStatusBar_isAlone"> <div className="mx_RoomStatusBar_isAlone">
{ _tJsx("There's no one else here! Would you like to <a>invite others</a> or <a>stop warning about the empty room</a>?", { _t("There's no one else here! Would you like to <inviteText>invite others</inviteText> " +
[/<a>(.*?)<\/a>/, /<a>(.*?)<\/a>/], "or <nowarnText>stop warning about the empty room</nowarnText>?",
[ {},
(sub) => <a className="mx_RoomStatusBar_resend_link" key="invite" onClick={this.props.onInviteClick}>{ sub }</a>, {
(sub) => <a className="mx_RoomStatusBar_resend_link" key="nowarn" onClick={this.props.onStopWarningClick}>{ sub }</a>, 'inviteText': (sub) =>
], <a className="mx_RoomStatusBar_resend_link" key="invite" onClick={this.props.onInviteClick}>{ sub }</a>,
'nowarnText': (sub) =>
<a className="mx_RoomStatusBar_resend_link" key="nowarn" onClick={this.props.onStopWarningClick}>{ sub }</a>,
},
) } ) }
</div> </div>
); );

25
src/components/structures/login/Login.js
View file

@ -18,7 +18,7 @@ limitations under the License.
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { _t, _tJsx } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import * as languageHandler from '../../../languageHandler'; import * as languageHandler from '../../../languageHandler';
import sdk from '../../../index'; import sdk from '../../../index';
import Login from '../../../Login'; import Login from '../../../Login';
@ -272,17 +272,19 @@ module.exports = React.createClass({
!this.state.enteredHomeserverUrl.startsWith("http")) !this.state.enteredHomeserverUrl.startsWith("http"))
) { ) {
errorText = <span> errorText = <span>
{ _tJsx("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " + {
_t("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " +
"Either use HTTPS or <a>enable unsafe scripts</a>.", "Either use HTTPS or <a>enable unsafe scripts</a>.",
/<a>(.*?)<\/a>/, {},
(sub) => { return <a href="https://www.google.com/search?&q=enable%20unsafe%20scripts">{ sub }</a>; }, { 'a': (sub) => { return <a href="https://www.google.com/search?&q=enable%20unsafe%20scripts">{ sub }</a>; } },
) } ) }
</span>; </span>;
} else { } else {
errorText = <span> errorText = <span>
{ _tJsx("Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.", {
/<a>(.*?)<\/a>/, _t("Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
(sub) => { return <a href={this.state.enteredHomeserverUrl}>{ sub }</a>; }, {},
{ 'a': (sub) => { return <a href={this.state.enteredHomeserverUrl}>{ sub }</a>; } },
) } ) }
</span>; </span>;
} }
@ -293,7 +295,7 @@ module.exports = React.createClass({
componentForStep: function(step) { componentForStep: function(step) {
switch (step) { switch (step) {
case 'm.login.password': case 'm.login.password': {
const PasswordLogin = sdk.getComponent('login.PasswordLogin'); const PasswordLogin = sdk.getComponent('login.PasswordLogin');
return ( return (
<PasswordLogin <PasswordLogin
@ -309,12 +311,14 @@ module.exports = React.createClass({
hsUrl={this.state.enteredHomeserverUrl} hsUrl={this.state.enteredHomeserverUrl}
/> />
); );
case 'm.login.cas': }
case 'm.login.cas': {
const CasLogin = sdk.getComponent('login.CasLogin'); const CasLogin = sdk.getComponent('login.CasLogin');
return ( return (
<CasLogin onSubmit={this.onCasLogin} /> <CasLogin onSubmit={this.onCasLogin} />
); );
default: }
default: {
if (!step) { if (!step) {
return; return;
} }
@ -323,6 +327,7 @@ module.exports = React.createClass({
{ _t('Sorry, this homeserver is using a login which is not recognised ') }({ step }) { _t('Sorry, this homeserver is using a login which is not recognised ') }({ step })
</div> </div>
); );
}
} }
}, },

7
src/components/views/dialogs/SessionRestoreErrorDialog.js
View file

@ -18,7 +18,7 @@ import React from 'react';
import sdk from '../../../index'; import sdk from '../../../index';
import SdkConfig from '../../../SdkConfig'; import SdkConfig from '../../../SdkConfig';
import Modal from '../../../Modal'; import Modal from '../../../Modal';
import { _t, _tJsx } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
export default React.createClass({ export default React.createClass({
@ -45,9 +45,10 @@ export default React.createClass({
if (SdkConfig.get().bug_report_endpoint_url) { if (SdkConfig.get().bug_report_endpoint_url) {
bugreport = ( bugreport = (
<p> <p>
{ _tJsx( { _t(
"Otherwise, <a>click here</a> to send a bug report.", "Otherwise, <a>click here</a> to send a bug report.",
/<a>(.*?)<\/a>/, (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{ sub }</a>, {},
{ 'a': (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{ sub }</a> },
) } ) }
</p> </p>
); );

23
src/components/views/dialogs/SetMxIdDialog.js
View file

@ -21,7 +21,7 @@ import sdk from '../../../index';
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import classnames from 'classnames'; import classnames from 'classnames';
import KeyCode from '../../../KeyCode'; import KeyCode from '../../../KeyCode';
import { _t, _tJsx } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
// The amount of time to wait for further changes to the input username before // The amount of time to wait for further changes to the input username before
// sending a request to the server // sending a request to the server
@ -267,24 +267,21 @@ export default React.createClass({
</div> </div>
{ usernameIndicator } { usernameIndicator }
<p> <p>
{ _tJsx( { _t(
'This will be your account name on the <span></span> ' + 'This will be your account name on the <span></span> ' +
'homeserver, or you can pick a <a>different server</a>.', 'homeserver, or you can pick a <a>different server</a>.',
[ {},
/<span><\/span>/, {
/<a>(.*?)<\/a>/, 'span': <span>{ this.props.homeserverUrl }</span>,
], 'a': (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{ sub }</a>,
[ },
(sub) => <span>{ this.props.homeserverUrl }</span>,
(sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{ sub }</a>,
],
) } ) }
</p> </p>
<p> <p>
{ _tJsx( { _t(
'If you already have a Matrix account you can <a>log in</a> instead.', 'If you already have a Matrix account you can <a>log in</a> instead.',
/<a>(.*?)<\/a>/, {},
[(sub) => <a href="#" onClick={this.props.onLoginClick}>{ sub }</a>], { 'a': (sub) => <a href="#" onClick={this.props.onLoginClick}>{ sub }</a> },
) } ) }
</p> </p>
{ auth } { auth }

8
src/components/views/login/CaptchaForm.js
View file

@ -18,7 +18,7 @@ limitations under the License.
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { _t, _tJsx } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
const DIV_ID = 'mx_recaptcha'; const DIV_ID = 'mx_recaptcha';
@ -67,10 +67,10 @@ module.exports = React.createClass({
// * jumping straight to a hosted captcha page (but we don't support that yet) // * jumping straight to a hosted captcha page (but we don't support that yet)
// * embedding the captcha in an iframe (if that works) // * embedding the captcha in an iframe (if that works)
// * using a better captcha lib // * using a better captcha lib
ReactDOM.render(_tJsx( ReactDOM.render(_t(
"Robot check is currently unavailable on desktop - please use a <a>web browser</a>", "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
/<a>(.*?)<\/a>/, {},
(sub) => { return <a href='https://riot.im/app'>{ sub }</a>; }), warning); { 'a': (sub) => { return <a href='https://riot.im/app'>{ sub }</a>; }}), warning);
this.refs.recaptchaContainer.appendChild(warning); this.refs.recaptchaContainer.appendChild(warning);
} else { } else {
const scriptTag = document.createElement('script'); const scriptTag = document.createElement('script');

12
src/components/views/login/InteractiveAuthEntryComponents.js
View file

@ -20,7 +20,7 @@ import url from 'url';
import classnames from 'classnames'; import classnames from 'classnames';
import sdk from '../../../index'; import sdk from '../../../index';
import { _t, _tJsx } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
/* This file contains a collection of components which are used by the /* This file contains a collection of components which are used by the
* InteractiveAuth to prompt the user to enter the information needed * InteractiveAuth to prompt the user to enter the information needed
@ -256,7 +256,10 @@ export const EmailIdentityAuthEntry = React.createClass({
} else { } else {
return ( return (
<div> <div>
<p>{ _tJsx("An email has been sent to %(emailAddress)s", /%\(emailAddress\)s/, (sub) => <i>{this.props.inputs.emailAddress}</i>) }</p> <p>{ _t("An email has been sent to %(emailAddress)s",
{ emailAddress: (sub) => <i>{ this.props.inputs.emailAddress }</i> },
) }
</p>
<p>{ _t("Please check your email to continue registration.") }</p> <p>{ _t("Please check your email to continue registration.") }</p>
</div> </div>
); );
@ -370,7 +373,10 @@ export const MsisdnAuthEntry = React.createClass({
}); });
return ( return (
<div> <div>
<p>{ _tJsx("A text message has been sent to %(msisdn)s", /%\(msisdn\)s/, (sub) => <i>{this._msisdn}</i>) }</p> <p>{ _t("A text message has been sent to %(msisdn)s",
{ msisdn: <i>this._msisdn</i> },
) }
</p>
<p>{ _t("Please enter the code it contains:") }</p> <p>{ _t("Please enter the code it contains:") }</p>
<div className="mx_InteractiveAuthEntryComponents_msisdnWrapper"> <div className="mx_InteractiveAuthEntryComponents_msisdnWrapper">
<form onSubmit={this._onFormSubmit}> <form onSubmit={this._onFormSubmit}>

27
src/components/views/messages/RoomAvatarEvent.js
View file

@ -17,7 +17,7 @@ limitations under the License.
import React from 'react'; import React from 'react';
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import { ContentRepo } from 'matrix-js-sdk'; import { ContentRepo } from 'matrix-js-sdk';
import { _t, _tJsx } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import sdk from '../../../index'; import sdk from '../../../index';
import Modal from '../../../Modal'; import Modal from '../../../Modal';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
@ -67,24 +67,17 @@ module.exports = React.createClass({
'crop', 'crop',
); );
// it sucks that _tJsx doesn't support normal _t substitutions :((
return ( return (
<div className="mx_RoomAvatarEvent"> <div className="mx_RoomAvatarEvent">
{ _tJsx('%(senderDisplayName)s changed the room avatar to <img/>', { _t('%(senderDisplayName)s changed the room avatar to <img/>',
[ { senderDisplayName: senderDisplayName },
/%\(senderDisplayName\)s/, {
/<img\/>/, 'img': () =>
], <AccessibleButton key="avatar" className="mx_RoomAvatarEvent_avatar"
[ onClick={this.onAvatarClick.bind(this, name)}>
(sub) => senderDisplayName, <BaseAvatar width={14} height={14} url={url} name={name} />
(sub) => </AccessibleButton>,
<AccessibleButton key="avatar" className="mx_RoomAvatarEvent_avatar" })
onClick={this.onAvatarClick.bind(this, name)}>
<BaseAvatar width={14} height={14} url={url}
name={name} />
</AccessibleButton>,
],
)
} }
</div> </div>
); );

28
src/components/views/messages/SenderProfile.js
View file

@ -19,7 +19,7 @@
import React from 'react'; import React from 'react';
import sdk from '../../../index'; import sdk from '../../../index';
import Flair from '../elements/Flair.js'; import Flair from '../elements/Flair.js';
import { _tJsx } from '../../../languageHandler'; import { _t, substitute } from '../../../languageHandler';
export default function SenderProfile(props) { export default function SenderProfile(props) {
const EmojiText = sdk.getComponent('elements.EmojiText'); const EmojiText = sdk.getComponent('elements.EmojiText');
@ -42,22 +42,28 @@ export default function SenderProfile(props) {
: null, : null,
]; ];
let content = ''; let content;
if(props.text) { if(props.text) {
// Replace senderName, and wrap surrounding text in spans with the right class content = _t(props.text, { senderName: () => nameElem });
content = _tJsx(props.text, /^(.*)\%\(senderName\)s(.*)$/m, (p1, p2) => [
p1 ? <span className='mx_SenderProfile_aux'>{ p1 }</span> : null,
nameElem,
p2 ? <span className='mx_SenderProfile_aux'>{ p2 }</span> : null,
]);
} else { } else {
content = nameElem; // There is nothing to translate here, so call substitute() instead
content = substitute('%(senderName)s', { senderName: () => nameElem });
} }
return ( return (
<div className="mx_SenderProfile" dir="auto" onClick={props.onClick}> <div className="mx_SenderProfile" dir="auto" onClick={props.onClick}>
{ content } // The text surrounding the user name must be wrapped in order for it to have the correct opacity.
// It is not possible to wrap the whole thing, because the user name might contain flair which should
// be shown at full opacity. Sadly CSS does not make it possible to "reset" opacity so we have to do it
// in parts like this. Sometimes CSS makes me a sad panda :-(
// XXX: This could be avoided if the actual colour is set, rather than faking it with opacity
{ content.props.children[0] ?
<span className='mx_SenderProfile_aux'>{ content.props.children[0] }</span> : ''
}
{ content.props.children[1] }
{ content.props.children[2] ?
<span className='mx_SenderProfile_aux'>{ content.props.children[2] }</span> : ''
}
</div> </div>
); );
} }

8
src/components/views/room_settings/UrlPreviewSettings.js
View file

@ -17,7 +17,7 @@ limitations under the License.
const React = require('react'); const React = require('react');
const sdk = require("../../../index"); const sdk = require("../../../index");
import { _t, _tJsx } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore"; import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
@ -42,11 +42,11 @@ module.exports = React.createClass({
let previewsForAccount = null; let previewsForAccount = null;
if (SettingsStore.getValueAt(SettingLevel.ACCOUNT, "urlPreviewsEnabled")) { if (SettingsStore.getValueAt(SettingLevel.ACCOUNT, "urlPreviewsEnabled")) {
previewsForAccount = ( previewsForAccount = (
_tJsx("You have <a>enabled</a> URL previews by default.", /<a>(.*?)<\/a>/, (sub)=><a href="#/settings">{ sub }</a>) _t("You have <a>enabled</a> URL previews by default.", {}, { 'a': (sub)=><a href="#/settings">{ sub }</a> })
); );
} else { } else {
previewsForAccount = ( previewsForAccount = (
_tJsx("You have <a>disabled</a> URL previews by default.", /<a>(.*?)<\/a>/, (sub)=><a href="#/settings">{ sub }</a>) _t("You have <a>disabled</a> URL previews by default.", {}, { 'a': (sub)=><a href="#/settings">{ sub }</a> })
); );
} }
@ -70,7 +70,7 @@ module.exports = React.createClass({
previewsForRoom = (<label>{ _t(str) }</label>); previewsForRoom = (<label>{ _t(str) }</label>);
} }
let previewsForRoomAccount = ( const previewsForRoomAccount = (
<SettingsFlag name="urlPreviewsEnabled" <SettingsFlag name="urlPreviewsEnabled"
level={SettingLevel.ROOM_ACCOUNT} level={SettingLevel.ROOM_ACCOUNT}
roomId={this.props.room.roomId} roomId={this.props.room.roomId}

14
src/components/views/rooms/AuxPanel.js
View file

@ -21,7 +21,7 @@ import sdk from '../../../index';
import dis from "../../../dispatcher"; import dis from "../../../dispatcher";
import ObjectUtils from '../../../ObjectUtils'; import ObjectUtils from '../../../ObjectUtils';
import AppsDrawer from './AppsDrawer'; import AppsDrawer from './AppsDrawer';
import { _t, _tJsx} from '../../../languageHandler'; import { _t } from '../../../languageHandler';
module.exports = React.createClass({ module.exports = React.createClass({
@ -99,13 +99,13 @@ module.exports = React.createClass({
supportedText = _t(" (unsupported)"); supportedText = _t(" (unsupported)");
} else { } else {
joinNode = (<span> joinNode = (<span>
{ _tJsx( { _t(
"Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.", "Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.",
[/<voiceText>(.*?)<\/voiceText>/, /<videoText>(.*?)<\/videoText>/], {},
[ {
(sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}} href="#">{ sub }</a>, 'voiceText': (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}} href="#">{ sub }</a>,
(sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video');}} href="#">{ sub }</a>, 'videoText': (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video');}} href="#">{ sub }</a>,
], },
) } ) }
</span>); </span>);
} }

25
src/components/views/rooms/RoomList.js
View file

@ -18,12 +18,10 @@ limitations under the License.
'use strict'; 'use strict';
const React = require("react"); const React = require("react");
const ReactDOM = require("react-dom"); const ReactDOM = require("react-dom");
import { _t, _tJsx } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
const GeminiScrollbar = require('react-gemini-scrollbar'); const GeminiScrollbar = require('react-gemini-scrollbar');
const MatrixClientPeg = require("../../../MatrixClientPeg"); const MatrixClientPeg = require("../../../MatrixClientPeg");
const CallHandler = require('../../../CallHandler'); const CallHandler = require('../../../CallHandler');
const RoomListSorter = require("../../../RoomListSorter");
const Unread = require('../../../Unread');
const dis = require("../../../dispatcher"); const dis = require("../../../dispatcher");
const sdk = require('../../../index'); const sdk = require('../../../index');
const rate_limited_func = require('../../../ratelimitedfunc'); const rate_limited_func = require('../../../ratelimitedfunc');
@ -486,28 +484,25 @@ module.exports = React.createClass({
const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton'); const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton'); const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
const TintableSvg = sdk.getComponent('elements.TintableSvg');
switch (section) { switch (section) {
case 'im.vector.fake.direct': case 'im.vector.fake.direct':
return <div className="mx_RoomList_emptySubListTip"> return <div className="mx_RoomList_emptySubListTip">
{ _tJsx( { _t(
"Press <StartChatButton> to start a chat with someone", "Press <StartChatButton> to start a chat with someone",
[/<StartChatButton>/], {},
[ { 'StartChatButton': <StartChatButton size="16" callout={true} /> },
(sub) => <StartChatButton size="16" callout={true} />,
],
) } ) }
</div>; </div>;
case 'im.vector.fake.recent': case 'im.vector.fake.recent':
return <div className="mx_RoomList_emptySubListTip"> return <div className="mx_RoomList_emptySubListTip">
{ _tJsx( { _t(
"You're not in any rooms yet! Press <CreateRoomButton> to make a room or"+ "You're not in any rooms yet! Press <CreateRoomButton> to make a room or"+
" <RoomDirectoryButton> to browse the directory", " <RoomDirectoryButton> to browse the directory",
[/<CreateRoomButton>/, /<RoomDirectoryButton>/], {},
[ {
(sub) => <CreateRoomButton size="16" callout={true} />, 'CreateRoomButton': <CreateRoomButton size="16" callout={true} />,
(sub) => <RoomDirectoryButton size="16" callout={true} />, 'RoomDirectoryButton': <RoomDirectoryButton size="16" callout={true} />,
], },
) } ) }
</div>; </div>;
} }

20
src/components/views/rooms/RoomPreviewBar.js
View file

@ -21,7 +21,7 @@ const React = require('react');
const sdk = require('../../../index'); const sdk = require('../../../index');
const MatrixClientPeg = require('../../../MatrixClientPeg'); const MatrixClientPeg = require('../../../MatrixClientPeg');
import { _t, _tJsx } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'RoomPreviewBar', displayName: 'RoomPreviewBar',
@ -135,13 +135,13 @@ module.exports = React.createClass({
{ _t('You have been invited to join this room by %(inviterName)s', {inviterName: this.props.inviterName}) } { _t('You have been invited to join this room by %(inviterName)s', {inviterName: this.props.inviterName}) }
</div> </div>
<div className="mx_RoomPreviewBar_join_text"> <div className="mx_RoomPreviewBar_join_text">
{ _tJsx( { _t(
'Would you like to <acceptText>accept</acceptText> or <declineText>decline</declineText> this invitation?', 'Would you like to <acceptText>accept</acceptText> or <declineText>decline</declineText> this invitation?',
[/<acceptText>(.*?)<\/acceptText>/, /<declineText>(.*?)<\/declineText>/], {},
[ {
(sub) => <a onClick={this.props.onJoinClick}>{ sub }</a>, 'acceptText': (sub) => <a onClick={this.props.onJoinClick}>{ sub }</a>,
(sub) => <a onClick={this.props.onRejectClick}>{ sub }</a>, 'declineText': (sub) => <a onClick={this.props.onRejectClick}>{ sub }</a>,
], },
) } ) }
</div> </div>
{ emailMatchBlock } { emailMatchBlock }
@ -211,9 +211,9 @@ module.exports = React.createClass({
<div className="mx_RoomPreviewBar_join_text"> <div className="mx_RoomPreviewBar_join_text">
{ name ? _t('You are trying to access %(roomName)s.', {roomName: name}) : _t('You are trying to access a room.') } { name ? _t('You are trying to access %(roomName)s.', {roomName: name}) : _t('You are trying to access a room.') }
<br /> <br />
{ _tJsx("<a>Click here</a> to join the discussion!", { _t("<a>Click here</a> to join the discussion!",
/<a>(.*?)<\/a>/, {},
(sub) => <a onClick={this.props.onJoinClick}><b>{ sub }</b></a>, { 'a': (sub) => <a onClick={this.props.onJoinClick}><b>{ sub }</b></a> },
) } ) }
</div> </div>
</div> </div>

14
src/components/views/rooms/RoomSettings.js
View file

@ -17,7 +17,7 @@ limitations under the License.
import Promise from 'bluebird'; import Promise from 'bluebird';
import React from 'react'; import React from 'react';
import { _t, _tJsx, _td } from '../../../languageHandler'; import { _t, _td } from '../../../languageHandler';
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import sdk from '../../../index'; import sdk from '../../../index';
import Modal from '../../../Modal'; import Modal from '../../../Modal';
@ -628,9 +628,7 @@ module.exports = React.createClass({
const ColorSettings = sdk.getComponent("room_settings.ColorSettings"); const ColorSettings = sdk.getComponent("room_settings.ColorSettings");
const UrlPreviewSettings = sdk.getComponent("room_settings.UrlPreviewSettings"); const UrlPreviewSettings = sdk.getComponent("room_settings.UrlPreviewSettings");
const RelatedGroupSettings = sdk.getComponent("room_settings.RelatedGroupSettings"); const RelatedGroupSettings = sdk.getComponent("room_settings.RelatedGroupSettings");
const EditableText = sdk.getComponent('elements.EditableText');
const PowerSelector = sdk.getComponent('elements.PowerSelector'); const PowerSelector = sdk.getComponent('elements.PowerSelector');
const Loader = sdk.getComponent("elements.Spinner");
const cli = MatrixClientPeg.get(); const cli = MatrixClientPeg.get();
const roomState = this.props.room.currentState; const roomState = this.props.room.currentState;
@ -751,7 +749,7 @@ module.exports = React.createClass({
var tagsSection = null; var tagsSection = null;
if (canSetTag || self.state.tags) { if (canSetTag || self.state.tags) {
var tagsSection = tagsSection =
<div className="mx_RoomSettings_tags"> <div className="mx_RoomSettings_tags">
{ _t("Tagged as: ") }{ canSetTag ? { _t("Tagged as: ") }{ canSetTag ?
(tags.map(function(tag, i) { (tags.map(function(tag, i) {
@ -781,10 +779,10 @@ module.exports = React.createClass({
if (this.state.join_rule === "public" && aliasCount == 0) { if (this.state.join_rule === "public" && aliasCount == 0) {
addressWarning = addressWarning =
<div className="mx_RoomSettings_warning"> <div className="mx_RoomSettings_warning">
{ _tJsx( { _t(
'To link to a room it must have <a>an address</a>.', 'To link to a room it must have <a>an address</a>.',
/<a>(.*?)<\/a>/, {},
(sub) => <a href="#addresses">{ sub }</a>, { 'a': (sub) => <a href="#addresses">{ sub }</a> },
) } ) }
</div>; </div>;
} }
@ -931,7 +929,7 @@ module.exports = React.createClass({
{ Object.keys(events_levels).map(function(event_type, i) { { Object.keys(events_levels).map(function(event_type, i) {
let label = plEventsToLabels[event_type]; let label = plEventsToLabels[event_type];
if (label) label = _t(label); if (label) label = _t(label);
else label = _tJsx("To send events of type <eventType/>, you must be a", /<eventType\/>/, () => <code>{ event_type }</code>); else label = _t("To send events of type <eventType/>, you must be a", {}, { 'eventType': <code>{ event_type }</code> });
return ( return (
<div className="mx_RoomSettings_powerLevel" key={event_type}> <div className="mx_RoomSettings_powerLevel" key={event_type}>
<span className="mx_RoomSettings_powerLevelKey">{ label } </span> <span className="mx_RoomSettings_powerLevelKey">{ label } </span>

64
src/i18n/strings/en_EN.json
View file

@ -150,8 +150,6 @@
"%(widgetName)s widget modified by %(senderName)s": "%(widgetName)s widget modified by %(senderName)s", "%(widgetName)s widget modified by %(senderName)s": "%(widgetName)s widget modified by %(senderName)s",
"%(widgetName)s widget added by %(senderName)s": "%(widgetName)s widget added by %(senderName)s", "%(widgetName)s widget added by %(senderName)s": "%(widgetName)s widget added by %(senderName)s",
"%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s widget removed by %(senderName)s", "%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s widget removed by %(senderName)s",
"Message Pinning": "Message Pinning",
"Presence Management": "Presence Management",
"%(displayName)s is typing": "%(displayName)s is typing", "%(displayName)s is typing": "%(displayName)s is typing",
"%(names)s and %(count)s others are typing|other": "%(names)s and %(count)s others are typing", "%(names)s and %(count)s others are typing|other": "%(names)s and %(count)s others are typing",
"%(names)s and %(count)s others are typing|one": "%(names)s and one other is typing", "%(names)s and %(count)s others are typing|one": "%(names)s and one other is typing",
@ -163,11 +161,32 @@
"Not a valid Riot keyfile": "Not a valid Riot keyfile", "Not a valid Riot keyfile": "Not a valid Riot keyfile",
"Authentication check failed: incorrect password?": "Authentication check failed: incorrect password?", "Authentication check failed: incorrect password?": "Authentication check failed: incorrect password?",
"Failed to join room": "Failed to join room", "Failed to join room": "Failed to join room",
"Message Pinning": "Message Pinning",
"Presence Management": "Presence Management",
"Disable Emoji suggestions while typing": "Disable Emoji suggestions while typing",
"Use compact timeline layout": "Use compact timeline layout",
"Hide removed messages": "Hide removed messages",
"Hide join/leave messages (invites/kicks/bans unaffected)": "Hide join/leave messages (invites/kicks/bans unaffected)",
"Hide avatar changes": "Hide avatar changes", "Hide avatar changes": "Hide avatar changes",
"Hide display name changes": "Hide display name changes", "Hide display name changes": "Hide display name changes",
"Hide read receipts": "Hide read receipts",
"Show timestamps in 12 hour format (e.g. 2:30pm)": "Show timestamps in 12 hour format (e.g. 2:30pm)",
"Always show message timestamps": "Always show message timestamps",
"Autoplay GIFs and videos": "Autoplay GIFs and videos",
"Enable automatic language detection for syntax highlighting": "Enable automatic language detection for syntax highlighting",
"Hide avatars in user and room mentions": "Hide avatars in user and room mentions",
"Disable big emoji in chat": "Disable big emoji in chat",
"Don't send typing notifications": "Don't send typing notifications",
"Automatically replace plain text Emoji": "Automatically replace plain text Emoji",
"Mirror local video feed": "Mirror local video feed",
"Disable Peer-to-Peer for 1:1 calls": "Disable Peer-to-Peer for 1:1 calls",
"Opt out of analytics": "Opt out of analytics",
"Never send encrypted messages to unverified devices from this device": "Never send encrypted messages to unverified devices from this device",
"Never send encrypted messages to unverified devices in this room from this device": "Never send encrypted messages to unverified devices in this room from this device",
"Enable inline URL previews by default": "Enable inline URL previews by default", "Enable inline URL previews by default": "Enable inline URL previews by default",
"Enable URL previews for this room (only affects you)": "Enable URL previews for this room (only affects you)", "Enable URL previews for this room (only affects you)": "Enable URL previews for this room (only affects you)",
"Enable URL previews by default for participants in this room": "Enable URL previews by default for participants in this room", "Enable URL previews by default for participants in this room": "Enable URL previews by default for participants in this room",
"Room Colour": "Room Colour",
"Active call (%(roomName)s)": "Active call (%(roomName)s)", "Active call (%(roomName)s)": "Active call (%(roomName)s)",
"unknown caller": "unknown caller", "unknown caller": "unknown caller",
"Incoming voice call from %(name)s": "Incoming voice call from %(name)s", "Incoming voice call from %(name)s": "Incoming voice call from %(name)s",
@ -208,9 +227,6 @@
"Delete": "Delete", "Delete": "Delete",
"Disable Notifications": "Disable Notifications", "Disable Notifications": "Disable Notifications",
"Enable Notifications": "Enable Notifications", "Enable Notifications": "Enable Notifications",
"You have <a>enabled</a> URL previews by default.": "You have <a>enabled</a> URL previews by default.",
"You have <a>disabled</a> URL previews by default.": "You have <a>disabled</a> URL previews by default.",
"URL Previews": "URL Previews",
"Cannot add any more widgets": "Cannot add any more widgets", "Cannot add any more widgets": "Cannot add any more widgets",
"The maximum permitted number of widgets have already been added to this room.": "The maximum permitted number of widgets have already been added to this room.", "The maximum permitted number of widgets have already been added to this room.": "The maximum permitted number of widgets have already been added to this room.",
"Add a widget": "Add a widget", "Add a widget": "Add a widget",
@ -378,7 +394,6 @@
"Devices will not yet be able to decrypt history from before they joined the room": "Devices will not yet be able to decrypt history from before they joined the room", "Devices will not yet be able to decrypt history from before they joined the room": "Devices will not yet be able to decrypt history from before they joined the room",
"Once encryption is enabled for a room it cannot be turned off again (for now)": "Once encryption is enabled for a room it cannot be turned off again (for now)", "Once encryption is enabled for a room it cannot be turned off again (for now)": "Once encryption is enabled for a room it cannot be turned off again (for now)",
"Encrypted messages will not be visible on clients that do not yet implement encryption": "Encrypted messages will not be visible on clients that do not yet implement encryption", "Encrypted messages will not be visible on clients that do not yet implement encryption": "Encrypted messages will not be visible on clients that do not yet implement encryption",
"Never send encrypted messages to unverified devices in this room from this device": "Never send encrypted messages to unverified devices in this room from this device",
"Enable encryption": "Enable encryption", "Enable encryption": "Enable encryption",
"(warning: cannot be disabled again!)": "(warning: cannot be disabled again!)", "(warning: cannot be disabled again!)": "(warning: cannot be disabled again!)",
"Encryption is enabled in this room": "Encryption is enabled in this room", "Encryption is enabled in this room": "Encryption is enabled in this room",
@ -404,7 +419,6 @@
"Members only (since the point in time of selecting this option)": "Members only (since the point in time of selecting this option)", "Members only (since the point in time of selecting this option)": "Members only (since the point in time of selecting this option)",
"Members only (since they were invited)": "Members only (since they were invited)", "Members only (since they were invited)": "Members only (since they were invited)",
"Members only (since they joined)": "Members only (since they joined)", "Members only (since they joined)": "Members only (since they joined)",
"Room Colour": "Room Colour",
"Permissions": "Permissions", "Permissions": "Permissions",
"The default role for new room members is": "The default role for new room members is", "The default role for new room members is": "The default role for new room members is",
"To send messages, you must be a": "To send messages, you must be a", "To send messages, you must be a": "To send messages, you must be a",
@ -438,6 +452,9 @@
"Related communities for this room:": "Related communities for this room:", "Related communities for this room:": "Related communities for this room:",
"This room has no related communities": "This room has no related communities", "This room has no related communities": "This room has no related communities",
"New community ID (e.g. +foo:%(localDomain)s)": "New community ID (e.g. +foo:%(localDomain)s)", "New community ID (e.g. +foo:%(localDomain)s)": "New community ID (e.g. +foo:%(localDomain)s)",
"You have <a>enabled</a> URL previews by default.": "You have <a>enabled</a> URL previews by default.",
"You have <a>disabled</a> URL previews by default.": "You have <a>disabled</a> URL previews by default.",
"URL Previews": "URL Previews",
"Error decrypting audio": "Error decrypting audio", "Error decrypting audio": "Error decrypting audio",
"Error decrypting attachment": "Error decrypting attachment", "Error decrypting attachment": "Error decrypting attachment",
"Decrypt %(text)s": "Decrypt %(text)s", "Decrypt %(text)s": "Decrypt %(text)s",
@ -474,6 +491,7 @@
"Please enter the code it contains:": "Please enter the code it contains:", "Please enter the code it contains:": "Please enter the code it contains:",
"Start authentication": "Start authentication", "Start authentication": "Start authentication",
"powered by Matrix": "powered by Matrix", "powered by Matrix": "powered by Matrix",
"Username on %(hs)s": "Username on %(hs)s",
"User name": "User name", "User name": "User name",
"Mobile phone number": "Mobile phone number", "Mobile phone number": "Mobile phone number",
"Forgot your password?": "Forgot your password?", "Forgot your password?": "Forgot your password?",
@ -481,7 +499,6 @@
"Sign in with": "Sign in with", "Sign in with": "Sign in with",
"Email address": "Email address", "Email address": "Email address",
"Sign in": "Sign in", "Sign in": "Sign in",
"Sign in to get started": "Sign in to get started",
"If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?", "If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?",
"Email address (optional)": "Email address (optional)", "Email address (optional)": "Email address (optional)",
"You are registering with %(SelectedTeamName)s": "You are registering with %(SelectedTeamName)s", "You are registering with %(SelectedTeamName)s": "You are registering with %(SelectedTeamName)s",
@ -731,11 +748,11 @@
"Scroll to bottom of page": "Scroll to bottom of page", "Scroll to bottom of page": "Scroll to bottom of page",
"Connectivity to the server has been lost.": "Connectivity to the server has been lost.", "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
"Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.", "Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.",
"<a>Resend all</a> or <a>cancel all</a> now. You can also select individual messages to resend or cancel.": "<a>Resend all</a> or <a>cancel all</a> now. You can also select individual messages to resend or cancel.", "<resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.": "<resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.",
"%(count)s new messages|other": "%(count)s new messages", "%(count)s new messages|other": "%(count)s new messages",
"%(count)s new messages|one": "%(count)s new message", "%(count)s new messages|one": "%(count)s new message",
"Active call": "Active call", "Active call": "Active call",
"There's no one else here! Would you like to <a>invite others</a> or <a>stop warning about the empty room</a>?": "There's no one else here! Would you like to <a>invite others</a> or <a>stop warning about the empty room</a>?", "There's no one else here! Would you like to <inviteText>invite others</inviteText> or <nowarnText>stop warning about the empty room</nowarnText>?": "There's no one else here! Would you like to <inviteText>invite others</inviteText> or <nowarnText>stop warning about the empty room</nowarnText>?",
"You seem to be uploading files, are you sure you want to quit?": "You seem to be uploading files, are you sure you want to quit?", "You seem to be uploading files, are you sure you want to quit?": "You seem to be uploading files, are you sure you want to quit?",
"You seem to be in a call, are you sure you want to quit?": "You seem to be in a call, are you sure you want to quit?", "You seem to be in a call, are you sure you want to quit?": "You seem to be in a call, are you sure you want to quit?",
"Some of your messages have not been sent.": "Some of your messages have not been sent.", "Some of your messages have not been sent.": "Some of your messages have not been sent.",
@ -760,25 +777,9 @@
"Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others", "Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others",
"Uploading %(filename)s and %(count)s others|zero": "Uploading %(filename)s", "Uploading %(filename)s and %(count)s others|zero": "Uploading %(filename)s",
"Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other", "Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other",
"Autoplay GIFs and videos": "Autoplay GIFs and videos",
"Hide read receipts": "Hide read receipts",
"Don't send typing notifications": "Don't send typing notifications",
"Always show message timestamps": "Always show message timestamps",
"Show timestamps in 12 hour format (e.g. 2:30pm)": "Show timestamps in 12 hour format (e.g. 2:30pm)",
"Hide join/leave messages (invites/kicks/bans unaffected)": "Hide join/leave messages (invites/kicks/bans unaffected)",
"Use compact timeline layout": "Use compact timeline layout",
"Hide removed messages": "Hide removed messages",
"Enable automatic language detection for syntax highlighting": "Enable automatic language detection for syntax highlighting",
"Automatically replace plain text Emoji": "Automatically replace plain text Emoji",
"Disable Emoji suggestions while typing": "Disable Emoji suggestions while typing",
"Hide avatars in user and room mentions": "Hide avatars in user and room mentions",
"Disable big emoji in chat": "Disable big emoji in chat",
"Mirror local video feed": "Mirror local video feed",
"Opt out of analytics": "Opt out of analytics",
"Disable Peer-to-Peer for 1:1 calls": "Disable Peer-to-Peer for 1:1 calls",
"Never send encrypted messages to unverified devices from this device": "Never send encrypted messages to unverified devices from this device",
"Light theme": "Light theme", "Light theme": "Light theme",
"Dark theme": "Dark theme", "Dark theme": "Dark theme",
"Status.im theme": "Status.im theme",
"Can't load user settings": "Can't load user settings", "Can't load user settings": "Can't load user settings",
"Server may be unavailable or overloaded": "Server may be unavailable or overloaded", "Server may be unavailable or overloaded": "Server may be unavailable or overloaded",
"Sign out": "Sign out", "Sign out": "Sign out",
@ -793,7 +794,6 @@
"Interface Language": "Interface Language", "Interface Language": "Interface Language",
"User Interface": "User Interface", "User Interface": "User Interface",
"Autocomplete Delay (ms):": "Autocomplete Delay (ms):", "Autocomplete Delay (ms):": "Autocomplete Delay (ms):",
"Disable inline URL previews by default": "Disable inline URL previews by default",
"<not supported>": "<not supported>", "<not supported>": "<not supported>",
"Import E2E room keys": "Import E2E room keys", "Import E2E room keys": "Import E2E room keys",
"Cryptography": "Cryptography", "Cryptography": "Cryptography",
@ -858,6 +858,7 @@
"Create an account": "Create an account", "Create an account": "Create an account",
"This Home Server does not support login using email address.": "This Home Server does not support login using email address.", "This Home Server does not support login using email address.": "This Home Server does not support login using email address.",
"Incorrect username and/or password.": "Incorrect username and/or password.", "Incorrect username and/or password.": "Incorrect username and/or password.",
"Please note you are logging into the %(hs)s server, not matrix.org.": "Please note you are logging into the %(hs)s server, not matrix.org.",
"Guest access is disabled on this Home Server.": "Guest access is disabled on this Home Server.", "Guest access is disabled on this Home Server.": "Guest access is disabled on this Home Server.",
"The phone number entered looks invalid": "The phone number entered looks invalid", "The phone number entered looks invalid": "The phone number entered looks invalid",
"Error: Problem communicating with the given homeserver.": "Error: Problem communicating with the given homeserver.", "Error: Problem communicating with the given homeserver.": "Error: Problem communicating with the given homeserver.",
@ -865,7 +866,7 @@
"Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.", "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
"Sorry, this homeserver is using a login which is not recognised ": "Sorry, this homeserver is using a login which is not recognised ", "Sorry, this homeserver is using a login which is not recognised ": "Sorry, this homeserver is using a login which is not recognised ",
"Login as guest": "Login as guest", "Login as guest": "Login as guest",
"Return to app": "Return to app", "Sign in to get started": "Sign in to get started",
"Failed to fetch avatar URL": "Failed to fetch avatar URL", "Failed to fetch avatar URL": "Failed to fetch avatar URL",
"Set a display name:": "Set a display name:", "Set a display name:": "Set a display name:",
"Upload an avatar:": "Upload an avatar:", "Upload an avatar:": "Upload an avatar:",
@ -927,8 +928,5 @@
"This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.": "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.", "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.": "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.",
"The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.", "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.",
"File to import": "File to import", "File to import": "File to import",
"Import": "Import", "Import": "Import"
"Status.im theme": "Status.im theme",
"Please note you are logging into the %(hs)s server, not matrix.org.": "Please note you are logging into the %(hs)s server, not matrix.org.",
"Username on %(hs)s": "Username on %(hs)s"
} }

178
src/languageHandler.js
View file

@ -34,12 +34,9 @@ export function _td(s) {
return s; return s;
} }
// The translation function. This is just a simple wrapper to counterpart, // Wrapper for counterpart's translation function so that it handles nulls and undefineds properly
// but exists mostly because we must use the same counterpart instance // Takes the same arguments as counterpart.translate()
// between modules (ie. here (react-sdk) and the app (riot-web), and if we function safeCounterpartTranslate(...args) {
// just import counterpart and use it directly, we end up using a different
// instance.
export function _t(...args) {
// Horrible hack to avoid https://github.com/vector-im/riot-web/issues/4191 // Horrible hack to avoid https://github.com/vector-im/riot-web/issues/4191
// The interpolation library that counterpart uses does not support undefined/null // The interpolation library that counterpart uses does not support undefined/null
// values and instead will throw an error. This is a problem since everywhere else // values and instead will throw an error. This is a problem since everywhere else
@ -50,11 +47,11 @@ export function _t(...args) {
if (args[1] && typeof args[1] === 'object') { if (args[1] && typeof args[1] === 'object') {
Object.keys(args[1]).forEach((k) => { Object.keys(args[1]).forEach((k) => {
if (args[1][k] === undefined) { if (args[1][k] === undefined) {
console.warn("_t called with undefined interpolation name: " + k); console.warn("safeCounterpartTranslate called with undefined interpolation name: " + k);
args[1][k] = 'undefined'; args[1][k] = 'undefined';
} }
if (args[1][k] === null) { if (args[1][k] === null) {
console.warn("_t called with null interpolation name: " + k); console.warn("safeCounterpartTranslate called with null interpolation name: " + k);
args[1][k] = 'null'; args[1][k] = 'null';
} }
}); });
@ -63,75 +60,136 @@ export function _t(...args) {
} }
/* /*
* Translates stringified JSX into translated JSX. E.g * Translates text and optionally also replaces XML-ish elements in the text with e.g. React components
* _tJsx( * @param {string} text The untranslated text, e.g "click <a>here</a> now to %(foo)s".
* "click <a href=''>here</a> now", * @param {object} variables Variable substitutions, e.g { foo: 'bar' }
* /<a href=''>(.*?)<\/a>/, * @param {object} tags Tag substitutions e.g. { 'a': (sub) => <a>{sub}</a> }
* (sub) => { return <a href=''>{ sub }</a>; }
* );
* *
* @param {string} jsxText The untranslated stringified JSX e.g "click <a href=''>here</a> now". * In both variables and tags, the values to substitute with can be either simple strings, React components,
* This will be translated by passing the string through to _t(...) * or functions that return the value to use in the substitution (e.g. return a React component). In case of
* a tag replacement, the function receives as the argument the text inside the element corresponding to the tag.
* *
* @param {RegExp|RegExp[]} patterns A regexp to match against the translated text. * Use tag substitutions if you need to translate text between tags (e.g. "<a>Click here!</a>"), otherwise
* The captured groups from the regexp will be fed to 'sub'. * you will end up with literal "<a>" in your output, rather than HTML. Note that you can also use variable
* Only the captured groups will be included in the output, the match itself is discarded. * substitution to insert React components, but you can't use it to translate text between tags.
* If multiple RegExps are provided, the function at the same position will be called. The
* match will always be done from left to right, so the 2nd RegExp will be matched against the
* remaining text from the first RegExp.
* *
* @param {Function|Function[]} subs A function which will be called * @return a React <span> component if any non-strings were used in substitutions, otherwise a string
* with multiple args, each arg representing a captured group of the matching regexp.
* This function must return a JSX node.
*
* @return a React <span> component containing the generated text
*/ */
export function _tJsx(jsxText, patterns, subs) { export function _t(text, variables, tags) {
// convert everything to arrays // Don't do subsitutions in counterpart. We handle it ourselves so we can replace with React components
if (patterns instanceof RegExp) { // However, still pass the variables to counterpart so that it can choose the correct plural if count is given
patterns = [patterns]; // It is enough to pass the count variable, but in the future counterpart might make use of other information too
} const args = Object.assign({ interpolate: false }, variables);
if (subs instanceof Function) {
subs = [subs];
}
// sanity checks
if (subs.length !== patterns.length || subs.length < 1) {
throw new Error(`_tJsx: programmer error. expected number of RegExps == number of Functions: ${subs.length} != ${patterns.length}`);
}
for (let i = 0; i < subs.length; i++) {
if (!(patterns[i] instanceof RegExp)) {
throw new Error(`_tJsx: programmer error. expected RegExp for text: ${jsxText}`);
}
if (!(subs[i] instanceof Function)) {
throw new Error(`_tJsx: programmer error. expected Function for text: ${jsxText}`);
}
}
// The translation returns text so there's no XSS vector here (no unsafe HTML, no code execution) // The translation returns text so there's no XSS vector here (no unsafe HTML, no code execution)
const tJsxText = _t(jsxText, {interpolate: false}); const translated = safeCounterpartTranslate(text, args);
const output = [tJsxText];
return substitute(translated, variables, tags);
}
/*
* Similar to _t(), except only does substitutions, and no translation
* @param {string} text The text, e.g "click <a>here</a> now to %(foo)s".
* @param {object} variables Variable substitutions, e.g { foo: 'bar' }
* @param {object} tags Tag substitutions e.g. { 'a': (sub) => <a>{sub}</a> }
*
* The values to substitute with can be either simple strings, or functions that return the value to use in
* the substitution (e.g. return a React component). In case of a tag replacement, the function receives as
* the argument the text inside the element corresponding to the tag.
*
* @return a React <span> component if any non-strings were used in substitutions, otherwise a string
*/
export function substitute(text, variables, tags) {
const regexpMapping = {};
if (variables !== undefined) {
for (const variable in variables) {
regexpMapping[`%\\(${variable}\\)s`] = variables[variable];
}
}
if (tags !== undefined) {
for (const tag in tags) {
regexpMapping[`(<${tag}>(.*?)<\\/${tag}>|<${tag}>|<${tag}\\s*\\/>)`] = tags[tag];
}
}
return replaceByRegexes(text, regexpMapping);
}
/*
* Replace parts of a text using regular expressions
* @param {string} text The text on which to perform substitutions
* @param {object} mapping A mapping from regular expressions in string form to replacement string or a
* function which will receive as the argument the capture groups defined in the regexp. E.g.
* { 'Hello (.?) World': (sub) => sub.toUpperCase() }
*
* @return a React <span> component if any non-strings were used in substitutions, otherwise a string
*/
export function replaceByRegexes(text, mapping) {
const output = [text];
// If we insert any components we need to wrap the output in a span. React doesn't like just an array of components.
let shouldWrapInSpan = false;
for (const regexpString in mapping) {
// TODO: Cache regexps
const regexp = new RegExp(regexpString);
for (let i = 0; i < patterns.length; i++) {
// convert the last element in 'output' into 3 elements (pre-text, sub function, post-text). // convert the last element in 'output' into 3 elements (pre-text, sub function, post-text).
// Rinse and repeat for other patterns (using post-text). // Rinse and repeat for other patterns (using post-text).
const inputText = output.pop(); const inputText = output.pop();
const match = inputText.match(patterns[i]); const match = inputText.match(regexp);
if (!match) { if (!match) {
throw new Error(`_tJsx: translator error. expected translation to match regexp: ${patterns[i]}`); output.push(inputText); // Push back input
// Missing matches is entirely possible because you might choose to show some variables only in the case
// of e.g. plurals. It's still a bit suspicious, and could be due to an error, so log it.
// However, not showing count is so common that it's not worth logging. And other commonly unused variables
// here, if there are any.
if (regexpString !== '%\\(count\\)s') {
console.log(`Could not find ${regexp} in ${inputText}`);
}
continue;
} }
const capturedGroups = match.slice(1); const capturedGroups = match.slice(2);
// Return the raw translation before the *match* followed by the return value of sub() followed // Return the raw translation before the *match* followed by the return value of sub() followed
// by the raw translation after the *match* (not captured group). // by the raw translation after the *match* (not captured group).
output.push(inputText.substr(0, match.index));
output.push(subs[i].apply(null, capturedGroups)); const head = inputText.substr(0, match.index);
output.push(inputText.substr(match.index + match[0].length)); if (head !== '') { // Don't push empty nodes, they are of no use
output.push(head);
}
let replaced;
// If substitution is a function, call it
if (mapping[regexpString] instanceof Function) {
replaced = mapping[regexpString].apply(null, capturedGroups);
} else {
replaced = mapping[regexpString];
}
// Here we also need to check that it actually is a string before comparing against one
// The head and tail are always strings
if (typeof replaced !== 'string' || replaced !== '') {
output.push(replaced);
}
if (typeof replaced === 'object') {
shouldWrapInSpan = true;
}
const tail = inputText.substr(match.index + match[0].length);
if (tail !== '') {
output.push(tail);
}
} }
// this is a bit of a fudge to avoid the 'Each child in an array or iterator if (shouldWrapInSpan) {
// should have a unique "key" prop' error: we explicitly pass the generated return React.createElement('span', null, ...output);
// nodes into React.createElement as children of a <span>. } else {
return React.createElement('span', null, ...output); return output.join('');
}
} }
// Allow overriding the text displayed when no translation exists // Allow overriding the text displayed when no translation exists

68
test/i18n-test/languageHandler-test.js Normal file
View file

@ -0,0 +1,68 @@
const React = require('react');
const expect = require('expect');
import * as languageHandler from '../../src/languageHandler';
const testUtils = require('../test-utils');
describe('languageHandler', function() {
let sandbox;
beforeEach(function(done) {
testUtils.beforeEach(this);
sandbox = testUtils.stubClient();
languageHandler.setLanguage('en').done(done);
});
afterEach(function() {
sandbox.restore();
});
it('translates a string to german', function() {
languageHandler.setLanguage('de').then(function() {
const translated = languageHandler._t('Rooms');
expect(translated).toBe('Räume');
});
});
it('handles plurals', function() {
const text = 'and %(count)s others...';
expect(languageHandler._t(text, { count: 1 })).toBe('and one other...');
expect(languageHandler._t(text, { count: 2 })).toBe('and 2 others...');
});
it('handles simple variable subsitutions', function() {
const text = 'You are now ignoring %(userId)s';
expect(languageHandler._t(text, { userId: 'foo' })).toBe('You are now ignoring foo');
});
it('handles simple tag substitution', function() {
const text = 'Press <StartChatButton> to start a chat with someone';
expect(languageHandler._t(text, {}, { 'StartChatButton': () => 'foo' }))
.toBe('Press foo to start a chat with someone');
});
it('handles text in tags', function() {
const text = '<a>Click here</a> to join the discussion!';
expect(languageHandler._t(text, {}, { 'a': (sub) => `x${sub}x` }))
.toBe('xClick herex to join the discussion!');
});
it('variable substitution with React component', function() {
const text = 'You are now ignoring %(userId)s';
expect(languageHandler._t(text, { userId: () => <i>foo</i> }))
.toEqual((<span>You are now ignoring <i>foo</i></span>));
});
it('variable substitution with plain React component', function() {
const text = 'You are now ignoring %(userId)s';
expect(languageHandler._t(text, { userId: <i>foo</i> }))
.toEqual((<span>You are now ignoring <i>foo</i></span>));
});
it('tag substitution with React component', function() {
const text = 'Press <StartChatButton> to start a chat with someone';
expect(languageHandler._t(text, {}, { 'StartChatButton': () => <i>foo</i> }))
.toEqual(<span>Press <i>foo</i> to start a chat with someone</span>);
});
});