[IMPROVE] Remove NRR

app/discussion/client/views/DiscussionTabbar.html

@@ -10,7 +10,7 @@ <h2>{{_ "No_discussions_yet"}}</h2>
 		<ul class="list clearfix">
 			{{# with messageContext}}
 				{{#each msg in messages}}
-					{{> nrr nrrargs 'message' msg=msg room=room subscription=subscription groupable=false settings=settings u=u}}
+					{{> message msg=msg room=room subscription=subscription groupable=false settings=settings u=u}}
 				{{/each}}
 			{{/with}}
 		</ul>

app/discussion/client/views/DiscussionTabbar.js

@@ -20,9 +20,6 @@ Template.discussionsTabbar.helpers({
 		const instance = Template.instance();
 		return instance.messages.find({}, { limit: instance.limit.get(), sort: { ts: -1 } });
 	},
-	message() {
-		return _.extend(this, { customClass: 'pinned', actionContext: 'pinned' });
-	},
 	hasMore() {
 		return Template.instance().hasMore.get();
 	},

app/integrations/client/views/integrationsIncoming.html

@@ -124,7 +124,7 @@
 									</div>
 								</div>
 								<div class="input-line message-example">
-									{{#nrr nrrargs 'message' msg=exampleMsg settings=exampleSettings u=exampleUser}}{{/nrr}}
+									{{> message msg=exampleMsg settings=exampleSettings u=exampleUser}}
 								</div>
 							</div>
 						</div>

app/integrations/client/views/integrationsOutgoing.html

@@ -171,7 +171,7 @@
 									</div>
 								</div>
 								<div class="input-line message-example">
-									{{#nrr nrrargs 'message' msg=exampleMsg settings=exampleSettings u=exampleUser}}{{/nrr}}
+									{{> message msg=exampleMsg settings=exampleSettings u=exampleUser}}
 								</div>
 							{{/if}}
 						</div>

app/lazy-load/client/index.js

@@ -1,43 +1,46 @@
-import { Blaze } from 'meteor/blaze';
-import _ from 'underscore';
 import './lazyloadImage';
 
-const getEl = (el, instance) => (instance && instance.firstNode) || el;
+const map = new WeakMap();
 
-const loadImage = (el, instance) => {
-	const element = getEl(el, instance);
+const featureExists = !!window.IntersectionObserver;
+const loadImage = (el) => {
+	const instance = map.get(el);
+
+	map.delete(el);
+
+	if (!instance) {
+		return instance.loaded.set(true);
+	}
 	const img = new Image();
-	const src = element.getAttribute('data-src');
+	const src = el.getAttribute('data-src');
 	img.onload = () => {
-		if (instance) {
-			instance.loaded.set(true);
-		} else {
-			element.className = element.className.replace('lazy-img', '');
-			element.src = src;
-		}
-		element.removeAttribute('data-src');
+		el.className = el.className.replace('lazy-img', '');
+		el.src = src;
+		el.removeAttribute('data-src');
 	};
 	img.src = src;
 };
 
-const isVisible = (el, instance) => {
-	requestAnimationFrame(() => {
-		const rect = getEl(el, instance).getBoundingClientRect();
-		if (rect.top >= -100 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)) {
-			return loadImage(el, instance);
+const observer = featureExists && new IntersectionObserver(
+	(entries, observer) => entries.forEach((entry) => {
+		if (entry.isIntersecting) {
+			observer.unobserve(entry.target);
+			return loadImage(entry.target);
 		}
-	});
-};
+	})
+	,
+	{
+		threshold: [0],
+		trackVisibility: true,
+		delay: 230,
+	},
+);
 
-window.addEventListener('resize', window.lazyloadtick);
-
-export const lazyloadtick = _.debounce(() => {
-	const lazyImg = document.querySelectorAll('.lazy-img[data-src]');
-	Array.from(lazyImg).forEach((el) =>
-		isVisible(el, Blaze.getView(el)._templateInstance),
-	);
-}, 300);
-
-window.lazyloadtick = lazyloadtick;
-
-export const addImage = (instance) => isVisible(instance.firstNode, instance);
+export const addImage = (instance) => {
+	const el = instance.firstNode;
+	map.set(el, instance);
+	if (featureExists) {
+		return observer.observe(el);
+	}
+	loadImage(el);
+};

app/mentions-flextab/client/views/mentionsFlexTab.html

@@ -9,7 +9,7 @@ <h2>{{_ "No_mentions_found"}}</h2>
 	<div class="flex-tab__result js-list">
 		<ul class="mentioned-messages-list list clearfix">
 			{{# with messageContext}}
-				{{#each msg in messages}}{{#nrr nrrargs 'message' groupable=false msg=msg room=room subscription=subscription settings=settings u=u customClass="mentions" context="mentions"}}{{/nrr}}{{/each}}
+				{{#each msg in messages}}{{> message groupable=false msg=msg room=room subscription=subscription settings=settings u=u customClass="mentions" context="mentions"}}{{/each}}
 			{{/with}}
 		</ul>
 		{{#if hasMore}}

app/message-attachments/client/messageAttachment.html

@@ -170,6 +170,7 @@
 			{{/if}}
 
 			{{#each attachments}}
+				{{injectMessage . ../msg}}
 			 	{{injectSettings . ../settings}}
 				{{injectIndex . ../index @index}} {{> messageAttachment}}
 			{{/each}}

app/message-attachments/client/messageAttachment.js

@@ -71,11 +71,18 @@ Template.messageAttachment.helpers({
 	injectSettings(data, settings) {
 		data.settings = settings;
 	},
+	injectMessage(data, { rid, _id }) {
+		data.msg = { _id, rid };
+	},
 	isFile() {
 		return this.type === 'file';
 	},
 	isPDF() {
-		if (this.type === 'file' && this.title_link.endsWith('.pdf') && Template.parentData().msg.file) {
+		if (
+			this.type === 'file'
+			&& this.title_link.endsWith('.pdf')
+			&& Template.parentData().msg.file
+		) {
 			this.fileId = Template.parentData().msg.file._id;
 			return true;
 		}

app/message-pin/client/views/pinnedMessages.html

@@ -9,7 +9,7 @@ <h2>{{_ "No_pinned_messages"}}</h2>
 	<div class="flex-tab__result pinned-messages-list js-list">
 		<ul class="list clearfix">
 			{{# with messageContext}}
-				{{#each msg in messages}}{{#nrr nrrargs 'message' msg=msg room=room groupable=false subscription=subscription settings=settings u=u}}{{/nrr}}{{/each}}
+				{{#each msg in messages}}{{> message msg=msg room=room groupable=false subscription=subscription settings=settings u=u }}{{/each}}
 			{{/with}}
 		</ul>
 

app/message-pin/client/views/pinnedMessages.js

@@ -18,9 +18,6 @@ Template.pinnedMessages.helpers({
 		const instance = Template.instance();
 		return instance.messages.find({}, { limit: instance.limit.get(), sort: { ts: -1 } });
 	},
-	message() {
-		return _.extend(this, { customClass: 'pinned', actionContext: 'pinned' });
-	},
 	hasMore() {
 		return Template.instance().hasMore.get();
 	},

app/message-snippet/client/tabBar/views/snippetedMessages.html

@@ -12,7 +12,7 @@ <h2>{{_ "No_snippet_messages"}}</h2>
 	<div class="flex-tab__result js-list">
 		<ul class="list clearfix">
 			{{# with messageContext}}
-				{{#each msg in messages}}{{#nrr nrrargs 'message' msg=msg room=room subscription=subscription settings=settings u=u}}{{/nrr}}{{/each}}
+				{{#each msg in messages}}{{> message msg=msg room=room subscription=subscription settings=settings u=u}}{{/each}}
 			{{/with}}
 		</ul>
 		{{#if hasMore}}

app/message-snippet/client/tabBar/views/snippetedMessages.js

@@ -18,9 +18,6 @@ Template.snippetedMessages.helpers({
 		const instance = Template.instance();
 		return instance.messages.find({}, { limit: instance.limit.get(), sort: { ts: -1 } });
 	},
-	message() {
-		return _.extend(this, { customClass: 'snippeted', actionContext: 'snippeted' });
-	},
 	hasMore() {
 		return Template.instance().hasMore.get();
 	},

app/message-star/client/views/starredMessages.html

@@ -9,7 +9,9 @@ <h2>{{_ "No_starred_messages"}}</h2>
 	<div class="flex-tab__result js-list">
 		<ul class="list clearfix">
 			{{# with messageContext}}
-				{{#each msg in messages}}{{#nrr nrrargs 'message' msg=msg room=room groupable=false subscription=subscription settings=settings u=u}}{{/nrr}}{{/each}}
+				{{#each msg in messages}}
+					{{>message msg=msg room=room groupable=false subscription=subscription settings=settings u=u}}
+				{{/each}}
 			{{/with}}
 		</ul>
 		{{#if hasMore}}

app/message-star/client/views/starredMessages.js

@@ -19,9 +19,6 @@ Template.starredMessages.helpers({
 		const instance = Template.instance();
 		return instance.messages.find({}, { limit: instance.limit.get(), sort: { ts: -1 } });
 	},
-	message() {
-		return _.extend(this, { actionContext: 'starred' });
-	},
 	hasMore() {
 		return Template.instance().hasMore.get();
 	},

app/nrr/client/nrr.js

@@ -39,6 +39,7 @@ Blaze.renderNonReactive = function(templateName, data) {
 	[templateName, data] = _arguments;
 
 	return Tracker.nonreactive(() => {
+		console.warn('Nrr template is deprecated');
 		const view = new Blaze.View('nrr', () => HTML.Raw(Blaze.toHTMLWithDataNonReactive(Template[templateName], data)));
 
 		view.onViewReady(() => {

app/search/client/provider/result.html

@@ -14,7 +14,7 @@
 				<div class="flex-tab__result js-list">
 					<ul class="list clearfix">
 						{{# with messageContext}}
-							{{#each msg in result.message.docs}}{{#nrr nrrargs 'message' msg=(message msg) room=room subscription=subscription settings=settings u=u}}{{/nrr}}{{/each}}
+							{{#each msg in result.message.docs}}{{> message msg=(messageParse msg) room=room subscription=subscription settings=settings u=u}}{{/each}}
 						{{/with}}
 					</ul>
 				</div>

app/search/client/provider/result.js

@@ -99,7 +99,7 @@ Template.DefaultSearchResultTemplate.helpers({
 	hasMore() {
 		return Template.instance().hasMore.get();
 	},
-	message(msg) {
+	messageParse(msg) {
 		return { customClass: 'search', actionContext: 'search', ...msg, groupable: false };
 	},
 	messageContext,

app/theme/client/imports/general/base_old.css

@@ -2847,6 +2847,8 @@ rc-old select,
 	& .body {
 		transition: opacity 0.3s linear;
 
+		word-break: break-word;
+
 		opacity: 1;
 
 		& > h1 {

app/threads/client/flextab/thread.js

@@ -9,7 +9,6 @@ import { normalizeThreadMessage, call } from '../../../ui-utils/client';
 import { messageContext } from '../../../ui-utils/client/lib/messageContext';
 import { upsertMessageBulk } from '../../../ui-utils/client/lib/RoomHistoryManager';
 import { Messages } from '../../../models';
-import { lazyloadtick } from '../../../lazy-load';
 import { fileUpload } from '../../../ui/client/lib/fileUpload';
 import { dropzoneEvents, dropzoneHelpers } from '../../../ui/client/views/app/room';
 import './thread.html';
@@ -25,7 +24,6 @@ Template.thread.events({
 		return close && close();
 	},
 	'scroll .js-scroll-thread': _.throttle(({ currentTarget: e }, i) => {
-		lazyloadtick();
 		i.atBottom = e.scrollTop >= e.scrollHeight - e.clientHeight;
 	}, 50),
 	'load img'() {

app/threads/client/flextab/threads.js

@@ -4,7 +4,6 @@ import { Template } from 'meteor/templating';
 import { ReactiveDict } from 'meteor/reactive-dict';
 import _ from 'underscore';
 
-import { lazyloadtick } from '../../../lazy-load';
 import { call } from '../../../ui-utils';
 import { Messages, Subscriptions } from '../../../models';
 import { messageContext } from '../../../ui-utils/client/lib/messageContext';
@@ -28,7 +27,6 @@ Template.threads.events({
 		return false;
 	},
 	'scroll .js-scroll-threads': _.throttle(({ currentTarget: e }, { incLimit }) => {
-		lazyloadtick();
 		if (e.offsetHeight + e.scrollTop <= e.scrollHeight - 50) {
 			incLimit && incLimit();
 		}

app/ui-account/client/avatar/avatar.html

@@ -1,9 +1,5 @@
 <template name="avatar">
 	<div class="avatar">
-		{{#if lazy}}
-			{{> lazyloadImage src=src alt=alt class="avatar-image" placeholder=true}}
-		{{else}}
-			<img src="{{src}}" alt="{{alt}}" class="avatar-image"/>
-		{{/if}}
+		{{> lazyloadImage src=src alt=alt class="avatar-image" placeholder=true}}
 	</div>
 </template>

app/ui-message/client/message.html

@@ -1,5 +1,5 @@
 <template name="message">
-	<li id="{{templatePrefix}}{{msg._id}}" data-id="{{msg._id}}" data-context={{actionContext}} class="message {{ignoredClass}} {{sequentialClass}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{collapsed}} {{customClass}}" data-username="{{msg.u.username}}" data-tmid="{{msg.tmid}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}" data-alias="{{msg.alias}}">
+	<li id="{{templatePrefix}}{{msg._id}}" data-id="{{msg._id}}" data-context={{actionContext}} class="message {{ignoredClass}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{collapsed}} {{customClass}}" data-username="{{msg.u.username}}" data-tmid="{{msg.tmid}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}" data-alias="{{msg.alias}}">
 		{{#if isThreadReply}}
 			{{> messageThread parentMessage=parentMessage threadMessage=threadMessage following=msg.following avatar=msg.u.username msg=msg body=body class=bodyClass}}
 		{{else}}
@@ -85,10 +85,13 @@
 
 			{{#if hasOembed}}
 				{{#each msg.urls}}
-					{{injectIndex . @index}} {{> oembedBaseWidget}}
+					{{injectMessage . ../msg}}
+					{{injectIndex . @index}}
+					{{> oembedBaseWidget}}
 				{{/each}}
 			{{/if}}
 			{{#each msg.attachments}}
+				{{injectMessage . ../msg}}
 				{{injectSettings . ../settings}}
 				{{injectIndex . @index}}
 				{{> messageAttachment}}

app/ui-message/client/message.js

@@ -1,6 +1,5 @@
 import _ from 'underscore';
 import s from 'underscore.string';
-import { Blaze } from 'meteor/blaze';
 import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker';
 import { Template } from 'meteor/templating';
@@ -172,13 +171,6 @@ Template.message.helpers({
 			return 'false';
 		}
 	},
-	sequentialClass() {
-		const { msg, groupable } = this;
-		if (MessageTypes.isSystemMessage(msg) && !msg.tmid) {
-			return;
-		}
-		return groupable !== false && msg.groupable !== false && 'sequential';
-	},
 	avatarFromUsername() {
 		const { msg } = this;
 
@@ -365,6 +357,9 @@ Template.message.helpers({
 			return 'hidden';
 		}
 	},
+	injectMessage(data, { _id, rid }) {
+		data.msg = { _id, rid };
+	},
 	injectIndex(data, index) {
 		data.index = index;
 	},
@@ -594,29 +589,10 @@ const processSequentials = ({ currentNode, settings, forceDate, showDateSeparato
 		} else {
 			nextNode.classList.remove('new-day');
 		}
-	} else if (shouldCollapseReplies) {
-		const [el] = $(`#chat-window-${ msg.rid }`);
-		const view = el && Blaze.getView(el);
-		const templateInstance = view && view.templateInstance();
-		if (!templateInstance) {
-			return;
-		}
-		templateInstance.sendToBottomIfNecessary();
 	}
 };
 
 Template.message.onRendered(function() { // duplicate of onViewRendered(NRR) the onRendered works only for non nrr templates
-	this.autorun(() => {
-		const currentNode = this.firstNode;
-		processSequentials({ currentNode, ...messageArgs(Template.currentData()) });
-	});
+	const currentNode = this.firstNode;
+	processSequentials({ currentNode, ...messageArgs(Template.currentData()) });
 });
-
-Template.message.onViewRendered = function() {
-	const args = messageArgs(Template.currentData());
-	// processSequentials({ currentNode, ...messageArgs(Template.currentData()) });
-	return this._domrange.onAttached((domRange) => {
-		const currentNode = domRange.lastNode();
-		processSequentials({ currentNode, ...args });
-	});
-};