From 27d509332ad383c08dab7f95db58d6fb9e71bb53 Mon Sep 17 00:00:00 2001 From: yanas Date: Tue, 19 Jan 2016 17:10:44 -0600 Subject: [PATCH] Merges Boris Grozev's commit from Dec 8, 2015, named: Uses a single avatar URL, allows to override gravatar with a custom URL. Commit: a2c41392 --- interface_config.js | 4 +- modules/UI/UI.js | 12 +-- modules/UI/avatar/Avatar.js | 73 ++++++++----------- .../side_pannels/contactlist/ContactList.js | 6 +- .../UI/side_pannels/settings/SettingsMenu.js | 4 +- modules/UI/videolayout/LargeVideo.js | 7 +- modules/UI/videolayout/SmallVideo.js | 8 +- modules/UI/videolayout/VideoLayout.js | 8 +- 8 files changed, 55 insertions(+), 67 deletions(-) diff --git a/interface_config.js b/interface_config.js index cb0e84b48..1509f40b4 100644 --- a/interface_config.js +++ b/interface_config.js @@ -27,5 +27,7 @@ var interfaceConfig = { /** * Whether to only show the filmstrip (and hide the toolbar). */ - filmStripOnly: false + filmStripOnly: false, + RANDOM_AVATAR_URL_PREFIX: false, + RANDOM_AVATAR_URL_SUFFIX: false }; diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 8b31f42e3..0bdbd718d 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -219,7 +219,8 @@ function bindEvents() { // Resize and reposition videos in full screen mode. $(document).on( - 'webkitfullscreenchange mozfullscreenchange fullscreenchange', onResize + 'webkitfullscreenchange mozfullscreenchange fullscreenchange', + onResize ); $(window).resize(onResize); @@ -570,13 +571,12 @@ UI.setUserAvatar = function (id, email) { // update avatar Avatar.setUserAvatar(id, email); - var thumbUrl = Avatar.getThumbUrl(id); - var contactListUrl = Avatar.getContactListUrl(id); + var avatarUrl = Avatar.getAvatarUrl(id); - VideoLayout.changeUserAvatar(id, thumbUrl); - ContactList.changeUserAvatar(id, contactListUrl); + VideoLayout.changeUserAvatar(id, avatarUrl); + ContactList.changeUserAvatar(id, avatarUrl); if (APP.conference.isLocalId(id)) { - SettingsMenu.changeAvatar(thumbUrl); + SettingsMenu.changeAvatar(avatarUrl); } }; diff --git a/modules/UI/avatar/Avatar.js b/modules/UI/avatar/Avatar.js index 6e6d7f983..fca54102a 100644 --- a/modules/UI/avatar/Avatar.js +++ b/modules/UI/avatar/Avatar.js @@ -16,62 +16,47 @@ var Avatar = { } users[id] = email; } - var thumbUrl = this.getThumbUrl(id); - var contactListUrl = this.getContactListUrl(id); + var avatarUrl = this.getAvatarUrl(id); }, /** - * Returns image URL for the avatar to be displayed on large video area - * where current dominant speaker is presented. - * @param id id of the user for whom we want to obtain avatar URL + * Returns the URL of the image for the avatar of a particular user, + + identified by its jid + * @param jid */ - getDominantSpeakerUrl: function (id) { - return this.getGravatarUrl(id, 100); - }, - /** - * Returns image URL for the avatar to be displayed on small video thumbnail - * @param id id of the user for whom we want to obtain avatar URL - */ - getThumbUrl: function (id) { - return this.getGravatarUrl(id, 100); - }, - /** - * Returns the URL for the avatar to be displayed as contactlist item - * @param id id of the user for whom we want to obtain avatar URL - */ - getContactListUrl: function (id) { - return this.getGravatarUrl(id, 30); - }, - getGravatarUrl: function (id, size) { - if (!id) { - console.error("Get gravatar - id is undefined"); - return null; - } + getAvatarUrl: function (jid) { + if (config.disableThirdPartyRequests) { + return 'images/avatar2.png'; + } else { + if (!jid) { + console.error("Get avatar - jid is undefined"); + return null; + } + var id = users[jid]; - // Default to using gravatar. - var urlPref = 'https://www.gravatar.com/avatar/'; - var urlSuf = "?d=wavatar&size=" + (size || "30"); + // If the ID looks like an email, we'll use gravatar. + // Otherwise, it's a random avatar, and we'll use the configured + // URL. + var random = !id || id.indexOf('@') < 0; - // If we have a real email we will use it for the gravatar and we'll - // use the pre-configured URL if any. Otherwise, it's a random avatar. - var email = users[id]; - if (email && email.indexOf('@')) { - id = email; + if (!id) { + console.warn( + "No avatar stored yet for " + jid + " - using JID as ID"); + id = jid; + } + id = MD5.hexdigest(id.trim().toLowerCase()); - if (interfaceConfig.RANDOM_AVATAR_URL_PREFIX) { + // Default to using gravatar. + var urlPref = 'https://www.gravatar.com/avatar/'; + var urlSuf = "?d=wavatar&size=100"; + + if (random && interfaceConfig.RANDOM_AVATAR_URL_PREFIX) { urlPref = interfaceConfig.RANDOM_AVATAR_URL_PREFIX; urlSuf = interfaceConfig.RANDOM_AVATAR_URL_SUFFIX; } - } - if (!config.disableThirdPartyRequests) { - return urlPref + - MD5.hexdigest(id.trim().toLowerCase()) + - urlSuf; - } else { - return 'images/avatar2.png'; + return urlPref + id + urlSuf; } } - }; diff --git a/modules/UI/side_pannels/contactlist/ContactList.js b/modules/UI/side_pannels/contactlist/ContactList.js index ca4e8530f..05236a849 100644 --- a/modules/UI/side_pannels/contactlist/ContactList.js +++ b/modules/UI/side_pannels/contactlist/ContactList.js @@ -33,7 +33,7 @@ function updateNumberOfParticipants(delta) { function createAvatar(jid) { let avatar = document.createElement('img'); avatar.className = "icon-avatar avatar"; - avatar.src = Avatar.getContactListUrl(jid); + avatar.src = Avatar.getAvatarUrl(jid); return avatar; } @@ -162,11 +162,11 @@ var ContactList = { } }, - changeUserAvatar (id, contactListUrl) { + changeUserAvatar (id, avatarUrl) { // set the avatar in the contact list let contact = $(`#${id}>img`); if (contact.length > 0) { - contact.attr('src', contactListUrl); + contact.attr('src', avatarUrl); } } }; diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js index 77413b844..5bc06272d 100644 --- a/modules/UI/side_pannels/settings/SettingsMenu.js +++ b/modules/UI/side_pannels/settings/SettingsMenu.js @@ -92,7 +92,7 @@ export default { } }, - changeAvatar (thumbUrl) { - $('#avatar').attr('src', thumbUrl); + changeAvatar (avatarUrl) { + $('#avatar').attr('src', avatarUrl); } }; diff --git a/modules/UI/videolayout/LargeVideo.js b/modules/UI/videolayout/LargeVideo.js index cfe063f13..64400e04c 100644 --- a/modules/UI/videolayout/LargeVideo.js +++ b/modules/UI/videolayout/LargeVideo.js @@ -370,7 +370,8 @@ export default class LargeVideoManager { resize (animate) { // resize all containers - Object.keys(this.containers).forEach(type => this.resizeContainer(type, animate)); + Object.keys(this.containers) + .forEach(type => this.resizeContainer(type, animate)); this.$container.animate({ width: this.width, @@ -393,8 +394,8 @@ export default class LargeVideoManager { /** * Updates the src of the dominant speaker avatar */ - updateAvatar (thumbUrl) { - $("#dominantSpeakerAvatar").attr('src', thumbUrl); + updateAvatar (avatarUrl) { + $("#dominantSpeakerAvatar").attr('src', avatarUrl); } showAvatar (show) { diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index dbff64847..fa968be46 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -338,7 +338,7 @@ SmallVideo.prototype.updateView = function () { if (!this.hasAvatar) { if (this.id) { // Init avatar - this.avatarChanged(Avatar.getThumbUrl(this.id)); + this.avatarChanged(Avatar.getAvatarUrl(this.id)); } else { console.error("Unable to init avatar - no id", this); return; @@ -380,20 +380,20 @@ SmallVideo.prototype.updateView = function () { } }; -SmallVideo.prototype.avatarChanged = function (thumbUrl) { +SmallVideo.prototype.avatarChanged = function (avatarUrl) { var thumbnail = $('#' + this.videoSpanId); var avatar = $('#avatar_' + this.id); this.hasAvatar = true; // set the avatar in the thumbnail if (avatar && avatar.length > 0) { - avatar[0].src = thumbUrl; + avatar[0].src = avatarUrl; } else { if (thumbnail && thumbnail.length > 0) { avatar = document.createElement('img'); avatar.id = 'avatar_' + this.id; avatar.className = 'userAvatar'; - avatar.src = thumbUrl; + avatar.src = avatarUrl; thumbnail.append(avatar); } } diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 4ec6e3f30..cb59dd58f 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -910,17 +910,17 @@ var VideoLayout = { } }, - changeUserAvatar (id, thumbUrl) { + changeUserAvatar (id, avatarUrl) { var smallVideo = VideoLayout.getSmallVideo(id); if (smallVideo) { - smallVideo.avatarChanged(thumbUrl); + smallVideo.avatarChanged(avatarUrl); } else { console.warn( "Missed avatar update - no small video yet for " + id ); } if (this.isCurrentlyOnLarge(id)) { - largeVideo.updateAvatar(thumbUrl); + largeVideo.updateAvatar(avatarUrl); } }, @@ -988,7 +988,7 @@ var VideoLayout = { oldSmallVideo && oldSmallVideo.updateView(); // change the avatar url on large - largeVideo.updateAvatar(Avatar.getThumbUrl(smallVideo.id)); + largeVideo.updateAvatar(Avatar.getAvatarUrl(smallVideo.id)); // show the avatar on large if needed largeVideo.showAvatar(smallVideo.stream.isMuted()); });