[IMPROVE] Request user presence on demand

app/api/server/v1/users.js

@@ -647,7 +647,7 @@ API.v1.addRoute('users.removePersonalAccessToken', { authRequired: true }, {
 
 API.v1.addRoute('users.presence', { authRequired: true }, {
 	get() {
-		const { from } = this.queryParams;
+		const { from, ids } = this.queryParams;
 
 		const options = {
 			fields: {
@@ -659,6 +659,13 @@ API.v1.addRoute('users.presence', { authRequired: true }, {
 			},
 		};
 
+		if (ids) {
+			return API.v1.success({
+				users: Users.findNotOfflineByIds(Array.isArray(ids) ? ids : ids.split(','), options).fetch(),
+				full: false,
+			});
+		}
+
 		if (from) {
 			const ts = new Date(from);
 			const diff = (Date.now() - ts) / 1000 / 60;

app/livechat/client/views/app/tabbar/agentInfo.html

@@ -14,10 +14,10 @@
 							</div>
 							<h3 title="{{name}}" class="rc-user-info__name"><i class="status-{{status}}"></i> {{name}}</h3>
 							{{#if username}}<p class="rc-user-info__username">@{{username}}</p>{{/if}}
-							<span class="rc-header__status rc-user-info__status">
+							{{# userPresence uid=uid}}<span class="rc-header__status rc-user-info__status">
 								<div class="rc-header__status-bullet rc-header__status-bullet--{{agentStatus}}" title="{{_ agentStatus}}"></div>
 								<div class="rc-header__visual-status">{{agentStatusText}}</div>
-							</span>
+							</span>{{/userPresence}}
 						</div>
 
 						<div class="rc-user-info-action">

app/livechat/client/views/app/tabbar/agentInfo.js

@@ -20,7 +20,9 @@ Template.agentInfo.helpers({
 		const hasCustomFields = customFieldsTemplate() !== null;
 		return (availableDepartments.length > 0 && hasPermission('add-livechat-department-agents')) || hasCustomFields;
 	},
-
+	uid() {
+		return Template.instance().agent.get()._id;
+	},
 	name() {
 		const agent = Template.instance().agent.get();
 		return agent && agent.name ? agent.name : TAPi18n.__('Unnamed');

app/models/server/models/Users.js

@@ -504,6 +504,16 @@ export class Users extends Base {
 		return this.find(query, options);
 	}
 
+	findNotOfflineByIds(users, options) {
+		const query = {
+			_id: { $in: users },
+			status: {
+				$in: ['online', 'away', 'busy'],
+			},
+		};
+		return this.find(query, options);
+	}
+
 	findUsersNotOffline(options) {
 		const query = {
 			username: {

app/ui-flextab/client/tabs/membersList.html

@@ -36,7 +36,7 @@
 						<li class='rc-member-list__user'>
 							{{> avatar username=user.username}}
 							<div class="rc-member-list__username">
-								<div class="rc-member-list__status rc-member-list__status--{{status}}"></div>
+								{{# userPresence uid=user._id}}<div class="rc-member-list__status rc-member-list__status--{{status}}"></div>{{/userPresence}}
 								{{ignored}} {{displayName}} {{utcOffset}}
 								</div>
 							{{> icon user=. block="rc-member-list__menu js-more" icon="menu" }}

app/ui-flextab/client/tabs/userInfo.html

@@ -31,10 +31,10 @@ <h1 class="contextual-bar__header-title">{{_ "User_Info"}}</h1>
 							</div>
 							<h3 title="{{name}}" class="rc-user-info__name"><i class="status-{{status}}"></i> {{name}}</h3>
 							{{#if username}}<p class="rc-user-info__username">@{{username}}</p>{{/if}}
-							<span class="rc-header__status rc-user-info__status">
+							{{# userPresence uid=uid}}<span class="rc-header__status rc-user-info__status">
 								<div class="rc-header__status-bullet rc-header__status-bullet--{{userStatus}}" title="{{_ userStatus}}"></div>
 								<div class="rc-header__visual-status">{{userStatusText}}</div>
-							</span>
+							</span>{{/userPresence}}
 						</div>
 
 						<div class="rc-user-info-action">

app/ui-flextab/client/tabs/userInfo.js

@@ -68,7 +68,10 @@ Template.userInfo.helpers({
 		}
 		return customFields;
 	},
-
+	uid() {
+		const user = Template.instance().user.get();
+		return user._id;
+	},
 	name() {
 		const user = Template.instance().user.get();
 		return user && user.name ? user.name : TAPi18n.__('Unnamed');

app/ui-sidenav/client/index.js

@@ -13,6 +13,7 @@ import './sideNav';
 import './roomList';
 import './sortlist';
 import './toolbar';
+import './userPresence';
 
 export {
 	toolbarSearch,

app/ui-sidenav/client/sidebarItem.html

@@ -4,7 +4,7 @@
 			{{> icon block="rc-icon--default-size sidebar-item__icon sidebar-item__icon" icon=icon}}
 		</div>
 	{{else}}
-		<div class="sidebar-item__user-status {{#if status}}sidebar-item__user-status--{{status}}{{/if}}" aria-label="{{status}}"></div>
+		{{# userPresence uid=uid}}<div class="sidebar-item__user-status {{#if status}}sidebar-item__user-status--{{status}}{{/if}}" aria-label="{{status}}"></div>{{/userPresence}}
 	{{/if}}
 </template>
 

app/ui-sidenav/client/sidebarItem.js

@@ -201,6 +201,12 @@ Template.sidebarItem.events({
 });
 
 Template.sidebarItemIcon.helpers({
+	uid() {
+		if (!this.rid) {
+			return this._id;
+		}
+		return this.rid.replace(this.u._id, '');
+	},
 	isRoom() {
 		return this.rid || this._id;
 	},

app/ui-sidenav/client/userPresence.html

@@ -0,0 +1 @@
+<template name="userPresence">{{> Template.contentBlock}}</template>

app/ui-sidenav/client/userPresence.js

@@ -0,0 +1,87 @@
+import { Meteor } from 'meteor/meteor';
+// import { ReactiveVar } from 'meteor/reactive-var';
+import { Template } from 'meteor/templating';
+import { Tracker } from 'meteor/tracker';
+import _ from 'underscore';
+import mem from 'mem';
+
+import { APIClient } from '../../utils/client';
+import { saveUser } from '../../../imports/startup/client/listenActiveUsers';
+
+import './userPresence.html';
+
+const data = new Map();
+const promises = new Map();
+const pending = new Map();
+
+const getAll = _.debounce(async function getAll() {
+	const ids = Array.from(pending.keys());
+
+	if (ids.length === 0) {
+		return;
+	}
+
+	const params = {
+		ids,
+	};
+
+	try {
+		const {
+			users,
+		} = await APIClient.v1.get('users.presence', params);
+
+		users.forEach((user) => saveUser(user, true));
+
+		ids.forEach((id) => {
+			const { resolve } = promises.get(id);
+			resolve();
+		});
+	} catch (e) {
+		ids.forEach((id) => {
+			const { reject } = promises.get(id);
+			reject();
+		});
+	}
+}, 1000);
+
+const get = mem(function get(id) {
+	const promise = pending.get(id) || new Promise((resolve, reject) => {
+		promises.set(id, { resolve, reject });
+	});
+	pending.set(id, promise);
+	return promise;
+});
+
+const options = {
+	threshold: 0.1,
+};
+
+let lastEntries = [];
+const handleEntries = function(entries) {
+	lastEntries = entries.filter(({ isIntersecting }) => isIntersecting);
+	lastEntries.forEach(async (entry) => {
+		const { uid } = data.get(entry.target);
+		await get(uid);
+		pending.delete(uid);
+	});
+	getAll();
+};
+
+const observer = new IntersectionObserver(handleEntries, options);
+
+Tracker.autorun(() => {
+	if (!Meteor.userId() || !Meteor.status().connected) {
+		return Meteor.users.update({}, { $unset: { status: '' } }, { multi: true });
+	}
+	mem.clear(get);
+
+	for (const node of data.keys()) {
+		observer.unobserve(node);
+		observer.observe(node);
+	}
+});
+
+Template.userPresence.onRendered(function() {
+	data.set(this.firstNode, this.data);
+	observer.observe(this.firstNode);
+});

app/ui/client/components/header/headerRoom.html

@@ -42,10 +42,10 @@
 					{{/unless}}
 
 					{{#if isDirect}}
-					<span class="rc-header__status">
+					{{# userPresence uid=uid}}<span class="rc-header__status">
 						<div class="rc-header__status-bullet rc-header__status-bullet--{{userStatus}}" title="{{_ userStatus}}"></div>
 						<div class="rc-header__visual-status">{{userStatusText}}</div>
-					</span>
+					</span>{{/userPresence}}
 					{{else}}
 					{{#if roomTopic}}<span class="rc-header__topic">{{{roomTopic}}}</span>{{/if}}
 					{{/if}}

app/ui/client/components/header/headerRoom.js

@@ -32,7 +32,9 @@ Template.headerRoom.helpers({
 	isToggleFavoriteButtonChecked: () => Template.instance().state.get('favorite'),
 	toggleFavoriteButtonIconLabel: () => (Template.instance().state.get('favorite') ? t('Unfavorite') : t('Favorite')),
 	toggleFavoriteButtonIcon: () => (Template.instance().state.get('favorite') ? 'star-filled' : 'star'),
-
+	uid() {
+		return this._id.replace(Meteor.userId(), '');
+	},
 	back() {
 		return Template.instance().data.back;
 	},

imports/startup/client/listenActiveUsers.js

@@ -1,5 +1,4 @@
 import { Meteor } from 'meteor/meteor';
-import { Tracker } from 'meteor/tracker';
 import { debounce } from 'underscore';
 
 import { Notifications } from '../../../app/notifications/client';
@@ -13,7 +12,7 @@ const STATUS_MAP = [
 	'busy',
 ];
 
-const saveUser = (user, force = false) => {
+export const saveUser = (user, force = false) => {
 	// do not update my own user, my user's status will come from a subscription
 	if (user._id === Meteor.userId()) {
 		return;
@@ -72,19 +71,6 @@ const getUsersPresence = debounce(async (isConnected) => {
 	}
 }, 1000);
 
-let wasConnected = false;
-Tracker.autorun(() => {
-	if (!Meteor.userId() || !Meteor.status().connected) {
-		return;
-	}
-
-	lastStatusChange = null;
-
-	getUsersPresence(wasConnected);
-
-	wasConnected = true;
-});
-
 Meteor.startup(function() {
 	Notifications.onLogged('user-status', ([_id, username, status, statusText]) => {
 		// only set after first request completed