jiti-meet/modules/UI/side_pannels/contactlist/ContactList.js

175 lines
4.4 KiB
JavaScript
Raw Normal View History

/* global $, APP */
import Avatar from '../../avatar/Avatar';
2015-12-14 15:40:30 +00:00
import UIEvents from '../../../../service/UI/UIEvents';
2015-12-14 15:40:30 +00:00
let numberOfContacts = 0;
let notificationInterval;
2015-01-07 14:54:03 +00:00
/**
2015-01-07 14:54:03 +00:00
* Updates the number of participants in the contact list button and sets
* the glow
* @param delta indicates whether a new user has joined (1) or someone has
* left(-1)
*/
2015-01-07 14:54:03 +00:00
function updateNumberOfParticipants(delta) {
numberOfContacts += delta;
if (numberOfContacts === 1) {
// when the user is alone we don't show the number of participants
2015-01-07 14:54:03 +00:00
$("#numberOfParticipants").text('');
ContactList.setVisualNotification(false);
} else if (numberOfContacts > 1) {
ContactList.setVisualNotification(!ContactList.isVisible());
2015-01-07 14:54:03 +00:00
$("#numberOfParticipants").text(numberOfContacts);
} else {
console.error("Invalid number of participants: " + numberOfContacts);
2015-01-07 14:54:03 +00:00
}
}
2015-01-07 14:54:03 +00:00
/**
* Creates the avatar element.
*
* @return {object} the newly created avatar element
2015-01-07 14:54:03 +00:00
*/
function createAvatar(jid) {
2015-12-14 15:40:30 +00:00
let avatar = document.createElement('img');
2015-01-07 14:54:03 +00:00
avatar.className = "icon-avatar avatar";
avatar.src = Avatar.getAvatarUrl(jid);
2015-01-07 14:54:03 +00:00
return avatar;
}
/**
* Creates the display name paragraph.
*
* @param displayName the display name to set
*/
2015-03-09 15:50:13 +00:00
function createDisplayNameParagraph(key, displayName) {
2015-12-14 15:40:30 +00:00
let p = document.createElement('p');
if (displayName) {
p.innerHTML = displayName;
} else if(key) {
2015-03-09 15:50:13 +00:00
p.setAttribute("data-i18n",key);
p.innerHTML = APP.translation.translateString(key);
2015-03-09 15:50:13 +00:00
}
2015-01-07 14:54:03 +00:00
return p;
}
function stopGlowing(glower) {
window.clearInterval(notificationInterval);
notificationInterval = false;
glower.removeClass('glowing');
if (!ContactList.isVisible()) {
glower.removeClass('active');
}
}
function getContactEl (id) {
return $(`#contacts>li[id="${id}"]`);
}
function contactElExists (id) {
return getContactEl(id).length > 0;
}
2015-01-07 14:54:03 +00:00
/**
* Contact list.
*/
var ContactList = {
2015-12-14 15:40:30 +00:00
init (emitter) {
this.emitter = emitter;
},
/**
* Indicates if the chat is currently visible.
*
* @return <tt>true</tt> if the chat is currently visible, <tt>false</tt> -
* otherwise
*/
2015-12-14 15:40:30 +00:00
isVisible () {
return $('#contactlist').is(":visible");
2015-01-07 14:54:03 +00:00
},
/**
* Adds a contact for the given id.
*
*/
2015-12-14 15:40:30 +00:00
addContact (id) {
let contactlist = $('#contacts');
2015-12-14 15:40:30 +00:00
let newContact = document.createElement('li');
newContact.id = id;
newContact.className = "clickable";
2015-12-14 15:40:30 +00:00
newContact.onclick = (event) => {
2015-01-07 14:54:03 +00:00
if (event.currentTarget.className === "clickable") {
2015-12-14 15:40:30 +00:00
this.emitter.emit(UIEvents.CONTACT_CLICKED, id);
}
};
newContact.appendChild(createAvatar(id));
2015-03-09 15:50:13 +00:00
newContact.appendChild(createDisplayNameParagraph("participant"));
if (APP.conference.isLocalId(id)) {
2015-06-19 13:45:39 +00:00
contactlist.prepend(newContact);
} else {
2015-06-19 13:45:39 +00:00
contactlist.append(newContact);
}
updateNumberOfParticipants(1);
2015-01-07 14:54:03 +00:00
},
/**
* Removes a contact for the given id.
*
*/
2015-12-14 15:40:30 +00:00
removeContact (id) {
let contact = getContactEl(id);
if (contact.length > 0) {
contact.remove();
updateNumberOfParticipants(-1);
}
2015-01-07 14:54:03 +00:00
},
2015-12-14 15:40:30 +00:00
setVisualNotification (show, stopGlowingIn) {
let glower = $('#contactListButton');
if (show && !notificationInterval) {
notificationInterval = window.setInterval(function () {
glower.toggleClass('active glowing');
}, 800);
2015-12-14 15:40:30 +00:00
} else if (!show && notificationInterval) {
2015-01-07 14:54:03 +00:00
stopGlowing(glower);
}
2015-01-07 14:54:03 +00:00
if (stopGlowingIn) {
setTimeout(function () {
stopGlowing(glower);
}, stopGlowingIn);
}
2015-01-07 14:54:03 +00:00
},
2015-12-14 15:40:30 +00:00
setClickable (id, isClickable) {
getContactEl(id).toggleClass('clickable', isClickable);
},
2015-12-14 15:40:30 +00:00
onDisplayNameChange (id, displayName) {
2015-12-01 13:41:58 +00:00
if (id === 'localVideoContainer') {
2015-12-03 13:11:01 +00:00
id = APP.conference.localId;
2015-12-01 13:41:58 +00:00
}
2015-12-14 15:40:30 +00:00
let contactName = $(`#contacts #${id}>p`);
if (displayName) {
contactName.html(displayName);
2015-12-01 13:41:58 +00:00
}
},
changeUserAvatar (id, avatarUrl) {
// set the avatar in the contact list
2015-12-14 15:40:30 +00:00
let contact = $(`#${id}>img`);
if (contact.length > 0) {
contact.attr('src', avatarUrl);
}
2015-01-07 14:54:03 +00:00
}
};
2015-12-14 15:40:30 +00:00
export default ContactList;