Regression: React + Blaze reconciliation

app/e2e/client/tabbar.ts

@@ -10,7 +10,7 @@ import { e2e } from './rocketchat.e2e';
 addAction('e2e', ({ room }) => {
 	const e2eEnabled = useSetting('E2E_Enable');
 	const e2eReady = e2e.isReady() || room.encrypted;
-	const e2ePermission = room.t === 'd' || usePermission('toggle-room-e2e-encryption', room._id);
+	const e2ePermission = usePermission('toggle-room-e2e-encryption', room._id) || room.t === 'd';
 	const hasPermission = usePermission('edit-room', room._id) && e2ePermission && e2eReady;
 	const toggleE2E = useMethod('saveRoomSettings');
 

app/ui-message/client/message.js

@@ -551,6 +551,11 @@ const processSequentials = ({ index, currentNode, settings, forceDate, showDateS
 	const previousNode = (index === undefined || index > 0) && getPreviousSentMessage(currentNode);
 	const nextNode = currentNode.nextElementSibling;
 
+	if (!previousNode) {
+		setTimeout(() => {
+			currentNode.dispatchEvent(new CustomEvent('MessageGroup', { bubbles: true }));
+		}, 100);
+	}
 	if (isSequential(currentNode, previousNode, forceDate, settings.Message_GroupingPeriod, showDateSeparator, shouldCollapseReplies)) {
 		currentNode.classList.add('sequential');
 	} else {

app/ui-utils/client/lib/RoomManager.js

@@ -4,7 +4,6 @@ import { Session } from 'meteor/session';
 import { Tracker } from 'meteor/tracker';
 import { Blaze } from 'meteor/blaze';
 import { FlowRouter } from 'meteor/kadira:flow-router';
-import { Template } from 'meteor/templating';
 import _ from 'underscore';
 
 import { fireGlobalEvent } from './fireGlobalEvent';
@@ -19,7 +18,7 @@ import { CachedCollectionManager } from '../../../ui-cached-collection';
 import { getConfig } from '../config';
 import { ROOM_DATA_STREAM } from '../../../utils/stream/constants';
 import { call } from '..';
-
+import { RoomManager as NewRoomManager } from '../../../../client/lib/RoomManager';
 
 const maxRoomsOpen = parseInt(getConfig('maxRoomsOpen')) || 5;
 
@@ -143,23 +142,6 @@ export const RoomManager = new function() {
 			return Object.keys(openedRooms).map((typeName) => openedRooms[typeName]).find((openedRoom) => openedRoom.rid === rid);
 		}
 
-		getDomOfRoom(typeName, rid, templateName) {
-			const room = openedRooms[typeName];
-			if (room == null) {
-				return;
-			}
-
-			if ((room.dom == null) && (rid != null)) {
-				room.dom = document.createElement('div');
-				room.dom.classList.add('room-container');
-				const contentAsFunc = (content) => () => content;
-
-				room.template = Blaze._TemplateWith({ _id: rid }, contentAsFunc(Template[templateName || 'room']));
-				Blaze.render(room.template, room.dom); // , nextNode, parentView
-			}
-
-			return room.dom;
-		}
 
 		close(typeName) {
 			if (openedRooms[typeName]) {
@@ -185,6 +167,7 @@ export const RoomManager = new function() {
 				delete openedRooms[typeName];
 
 				if (rid != null) {
+					NewRoomManager.close(rid);
 					return RoomHistoryManager.clear(rid);
 				}
 			}
@@ -265,34 +248,29 @@ export const RoomManager = new function() {
 			return onlineUsers.set(onlineUsersValue);
 		}
 
-		updateMentionsMarksOfRoom(typeName) {
-			const dom = this.getDomOfRoom(typeName);
-			if (!dom) {
-				return;
-			}
-
-			const [ticksBar] = dom.getElementsByClassName('ticks-bar');
-			const [messagesBox] = dom.getElementsByClassName('messages-box');
-			const scrollTop = $('> .wrapper', messagesBox).scrollTop() - 50;
-			const totalHeight = $(' > .wrapper > ul', messagesBox).height() + 40;
-			if (!ticksBar) {
-				return;
-			}
-
-			// TODO: thread quotes should NOT have mention links at all
-			const mentionsSelector = '.message .body .mention-link--me, .message .body .mention-link--group';
-			ticksBar.innerHTML = Array.from(messagesBox?.querySelectorAll(mentionsSelector) || [])
-				.map((mentionLink) => {
-					const topOffset = $(mentionLink).offset().top + scrollTop;
-					const percent = (100 / totalHeight) * topOffset;
-					const className = [
-						'tick',
-						mentionLink.classList.contains('mention-link--me') && 'tick--me',
-						mentionLink.classList.contains('mention-link--group') && 'tick--group',
-					].filter(Boolean).join(' ');
-					return `<div class="${ className }" style="top: ${ percent }%;"></div>`;
-				})
-				.join('');
+		updateMentionsMarksOfRoom(/* typeName */) {
+			// const [ticksBar] = dom.getElementsByClassName('ticks-bar');
+			// const [messagesBox] = dom.getElementsByClassName('messages-box');
+			// const scrollTop = $('> .wrapper', messagesBox).scrollTop() - 50;
+			// const totalHeight = $(' > .wrapper > ul', messagesBox).height() + 40;
+			// if (!ticksBar) {
+			// 	return;
+			// }
+
+			// // TODO: thread quotes should NOT have mention links at all
+			// const mentionsSelector = '.message .body .mention-link--me, .message .body .mention-link--group';
+			// ticksBar.innerHTML = Array.from(messagesBox?.querySelectorAll(mentionsSelector) || [])
+			// 	.map((mentionLink) => {
+			// 		const topOffset = $(mentionLink).offset().top + scrollTop;
+			// 		const percent = (100 / totalHeight) * topOffset;
+			// 		const className = [
+			// 			'tick',
+			// 			mentionLink.classList.contains('mention-link--me') && 'tick--me',
+			// 			mentionLink.classList.contains('mention-link--group') && 'tick--group',
+			// 		].filter(Boolean).join(' ');
+			// 		return `<div class="${ className }" style="top: ${ percent }%;"></div>`;
+			// 	})
+			// 	.join('');
 		}
 	};
 	Cls.initClass();

app/ui-utils/client/lib/messageContext.js

@@ -31,6 +31,8 @@ export function messageContext({ rid } = Template.instance()) {
 		}, {
 			jump: tmid && tmid !== mid && mid && mid,
 		});
+		e.preventDefault();
+		e.stopPropagation();
 	};
 
 	const runAction = Layout.isEmbedded() ? (msg, e) => {
@@ -51,6 +53,7 @@ export function messageContext({ rid } = Template.instance()) {
 
 	const openDiscussion = (e) => {
 		e.preventDefault();
+		e.stopPropagation();
 		const { drid } = e.currentTarget.dataset;
 		goToRoomById(drid);
 	};

app/ui-utils/client/lib/openRoom.js

@@ -3,35 +3,22 @@ import { Tracker } from 'meteor/tracker';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Session } from 'meteor/session';
 import _ from 'underscore';
-import { Random } from 'meteor/random';
 
 import { appLayout } from '../../../../client/lib/appLayout';
-import { Messages, ChatSubscription, Rooms } from '../../../models';
+import { Messages, ChatSubscription } from '../../../models';
 import { settings } from '../../../settings';
 import { callbacks } from '../../../callbacks';
 import { roomTypes } from '../../../utils';
 import { call, callMethod } from './callMethod';
 import { RoomManager, fireGlobalEvent, RoomHistoryManager } from '..';
-import { waitUntilWrapperExists } from './RoomHistoryManager';
-import { createTemplateForComponent } from '../../../../client/lib/portals/createTemplateForComponent';
+import { RoomManager as NewRoomManager } from '../../../../client/lib/RoomManager';
+import { Rooms } from '../../../models/client';
 
 window.currentTracker = undefined;
 
 // cleanup session when hot reloading
 Session.set('openedRoom', null);
 
-const replaceCenterDomBy = (dom) => {
-	const roomNode = dom();
-
-	const center = createTemplateForComponent(Random.id(), () => import('../../../../client/views/root/DomNode'), {
-		attachment: 'at-parent',
-		props: () => ({ node: roomNode }),
-	});
-
-	appLayout.render('main', { center });
-
-	return roomNode;
-};
 
 const waitUntilRoomBeInserted = async (type, rid) => new Promise((resolve) => {
 	Tracker.autorun((c) => {
@@ -43,6 +30,12 @@ const waitUntilRoomBeInserted = async (type, rid) => new Promise((resolve) => {
 	});
 });
 
+
+NewRoomManager.on('changed', (rid) => {
+	Session.set('openedRoom', rid);
+	RoomManager.openedRoom = rid;
+});
+
 export const openRoom = async function(type, name) {
 	window.currentTracker && window.currentTracker.stop();
 	window.currentTracker = Tracker.autorun(async function(c) {
@@ -61,34 +54,23 @@ export const openRoom = async function(type, name) {
 				return FlowRouter.go('direct', { rid: room._id }, FlowRouter.current().queryParams);
 			}
 
+
 			if (room._id === Session.get('openedRoom') && !FlowRouter.getQueryParam('msg')) {
 				return;
 			}
 
-			if (RoomManager.open(type + name).ready() !== true) {
-				if (settings.get('Accounts_AllowAnonymousRead')) {
-					appLayout.render('main');
-				}
+			RoomManager.open(type + name);
 
-				appLayout.render('main', { center: 'loading' });
-				return;
-			}
+			appLayout.render('main', { center: 'room' });
 
-			appLayout.render('main', { center: 'loading' });
 
 			c.stop();
 
 			if (window.currentTracker) {
 				window.currentTracker = undefined;
 			}
 
-			const roomDom = replaceCenterDomBy(() => RoomManager.getDomOfRoom(type + name, room._id, roomTypes.getConfig(type).mainTemplate));
-
-			const selector = await waitUntilWrapperExists('.messages-box .wrapper');
-			selector.scrollTop = roomDom.oldScrollTop;
-
-			Session.set('openedRoom', room._id);
-			RoomManager.openedRoom = room._id;
+			NewRoomManager.open(room._id);
 
 			fireGlobalEvent('room-opened', _.omit(room, 'usernames'));
 

app/ui/client/views/app/room.js

@@ -29,6 +29,7 @@ import { ChatMessages } from '../../lib/chatMessages';
 import { fileUpload } from '../../lib/fileUpload';
 import './room.html';
 import { getCommonRoomEvents } from './lib/getCommonRoomEvents';
+import { RoomManager as NewRoomManager } from '../../../../../client/lib/RoomManager';
 
 export const chatMessages = {};
 
@@ -787,10 +788,30 @@ Meteor.startup(() => {
 		if (!chatMessages[rid]) {
 			chatMessages[rid] = new ChatMessages();
 		}
+
+		const wrapper = this.find('.wrapper');
+
+		const store = NewRoomManager.getStore(rid);
+
+		const afterMessageGroup = () => {
+			if (store.scroll) {
+				wrapper.scrollTop = store.scroll;
+			} else {
+				this.sendToBottom();
+			}
+			wrapper.removeEventListener('MessageGroup', afterMessageGroup);
+
+			wrapper.addEventListener('scroll', _.throttle(() => {
+				store.update({ scroll: wrapper.scrollTop });
+			}, 100));
+		};
+
+		wrapper.addEventListener('MessageGroup', afterMessageGroup);
+
 		chatMessages[rid].initializeWrapper(this.find('.wrapper'));
 		chatMessages[rid].initializeInput(this.find('.js-input-message'), { rid });
 
-		const wrapper = this.find('.wrapper');
+
 		const wrapperUl = this.find('.wrapper > ul');
 		const newMessage = this.find('.new-message');
 

app/utils/lib/RoomTypesCommon.js

@@ -1,5 +1,5 @@
 import { Meteor } from 'meteor/meteor';
-import { Session } from 'meteor/session';
+// import { Session } from 'meteor/session';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 
 import { RoomTypeConfig } from './RoomTypeConfig';
@@ -47,7 +47,7 @@ export class RoomTypesCommon {
 			const routeConfig = {
 				name: roomConfig.route.name,
 				action: roomConfig.route.action,
-				triggersExit: [() => Session.set('openedRoom', '')],
+				// triggersExit: [() => Session.set('openedRoom', '')],
 			};
 
 			if (Meteor.isClient) {

app/utils/lib/roomExit.js

@@ -1,5 +1,5 @@
 import { Blaze } from 'meteor/blaze';
-import { Session } from 'meteor/session';
+// import { Session } from 'meteor/session';
 import { Tracker } from 'meteor/tracker';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 
@@ -25,8 +25,8 @@ export const roomExit = function() {
 		}
 		callbacks.run('roomExit');
 
-		Session.set('lastOpenedRoom', Session.get('openedRoom'));
-		Session.set('openedRoom', null);
+		// Session.set('lastOpenedRoom', Session.get('openedRoom'));
+		// Session.set('openedRoom', null);
 		RoomManager.openedRoom = null;
 
 		const mainNode = document.querySelector('.main-content');

client/components/Message/Attachments/components/Image.tsx

@@ -15,17 +15,20 @@ type ImageProps = {
 	({ loadImage: true } | { loadImage: false; setLoadImage: () => void });
 
 const getDimensions = (
-	width: Dimensions['width'],
-	height: Dimensions['height'],
+	originalWidth: Dimensions['width'],
+	originalHeight: Dimensions['height'],
 	limits: { width: number; height: number },
-): { width: 'auto' | number; height: 'auto' | number } => {
-	const ratio = height / width;
+): { width: number; height: number } => {
+	const widthRatio = originalWidth / (limits.width - 4);
+	const heightRatio = originalHeight / limits.height;
 
-	if (height >= width || Math.min(width, limits.width) * ratio > limits.height) {
-		return { width: (width * Math.min(height, limits.height)) / height, height: 'auto' };
+	if (widthRatio > heightRatio) {
+		const width = Math.min(originalWidth, limits.width - 4);
+		return { width, height: (width / originalWidth) * originalHeight };
 	}
 
-	return { width: Math.min(width, limits.width), height: 'auto' };
+	const height = Math.min(originalHeight, limits.height);
+	return { width: (height / originalHeight) * originalWidth, height };
 };
 
 const Image: FC<ImageProps> = ({ previewUrl, loadImage = true, setLoadImage, src, ...size }) => {
@@ -46,22 +49,23 @@ const Image: FC<ImageProps> = ({ previewUrl, loadImage = true, setLoadImage, src
 	const background = previewUrl && `url(${previewUrl}) center center / cover no-repeat fixed`;
 
 	if (!loadImage) {
-		return <Load {...limits} load={setLoadImage} />;
+		return <Load {...dimensions} {...limits} load={setLoadImage} />;
 	}
 
 	if (error) {
-		return <Retry retry={setHasNoError} />;
+		return <Retry {...dimensions} retry={setHasNoError} />;
 	}
 
 	return (
 		<ImageBox
-			className='gallery-item'
 			onError={setHasError}
-			{...(previewUrl && ({ style: { background } } as any))}
+			box
+			{...(previewUrl && ({ style: { background, boxSizing: 'content-box' } } as any))}
 			{...dimensions}
-			src={src}
-			is='img'
-		/>
+			is='picture'
+		>
+			<img className='gallery-item' src={src} {...dimensions} />
+		</ImageBox>
 	);
 };