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.

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