Add spinning icon;

Fix performance issues;

packages/rocketchat-autotranslate/client/lib/actionButton.js

@@ -11,8 +11,15 @@ Meteor.startup(function() {
 				],
 				action() {
 					const message = this._arguments[1];
+					const subscription = RocketChat.models.Subscriptions.findOne({ rid: message.rid, 'u._id': Meteor.userId() });
 					RocketChat.MessageAction.hideDropDown();
-					if (message.autoTranslateShowInverse) {
+					if (!message.translations || !message.translations[subscription && subscription.autoTranslateLanguage]) {
+						if (!subscription.autoTranslateDisplay) {
+							RocketChat.AutoTranslate.messageIdsToWait[message._id] = true;
+						}
+						RocketChat.models.Messages.update({ _id: message._id }, { $set: { autoTranslateFetching: true } });
+						Meteor.call('autoTranslate.translateMessage', message);
+					} else if (message.autoTranslateShowInverse) {
 						RocketChat.models.Messages.update({ _id: message._id }, { $unset: { autoTranslateShowInverse: true } });
 					} else {
 						RocketChat.models.Messages.update({ _id: message._id }, { $set: { autoTranslateShowInverse: true } });

packages/rocketchat-autotranslate/client/lib/autotranslate.js

@@ -1,24 +1,44 @@
-Meteor.startup(function() {
-	Tracker.autorun(function() {
-		if (RocketChat.settings.get('AutoTranslate_Enabled') && RocketChat.authz.hasAtLeastOnePermission(['auto-translate'])) {
-			RocketChat.callbacks.add('renderMessage', (message) => {
-				if (message.u._id !== Meteor.userId()) {
-					const subscription = RocketChat.models.Subscriptions.findOne({ rid: message.rid }, { fields: { autoTranslate: 1, autoTranslateLanguage: 1, autoTranslateDisplay: 1 } });
-					if (subscription && subscription.autoTranslate === true && subscription.autoTranslateLanguage && !!subscription.autoTranslateDisplay !== !!message.autoTranslateShowInverse) {
-						const autoTranslateLanguage = subscription.autoTranslateLanguage;
-						if (!message.translations) {
-							message.translations = {};
+RocketChat.AutoTranslate = {
+	messageIdsToWait: {},
+
+	init() {
+		Tracker.autorun(() => {
+			if (RocketChat.settings.get('AutoTranslate_Enabled') && RocketChat.authz.hasAtLeastOnePermission(['auto-translate'])) {
+				RocketChat.callbacks.add('renderMessage', (message) => {
+					if (message.u._id !== Meteor.userId()) {
+						const subscription = RocketChat.models.Subscriptions.findOne({ rid: message.rid }, { fields: { autoTranslate: 1, autoTranslateLanguage: 1, autoTranslateDisplay: 1 } });
+						if (subscription && subscription.autoTranslate === true && subscription.autoTranslateLanguage && !!subscription.autoTranslateDisplay !== !!message.autoTranslateShowInverse) {
+							const autoTranslateLanguage = subscription.autoTranslateLanguage;
+							if (!message.translations) {
+								message.translations = {};
+							}
+							message.translations['original'] = message.html;
+							if (message.translations[autoTranslateLanguage]) {
+								message.html = message.translations[autoTranslateLanguage];
+							}
+							return message;
 						}
-						message.translations['original'] = message.html;
-						if (message.translations[autoTranslateLanguage]) {
-							message.html = message.translations[autoTranslateLanguage];
-						}
-						return message;
 					}
-				}
-			}, RocketChat.callbacks.priority.HIGH - 3, 'autotranslate');
-		} else {
-			RocketChat.callbacks.remove('renderMessage', 'autotranslate');
-		}
-	});
+				}, RocketChat.callbacks.priority.HIGH - 3, 'autotranslate');
+
+				RocketChat.callbacks.add('streamMessage', (message) => {
+					const subscription = RocketChat.models.Subscriptions.findOne({ rid: message.rid }, { fields: { autoTranslate: 1, autoTranslateLanguage: 1, autoTranslateDisplay: 1 } });
+					if (subscription && subscription.autoTranslate === true && subscription.autoTranslateLanguage && subscription.autoTranslateDisplay && (!message.translations || !message.translations[subscription.autoTranslateLanguage])) {
+						RocketChat.models.Messages.update({ _id: message._id }, { $set: { autoTranslateFetching: true } });
+					}
+					if (this.messageIdsToWait[message._id] !== undefined) {
+						RocketChat.models.Messages.update({ _id: message._id }, { $set: { autoTranslateShowInverse: true }, $unset: { autoTranslateFetching: 1 } });
+						delete this.messageIdsToWait[message._id];
+					}
+				}, RocketChat.callbacks.priority.HIGH - 3, 'autotranslate-stream');
+			} else {
+				RocketChat.callbacks.remove('renderMessage', 'autotranslate');
+				RocketChat.callbacks.remove('streamMessage', 'autotranslate-stream');
+			}
+		});
+	}
+};
+
+Meteor.startup(function() {
+	RocketChat.AutoTranslate.init();
 });

packages/rocketchat-autotranslate/client/stylesheets/autotranslate.less

@@ -39,6 +39,11 @@
 		border-left: 1px dotted;
 		padding-left: 3px;
 		margin-left: 3px;
+
+		i.icon-language.loading {
+			display: inline-block;
+			animation: spinh 2000ms infinite linear;
+		}
 	}
 
 	&.sequential {

packages/rocketchat-autotranslate/client/views/autoTranslateFlexTab.html

@@ -28,6 +28,9 @@
 												{{/each}}
 											</select>
 										</label>
+										<div class="alert">
+											{{_ "AutoTranslate_Change_Language_Description"}}
+										</div>
 										<button type="button" class="button cancel">{{_ "Cancel"}}</button>
 										<button type="button" class="button primary save">{{_ "Save"}}</button>
 									{{else}}

packages/rocketchat-autotranslate/client/views/autoTranslateFlexTab.js

@@ -4,7 +4,7 @@ import toastr from 'toastr';
 Template.autoTranslateFlexTab.helpers({
 	autoTranslate() {
 		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
+			rid: Template.instance().rid
 		}, {
 			fields: {
 				autoTranslate: 1
@@ -15,7 +15,7 @@ Template.autoTranslateFlexTab.helpers({
 
 	autoTranslateDisplay() {
 		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
+			rid: Template.instance().rid
 		}, {
 			fields: {
 				autoTranslateDisplay: 1
@@ -26,7 +26,7 @@ Template.autoTranslateFlexTab.helpers({
 
 	autoTranslateValue() {
 		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
+			rid: Template.instance().rid
 		}, {
 			fields: {
 				autoTranslate: 1
@@ -37,7 +37,7 @@ Template.autoTranslateFlexTab.helpers({
 
 	autoTranslateLanguage() {
 		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
+			rid: Template.instance().rid
 		}, {
 			fields: {
 				autoTranslateLanguage: 1
@@ -65,6 +65,7 @@ Template.autoTranslateFlexTab.helpers({
 });
 
 Template.autoTranslateFlexTab.onCreated(function() {
+	this.rid = Template.currentData().rid;
 	this.editing = new ReactiveVar();
 	this.supportedLanguages = new ReactiveVar([]);
 	const userLanguage = Meteor.user().language || window.defaultUserLanguage();
@@ -90,6 +91,8 @@ Template.autoTranslateFlexTab.onCreated(function() {
 
 	this.saveSetting = () => {
 		const field = this.editing.get();
+		const subscription = RocketChat.models.Subscriptions.findOne({ rid: this.rid, 'u._id': Meteor.userId() });
+		const previousLanguage = subscription.autoTranslateLanguage;
 		let value;
 		switch (field) {
 			case 'autoTranslate':
@@ -102,16 +105,33 @@ Template.autoTranslateFlexTab.onCreated(function() {
 		}
 
 		if (this.validateSetting(field)) {
-			Meteor.call('autoTranslate.saveSettings', Session.get('openedRoom'), field, value, (err/*, result*/) => {
+			Meteor.call('autoTranslate.saveSettings', this.data.rid, field, value, (err/*, result*/) => {
 				if (err) {
 					return handleError(err);
 				}
 
-				// Update all visible messages to reflect this setting
-				if (field === 'autoTranslate' || field === 'autoTranslateDisplay') {
-					RocketChat.models.Messages.update({ rid: Session.get('openedRoom') }, { $unset: { autoTranslateShowInverse: 1 }, $set: { random: Random.id() } }, { multi: true });
+				const query = { rid: this.data.rid, 'u._id': { $ne: Meteor.userId() } };
+				if (field === 'autoTranslateLanguage') {
+					query.$or = [ { [`translations.${previousLanguage}`]: { $exists: 1 } }, { [`translations.${value}`]: { $exists: 1 } } ];
+				} else {
+					query[`translations.${subscription.autoTranslateLanguage}`] = { $exists: 1 };
 				}
 
+				const update = { $set: { random: Random.id() } };
+
+				if (field === 'autoTranslateDisplay' && value === '0') {
+					RocketChat.models.Messages.update(query, { $unset: { autoTranslateShowInverse: 1 } }, { multi: true });
+				}
+
+				const display = field === 'autoTranslateDisplay' ? true : subscription.autoTranslateDisplay;
+				if (display) {
+					query.autoTranslateShowInverse = { $ne: true };
+				} else {
+					query.autoTranslateShowInverse = true;
+				}
+
+				console.log(query, RocketChat.models.Messages.find(query).fetch(), update);
+				RocketChat.models.Messages.update(query, update, { multi: true });
 				this.editing.set();
 			});
 		}

packages/rocketchat-autotranslate/package.js

@@ -31,6 +31,7 @@ Package.onUse(function(api) {
 		'server/models/Messages.js',
 		'server/models/Subscriptions.js',
 		'server/methods/saveSettings.js',
+		'server/methods/translateMessage.js',
 		'server/methods/getSupportedLanguages.js'
 	], 'server');
 });

packages/rocketchat-autotranslate/server/autotranslate.js

@@ -84,7 +84,7 @@ class AutoTranslate {
 					}
 				});
 				if (!_.isEmpty(translations)) {
-					RocketChat.models.Messages.setTranslations(message._id, translations);
+					RocketChat.models.Messages.addTranslations(message._id, translations);
 				}
 			});
 		}

packages/rocketchat-autotranslate/server/methods/translateMessage.js

@@ -0,0 +1,8 @@
+Meteor.methods({
+	'autoTranslate.translateMessage'(message) {
+		const room = RocketChat.models.Rooms.findOneById(message && message.rid);
+		if (message && room && RocketChat.AutoTranslate) {
+			return RocketChat.AutoTranslate.translateMessage(message, room);
+		}
+	}
+});

packages/rocketchat-autotranslate/server/models/Messages.js

@@ -1,3 +1,8 @@
-RocketChat.models.Messages.setTranslations = function(messageId, translations) {
-	return this.update({ _id: messageId }, { $set: { translations: translations }});
+RocketChat.models.Messages.addTranslations = function(messageId, translations) {
+	const updateObj = {};
+	Object.keys(translations).forEach((key) => {
+		const translation = translations[key];
+		updateObj[`translations.${key}`] = translation;
+	});
+	return this.update({ _id: messageId }, { $set: updateObj });
 };

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -218,6 +218,7 @@
   "Auto_Translate": "Auto-Translate",
   "AutoTranslate_Enabled": "Enable Auto-Translate",
   "AutoTranslate_Enabled_Description": "Enabling auto-translation will allow people with the <code class=\"inline\">auto-translate</code> permission to have all messages automatically translated into their selected language. Fees may apply, see <a target=\"_blank\" href=\"https://cloud.google.com/translate/pricing\">Google's Documentation</a>",
+  "AutoTranslate_Change_Language_Description": "Changing the auto-translate language does not translate previous messages.",
   "AutoTranslate_GoogleAPIKey": "Google API Key",
   "Available": "Available",
   "Available_agents": "Available agents",

packages/rocketchat-theme/client/imports/base.less

@@ -491,6 +491,46 @@ blockquote {
 	}
 }
 
+@-ms-keyframes spinh {
+	from {
+		-ms-transform: rotateY(0deg);
+	}
+
+	to {
+		-ms-transform: rotateY(360deg);
+	}
+}
+
+@-moz-keyframes spinh {
+	from {
+		-moz-transform: rotateY(0deg);
+	}
+
+	to {
+		-moz-transform: rotateY(360deg);
+	}
+}
+
+@-webkit-keyframes spinh {
+	from {
+		-webkit-transform: rotateY(0deg);
+	}
+
+	to {
+		-webkit-transform: rotateY(360deg);
+	}
+}
+
+@keyframes spinh {
+	from {
+		transform: rotateY(0deg);
+	}
+
+	to {
+		transform: rotateY(360deg);
+	}
+}
+
 .rocket-h2 {
 	font-weight: 300;
 	text-transform: uppercase;

packages/rocketchat-ui-message/message/message.coffee

@@ -42,7 +42,7 @@ Template.message.helpers
 	showTranslated: ->
 		if RocketChat.settings.get('AutoTranslate_Enabled') and this.u?._id isnt Meteor.userId() and !RocketChat.MessageTypes.isSystemMessage(this)
 			subscription = RocketChat.models.Subscriptions.findOne({ rid: this.rid }, { fields: { autoTranslate: 1, autoTranslateLanguage: 1, autoTranslateDisplay: 1 } });
-			return subscription.autoTranslate && !!subscription?.autoTranslateDisplay isnt !!this.autoTranslateShowInverse
+			return subscription.autoTranslate && !!subscription?.autoTranslateDisplay isnt !!this.autoTranslateShowInverse && (this.autoTranslateFetching || this.translations && this.translations[subscription.autoTranslateLanguage])
 
 	edited: ->
 		return Template.instance().wasEdited

packages/rocketchat-ui-message/message/message.html

@@ -36,7 +36,7 @@
 		<span class="time" title='{{date}} {{time}}'>{{time}}</span>
 		{{#if showTranslated}}
 			<span class="translated">
-				<i class="icon-language" aria-label="{{_ "Translated"}}"></i>
+				<i class="icon-language {{#if autoTranslateFetching}}loading{{/if}}" aria-label="{{_ "Translated"}}"></i>
 			</span>
 		{{/if}}
 		{{#if edited}}