jitsi_mod/modules/UI/side_pannels/contactlist/ContactList.js

/* global $, APP */
import Avatar from '../../avatar/Avatar';

var numberOfContacts = 0;
var notificationInterval;

/**
 * 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)
 */
function updateNumberOfParticipants(delta) {
    numberOfContacts += delta;
    if (numberOfContacts === 1) {
        // when the user is alone we don't show the number of participants
        $("#numberOfParticipants").text('');
        ContactList.setVisualNotification(false);
    } else if (numberOfContacts > 1) {
        ContactList.setVisualNotification(!ContactList.isVisible());
        $("#numberOfParticipants").text(numberOfContacts);
    } else {
        console.error("Invalid number of participants: " + numberOfContacts);
    }
}

/**
 * Creates the avatar element.
 *
 * @return {object} the newly created avatar element
 */
function createAvatar(jid) {
    var avatar = document.createElement('img');
    avatar.className = "icon-avatar avatar";
    avatar.src = Avatar.getContactListUrl(jid);

    return avatar;
}

/**
 * Creates the display name paragraph.
 *
 * @param displayName the display name to set
 */
function createDisplayNameParagraph(key, displayName) {
    var p = document.createElement('p');
    if (displayName) {
        p.innerText = displayName;
    } else if(key) {
        p.setAttribute("data-i18n",key);
        p.innerText = APP.translation.translateString(key);
    }

    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;
}

/**
 * Contact list.
 */
var ContactList = {
    /**
     * Indicates if the chat is currently visible.
     *
     * @return <tt>true</tt> if the chat is currently visible, <tt>false</tt> -
     * otherwise
     */
    isVisible: function () {
        return $('#contactlist').is(":visible");
    },

    /**
     * Adds a contact for the given id if such doesn't yet exist.
     *
     */
    ensureAddContact: function (id) {
        if (!contactElExists(id)) {
            ContactList.addContact(id);
        }
    },

    /**
     * Adds a contact for the given id.
     *
     */
    addContact: function (id) {
        var contactlist = $('#contacts');

        var newContact = document.createElement('li');
        newContact.id = id;
        newContact.className = "clickable";
        newContact.onclick = function (event) {
            if (event.currentTarget.className === "clickable") {
                $(ContactList).trigger('contactclicked', [id]);
            }
        };

        newContact.appendChild(createAvatar(id));
        newContact.appendChild(createDisplayNameParagraph("participant"));

        if (APP.conference.isLocalId(id)) {
            contactlist.prepend(newContact);
        } else {
            contactlist.append(newContact);
        }
        updateNumberOfParticipants(1);
    },

    /**
     * Removes a contact for the given id.
     *
     */
    removeContact: function (id) {
        let contact = getContactEl(id);

        if (contact.length > 0) {
            contact.remove();
            updateNumberOfParticipants(-1);
        }
    },

    setVisualNotification: function (show, stopGlowingIn) {
        var glower = $('#contactListButton');

        if (show && !notificationInterval) {
            notificationInterval = window.setInterval(function () {
                glower.toggleClass('active glowing');
            }, 800);
        }
        else if (!show && notificationInterval) {
            stopGlowing(glower);
        }
        if (stopGlowingIn) {
            setTimeout(function () {
                stopGlowing(glower);
            }, stopGlowingIn);
        }
    },

    setClickable: function (id, isClickable) {
        getContactEl(id).toggleClass('clickable', isClickable);
    },

    onDisplayNameChange: function (id, displayName) {
        if (id === 'localVideoContainer') {
            id = APP.conference.localId;
        }
        var contactName = $(`#contacts #${id}>p`);

        if (displayName) {
            contactName.html(displayName);
        }
    },

    changeUserAvatar: function (id, contactListUrl) {
        // set the avatar in the contact list
        var contact = $(`#${id}>img`);
        if (contact.length > 0) {
            contact.attr('src', contactListUrl);
        }
    }
};

module.exports = ContactList;