jiti-meet/avatar.js

var Avatar = (function(my) {
    var users = {};
    var activeSpeakerJid;
    /**
     * Sets the user's avatar in the settings menu(if local user), contact list
     * and thumbnail
     * @param jid jid of the user
     * @param id email or userID to be used as a hash
     */
    my.setUserAvatar = function(jid, id) {
        if(id) {
            if(users[jid] === id) {
                return;
            }
            users[jid] = id;
        }
        var thumbUrl = getGravatarUrl(users[jid] || jid, 100);
        var contactListUrl = getGravatarUrl(users[jid] || jid);
        var resourceJid = Strophe.getResourceFromJid(jid);
        var thumbnail = $('#participant_' + resourceJid);
        var avatar = $('#avatar_' + resourceJid);

        // set the avatar in the settings menu if it is local user and get the
        // local video container
        if(jid === connection.emuc.myroomjid) {
            $('#avatar').get(0).src = thumbUrl;
            thumbnail = $('#localVideoContainer');
        }

        // set the avatar in the contact list
        var contact = $('#' + resourceJid + '>img');
        if(contact && contact.length > 0) {
            contact.get(0).src = contactListUrl;
        }

        // set the avatar in the thumbnail
        if(avatar && avatar.length > 0) {
            avatar[0].src = thumbUrl;
        } else {
            if (thumbnail && thumbnail.length > 0) {
                avatar = document.createElement('img');
                avatar.id = 'avatar_' + resourceJid;
                avatar.className = 'userAvatar';
                avatar.src = thumbUrl;
                thumbnail.append(avatar);
            }
        }

        //if the user is the current active speaker - update the active speaker
        // avatar
        if(jid === activeSpeakerJid) {
            Avatar.updateActiveSpeakerAvatarSrc(jid);
        }
    };

    /**
     * Hides or shows the user's avatar
     * @param jid jid of the user
     * @param show whether we should show the avatar or not
     * video because there is no dominant speaker and no focused speaker
     */
    my.showUserAvatar = function(jid, show) {
        if(users[jid]) {
            var resourceJid = Strophe.getResourceFromJid(jid);
            var video = $('#participant_' + resourceJid + '>video');
            var avatar = $('#avatar_' + resourceJid);

            if(jid === connection.emuc.myroomjid) {
                video = $('#localVideoWrapper>video');
            }
            if(show === undefined || show === null) {
                show = isUserMuted(jid);
            }

            //if the user is the currently focused, the dominant speaker or if
            //there is no focused and no dominant speaker and the large video is
            //currently shown
            if (activeSpeakerJid === jid && VideoLayout.isLargeVideoOnTop()) {
                setVisibility($("#largeVideo"), !show);
                setVisibility($('#activeSpeaker'), show);
                setVisibility(avatar, false);
                setVisibility(video, false);
            } else {
                if (video && video.length > 0) {
                    setVisibility(video, !show);
                    setVisibility(avatar, show);
                }
            }
        }
    };

    /**
     * Updates the src of the active speaker avatar
     * @param jid of the current active speaker
     */
    my.updateActiveSpeakerAvatarSrc = function(jid) {
        if(!jid) {
            jid = connection.emuc.findJidFromResource(
                    VideoLayout.getLargeVideoState().userResourceJid);
        }
        var avatar = $("#activeSpeakerAvatar")[0];
        var url = getGravatarUrl(users[jid],
            interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE);
        if(jid === activeSpeakerJid && avatar.src === url) {
            return;
        }
        activeSpeakerJid = jid;
        var isMuted = isUserMuted(jid);
        if(jid && isMuted !== null) {
            avatar.src = url;
            setVisibility($("#largeVideo"), !isMuted);
            Avatar.showUserAvatar(jid, isMuted);
        }
    };

    function setVisibility(selector, show) {
        if (selector && selector.length > 0) {
            selector.css("visibility", show ? "visible" : "hidden");
        }
    }

    function isUserMuted(jid) {
        // XXX(gp) we may want to rename this method to something like
        // isUserStreaming, for example.
        if (jid && jid != connection.emuc.myroomjid) {
            var resource = Strophe.getResourceFromJid(jid);
            if (!VideoLayout.isInLastN(resource)) {
                return true;
            }
        }

        if (!RTC.remoteStreams[jid] || !RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE]) {
            return null;
        }
        return RTC.remoteStreams[jid][MediaStream.VIDEO_TYPE].muted;
    }

    function getGravatarUrl(id, size) {
        if(id === connection.emuc.myroomjid || !id) {
            id = SettingsMenu.getUID();
        }
        return 'https://www.gravatar.com/avatar/' +
            MD5.hexdigest(id.trim().toLowerCase()) +
            "?d=wavatar&size=" + (size || "30");
    }

    return my;
}(Avatar || {}));