Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

SharedVideoThumb.js 2.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. /* global $ */
  2. import SmallVideo from '../videolayout/SmallVideo';
  3. const logger = require('jitsi-meet-logger').getLogger(__filename);
  4. /**
  5. *
  6. */
  7. export default function SharedVideoThumb(participant, videoType, VideoLayout) {
  8. this.id = participant.id;
  9. this.url = participant.id;
  10. this.setVideoType(videoType);
  11. this.videoSpanId = 'sharedVideoContainer';
  12. this.container = this.createContainer(this.videoSpanId);
  13. this.$container = $(this.container);
  14. this.container.onclick = this.videoClick.bind(this);
  15. this.bindHoverHandler();
  16. SmallVideo.call(this, VideoLayout);
  17. this.isVideoMuted = true;
  18. this.setDisplayName(participant.name);
  19. }
  20. SharedVideoThumb.prototype = Object.create(SmallVideo.prototype);
  21. SharedVideoThumb.prototype.constructor = SharedVideoThumb;
  22. /**
  23. * hide display name
  24. */
  25. // eslint-disable-next-line no-empty-function
  26. SharedVideoThumb.prototype.setDeviceAvailabilityIcons = function() {};
  27. // eslint-disable-next-line no-empty-function
  28. SharedVideoThumb.prototype.avatarChanged = function() {};
  29. SharedVideoThumb.prototype.createContainer = function(spanId) {
  30. const container = document.createElement('span');
  31. container.id = spanId;
  32. container.className = 'videocontainer';
  33. // add the avatar
  34. const avatar = document.createElement('img');
  35. avatar.className = 'sharedVideoAvatar';
  36. avatar.src = `https://img.youtube.com/vi/${this.url}/0.jpg`;
  37. container.appendChild(avatar);
  38. const displayNameContainer = document.createElement('div');
  39. displayNameContainer.className = 'displayNameContainer';
  40. container.appendChild(displayNameContainer);
  41. const remotes = document.getElementById('filmstripRemoteVideosContainer');
  42. return remotes.appendChild(container);
  43. };
  44. /**
  45. * The thumb click handler.
  46. */
  47. SharedVideoThumb.prototype.videoClick = function() {
  48. this._togglePin();
  49. };
  50. /**
  51. * Removes RemoteVideo from the page.
  52. */
  53. SharedVideoThumb.prototype.remove = function() {
  54. logger.log('Remove shared video thumb', this.id);
  55. // Remove whole container
  56. if (this.container.parentNode) {
  57. this.container.parentNode.removeChild(this.container);
  58. }
  59. };
  60. /**
  61. * Sets the display name for the thumb.
  62. */
  63. SharedVideoThumb.prototype.setDisplayName = function(displayName) {
  64. if (!this.container) {
  65. logger.warn(`Unable to set displayName - ${this.videoSpanId
  66. } does not exist`);
  67. return;
  68. }
  69. this.updateDisplayName({
  70. displayName: displayName || '',
  71. elementID: `${this.videoSpanId}_name`,
  72. participantID: this.id
  73. });
  74. };