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.

SmallVideo.js 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649
  1. /* global $, JitsiMeetJS, interfaceConfig */
  2. import Avatar from "../avatar/Avatar";
  3. import UIUtil from "../util/UIUtil";
  4. import UIEvents from "../../../service/UI/UIEvents";
  5. import AudioLevels from "../audio_levels/AudioLevels";
  6. const RTCUIHelper = JitsiMeetJS.util.RTCUIHelper;
  7. /**
  8. * Display mode constant used when video is being displayed on the small video.
  9. * @type {number}
  10. * @constant
  11. */
  12. const DISPLAY_VIDEO = 0;
  13. /**
  14. * Display mode constant used when the user's avatar is being displayed on
  15. * the small video.
  16. * @type {number}
  17. * @constant
  18. */
  19. const DISPLAY_AVATAR = 1;
  20. /**
  21. * Display mode constant used when neither video nor avatar is being displayed
  22. * on the small video. And we just show the display name.
  23. * @type {number}
  24. * @constant
  25. */
  26. const DISPLAY_BLACKNESS_WITH_NAME = 2;
  27. /**
  28. * Display mode constant used when video is displayed and display name
  29. * at the same time.
  30. * @type {number}
  31. * @constant
  32. */
  33. const DISPLAY_VIDEO_WITH_NAME = 3;
  34. /**
  35. * Display mode constant used when neither video nor avatar is being displayed
  36. * on the small video. And we just show the display name.
  37. * @type {number}
  38. * @constant
  39. */
  40. const DISPLAY_AVATAR_WITH_NAME = 4;
  41. function SmallVideo(VideoLayout) {
  42. this.isAudioMuted = false;
  43. this.hasAvatar = false;
  44. this.isVideoMuted = false;
  45. this.videoStream = null;
  46. this.audioStream = null;
  47. this.VideoLayout = VideoLayout;
  48. this.videoIsHovered = false;
  49. this.hideDisplayName = false;
  50. // we can stop updating the thumbnail
  51. this.disableUpdateView = false;
  52. }
  53. /**
  54. * Returns the identifier of this small video.
  55. *
  56. * @returns the identifier of this small video
  57. */
  58. SmallVideo.prototype.getId = function () {
  59. return this.id;
  60. };
  61. /* Indicates if this small video is currently visible.
  62. *
  63. * @return <tt>true</tt> if this small video isn't currently visible and
  64. * <tt>false</tt> - otherwise.
  65. */
  66. SmallVideo.prototype.isVisible = function () {
  67. return $('#' + this.videoSpanId).is(':visible');
  68. };
  69. /**
  70. * Enables / disables the device availability icons for this small video.
  71. * @param {enable} set to {true} to enable and {false} to disable
  72. */
  73. SmallVideo.prototype.enableDeviceAvailabilityIcons = function (enable) {
  74. if (typeof enable === "undefined")
  75. return;
  76. this.deviceAvailabilityIconsEnabled = enable;
  77. };
  78. /**
  79. * Sets the device "non" availability icons.
  80. * @param devices the devices, which will be checked for availability
  81. */
  82. SmallVideo.prototype.setDeviceAvailabilityIcons = function (devices) {
  83. if (!this.deviceAvailabilityIconsEnabled)
  84. return;
  85. if(!this.container)
  86. return;
  87. var noMic = $("#" + this.videoSpanId + " > .noMic");
  88. var noVideo = $("#" + this.videoSpanId + " > .noVideo");
  89. noMic.remove();
  90. noVideo.remove();
  91. if (!devices.audio) {
  92. this.container.appendChild(
  93. document.createElement("div")).setAttribute("class", "noMic");
  94. }
  95. if (!devices.video) {
  96. this.container.appendChild(
  97. document.createElement("div")).setAttribute("class", "noVideo");
  98. }
  99. if (!devices.audio && !devices.video) {
  100. noMic.css("background-position", "75%");
  101. noVideo.css("background-position", "25%");
  102. noVideo.css("background-color", "transparent");
  103. }
  104. };
  105. /**
  106. * Sets the type of the video displayed by this instance.
  107. * Note that this is a string without clearly defined or checked values, and
  108. * it is NOT one of the strings defined in service/RTC/VideoType in
  109. * lib-jitsi-meet.
  110. * @param videoType 'camera' or 'desktop', or 'sharedvideo'.
  111. */
  112. SmallVideo.prototype.setVideoType = function (videoType) {
  113. this.videoType = videoType;
  114. };
  115. /**
  116. * Returns the type of the video displayed by this instance.
  117. * Note that this is a string without clearly defined or checked values, and
  118. * it is NOT one of the strings defined in service/RTC/VideoType in
  119. * lib-jitsi-meet.
  120. * @returns {String} 'camera', 'screen', 'sharedvideo', or undefined.
  121. */
  122. SmallVideo.prototype.getVideoType = function () {
  123. return this.videoType;
  124. };
  125. /**
  126. * Creates an audio or video element for a particular MediaStream.
  127. */
  128. SmallVideo.createStreamElement = function (stream) {
  129. let isVideo = stream.isVideoTrack();
  130. let element = isVideo
  131. ? document.createElement('video')
  132. : document.createElement('audio');
  133. if (isVideo) {
  134. element.setAttribute("muted", "true");
  135. }
  136. RTCUIHelper.setAutoPlay(element, true);
  137. element.id = SmallVideo.getStreamElementID(stream);
  138. return element;
  139. };
  140. /**
  141. * Returns the element id for a particular MediaStream.
  142. */
  143. SmallVideo.getStreamElementID = function (stream) {
  144. let isVideo = stream.isVideoTrack();
  145. return (isVideo ? 'remoteVideo_' : 'remoteAudio_') + stream.getId();
  146. };
  147. /**
  148. * Configures hoverIn/hoverOut handlers. Depends on connection indicator.
  149. */
  150. SmallVideo.prototype.bindHoverHandler = function () {
  151. // Add hover handler
  152. $(this.container).hover(
  153. () => {
  154. this.videoIsHovered = true;
  155. this.updateView();
  156. },
  157. () => {
  158. this.videoIsHovered = false;
  159. this.updateView();
  160. }
  161. );
  162. if (this.connectionIndicator) {
  163. this.connectionIndicator.addPopoverHoverListener(
  164. () => {
  165. this.updateView();
  166. });
  167. }
  168. };
  169. /**
  170. * Updates the data for the indicator
  171. * @param id the id of the indicator
  172. * @param percent the percent for connection quality
  173. * @param object the data
  174. */
  175. SmallVideo.prototype.updateStatsIndicator = function (percent, object) {
  176. if(this.connectionIndicator)
  177. this.connectionIndicator.updateConnectionQuality(percent, object);
  178. };
  179. SmallVideo.prototype.hideIndicator = function () {
  180. if(this.connectionIndicator)
  181. this.connectionIndicator.hideIndicator();
  182. };
  183. /**
  184. * Shows / hides the audio muted indicator over small videos.
  185. *
  186. * @param {boolean} isMuted indicates if the muted element should be shown
  187. * or hidden
  188. */
  189. SmallVideo.prototype.showAudioIndicator = function(isMuted) {
  190. this.getAudioMutedIndicator().classList.toggle('hide', !isMuted);
  191. this.isAudioMuted = isMuted;
  192. };
  193. /**
  194. * Returns the audio muted indicator jquery object. If it doesn't exists -
  195. * creates it.
  196. *
  197. * @returns {jQuery|HTMLElement} the audio muted indicator
  198. */
  199. SmallVideo.prototype.getAudioMutedIndicator = function () {
  200. var selector = '#' + this.videoSpanId + ' .audioMuted';
  201. var audioMutedSpan = document.querySelector(selector);
  202. if (audioMutedSpan) {
  203. return audioMutedSpan;
  204. }
  205. audioMutedSpan = document.createElement('span');
  206. audioMutedSpan.className = 'audioMuted toolbar-icon';
  207. UIUtil.setTooltip(audioMutedSpan,
  208. "videothumbnail.mute",
  209. "top");
  210. this.container
  211. .querySelector('.videocontainer__toolbar')
  212. .appendChild(audioMutedSpan);
  213. var mutedIndicator = document.createElement('i');
  214. mutedIndicator.className = 'icon-mic-disabled';
  215. audioMutedSpan.appendChild(mutedIndicator);
  216. return audioMutedSpan;
  217. };
  218. /**
  219. * Shows video muted indicator over small videos and disables/enables avatar
  220. * if video muted.
  221. *
  222. * @param {boolean} isMuted indicates if we should set the view to muted view
  223. * or not
  224. */
  225. SmallVideo.prototype.setVideoMutedView = function(isMuted) {
  226. this.isVideoMuted = isMuted;
  227. this.updateView();
  228. this.getVideoMutedIndicator().classList.toggle('hide', !isMuted);
  229. };
  230. /**
  231. * Returns the video muted indicator jquery object. If it doesn't exists -
  232. * creates it.
  233. *
  234. * @returns {jQuery|HTMLElement} the video muted indicator
  235. */
  236. SmallVideo.prototype.getVideoMutedIndicator = function () {
  237. var selector = '#' + this.videoSpanId + ' .videoMuted';
  238. var videoMutedSpan = document.querySelector(selector);
  239. if (videoMutedSpan) {
  240. return videoMutedSpan;
  241. }
  242. videoMutedSpan = document.createElement('span');
  243. videoMutedSpan.className = 'videoMuted toolbar-icon';
  244. this.container
  245. .querySelector('.videocontainer__toolbar')
  246. .appendChild(videoMutedSpan);
  247. var mutedIndicator = document.createElement('i');
  248. mutedIndicator.className = 'icon-camera-disabled';
  249. UIUtil.setTooltip(mutedIndicator,
  250. "videothumbnail.videomute",
  251. "top");
  252. videoMutedSpan.appendChild(mutedIndicator);
  253. return videoMutedSpan;
  254. };
  255. /**
  256. * Adds the element indicating the moderator(owner) of the conference.
  257. */
  258. SmallVideo.prototype.addModeratorIndicator = function () {
  259. // Don't create moderator indicator if DISABLE_FOCUS_INDICATOR is true
  260. if (interfaceConfig.DISABLE_FOCUS_INDICATOR)
  261. return false;
  262. // Show moderator indicator
  263. var indicatorSpan = $('#' + this.videoSpanId + ' .focusindicator');
  264. if (indicatorSpan.length) {
  265. return;
  266. }
  267. indicatorSpan = document.createElement('span');
  268. indicatorSpan.className = 'focusindicator toolbar-icon right';
  269. this.container
  270. .querySelector('.videocontainer__toolbar')
  271. .appendChild(indicatorSpan);
  272. var moderatorIndicator = document.createElement('i');
  273. moderatorIndicator.className = 'icon-star';
  274. UIUtil.setTooltip(moderatorIndicator,
  275. "videothumbnail.moderator",
  276. "top-left");
  277. indicatorSpan.appendChild(moderatorIndicator);
  278. };
  279. /**
  280. * Adds the element indicating the audio level of the participant.
  281. */
  282. SmallVideo.prototype.addAudioLevelIndicator = function () {
  283. var audioSpan = $('#' + this.videoSpanId + ' .audioindicator');
  284. if (audioSpan.length) {
  285. return;
  286. }
  287. this.container.appendChild(
  288. AudioLevels.createThumbnailAudioLevelIndicator());
  289. };
  290. /**
  291. * Updates the audio level for this small video.
  292. *
  293. * @param lvl the new audio level to set
  294. */
  295. SmallVideo.prototype.updateAudioLevelIndicator = function (lvl) {
  296. AudioLevels.updateThumbnailAudioLevel(this.videoSpanId, lvl);
  297. };
  298. /**
  299. * Removes the element indicating the moderator(owner) of the conference.
  300. */
  301. SmallVideo.prototype.removeModeratorIndicator = function () {
  302. $('#' + this.videoSpanId + ' .focusindicator').remove();
  303. };
  304. /**
  305. * This is an especially interesting function. A naive reader might think that
  306. * it returns this SmallVideo's "video" element. But it is much more exciting.
  307. * It first finds this video's parent element using jquery, then uses a utility
  308. * from lib-jitsi-meet to extract the video element from it (with two more
  309. * jquery calls), and finally uses jquery again to encapsulate the video element
  310. * in an array. This last step allows (some might prefer "forces") users of
  311. * this function to access the video element via the 0th element of the returned
  312. * array (after checking its length of course!).
  313. */
  314. SmallVideo.prototype.selectVideoElement = function () {
  315. return $(RTCUIHelper.findVideoElement($('#' + this.videoSpanId)[0]));
  316. };
  317. /**
  318. * Selects the HTML image element which displays user's avatar.
  319. *
  320. * @return {jQuery|HTMLElement} a jQuery selector pointing to the HTML image
  321. * element which displays the user's avatar.
  322. */
  323. SmallVideo.prototype.$avatar = function () {
  324. return $('#' + this.videoSpanId + ' .userAvatar');
  325. };
  326. /**
  327. * Returns the display name element, which appears on the video thumbnail.
  328. *
  329. * @return {jQuery} a jQuery selector pointing to the display name element of
  330. * the video thumbnail
  331. */
  332. SmallVideo.prototype.$displayName = function () {
  333. return $('#' + this.videoSpanId + ' .displayname');
  334. };
  335. /**
  336. * Enables / disables the css responsible for focusing/pinning a video
  337. * thumbnail.
  338. *
  339. * @param isFocused indicates if the thumbnail should be focused/pinned or not
  340. */
  341. SmallVideo.prototype.focus = function(isFocused) {
  342. var focusedCssClass = "videoContainerFocused";
  343. var isFocusClassEnabled = $(this.container).hasClass(focusedCssClass);
  344. if (!isFocused && isFocusClassEnabled) {
  345. $(this.container).removeClass(focusedCssClass);
  346. }
  347. else if (isFocused && !isFocusClassEnabled) {
  348. $(this.container).addClass(focusedCssClass);
  349. }
  350. };
  351. SmallVideo.prototype.hasVideo = function () {
  352. return this.selectVideoElement().length !== 0;
  353. };
  354. /**
  355. * Checks whether the user associated with this <tt>SmallVideo</tt> is currently
  356. * being displayed on the "large video".
  357. *
  358. * @return {boolean} <tt>true</tt> if the user is displayed on the large video
  359. * or <tt>false</tt> otherwise.
  360. */
  361. SmallVideo.prototype.isCurrentlyOnLargeVideo = function () {
  362. return this.VideoLayout.isCurrentlyOnLarge(this.id);
  363. };
  364. /**
  365. * Checks whether there is a playable video stream available for the user
  366. * associated with this <tt>SmallVideo</tt>.
  367. *
  368. * @return {boolean} <tt>true</tt> if there is a playable video stream available
  369. * or <tt>false</tt> otherwise.
  370. */
  371. SmallVideo.prototype.isVideoPlayable = function() {
  372. return this.videoStream // Is there anything to display ?
  373. && !this.isVideoMuted && !this.videoStream.isMuted() // Muted ?
  374. && (this.isLocal || this.VideoLayout.isInLastN(this.id));
  375. };
  376. /**
  377. * Determines what should be display on the thumbnail.
  378. *
  379. * @return {number} one of <tt>DISPLAY_VIDEO</tt>,<tt>DISPLAY_AVATAR</tt>
  380. * or <tt>DISPLAY_BLACKNESS_WITH_NAME</tt>.
  381. */
  382. SmallVideo.prototype.selectDisplayMode = function() {
  383. // Display name is always and only displayed when user is on the stage
  384. if (this.isCurrentlyOnLargeVideo()) {
  385. return DISPLAY_BLACKNESS_WITH_NAME;
  386. } else if (this.isVideoPlayable() && this.selectVideoElement().length) {
  387. // check hovering and change state to video with name
  388. return this._isHovered() ?
  389. DISPLAY_VIDEO_WITH_NAME : DISPLAY_VIDEO;
  390. } else {
  391. // check hovering and change state to avatar with name
  392. return this._isHovered() ?
  393. DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
  394. }
  395. };
  396. /**
  397. * Checks whether current video is considered hovered. Currently it is hovered
  398. * if the mouse is over the video, or if the connection
  399. * indicator is shown(hovered).
  400. * @private
  401. */
  402. SmallVideo.prototype._isHovered = function () {
  403. return this.videoIsHovered
  404. || (this.connectionIndicator
  405. && this.connectionIndicator.popover.popoverIsHovered);
  406. };
  407. /**
  408. * Hides or shows the user's avatar.
  409. * This update assumes that large video had been updated and we will
  410. * reflect it on this small video.
  411. *
  412. * @param show whether we should show the avatar or not
  413. * video because there is no dominant speaker and no focused speaker
  414. */
  415. SmallVideo.prototype.updateView = function () {
  416. if (this.disableUpdateView)
  417. return;
  418. if (!this.hasAvatar) {
  419. if (this.id) {
  420. // Init avatar
  421. this.avatarChanged(Avatar.getAvatarUrl(this.id));
  422. } else {
  423. console.error("Unable to init avatar - no id", this);
  424. return;
  425. }
  426. }
  427. // Determine whether video, avatar or blackness should be displayed
  428. let displayMode = this.selectDisplayMode();
  429. // Show/hide video.
  430. UIUtil.setVisibility( this.selectVideoElement(),
  431. (displayMode === DISPLAY_VIDEO
  432. || displayMode === DISPLAY_VIDEO_WITH_NAME));
  433. // Show/hide the avatar.
  434. UIUtil.setVisibility( this.$avatar(),
  435. (displayMode === DISPLAY_AVATAR
  436. || displayMode === DISPLAY_AVATAR_WITH_NAME));
  437. // Show/hide the display name.
  438. UIUtil.setVisibility( this.$displayName(),
  439. !this.hideDisplayName
  440. && (displayMode === DISPLAY_BLACKNESS_WITH_NAME
  441. || displayMode === DISPLAY_VIDEO_WITH_NAME
  442. || displayMode === DISPLAY_AVATAR_WITH_NAME));
  443. // show hide overlay when there is a video or avatar under
  444. // the display name
  445. UIUtil.setVisibility( $('#' + this.videoSpanId
  446. + ' .videocontainer__hoverOverlay'),
  447. (displayMode === DISPLAY_AVATAR_WITH_NAME
  448. || displayMode === DISPLAY_VIDEO_WITH_NAME));
  449. };
  450. SmallVideo.prototype.avatarChanged = function (avatarUrl) {
  451. var thumbnail = $('#' + this.videoSpanId);
  452. var avatarSel = this.$avatar();
  453. this.hasAvatar = true;
  454. // set the avatar in the thumbnail
  455. if (avatarSel && avatarSel.length > 0) {
  456. avatarSel[0].src = avatarUrl;
  457. } else {
  458. if (thumbnail && thumbnail.length > 0) {
  459. var avatarElement = document.createElement('img');
  460. avatarElement.className = 'userAvatar';
  461. avatarElement.src = avatarUrl;
  462. thumbnail.append(avatarElement);
  463. }
  464. }
  465. };
  466. /**
  467. * Shows or hides the dominant speaker indicator.
  468. * @param show whether to show or hide.
  469. */
  470. SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
  471. // Don't create and show dominant speaker indicator if
  472. // DISABLE_DOMINANT_SPEAKER_INDICATOR is true
  473. if (interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR)
  474. return;
  475. if (!this.container) {
  476. console.warn( "Unable to set dominant speaker indicator - "
  477. + this.videoSpanId + " does not exist");
  478. return;
  479. }
  480. let indicatorSpanId = "dominantspeakerindicator";
  481. let content = `<i id="indicatoricon"
  482. ' class="indicatoricon fa fa-bullhorn"></i>`;
  483. let indicatorSpan = UIUtil.getVideoThumbnailIndicatorSpan({
  484. videoSpanId: this.videoSpanId,
  485. indicatorId: indicatorSpanId,
  486. content,
  487. tooltip: 'speaker'
  488. });
  489. indicatorSpan.classList.toggle('show', show);
  490. };
  491. /**
  492. * Shows or hides the raised hand indicator.
  493. * @param show whether to show or hide.
  494. */
  495. SmallVideo.prototype.showRaisedHandIndicator = function (show) {
  496. if (!this.container) {
  497. console.warn( "Unable to raised hand indication - "
  498. + this.videoSpanId + " does not exist");
  499. return;
  500. }
  501. let indicatorSpanId = "raisehandindicator";
  502. let content = `<i id="indicatoricon"
  503. class="icon-raised-hand indicatoricon"></i>`;
  504. let indicatorSpan = UIUtil.getVideoThumbnailIndicatorSpan({
  505. indicatorId: indicatorSpanId,
  506. videoSpanId: this.videoSpanId,
  507. content,
  508. tooltip: 'raisedHand'
  509. });
  510. indicatorSpan.classList.toggle('show', show);
  511. };
  512. /**
  513. * Adds a listener for onresize events for this video, which will monitor for
  514. * resolution changes, will calculate the delay since the moment the listened
  515. * is added, and will fire a RESOLUTION_CHANGED event.
  516. */
  517. SmallVideo.prototype.waitForResolutionChange = function() {
  518. let beforeChange = window.performance.now();
  519. let videos = this.selectVideoElement();
  520. if (!videos || !videos.length || videos.length <= 0)
  521. return;
  522. let video = videos[0];
  523. let oldWidth = video.videoWidth;
  524. let oldHeight = video.videoHeight;
  525. video.onresize = () => {
  526. if (video.videoWidth != oldWidth || video.videoHeight != oldHeight) {
  527. // Only run once.
  528. video.onresize = null;
  529. let delay = window.performance.now() - beforeChange;
  530. let emitter = this.VideoLayout.getEventEmitter();
  531. if (emitter) {
  532. emitter.emit(
  533. UIEvents.RESOLUTION_CHANGED,
  534. this.getId(),
  535. oldWidth + "x" + oldHeight,
  536. video.videoWidth + "x" + video.videoHeight,
  537. delay);
  538. }
  539. }
  540. };
  541. };
  542. /**
  543. * Initalizes any browser specific properties. Currently sets the overflow
  544. * property for Qt browsers on Windows to hidden, thus fixing the following
  545. * problem:
  546. * Some browsers don't have full support of the object-fit property for the
  547. * video element and when we set video object-fit to "cover" the video
  548. * actually overflows the boundaries of its container, so it's important
  549. * to indicate that the "overflow" should be hidden.
  550. *
  551. * Setting this property for all browsers will result in broken audio levels,
  552. * which makes this a temporary solution, before reworking audio levels.
  553. */
  554. SmallVideo.prototype.initBrowserSpecificProperties = function() {
  555. var userAgent = window.navigator.userAgent;
  556. if (userAgent.indexOf("QtWebEngine") > -1
  557. && (userAgent.indexOf("Windows") > -1
  558. || userAgent.indexOf("Linux") > -1)) {
  559. $('#' + this.videoSpanId).css("overflow", "hidden");
  560. }
  561. };
  562. export default SmallVideo;