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.

LocalVideo.js 6.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. /* global $, interfaceConfig, APP, JitsiMeetJS */
  2. import ConnectionIndicator from "./ConnectionIndicator";
  3. import UIUtil from "../util/UIUtil";
  4. import UIEvents from "../../../service/UI/UIEvents";
  5. import SmallVideo from "./SmallVideo";
  6. var LargeVideo = require("./LargeVideo");
  7. const RTCUIUtils = JitsiMeetJS.util.RTCUIHelper;
  8. const TrackEvents = JitsiMeetJS.events.track;
  9. function LocalVideo(VideoLayout, emitter) {
  10. this.videoSpanId = "localVideoContainer";
  11. this.container = $("#localVideoContainer").get(0);
  12. this.bindHoverHandler();
  13. this.VideoLayout = VideoLayout;
  14. this.flipX = true;
  15. this.isLocal = true;
  16. this.emitter = emitter;
  17. Object.defineProperty(this, 'id', {
  18. get: function () {
  19. return APP.conference.localId;
  20. }
  21. });
  22. SmallVideo.call(this);
  23. }
  24. LocalVideo.prototype = Object.create(SmallVideo.prototype);
  25. LocalVideo.prototype.constructor = LocalVideo;
  26. /**
  27. * Creates the edit display name button.
  28. *
  29. * @returns {object} the edit button
  30. */
  31. function createEditDisplayNameButton() {
  32. var editButton = document.createElement('a');
  33. editButton.className = 'displayname';
  34. UIUtil.setTooltip(editButton,
  35. "videothumbnail.editnickname",
  36. "top");
  37. editButton.innerHTML = '<i class="fa fa-pencil"></i>';
  38. return editButton;
  39. }
  40. /**
  41. * Sets the display name for the given video span id.
  42. */
  43. LocalVideo.prototype.setDisplayName = function(displayName, key) {
  44. if (!this.container) {
  45. console.warn(
  46. "Unable to set displayName - " + this.videoSpanId +
  47. " does not exist");
  48. return;
  49. }
  50. var nameSpan = $('#' + this.videoSpanId + '>span.displayname');
  51. var defaultLocalDisplayName = APP.translation.generateTranslationHTML(
  52. interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
  53. var meHTML;
  54. // If we already have a display name for this video.
  55. if (nameSpan.length > 0) {
  56. if (nameSpan.text() !== displayName) {
  57. if (displayName && displayName.length > 0) {
  58. meHTML = APP.translation.generateTranslationHTML("me");
  59. $('#localDisplayName').html(displayName + ' (' + meHTML + ')');
  60. } else {
  61. $('#localDisplayName').html(defaultLocalDisplayName);
  62. }
  63. }
  64. this.updateView();
  65. } else {
  66. var editButton = createEditDisplayNameButton();
  67. nameSpan = document.createElement('span');
  68. nameSpan.className = 'displayname';
  69. $('#' + this.videoSpanId)[0].appendChild(nameSpan);
  70. if (displayName && displayName.length > 0) {
  71. meHTML = APP.translation.generateTranslationHTML("me");
  72. nameSpan.innerHTML = displayName + meHTML;
  73. }
  74. else {
  75. nameSpan.innerHTML = defaultLocalDisplayName;
  76. }
  77. nameSpan.id = 'localDisplayName';
  78. this.container.appendChild(editButton);
  79. //translates popover of edit button
  80. APP.translation.translateElement($("a.displayname"));
  81. var editableText = document.createElement('input');
  82. editableText.className = 'displayname';
  83. editableText.type = 'text';
  84. editableText.id = 'editDisplayName';
  85. if (displayName && displayName.length) {
  86. editableText.value = displayName;
  87. }
  88. var defaultNickname = APP.translation.translateString(
  89. "defaultNickname", {name: "Jane Pink"});
  90. editableText.setAttribute('style', 'display:none;');
  91. editableText.setAttribute('data-18n',
  92. '[placeholder]defaultNickname');
  93. editableText.setAttribute("data-i18n-options",
  94. JSON.stringify({name: "Jane Pink"}));
  95. editableText.setAttribute("placeholder", defaultNickname);
  96. this.container.appendChild(editableText);
  97. var self = this;
  98. $('#localVideoContainer .displayname')
  99. .bind("click", function (e) {
  100. var editDisplayName = $('#editDisplayName');
  101. e.preventDefault();
  102. e.stopPropagation();
  103. $('#localDisplayName').hide();
  104. editDisplayName.show();
  105. editDisplayName.focus();
  106. editDisplayName.select();
  107. editDisplayName.one("focusout", function (e) {
  108. self.VideoLayout.inputDisplayNameHandler(this.value);
  109. $('#editDisplayName').hide();
  110. });
  111. editDisplayName.on('keydown', function (e) {
  112. if (e.keyCode === 13) {
  113. e.preventDefault();
  114. $('#editDisplayName').hide();
  115. // focusout handler will save display name
  116. }
  117. });
  118. });
  119. }
  120. };
  121. LocalVideo.prototype.inputDisplayNameHandler = function (name) {
  122. this.emitter.emit(UIEvents.NICKNAME_CHANGED, UIUtil.escapeHtml(name));
  123. };
  124. LocalVideo.prototype.createConnectionIndicator = function() {
  125. if(this.connectionIndicator)
  126. return;
  127. this.connectionIndicator = new ConnectionIndicator(this, null);
  128. };
  129. LocalVideo.prototype.changeVideo = function (stream) {
  130. this.videoStream = stream;
  131. let localVideoClick = (event) => {
  132. // FIXME: with Temasys plugin event arg is not an event, but
  133. // the clicked object itself, so we have to skip this call
  134. if (event.stopPropagation) {
  135. event.stopPropagation();
  136. }
  137. this.VideoLayout.handleVideoThumbClicked(true, this.id);
  138. };
  139. let localVideoContainerSelector = $('#localVideoContainer');
  140. localVideoContainerSelector.off('click');
  141. localVideoContainerSelector.on('click', localVideoClick);
  142. this.flipX = stream.videoType != "desktop";
  143. let localVideo = document.createElement('video');
  144. localVideo.id = 'localVideo_' + stream.getId();
  145. RTCUIUtils.setAutoPlay(localVideo, true);
  146. RTCUIUtils.setVolume(localVideo, 0);
  147. var localVideoContainer = document.getElementById('localVideoWrapper');
  148. // Put the new video always in front
  149. UIUtil.prependChild(localVideoContainer, localVideo);
  150. // Add click handler to both video and video wrapper elements in case
  151. // there's no video.
  152. // onclick has to be used with Temasys plugin
  153. localVideo.onclick = localVideoClick;
  154. if (this.flipX) {
  155. $(localVideo).addClass("flipVideoX");
  156. }
  157. // Attach WebRTC stream
  158. localVideo = stream.attach(localVideo);
  159. let endedHandler = () => {
  160. localVideoContainer.removeChild(localVideo);
  161. this.VideoLayout.updateRemovedVideo(this.id);
  162. stream.off(TrackEvents.TRACK_STOPPED, endedHandler);
  163. };
  164. stream.on(TrackEvents.TRACK_STOPPED, endedHandler);
  165. };
  166. export default LocalVideo;