Merge pull request #10904 from RocketChat/lazyload-fix-regression

[FIX] Image lazy load was breaking attachments

packages/rocketchat-lazy-load/client/index.js

@@ -24,23 +24,29 @@ export const fixCordova = function(url) {
 	}
 };
 
-const loadImage = instance => {
+const getEl = (el, instance) => (instance && instance.firstNode) || el;
 
+const loadImage = (el, instance) => {
+	const element = getEl(el, instance);
 	const img = new Image();
-	const src = instance.firstNode.getAttribute('data-src');
-	instance.firstNode.className = instance.firstNode.className.replace('lazy-img', '');
+	const src = element.getAttribute('data-src');
 	img.onload = function() {
-		instance.loaded.set(true);
-		instance.firstNode.removeAttribute('data-src');
+		if (instance) {
+			instance.loaded.set(true);
+		} else {
+			element.className = element.className.replace('lazy-img', '');
+			element.src = src;
+		}
+		element.removeAttribute('data-src');
 	};
 	img.src = fixCordova(src);
 };
 
-const isVisible = (instance) => {
+const isVisible = (el, instance) => {
 	requestAnimationFrame(() => {
-		const rect = instance.firstNode.getBoundingClientRect();
+		const rect = getEl(el, instance).getBoundingClientRect();
 		if (rect.top >= -100 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)) {
-			return loadImage(instance);
+			return loadImage(el, instance);
 		}
 	});
 
@@ -50,10 +56,10 @@ window.addEventListener('resize', window.lazyloadtick);
 
 export const lazyloadtick = _.debounce(() => {
 	[...document.querySelectorAll('.lazy-img[data-src]')].forEach(el =>
-		isVisible(Blaze.getView(el)._templateInstance)
+		isVisible(el, Blaze.getView(el)._templateInstance)
 	);
-}, 500);
+}, 300);
 
 window.lazyloadtick = lazyloadtick;
 
-export const addImage = instance => isVisible(instance);
+export const addImage = instance => isVisible(instance.firstNode, instance);

packages/rocketchat-lazy-load/client/lazyloadImage.js

@@ -2,6 +2,10 @@ import './lazyloadImage.html';
 import { addImage, fixCordova } from './';
 
 Template.lazyloadImage.helpers({
+	class() {
+		const loaded = Template.instance().loaded.get();
+		return `${ this.class } ${ loaded ? '' : 'lazy-img' }`;
+	},
 	lazy() {
 		const { preview, placeholder, src } = this;
 		if (Template.instance().loaded.get() ||(!preview && !placeholder)) {

packages/rocketchat-message-attachments/client/messageAttachment.html

@@ -66,7 +66,7 @@
 					<div class="attachment-image">
 					{{#if loadImage}}
 						<figure>
-							{{> lazyloadImage src=image_url preview=image_preview height=(getImageHeight image_dimensions.height) class="lazy-img gallery-item" title=title description=description}}
+							{{> lazyloadImage src=image_url preview=image_preview height=(getImageHeight image_dimensions.height) class="gallery-item" title=title description=description}}
 							{{#if labels}}
 								<div class="image-labels">
 									{{#each labels}}

packages/rocketchat-ui-account/client/avatar/avatar.html

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

packages/rocketchat-ui-message/client/message.js

@@ -8,7 +8,7 @@ Template.message.helpers({
 	},
 	broadcast() {
 		const instance = Template.instance();
-		return !this.t && this.u._id !== Meteor.userId() && instance.room && instance.room.broadcast;
+		return !this.private && this.t && this.u._id !== Meteor.userId() && instance.room && instance.room.broadcast;
 	},
 	isIgnored() {
 		return this.ignored;

packages/rocketchat-ui/client/lib/menu.js

@@ -1,5 +1,7 @@
 import _ from 'underscore';
 import EventEmitter from 'wolfy87-eventemitter';
+import { lazyloadtick } from 'meteor/rocketchat:lazy-load';
+
 const sideNavW = 280;
 const map = (x, in_min, in_max, out_min, out_max) => (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
 
@@ -69,6 +71,7 @@ this.menu = new class extends EventEmitter {
 		if (this.touchstartX == null) {
 			return;
 		}
+		lazyloadtick();
 		const [touch] = e.touches;
 		const diffX = touch.clientX - this.touchstartX;
 		const diffY = touch.clientY - this.touchstartY;