Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Refactoring of the XEP-0085 Chat State Notifications code

Browse Source 
* Distinguish between CSN messages and other types of messages
* Properly clear previous notifications
* Better handling of notifications from multiple users (in MUC)
* Rename methods to make clarify intent
This commit is contained in:
JC Brand 2018-04-06 13:56:14 +02:00
parent e961fb5129
commit 9a526d4194
12 changed files with 504 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/converse.css
View File

@ -7354,6 +7354,9 @@ body.reset {
#converse-embedded-chat .chatbox .chat-body .chat-info.badge,
#conversejs .chatbox .chat-body .chat-info.badge {
color: white; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-state-notification,
#conversejs .chatbox .chat-body .chat-info.chat-state-notification {
font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
#conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left;

3
css/inverse.css
View File

@ -7407,6 +7407,9 @@ body {
#converse-embedded-chat .chatbox .chat-body .chat-info.badge,
#conversejs .chatbox .chat-body .chat-info.badge {
color: white; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-state-notification,
#conversejs .chatbox .chat-body .chat-info.chat-state-notification {
font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
#conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left;

3
sass/_chatbox.scss
View File

@ -182,6 +182,9 @@
&.badge {
color: $chat-head-text-color;
}
&.chat-state-notification {
font-style: italic;
}
&.chat-event {
clear: left;
font-style: italic;

65
spec/chatbox.js
View File

@ -1634,10 +1634,10 @@
describe("A Chat Status Notification", function () {
it("does not open automatically if a chat state notification is received",
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
function (done, _converse) {
it("does not open a new chatbox",
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
function (done, _converse) {
test_utils.createContacts(_converse, 'current');
test_utils.openControlBox();
@ -1659,9 +1659,9 @@
describe("An active notification", function () {
it("is sent when the user opens a chat box",
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
function (done, _converse) {
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
function (done, _converse) {
test_utils.createContacts(_converse, 'current');
test_utils.openControlBox();
@ -1787,8 +1787,21 @@
var chatboxview = _converse.chatboxviews.get(sender_jid);
expect(chatboxview).toBeDefined();
// Check that the notification appears inside the chatbox in the DOM
var $events = $(chatboxview.el).find('.chat-event');
expect($events.text()).toEqual(mock.cur_names[1] + ' is typing');
var events = chatboxview.el.querySelectorAll('.chat-state-notification');
expect(events.length).toBe(1);
expect(events[0].textContent).toEqual(mock.cur_names[1] + ' is typing');
// Check that it doesn't appear twice
msg = $msg({
from: sender_jid,
to: _converse.connection.jid,
type: 'chat',
id: (new Date()).getTime()
}).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
_converse.chatboxes.onMessage(msg);
events = chatboxview.el.querySelectorAll('.chat-state-notification');
expect(events.length).toBe(1);
expect(events[0].textContent).toEqual(mock.cur_names[1] + ' is typing');
done();
}));
@ -1835,7 +1848,7 @@
expect(msg_obj.get('sender')).toEqual('me');
expect(msg_obj.get('delayed')).toEqual(false);
var $chat_content = $(chatboxview.el).find('.chat-content');
var status_text = $chat_content.find('.chat-info.chat-event').text();
var status_text = $chat_content.find('.chat-info.chat-state-notification').text();
expect(status_text).toBe('Typing from another device');
done();
});
@ -1845,9 +1858,9 @@
describe("A paused notification", function () {
it("is sent if the user has stopped typing since 30 seconds",
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
function (done, _converse) {
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
function (done, _converse) {
var view, contact_jid;
test_utils.createContacts(_converse, 'current');
@ -1931,7 +1944,7 @@
_converse.chatboxes.onMessage(msg);
expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
var chatboxview = _converse.chatboxviews.get(sender_jid);
var $events = $(chatboxview.el).find('.chat-event');
var $events = $(chatboxview.el).find('.chat-info.chat-state-notification');
expect($events.text()).toEqual(mock.cur_names[1] + ' has stopped typing');
done();
});
@ -1980,7 +1993,7 @@
expect(msg_obj.get('sender')).toEqual('me');
expect(msg_obj.get('delayed')).toEqual(false);
var $chat_content = $(chatboxview.el).find('.chat-content');
var status_text = $chat_content.find('.chat-info.chat-event').text();
var status_text = $chat_content.find('.chat-info.chat-state-notification').text();
expect(status_text).toBe('Stopped typing on the other device');
done();
});
@ -2106,7 +2119,7 @@
});
}));
it("will clear any other chat status notifications if its received",
it("will clear any other chat status notifications",
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
function (done, _converse) {
@ -2119,10 +2132,20 @@
var sender_jid = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@localhost';
test_utils.openChatBoxFor(_converse, sender_jid);
var view = _converse.chatboxviews.get(sender_jid);
expect($(view.el).find('.chat-event').length).toBe(0);
view.showStatusNotification(sender_jid+' is typing');
expect($(view.el).find('.chat-event').length).toBe(1);
expect(view.el.querySelectorAll('.chat-event').length).toBe(0);
// Insert <composing> message, to also check that
// text messages are inserted correctly with
// temporary chat events in the chat contents.
var msg = $msg({
'to': _converse.bare_jid,
'xmlns': 'jabber:client',
'from': sender_jid,
'type': 'chat'})
.c('composing', {'xmlns': Strophe.NS.CHATSTATES}).up()
.tree();
_converse.chatboxes.onMessage(msg);
expect(view.el.querySelectorAll('.chat-state-notification').length).toBe(1);
msg = $msg({
from: sender_jid,
to: _converse.connection.jid,
type: 'chat',
@ -2130,7 +2153,7 @@
}).c('body').c('inactive', {'xmlns': Strophe.NS.CHATSTATES}).tree();
_converse.chatboxes.onMessage(msg);
expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
expect($(view.el).find('.chat-event').length).toBe(0);
expect($(view.el).find('.chat-state-notification').length).toBe(0);
done();
}));
});
@ -2157,7 +2180,7 @@
_converse.chatboxes.onMessage(msg);
expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
var chatboxview = _converse.chatboxviews.get(sender_jid);
var $events = $(chatboxview.el).find('.chat-event');
var $events = $(chatboxview.el).find('.chat-state-notification');
expect($events.text()).toEqual(mock.cur_names[1] + ' has gone away');
done();
}));

369
spec/chatroom.js
View File

@ -2141,7 +2141,7 @@
var view = _converse.chatboxviews.get('lounge@localhost');
spyOn(view, 'onMessageSubmitted').and.callThrough();
spyOn(view.model, 'setAffiliation').and.callThrough();
spyOn(view, 'showStatusNotification').and.callThrough();
spyOn(view, 'showErrorMessage').and.callThrough();
spyOn(view, 'validateRoleChangeCommand').and.callThrough();
var textarea = view.el.querySelector('.chat-textarea')
textarea.value = '/owner';
@ -2152,7 +2152,7 @@
});
expect(view.onMessageSubmitted).toHaveBeenCalled();
expect(view.validateRoleChangeCommand).toHaveBeenCalled();
expect(view.showStatusNotification).toHaveBeenCalledWith(
expect(view.showErrorMessage).toHaveBeenCalledWith(
"Error: the \"owner\" command takes two arguments, the user's nickname and optionally a reason.",
true
);
@ -2164,7 +2164,7 @@
// reason.
view.onMessageSubmitted('/owner annoyingGuy@localhost You\'re responsible');
expect(view.validateRoleChangeCommand.calls.count()).toBe(2);
expect(view.showStatusNotification.calls.count()).toBe(1);
expect(view.showErrorMessage.calls.count()).toBe(1);
expect(view.model.setAffiliation).toHaveBeenCalled();
// Check that the member list now gets updated
expect(sent_IQ.toLocaleString()).toBe(
@ -2194,7 +2194,7 @@
var view = _converse.chatboxviews.get('lounge@localhost');
spyOn(view, 'onMessageSubmitted').and.callThrough();
spyOn(view.model, 'setAffiliation').and.callThrough();
spyOn(view, 'showStatusNotification').and.callThrough();
spyOn(view, 'showErrorMessage').and.callThrough();
spyOn(view, 'validateRoleChangeCommand').and.callThrough();
var textarea = view.el.querySelector('.chat-textarea')
textarea.value = '/ban';
@ -2205,7 +2205,7 @@
});
expect(view.onMessageSubmitted).toHaveBeenCalled();
expect(view.validateRoleChangeCommand).toHaveBeenCalled();
expect(view.showStatusNotification).toHaveBeenCalledWith(
expect(view.showErrorMessage).toHaveBeenCalledWith(
"Error: the \"ban\" command takes two arguments, the user's nickname and optionally a reason.",
true
);
@ -2216,7 +2216,7 @@
// reason.
view.onMessageSubmitted('/ban annoyingGuy@localhost You\'re annoying');
expect(view.validateRoleChangeCommand.calls.count()).toBe(2);
expect(view.showStatusNotification.calls.count()).toBe(1);
expect(view.showErrorMessage.calls.count()).toBe(1);
expect(view.model.setAffiliation).toHaveBeenCalled();
// Check that the member list now gets updated
expect(sent_IQ.toLocaleString()).toBe(
@ -2246,7 +2246,7 @@
var view = _converse.chatboxviews.get('lounge@localhost');
spyOn(view, 'onMessageSubmitted').and.callThrough();
spyOn(view, 'modifyRole').and.callThrough();
spyOn(view, 'showStatusNotification').and.callThrough();
spyOn(view, 'showErrorMessage').and.callThrough();
spyOn(view, 'validateRoleChangeCommand').and.callThrough();
var textarea = view.el.querySelector('.chat-textarea')
@ -2258,7 +2258,7 @@
});
expect(view.onMessageSubmitted).toHaveBeenCalled();
expect(view.validateRoleChangeCommand).toHaveBeenCalled();
expect(view.showStatusNotification).toHaveBeenCalledWith(
expect(view.showErrorMessage).toHaveBeenCalledWith(
"Error: the \"kick\" command takes two arguments, the user's nickname and optionally a reason.",
true
);
@ -2269,7 +2269,7 @@
// reason.
view.onMessageSubmitted('/kick annoyingGuy You\'re annoying');
expect(view.validateRoleChangeCommand.calls.count()).toBe(2);
expect(view.showStatusNotification.calls.count()).toBe(1);
expect(view.showErrorMessage.calls.count()).toBe(1);
expect(view.modifyRole).toHaveBeenCalled();
expect(sent_IQ.toLocaleString()).toBe(
"<iq to='lounge@localhost' type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
@ -2325,7 +2325,8 @@
var view = _converse.chatboxviews.get('lounge@localhost');
spyOn(view, 'onMessageSubmitted').and.callThrough();
spyOn(view, 'modifyRole').and.callThrough();
spyOn(view, 'showStatusNotification').and.callThrough();
spyOn(view, 'showErrorMessage').and.callThrough();
spyOn(view, 'showChatEvent').and.callThrough();
spyOn(view, 'validateRoleChangeCommand').and.callThrough();
// New user enters the room
@ -2363,7 +2364,7 @@
expect(view.onMessageSubmitted).toHaveBeenCalled();
expect(view.validateRoleChangeCommand).toHaveBeenCalled();
expect(view.showStatusNotification).toHaveBeenCalledWith(
expect(view.showErrorMessage).toHaveBeenCalledWith(
"Error: the \"op\" command takes two arguments, the user's nickname and optionally a reason.",
true
);
@ -2375,7 +2376,7 @@
// reason.
view.onMessageSubmitted('/op trustworthyguy You\'re trustworthy');
expect(view.validateRoleChangeCommand.calls.count()).toBe(2);
expect(view.showStatusNotification.calls.count()).toBe(1);
expect(view.showErrorMessage.calls.count()).toBe(1);
expect(view.modifyRole).toHaveBeenCalled();
expect(sent_IQ.toLocaleString()).toBe(
"<iq to='lounge@localhost' type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
@ -2408,11 +2409,11 @@
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
info_msgs = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
expect(info_msgs.pop().textContent).toBe("trustworthyguy is now a moderator.");
expect(info_msgs.pop().textContent).toBe("trustworthyguy is now a moderator");
view.onMessageSubmitted('/deop trustworthyguy Perhaps not');
expect(view.validateRoleChangeCommand.calls.count()).toBe(3);
expect(view.showStatusNotification.calls.count()).toBe(2);
expect(view.showChatEvent.calls.count()).toBe(1);
expect(view.modifyRole).toHaveBeenCalled();
expect(sent_IQ.toLocaleString()).toBe(
"<iq to='lounge@localhost' type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
@ -2444,7 +2445,7 @@
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
info_msgs = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
expect(info_msgs.pop().textContent).toBe("trustworthyguy is no longer a moderator.");
expect(info_msgs.pop().textContent).toBe("trustworthyguy is no longer a moderator");
done();
});
}));
@ -2464,7 +2465,8 @@
var view = _converse.chatboxviews.get('lounge@localhost');
spyOn(view, 'onMessageSubmitted').and.callThrough();
spyOn(view, 'modifyRole').and.callThrough();
spyOn(view, 'showStatusNotification').and.callThrough();
spyOn(view, 'showErrorMessage').and.callThrough();
spyOn(view, 'showChatEvent').and.callThrough();
spyOn(view, 'validateRoleChangeCommand').and.callThrough();
// New user enters the room
@ -2502,7 +2504,7 @@
expect(view.onMessageSubmitted).toHaveBeenCalled();
expect(view.validateRoleChangeCommand).toHaveBeenCalled();
expect(view.showStatusNotification).toHaveBeenCalledWith(
expect(view.showErrorMessage).toHaveBeenCalledWith(
"Error: the \"mute\" command takes two arguments, the user's nickname and optionally a reason.",
true
);
@ -2513,7 +2515,7 @@
// reason.
view.onMessageSubmitted('/mute annoyingGuy You\'re annoying');
expect(view.validateRoleChangeCommand.calls.count()).toBe(2);
expect(view.showStatusNotification.calls.count()).toBe(1);
expect(view.showErrorMessage.calls.count()).toBe(1);
expect(view.modifyRole).toHaveBeenCalled();
expect(sent_IQ.toLocaleString()).toBe(
"<iq to='lounge@localhost' type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
@ -2546,11 +2548,11 @@
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
info_msgs = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
expect(info_msgs.pop().textContent).toBe("annoyingGuy has been muted.");
expect(info_msgs.pop().textContent).toBe("annoyingGuy has been muted");
view.onMessageSubmitted('/voice annoyingGuy Now you can talk again');
expect(view.validateRoleChangeCommand.calls.count()).toBe(3);
expect(view.showStatusNotification.calls.count()).toBe(2);
expect(view.showChatEvent.calls.count()).toBe(1);
expect(view.modifyRole).toHaveBeenCalled();
expect(sent_IQ.toLocaleString()).toBe(
"<iq to='lounge@localhost' type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
@ -2583,7 +2585,7 @@
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
info_msgs = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
expect(info_msgs.pop().textContent).toBe("annoyingGuy has been given a voice again.");
expect(info_msgs.pop().textContent).toBe("annoyingGuy has been given a voice again");
done();
});
}));
@ -3229,6 +3231,331 @@
done();
});
}));
describe("A Chat Status Notification", function () {
describe("A composing notification", function () {
it("will be shown if received",
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
function (done, _converse) {
test_utils.openAndEnterChatRoom(
_converse, 'coven', 'chat.shakespeare.lit', 'some1').then(function () {
var room_jid = 'coven@chat.shakespeare.lit';
var view = _converse.chatboxviews.get('coven@chat.shakespeare.lit');
var $chat_content = $(view.el).find('.chat-content');
/* <presence to="dummy@localhost/_converse.js-29092160"
* from="coven@chat.shakespeare.lit/some1">
* <x xmlns="http://jabber.org/protocol/muc#user">
* <item affiliation="owner" jid="dummy@localhost/_converse.js-29092160" role="moderator"/>
* <status code="110"/>
* </x>
* </presence></body>
*/
var presence = $pres({
to: 'dummy@localhost/_converse.js-29092160',
from: 'coven@chat.shakespeare.lit/some1'
}).c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'owner',
'jid': 'dummy@localhost/_converse.js-29092160',
'role': 'moderator'
}).up()
.c('status', {code: '110'});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(2);
expect($chat_content.find('div.chat-info:first').html()).toBe("some1 has entered the room");
expect($chat_content.find('div.chat-info:last').html()).toBe("some1 is now a moderator");
presence = $pres({
to: 'dummy@localhost/_converse.js-29092160',
from: 'coven@chat.shakespeare.lit/newguy'
})
.c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'none',
'jid': 'newguy@localhost/_converse.js-290929789',
'role': 'participant'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(3);
expect($chat_content.find('div.chat-info:last').html()).toBe("newguy has entered the room");
presence = $pres({
to: 'dummy@localhost/_converse.js-29092160',
from: 'coven@chat.shakespeare.lit/nomorenicks'
})
.c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'none',
'jid': 'nomorenicks@localhost/_converse.js-290929789',
'role': 'participant'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(4);
expect($chat_content.find('div.chat-info:last').html()).toBe("nomorenicks has entered the room");
// See XEP-0085 http://xmpp.org/extensions/xep-0085.html#definitions
// <composing> state
var msg = $msg({
from: room_jid+'/newguy',
id: (new Date()).getTime(),
to: 'dummy@localhost',
type: 'groupchat'
}).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
view.handleMUCMessage(msg);
// Check that the notification appears inside the chatbox in the DOM
var events = view.el.querySelectorAll('.chat-event');
expect(events.length).toBe(4);
expect(events[0].textContent).toEqual('some1 has entered the room');
expect(events[1].textContent).toEqual('some1 is now a moderator');
expect(events[2].textContent).toEqual('newguy has entered the room');
expect(events[3].textContent).toEqual('nomorenicks has entered the room');
var notifications = view.el.querySelectorAll('.chat-state-notification');
expect(notifications.length).toBe(1);
expect(notifications[0].textContent).toEqual('newguy is typing');
const timeout_functions = [];
spyOn(window, 'setTimeout').and.callFake(function (func, delay) {
timeout_functions.push(func);
});
// Check that it doesn't appear twice
msg = $msg({
from: room_jid+'/newguy',
id: (new Date()).getTime(),
to: 'dummy@localhost',
type: 'groupchat'
}).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
view.handleMUCMessage(msg);
events = view.el.querySelectorAll('.chat-event');
expect(events.length).toBe(4);
expect(events[0].textContent).toEqual('some1 has entered the room');
expect(events[1].textContent).toEqual('some1 is now a moderator');
expect(events[2].textContent).toEqual('newguy has entered the room');
expect(events[3].textContent).toEqual('nomorenicks has entered the room');
notifications = view.el.querySelectorAll('.chat-state-notification');
expect(notifications.length).toBe(1);
expect(notifications[0].textContent).toEqual('newguy is typing');
expect(timeout_functions.length).toBe(1);
// <composing> state for a different occupant
msg = $msg({
from: room_jid+'/nomorenicks',
id: (new Date()).getTime(),
to: 'dummy@localhost',
type: 'groupchat'
}).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
view.handleMUCMessage(msg);
events = view.el.querySelectorAll('.chat-event');
expect(events.length).toBe(4);
expect(events[0].textContent).toEqual('some1 has entered the room');
expect(events[1].textContent).toEqual('some1 is now a moderator');
expect(events[2].textContent).toEqual('newguy has entered the room');
expect(events[3].textContent).toEqual('nomorenicks has entered the room');
notifications = view.el.querySelectorAll('.chat-state-notification');
expect(notifications.length).toBe(2);
expect(notifications[0].textContent).toEqual('newguy is typing');
expect(notifications[1].textContent).toEqual('nomorenicks is typing');
expect(timeout_functions.length).toBe(2);
// Check that new messages appear under the chat state
// notifications
msg = $msg({
from: 'lounge@localhost/some1',
id: (new Date()).getTime(),
to: 'dummy@localhost',
type: 'groupchat'
}).c('body').t('hello world').tree();
view.handleMUCMessage(msg);
var messages = view.el.querySelectorAll('.message');
expect(messages.length).toBe(8);
expect(view.el.querySelectorAll('.chat-message').length).toBe(1);
expect(view.el.querySelector('.chat-message .chat-msg-content').textContent).toBe('hello world');
// Test that the composing notifications get removed
// via timeout.
timeout_functions[0]();
events = view.el.querySelectorAll('.chat-event');
expect(events.length).toBe(4);
expect(events[0].textContent).toEqual('some1 has entered the room');
expect(events[1].textContent).toEqual('some1 is now a moderator');
expect(events[2].textContent).toEqual('newguy has entered the room');
expect(events[3].textContent).toEqual('nomorenicks has entered the room');
notifications = view.el.querySelectorAll('.chat-state-notification');
expect(notifications.length).toBe(1);
expect(notifications[0].textContent).toEqual('nomorenicks is typing');
timeout_functions[1]();
events = view.el.querySelectorAll('.chat-event');
expect(events.length).toBe(4);
expect(events[0].textContent).toEqual('some1 has entered the room');
expect(events[1].textContent).toEqual('some1 is now a moderator');
expect(events[2].textContent).toEqual('newguy has entered the room');
expect(events[3].textContent).toEqual('nomorenicks has entered the room');
notifications = view.el.querySelectorAll('.chat-state-notification');
expect(notifications.length).toBe(0);
done();
});
}));
});
describe("A paused notification", function () {
it("will be shown if received",
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
function (done, _converse) {
test_utils.openChatRoom(_converse, "coven", 'chat.shakespeare.lit', 'some1');
var room_jid = 'coven@chat.shakespeare.lit';
var view = _converse.chatboxviews.get('coven@chat.shakespeare.lit');
var $chat_content = $(view.el).find('.chat-content');
/* <presence to="dummy@localhost/_converse.js-29092160"
* from="coven@chat.shakespeare.lit/some1">
* <x xmlns="http://jabber.org/protocol/muc#user">
* <item affiliation="owner" jid="dummy@localhost/_converse.js-29092160" role="moderator"/>
* <status code="110"/>
* </x>
* </presence></body>
*/
var presence = $pres({
to: 'dummy@localhost/_converse.js-29092160',
from: 'coven@chat.shakespeare.lit/some1'
}).c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'owner',
'jid': 'dummy@localhost/_converse.js-29092160',
'role': 'moderator'
}).up()
.c('status', {code: '110'});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content.find('div.chat-info:first').html()).toBe("some1 has entered the room");
presence = $pres({
to: 'dummy@localhost/_converse.js-29092160',
from: 'coven@chat.shakespeare.lit/newguy'
})
.c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'none',
'jid': 'newguy@localhost/_converse.js-290929789',
'role': 'participant'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(2);
expect($chat_content.find('div.chat-info:last').html()).toBe("newguy has entered the room");
presence = $pres({
to: 'dummy@localhost/_converse.js-29092160',
from: 'coven@chat.shakespeare.lit/nomorenicks'
})
.c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'none',
'jid': 'nomorenicks@localhost/_converse.js-290929789',
'role': 'participant'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(3);
expect($chat_content.find('div.chat-info:last').html()).toBe("nomorenicks has entered the room");
// See XEP-0085 http://xmpp.org/extensions/xep-0085.html#definitions
// <composing> state
var msg = $msg({
from: room_jid+'/newguy',
id: (new Date()).getTime(),
to: 'dummy@localhost',
type: 'groupchat'
}).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
view.handleMUCMessage(msg);
// Check that the notification appears inside the chatbox in the DOM
var events = view.el.querySelectorAll('.chat-event');
expect(events.length).toBe(3);
expect(events[0].textContent).toEqual('some1 has entered the room');
expect(events[1].textContent).toEqual('newguy has entered the room');
expect(events[2].textContent).toEqual('nomorenicks has entered the room');
var notifications = view.el.querySelectorAll('.chat-state-notification');
expect(notifications.length).toBe(1);
expect(notifications[0].textContent).toEqual('newguy is typing');
// Check that it doesn't appear twice
msg = $msg({
from: room_jid+'/newguy',
id: (new Date()).getTime(),
to: 'dummy@localhost',
type: 'groupchat'
}).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
view.handleMUCMessage(msg);
events = view.el.querySelectorAll('.chat-event');
expect(events.length).toBe(3);
expect(events[0].textContent).toEqual('some1 has entered the room');
expect(events[1].textContent).toEqual('newguy has entered the room');
expect(events[2].textContent).toEqual('nomorenicks has entered the room');
notifications = view.el.querySelectorAll('.chat-state-notification');
expect(notifications.length).toBe(1);
expect(notifications[0].textContent).toEqual('newguy is typing');
// <composing> state for a different occupant
msg = $msg({
from: room_jid+'/nomorenicks',
id: (new Date()).getTime(),
to: 'dummy@localhost',
type: 'groupchat'
}).c('body').c('composing', {'xmlns': Strophe.NS.CHATSTATES}).tree();
view.handleMUCMessage(msg);
events = view.el.querySelectorAll('.chat-event');
expect(events.length).toBe(3);
expect(events[0].textContent).toEqual('some1 has entered the room');
expect(events[1].textContent).toEqual('newguy has entered the room');
expect(events[2].textContent).toEqual('nomorenicks has entered the room');
notifications = view.el.querySelectorAll('.chat-state-notification');
expect(notifications.length).toBe(2);
expect(notifications[0].textContent).toEqual('newguy is typing');
expect(notifications[1].textContent).toEqual('nomorenicks is typing');
// <paused> state from occupant who typed first
msg = $msg({
from: room_jid+'/newguy',
id: (new Date()).getTime(),
to: 'dummy@localhost',
type: 'groupchat'
}).c('body').c('paused', {'xmlns': Strophe.NS.CHATSTATES}).tree();
view.handleMUCMessage(msg);
events = view.el.querySelectorAll('.chat-event');
expect(events.length).toBe(3);
expect(events[0].textContent).toEqual('some1 has entered the room');
expect(events[1].textContent).toEqual('newguy has entered the room');
expect(events[2].textContent).toEqual('nomorenicks has entered the room');
notifications = view.el.querySelectorAll('.chat-state-notification');
expect(notifications.length).toBe(2);
expect(notifications[0].textContent).toEqual('nomorenicks is typing');
expect(notifications[1].textContent).toEqual('newguy has stopped typing');
done();
}));
});
});
});
});
}));

1
src/converse-chatboxes.js
View File

@ -167,6 +167,7 @@
const spoiler = message.querySelector(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`);
const attrs = {
'type': type,
'from': from,
'chat_state': chat_state,
'delayed': delayed,
'fullname': fullname,

115
src/converse-chatview.js
View File

@ -16,7 +16,9 @@
"tpl!chatbox",
"tpl!chatbox_head",
"tpl!chatbox_message_form",
"tpl!csn",
"tpl!emojis",
"tpl!error_message",
"tpl!help_message",
"tpl!info",
"tpl!message",
@ -24,6 +26,7 @@
"tpl!spinner",
"tpl!spoiler_button",
"tpl!spoiler_message",
"tpl!status_message",
"tpl!toolbar",
"converse-chatboxes"
], factory);
@ -36,7 +39,9 @@
tpl_chatbox,
tpl_chatbox_head,
tpl_chatbox_message_form,
tpl_csn,
tpl_emojis,
tpl_error_message,
tpl_help_message,
tpl_info,
tpl_message,
@ -44,6 +49,7 @@
tpl_spinner,
tpl_spoiler_button,
tpl_spoiler_message,
tpl_status_message,
tpl_toolbar
) {
"use strict";
@ -400,23 +406,26 @@
return this;
},
clearStatusNotification () {
u.removeElement(this.content.querySelector('.chat-event'));
},
showStatusNotification (message, keep_old, permanent) {
if (!keep_old) {
this.clearStatusNotification();
}
showChatEvent (message, data='') {
const isodate = moment().format();
this.content.insertAdjacentHTML(
'beforeend',
tpl_info({
'extra_classes': !permanent ? 'chat-event' : '',
'extra_classes': 'chat-event',
'message': message,
'isodate': moment().format(),
'data': ''
'isodate': isodate,
'data': data
}));
this.scrollDown();
return isodate;
},
showErrorMessage (message) {
this.content.insertAdjacentHTML(
'beforeend',
tpl_error_message({'message': message, 'isodate': moment().format() })
);
this.scrollDown();
},
addSpinner (append=false) {
@ -449,7 +458,7 @@
* This element must have a "data-isodate" attribute
* which specifies its creation date.
*/
const prev_msg_el = u.getPreviousElement(next_msg_el, ".message:not(.chat-event)"),
const prev_msg_el = u.getPreviousElement(next_msg_el, ".message:not(.chat-state-notification)"),
prev_msg_date = _.isNull(prev_msg_el) ? null : prev_msg_el.getAttribute('data-isodate'),
next_msg_date = next_msg_el.getAttribute('data-isodate');
@ -471,24 +480,24 @@
* (Object) cutoff: Moment Date cutoff date. The last
* message received cutoff this date will be returned.
*/
const first_msg = u.getFirstChildElement(this.content, '.message:not(.chat-event)'),
const first_msg = u.getFirstChildElement(this.content, '.message:not(.chat-state-notification)'),
oldest_date = first_msg ? first_msg.getAttribute('data-isodate') : null;
if (!_.isNull(oldest_date) && moment(oldest_date).isAfter(cutoff)) {
return null;
}
const last_msg = u.getLastChildElement(this.content, '.message:not(.chat-event)'),
const last_msg = u.getLastChildElement(this.content, '.message:not(.chat-state-notification)'),
most_recent_date = last_msg ? last_msg.getAttribute('data-isodate') : null;
if (_.isNull(most_recent_date) || moment(most_recent_date).isBefore(cutoff)) {
return most_recent_date;
}
/* XXX: We avoid .chat-event messages, since they are
/* XXX: We avoid .chat-state-notification messages, since they are
* temporary and get removed once a new element is
* inserted into the chat area, so we don't query for
* them here, otherwise we get a null reference later
* upon element insertion.
*/
const msg_dates = _.invokeMap(
sizzle('.message:not(.chat-event)', this.content),
sizzle('.message:not(.chat-state-notification)', this.content),
Element.prototype.getAttribute, 'data-isodate'
)
if (_.isObject(cutoff)) {
@ -527,7 +536,7 @@
previous_msg_el.insertAdjacentElement('afterend', message_el);
}
this.insertDayIndicator(message_el);
this.clearStatusNotification();
this.clearChatStateNotification(attrs.from);
this.setScrollPosition(message_el);
},
@ -662,28 +671,55 @@
return this.scrollDown();
},
handleChatStateMessage (message) {
clearChatStateNotification (from, isodate) {
if (isodate) {
_.each(
sizzle(`.chat-state-notification[data-csn="${from}"][data-isodate="${isodate}"]`, this.content),
u.removeElement
);
} else {
_.each(sizzle(`.chat-state-notification[data-csn="${from}"]`, this.content), u.removeElement);
}
},
showChatStateNotification (message) {
/* Support for XEP-0085, Chat State Notifications */
let text;
const from = message.get('from');
const data = `data-csn=${from}`;
this.clearChatStateNotification(from);
if (message.get('chat_state') === _converse.COMPOSING) {
if (message.get('sender') === 'me') {
this.showStatusNotification(__('Typing from another device'));
text = __('Typing from another device');
} else {
this.showStatusNotification(message.get('fullname')+' '+__('is typing'));
text = message.get('fullname')+' '+__('is typing');
}
this.clear_status_timeout = window.setTimeout(
this.clearStatusNotification.bind(this),
30000
);
} else if (message.get('chat_state') === _converse.PAUSED) {
if (message.get('sender') === 'me') {
this.showStatusNotification(__('Stopped typing on the other device'));
text = __('Stopped typing on the other device');
} else {
this.showStatusNotification(message.get('fullname')+' '+__('has stopped typing'));
text = message.get('fullname')+' '+__('has stopped typing');
}
} else if (_.includes([_converse.INACTIVE, _converse.ACTIVE], message.get('chat_state'))) {
this.clearStatusNotification();
} else if (message.get('chat_state') === _converse.GONE) {
this.showStatusNotification(message.get('fullname')+' '+__('has gone away'));
text = message.get('fullname')+' '+__('has gone away');
} else {
return;
}
const isodate = moment().format();
this.content.insertAdjacentHTML(
'beforeend',
tpl_csn({
'message': text,
'from': from,
'isodate': isodate
}));
this.scrollDown();
this.clear_status_timeout = window.setTimeout(
this.clearChatStateNotification.bind(this, from, isodate),
30000
);
return message;
},
@ -740,7 +776,7 @@
this.handleErrorMessage(message);
} else {
if (message.get('chat_state')) {
this.handleChatStateMessage(message);
this.showChatStateNotification(message);
}
if (message.get('message')) {
this.handleTextMessage(message);
@ -1021,16 +1057,27 @@
onChatStatusChanged (item) {
const chat_status = item.get('chat_status');
let fullname = item.get('fullname');
let text;
fullname = _.isEmpty(fullname)? item.get('jid'): fullname;
if (u.isVisible(this.el)) {
if (chat_status === 'offline') {
this.showStatusNotification(fullname+' '+__('has gone offline'));
text = fullname+' '+__('has gone offline');
} else if (chat_status === 'away') {
this.showStatusNotification(fullname+' '+__('has gone away'));
text = fullname+' '+__('has gone away');
} else if ((chat_status === 'dnd')) {
this.showStatusNotification(fullname+' '+__('is busy'));
text = fullname+' '+__('is busy');
} else if (chat_status === 'online') {
this.clearStatusNotification();
text = fullname+' '+__('is online');
}
if (text) {
this.content.insertAdjacentHTML(
'beforeend',
tpl_status_message({
'message': text,
'isodate': moment().format(),
}));
this.scrollDown();
}
}
},

31
src/converse-muc-views.js
View File

@ -497,25 +497,16 @@
informOfOccupantsRoleChange (occupant, changed) {
const previous_role = occupant._previousAttributes.role;
if (previous_role === 'moderator') {
this.showStatusNotification(
__("%1$s is no longer a moderator.", occupant.get('nick')),
false, true)
this.showChatEvent(__("%1$s is no longer a moderator", occupant.get('nick')))
}
if (previous_role === 'visitor') {
this.showStatusNotification(
__("%1$s has been given a voice again.", occupant.get('nick')),
false, true)
this.showChatEvent(__("%1$s has been given a voice again", occupant.get('nick')))
}
if (occupant.get('role') === 'visitor') {
this.showStatusNotification(
__("%1$s has been muted.", occupant.get('nick')),
false, true)
this.showChatEvent(__("%1$s has been muted", occupant.get('nick')))
}
if (occupant.get('role') === 'moderator') {
this.showStatusNotification(
__("%1$s is now a moderator.", occupant.get('nick')),
false, true)
this.showChatEvent(__("%1$s is now a moderator", occupant.get('nick')))
}
},
@ -629,7 +620,7 @@
this.insertIntoTextArea(ev.target.textContent);
},
handleChatStateMessage (message) {
handleChatStateNotification (message) {
/* Override the method on the ChatBoxView base class to
* ignore <gone/> notifications in groupchats.
*
@ -643,7 +634,7 @@
return;
}
if (message.get('chat_state') !== _converse.GONE) {
_converse.ChatBoxView.prototype.handleChatStateMessage.apply(this, arguments);
_converse.ChatBoxView.prototype.handleChatStateNotification.apply(this, arguments);
}
},
@ -707,7 +698,7 @@
*/
// TODO check if first argument is valid
if (args.length < 1 || args.length > 2) {
this.showStatusNotification(
this.showErrorMessage(
__('Error: the "%1$s" command takes two arguments, the user\'s nickname and optionally a reason.',
command),
true
@ -729,7 +720,7 @@
},
onCommandError () {
this.showStatusNotification(__("Error: could not execute the command"), true);
this.showErrorMessage(__("Error: could not execute the command"), true);
},
onMessageSubmitted (text) {
@ -1446,7 +1437,7 @@
}));
});
if (notification.reason) {
this.showStatusNotification(__('The reason given is: "%1$s".', notification.reason), true);
this.showChatEvent(__('The reason given is: "%1$s".', notification.reason));
}
if (_.get(notification.messages, 'length')) {
this.scrollDown();
@ -1577,7 +1568,7 @@
return stanza;
},
showErrorMessage (presence) {
showErrorMessageFromPresence (presence) {
// We didn't enter the room, so we must remove it from the MUC add-on
const error = presence.querySelector('error');
if (error.getAttribute('type') === 'auth') {
@ -1698,7 +1689,7 @@
*/
if (pres.getAttribute('type') === 'error') {
this.model.save('connection_status', converse.ROOMSTATUS.DISCONNECTED);
this.showErrorMessage(pres);
this.showErrorMessageFromPresence(pres);
return true;
}
const is_self = pres.querySelector("status[code='110']");

3
src/templates/csn.html Normal file
View File

@ -0,0 +1,3 @@
<div class="message chat-info chat-state-notification"
data-isodate="{{{o.isodate}}}"
data-csn="{{{o.from}}}">{{{o.message}}}</div>

1
src/templates/error_message.html Normal file
View File

@ -0,0 +1 @@
<div class="message chat-info chat-error" data-isodate="{{{o.isodate}}}">{{{o.message}}}</div>

4
src/templates/info.html
View File

@ -1 +1,3 @@
<div class="message chat-info {{{o.extra_classes}}}" data-isodate="{{{o.isodate}}}" {{{o.data}}}>{{{o.message}}}</div>
<div class="message chat-info {{{o.extra_classes}}}"
data-isodate="{{{o.isodate}}}"
{{{o.data}}}>{{{o.message}}}</div>

3
src/templates/status_message.html Normal file
View File

@ -0,0 +1,3 @@
<div class="message chat-info chat-status"
data-isodate="{{{o.isodate}}}"
data-status="{{{o.from}}}">{{{o.message}}}</div>