From 6788476c8a1b3a9837a07453ee2041d7d917b880 Mon Sep 17 00:00:00 2001 From: fo Date: Thu, 30 Oct 2014 18:07:11 +0200 Subject: [PATCH] Adds notifications when a user joins/leaves or is added/removed from lastN. --- app.js | 33 +++++ chat.js | 9 ++ contact_list.js | 7 + css/main.css | 53 +++++++ css/toastr.css | 180 ++++++++++++++++++++++++ index.html | 16 ++- libs/toastr.js | 342 +++++++++++++++++++++++++++++++++++++++++++++ message_handler.js | 10 ++ videolayout.js | 11 ++ 9 files changed, 657 insertions(+), 4 deletions(-) create mode 100644 css/toastr.css create mode 100644 libs/toastr.js diff --git a/app.js b/app.js index e7b652ce3..35a54ef20 100644 --- a/app.js +++ b/app.js @@ -695,6 +695,9 @@ $(document).bind('joined.muc', function (event, jid, info) { $(document).bind('entered.muc', function (event, jid, info, pres) { console.log('entered', jid, info); + messageHandler.notify(info.displayName || 'Somebody', + 'connected', + 'connected'); console.log('is focus? ' + (focus ? 'true' : 'false')); @@ -726,6 +729,11 @@ $(document).bind('entered.muc', function (event, jid, info, pres) { $(document).bind('left.muc', function (event, jid) { console.log('left.muc', jid); + var displayName = $('#participant_' + Strophe.getResourceFromJid(jid) + + '>.displayname').text(); + messageHandler.notify(displayName || 'Somebody', + 'disconnected', + 'disconnected'); // Need to call this with a slight delay, otherwise the element couldn't be // found for some reason. window.setTimeout(function () { @@ -1315,6 +1323,31 @@ $(document).ready(function () { init(); }; } + + toastr.options = { + "closeButton": true, + "debug": false, + "positionClass": "notification-bottom-right", + "onclick": null, + "showDuration": "300", + "hideDuration": "1000", + "timeOut": "2000", + "extendedTimeOut": "1000", + "showEasing": "swing", + "hideEasing": "linear", + "showMethod": "fadeIn", + "hideMethod": "fadeOut", + "reposition": function() { + if(Chat.isVisible() || ContactList.isVisible()) { + $("#toast-container").addClass("toast-bottom-right-center"); + } else { + $("#toast-container").removeClass("toast-bottom-right-center"); + } + }, + "newestOnTop": false + } + + }); $(window).bind('beforeunload', function () { diff --git a/chat.js b/chat.js index 3a85cabf1..e90635042 100644 --- a/chat.js +++ b/chat.js @@ -214,9 +214,13 @@ var Chat = (function (my) { ); if (Chat.isVisible()) { + $("#toast-container").animate({right: '5px'}, + {queue: false, + duration: 500}); chatspace.hide("slide", { direction: "right", queue: false, duration: 500}); + } else { // Undock the toolbar when the chat is shown and if we're in a @@ -225,6 +229,10 @@ var Chat = (function (my) { ToolbarToggler.dockToolbar(false); } + + $("#toast-container").animate({right: (chatSize[0] + 5) + 'px'}, + {queue: false, + duration: 500}); chatspace.show("slide", { direction: "right", queue: false, duration: 500, @@ -237,6 +245,7 @@ var Chat = (function (my) { } } }); + Chat.resizeChat(); } diff --git a/contact_list.js b/contact_list.js index 1ceff0606..aee7af025 100644 --- a/contact_list.js +++ b/contact_list.js @@ -158,6 +158,9 @@ var ContactList = (function (my) { }); if (ContactList.isVisible()) { + $("#toast-container").animate({right: '12px'}, + {queue: false, + duration: 500}); $('#contactlist').hide("slide", { direction: "right", queue: false, duration: 500}); @@ -167,6 +170,10 @@ var ContactList = (function (my) { if (VideoLayout.isLargeVideoVisible()) ToolbarToggler.dockToolbar(false); + + $("#toast-container").animate({right: '212px'}, + {queue: false, + duration: 500}); $('#contactlist').show("slide", { direction: "right", queue: false, duration: 500}); diff --git a/css/main.css b/css/main.css index a7f9d7baa..9a0a6e54e 100644 --- a/css/main.css +++ b/css/main.css @@ -311,3 +311,56 @@ form { text-decoration: none; z-index: 100; } + +#toast-container.notification-bottom-right { + bottom: 120px; + right: 5px; +} + +#toast-container.notification-bottom-right-center { + right: 205px; +} + +#toast-container .toast-info { + -webkit-box-shadow: none; + box-shadow: none; +} + +.toast-close-button { + right: -7px; + top: -19px; +} + +#toast-container .toast-info { + background-color: black; + border: 1px solid #3a3a3a; + width: 220px; + padding: 10px 10px 10px 50px; +} + +.connected { + color: forestgreen; + font-size: 12px; +} + +.disconnected { + color: darkred; + font-size: 12px; +} + +.lastN { + color: #a3a3a3; + font-size: 12px; +} + +.toast-close-button:hover, +.toast-close-button:focus { + color: #ffffff; + opacity: 1; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + filter: alpha(opacity=100); +} + +.toast-message .nickname { + font-weight: bold; +} diff --git a/css/toastr.css b/css/toastr.css new file mode 100644 index 000000000..d86235a9f --- /dev/null +++ b/css/toastr.css @@ -0,0 +1,180 @@ +/* + * Toastr + * Copyright 2012-2014 John Papa and Hans Fjällemark. + * All Rights Reserved. + * Use, reproduction, distribution, and modification of this code is subject to the terms and + * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php + * + * Author: John Papa and Hans Fjällemark + * Project: https://github.com/CodeSeven/toastr + */ +.toast-title { + font-weight: bold; +} +.toast-message { + -ms-word-wrap: break-word; + word-wrap: break-word; +} +.toast-message a, +.toast-message label { + color: #ffffff; +} +.toast-message a:hover { + color: #cccccc; + text-decoration: none; +} +.toast-close-button { + position: relative; + right: -0.3em; + top: -0.3em; + float: right; + font-size: 20px; + font-weight: bold; + color: #ffffff; + -webkit-text-shadow: 0 1px 0 #ffffff; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.8; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + filter: alpha(opacity=80); +} +.toast-close-button:hover, +.toast-close-button:focus { + color: #000000; + text-decoration: none; + cursor: pointer; + opacity: 0.4; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + filter: alpha(opacity=40); +} +/*Additional properties for button version + iOS requires the button element instead of an anchor tag. + If you want the anchor version, it requires `href="#"`.*/ +button.toast-close-button { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} +.toast-top-full-width { + top: 0; + right: 0; + width: 100%; +} +.toast-bottom-full-width { + bottom: 0; + right: 0; + width: 100%; +} +.toast-top-left { + top: 12px; + left: 12px; +} +.toast-top-right { + top: 12px; + right: 12px; +} +.toast-bottom-right { + right: 12px; + bottom: 12px; +} +.toast-bottom-left { + bottom: 12px; + left: 12px; +} +#toast-container { + position: fixed; + z-index: 999999; + /*overrides*/ + +} +#toast-container * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +#toast-container > div { + margin: 0 0 6px; + padding: 15px 15px 15px 50px; + width: 300px; + -moz-border-radius: 3px 3px 3px 3px; + -webkit-border-radius: 3px 3px 3px 3px; + border-radius: 3px 3px 3px 3px; + background-position: 15px center; + background-repeat: no-repeat; + -moz-box-shadow: 0 0 12px #999999; + -webkit-box-shadow: 0 0 12px #999999; + box-shadow: 0 0 12px #999999; + color: #ffffff; + opacity: 0.8; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + filter: alpha(opacity=80); +} +#toast-container > :hover { + -moz-box-shadow: 0 0 12px #000000; + -webkit-box-shadow: 0 0 12px #000000; + box-shadow: 0 0 12px #000000; + opacity: 1; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + filter: alpha(opacity=100); + cursor: pointer; +} +#toast-container > .toast-info { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important; +} +#toast-container > .toast-error { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; +} +#toast-container > .toast-success { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; +} +#toast-container > .toast-warning { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; +} +#toast-container.toast-top-full-width > div, +#toast-container.toast-bottom-full-width > div { + width: 96%; + margin: auto; +} +.toast { + background-color: #030303; +} +.toast-success { + background-color: #51a351; +} +.toast-error { + background-color: #bd362f; +} +.toast-info { + background-color: #2f96b4; +} +.toast-warning { + background-color: #f89406; +} +/*Responsive Design*/ +@media all and (max-width: 240px) { + #toast-container > div { + padding: 8px 8px 8px 50px; + width: 11em; + } + #toast-container .toast-close-button { + right: -0.2em; + top: -0.2em; + } +} +@media all and (min-width: 241px) and (max-width: 480px) { + #toast-container > div { + padding: 8px 8px 8px 50px; + width: 18em; + } + #toast-container .toast-close-button { + right: -0.2em; + top: -0.2em; + } +} +@media all and (min-width: 481px) and (max-width: 768px) { + #toast-container > div { + padding: 15px 15px 15px 50px; + width: 25em; + } +} diff --git a/index.html b/index.html index 389d55810..f2b09144e 100644 --- a/index.html +++ b/index.html @@ -28,14 +28,20 @@ +<<<<<<< HEAD +======= + + + +>>>>>>> Adds notifications when a user joins/leaves or is added/removed from lastN. - + @@ -46,7 +52,7 @@ - + @@ -58,17 +64,18 @@ - + + - + @@ -318,6 +325,7 @@ + Powered by jitsi.org diff --git a/libs/toastr.js b/libs/toastr.js new file mode 100644 index 000000000..ed467511c --- /dev/null +++ b/libs/toastr.js @@ -0,0 +1,342 @@ +/* + * Toastr + * Copyright 2012-2014 John Papa and Hans Fjällemark. + * All Rights Reserved. + * Use, reproduction, distribution, and modification of this code is subject to the terms and + * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php + * + * Author: John Papa and Hans Fjällemark + * ARIA Support: Greta Krafsig + * Project: https://github.com/CodeSeven/toastr + */ +; (function (define) { + define(['jquery'], function ($) { + return (function () { + var $container; + var listener; + var toastId = 0; + var toastType = { + error: 'error', + info: 'info', + success: 'success', + warning: 'warning' + }; + + var toastr = { + clear: clear, + remove: remove, + error: error, + getContainer: getContainer, + info: info, + options: {}, + subscribe: subscribe, + success: success, + version: '2.0.3', + warning: warning + }; + + return toastr; + + //#region Accessible Methods + function error(message, title, optionsOverride) { + return notify({ + type: toastType.error, + iconClass: getOptions().iconClasses.error, + message: message, + optionsOverride: optionsOverride, + title: title + }); + } + + function getContainer(options, create) { + if (!options) { options = getOptions(); } + $container = $('#' + options.containerId); + if ($container.length) { + return $container; + } + if(create) { + $container = createContainer(options); + } + return $container; + } + + function info(message, title, optionsOverride) { + return notify({ + type: toastType.info, + iconClass: getOptions().iconClasses.info, + message: message, + optionsOverride: optionsOverride, + title: title + }); + } + + function subscribe(callback) { + listener = callback; + } + + function success(message, title, optionsOverride) { + return notify({ + type: toastType.success, + iconClass: getOptions().iconClasses.success, + message: message, + optionsOverride: optionsOverride, + title: title + }); + } + + function warning(message, title, optionsOverride) { + return notify({ + type: toastType.warning, + iconClass: getOptions().iconClasses.warning, + message: message, + optionsOverride: optionsOverride, + title: title + }); + } + + function clear($toastElement) { + var options = getOptions(); + if (!$container) { getContainer(options); } + if (!clearToast($toastElement, options)) { + clearContainer(options); + } + } + + function remove($toastElement) { + var options = getOptions(); + if (!$container) { getContainer(options); } + if ($toastElement && $(':focus', $toastElement).length === 0) { + removeToast($toastElement); + return; + } + if ($container.children().length) { + $container.remove(); + } + } + //#endregion + + //#region Internal Methods + + function clearContainer(options){ + var toastsToClear = $container.children(); + for (var i = toastsToClear.length - 1; i >= 0; i--) { + clearToast($(toastsToClear[i]), options); + }; + } + + function clearToast($toastElement, options){ + if ($toastElement && $(':focus', $toastElement).length === 0) { + $toastElement[options.hideMethod]({ + duration: options.hideDuration, + easing: options.hideEasing, + complete: function () { removeToast($toastElement); } + }); + return true; + } + return false; + } + + function createContainer(options) { + $container = $('
') + .attr('id', options.containerId) + .addClass(options.positionClass) + .attr('aria-live', 'polite') + .attr('role', 'alert'); + + $container.appendTo($(options.target)); + return $container; + } + + function getDefaults() { + return { + tapToDismiss: true, + toastClass: 'toast', + containerId: 'toast-container', + debug: false, + + showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery + showDuration: 300, + showEasing: 'swing', //swing and linear are built into jQuery + onShown: undefined, + hideMethod: 'fadeOut', + hideDuration: 1000, + hideEasing: 'swing', + onHidden: undefined, + + extendedTimeOut: 1000, + iconClasses: { + error: 'toast-error', + info: 'toast-info', + success: 'toast-success', + warning: 'toast-warning' + }, + iconClass: 'toast-info', + positionClass: 'toast-top-right', + timeOut: 5000, // Set timeOut and extendedTimeout to 0 to make it sticky + titleClass: 'toast-title', + messageClass: 'toast-message', + target: 'body', + closeHtml: '', + newestOnTop: true + }; + } + + function publish(args) { + if (!listener) { return; } + listener(args); + } + + function notify(map) { + var options = getOptions(), + iconClass = map.iconClass || options.iconClass; + + if (typeof (map.optionsOverride) !== 'undefined') { + options = $.extend(options, map.optionsOverride); + iconClass = map.optionsOverride.iconClass || iconClass; + } + + toastId++; + + $container = getContainer(options, true); + var intervalId = null, + $toastElement = $('
'), + $titleElement = $('
'), + $messageElement = $('
'), + $closeElement = $(options.closeHtml), + response = { + toastId: toastId, + state: 'visible', + startTime: new Date(), + options: options, + map: map + }; + + if (map.iconClass) { + $toastElement.addClass(options.toastClass).addClass(iconClass); + } + + if (map.title) { + $titleElement.append(map.title).addClass(options.titleClass); + $toastElement.append($titleElement); + } + + if (map.message) { + $messageElement.append(map.message).addClass(options.messageClass); + $toastElement.append($messageElement); + } + + if (options.closeButton) { + $closeElement.addClass('toast-close-button').attr("role", "button"); + $toastElement.prepend($closeElement); + } + + if (options.reposition) { + options.reposition(); + } + + $toastElement.hide(); + if (options.newestOnTop) { + $container.prepend($toastElement); + } else { + $container.append($toastElement); + } + + + $toastElement[options.showMethod]( + { duration: options.showDuration, easing: options.showEasing, complete: options.onShown } + ); + + if (options.timeOut > 0) { + intervalId = setTimeout(hideToast, options.timeOut); + } + + $toastElement.hover(stickAround, delayedHideToast); + if (!options.onclick && options.tapToDismiss) { + $toastElement.click(hideToast); + } + + if (options.closeButton && $closeElement) { + $closeElement.click(function (event) { + if( event.stopPropagation ) { + event.stopPropagation(); + } else if( event.cancelBubble !== undefined && event.cancelBubble !== true ) { + event.cancelBubble = true; + } + hideToast(true); + }); + } + + if (options.onclick) { + $toastElement.click(function () { + options.onclick(); + hideToast(); + }); + } + + publish(response); + + if (options.debug && console) { + console.log(response); + } + + return $toastElement; + + function hideToast(override) { + if ($(':focus', $toastElement).length && !override) { + return; + } + return $toastElement[options.hideMethod]({ + duration: options.hideDuration, + easing: options.hideEasing, + complete: function () { + removeToast($toastElement); + if (options.onHidden && response.state !== 'hidden') { + options.onHidden(); + } + response.state = 'hidden'; + response.endTime = new Date(); + publish(response); + } + }); + } + + function delayedHideToast() { + if (options.timeOut > 0 || options.extendedTimeOut > 0) { + intervalId = setTimeout(hideToast, options.extendedTimeOut); + } + } + + function stickAround() { + clearTimeout(intervalId); + $toastElement.stop(true, true)[options.showMethod]( + { duration: options.showDuration, easing: options.showEasing } + ); + } + } + + function getOptions() { + return $.extend({}, getDefaults(), toastr.options); + } + + function removeToast($toastElement) { + if (!$container) { $container = getContainer(); } + if ($toastElement.is(':visible')) { + return; + } + $toastElement.remove(); + $toastElement = null; + if ($container.children().length === 0) { + $container.remove(); + } + } + //#endregion + + })(); + }); +}(typeof define === 'function' && define.amd ? define : function (deps, factory) { + if (typeof module !== 'undefined' && module.exports) { //Node + module.exports = factory(require('jquery')); + } else { + window['toastr'] = factory(window['jQuery']); + } +})); \ No newline at end of file diff --git a/message_handler.js b/message_handler.js index be980a3e3..caa967fd7 100644 --- a/message_handler.js +++ b/message_handler.js @@ -106,6 +106,16 @@ var messageHandler = (function(my) { messageHandler.openMessageDialog(title, message); }; + my.notify = function(displayName, cls, message) { + toastr.info( + '' + + displayName + + '
' + + '' + + message + + ''); + }; + return my; }(messageHandler || {})); diff --git a/videolayout.js b/videolayout.js index ae539d82c..e3a2ec80b 100644 --- a/videolayout.js +++ b/videolayout.js @@ -1363,6 +1363,12 @@ var VideoLayout = (function (my) { if (resourceJid && lastNEndpoints.indexOf(resourceJid) < 0) { console.log("Remove from last N", resourceJid); + var jid = connection.emuc.findJidFromResource(resourceJid); + messageHandler.notify( + connection.emuc.members[jid].displayName || 'Somebody', + 'lastN', + 'is out of dominant speakers' + ); showPeerContainer(resourceJid, false); } }); @@ -1375,6 +1381,11 @@ var VideoLayout = (function (my) { if (!$('#participant_' + resourceJid).is(':visible')) { console.log("Add to last N", resourceJid); + var jid = connection.emuc.findJidFromResource(resourceJid); + messageHandler.notify( + connection.emuc.members[jid].displayName || 'Somebody', + 'lastN', + 'is in dominant speakers'); showPeerContainer(resourceJid, true); mediaStreams.some(function (mediaStream) {