You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Avatar.js 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. var Settings = require("../side_pannels/settings/Settings");
  2. var users = {};
  3. var activeSpeakerJid;
  4. function setVisibility(selector, show) {
  5. if (selector && selector.length > 0) {
  6. selector.css("visibility", show ? "visible" : "hidden");
  7. }
  8. }
  9. function isUserMuted(jid) {
  10. // XXX(gp) we may want to rename this method to something like
  11. // isUserStreaming, for example.
  12. if (jid && jid != xmpp.myJid()) {
  13. var resource = Strophe.getResourceFromJid(jid);
  14. if (!require("../videolayout/VideoLayout").isInLastN(resource)) {
  15. return true;
  16. }
  17. }
  18. if (!RTC.remoteStreams[jid] || !RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE]) {
  19. return null;
  20. }
  21. return RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE].muted;
  22. }
  23. function getGravatarUrl(id, size) {
  24. if(id === xmpp.myJid() || !id) {
  25. id = Settings.getSettings().uid;
  26. }
  27. return 'https://www.gravatar.com/avatar/' +
  28. MD5.hexdigest(id.trim().toLowerCase()) +
  29. "?d=wavatar&size=" + (size || "30");
  30. }
  31. var Avatar = {
  32. /**
  33. * Sets the user's avatar in the settings menu(if local user), contact list
  34. * and thumbnail
  35. * @param jid jid of the user
  36. * @param id email or userID to be used as a hash
  37. */
  38. setUserAvatar: function (jid, id) {
  39. if (id) {
  40. if (users[jid] === id) {
  41. return;
  42. }
  43. users[jid] = id;
  44. }
  45. var thumbUrl = getGravatarUrl(users[jid] || jid, 100);
  46. var contactListUrl = getGravatarUrl(users[jid] || jid);
  47. var resourceJid = Strophe.getResourceFromJid(jid);
  48. var thumbnail = $('#participant_' + resourceJid);
  49. var avatar = $('#avatar_' + resourceJid);
  50. // set the avatar in the settings menu if it is local user and get the
  51. // local video container
  52. if (jid === xmpp.myJid()) {
  53. $('#avatar').get(0).src = thumbUrl;
  54. thumbnail = $('#localVideoContainer');
  55. }
  56. // set the avatar in the contact list
  57. var contact = $('#' + resourceJid + '>img');
  58. if (contact && contact.length > 0) {
  59. contact.get(0).src = contactListUrl;
  60. }
  61. // set the avatar in the thumbnail
  62. if (avatar && avatar.length > 0) {
  63. avatar[0].src = thumbUrl;
  64. } else {
  65. if (thumbnail && thumbnail.length > 0) {
  66. avatar = document.createElement('img');
  67. avatar.id = 'avatar_' + resourceJid;
  68. avatar.className = 'userAvatar';
  69. avatar.src = thumbUrl;
  70. thumbnail.append(avatar);
  71. }
  72. }
  73. //if the user is the current active speaker - update the active speaker
  74. // avatar
  75. if (jid === activeSpeakerJid) {
  76. this.updateActiveSpeakerAvatarSrc(jid);
  77. }
  78. },
  79. /**
  80. * Hides or shows the user's avatar
  81. * @param jid jid of the user
  82. * @param show whether we should show the avatar or not
  83. * video because there is no dominant speaker and no focused speaker
  84. */
  85. showUserAvatar: function (jid, show) {
  86. if (users[jid]) {
  87. var resourceJid = Strophe.getResourceFromJid(jid);
  88. var video = $('#participant_' + resourceJid + '>video');
  89. var avatar = $('#avatar_' + resourceJid);
  90. if (jid === xmpp.myJid()) {
  91. video = $('#localVideoWrapper>video');
  92. }
  93. if (show === undefined || show === null) {
  94. show = isUserMuted(jid);
  95. }
  96. //if the user is the currently focused, the dominant speaker or if
  97. //there is no focused and no dominant speaker and the large video is
  98. //currently shown
  99. if (activeSpeakerJid === jid && require("../videolayout/VideoLayout").isLargeVideoOnTop()) {
  100. setVisibility($("#largeVideo"), !show);
  101. setVisibility($('#activeSpeaker'), show);
  102. setVisibility(avatar, false);
  103. setVisibility(video, false);
  104. } else {
  105. if (video && video.length > 0) {
  106. setVisibility(video, !show);
  107. setVisibility(avatar, show);
  108. }
  109. }
  110. }
  111. },
  112. /**
  113. * Updates the src of the active speaker avatar
  114. * @param jid of the current active speaker
  115. */
  116. updateActiveSpeakerAvatarSrc: function (jid) {
  117. if (!jid) {
  118. jid = xmpp.findJidFromResource(
  119. require("../videolayout/VideoLayout").getLargeVideoState().userResourceJid);
  120. }
  121. var avatar = $("#activeSpeakerAvatar")[0];
  122. var url = getGravatarUrl(users[jid],
  123. interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE);
  124. if (jid === activeSpeakerJid && avatar.src === url) {
  125. return;
  126. }
  127. activeSpeakerJid = jid;
  128. var isMuted = isUserMuted(jid);
  129. if (jid && isMuted !== null) {
  130. avatar.src = url;
  131. setVisibility($("#largeVideo"), !isMuted);
  132. Avatar.showUserAvatar(jid, isMuted);
  133. }
  134. }
  135. };
  136. module.exports = Avatar;