選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

avatar.js 5.0KB

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