diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js index dbc53363b..7ff0cceee 100644 --- a/modules/UI/shared_video/SharedVideo.js +++ b/modules/UI/shared_video/SharedVideo.js @@ -7,7 +7,6 @@ import UIEvents from '../../../service/UI/UIEvents'; import VideoLayout from "../videolayout/VideoLayout"; import LargeContainer from '../videolayout/LargeContainer'; -import SmallVideo from '../videolayout/SmallVideo'; import Filmstrip from '../videolayout/Filmstrip'; import { @@ -16,6 +15,8 @@ import { } from '../../../react/features/base/participants'; import { dockToolbox, showToolbox } from '../../../react/features/toolbox'; +import SharedVideoThumb from './SharedVideoThumb'; + export const SHARED_VIDEO_CONTAINER_TYPE = "sharedvideo"; /** @@ -255,7 +256,8 @@ export default class SharedVideoManager { // in onPlayerStateChange player.playVideo(); - let thumb = new SharedVideoThumb(self.url); + let thumb = new SharedVideoThumb( + self.url, SHARED_VIDEO_CONTAINER_TYPE, VideoLayout); thumb.setDisplayName(player.getVideoData().title); VideoLayout.addRemoteVideoContainer(self.url, thumb); @@ -639,90 +641,6 @@ class SharedVideoContainer extends LargeContainer { } } -function SharedVideoThumb (url) -{ - this.id = url; - - this.url = url; - this.setVideoType(SHARED_VIDEO_CONTAINER_TYPE); - this.videoSpanId = "sharedVideoContainer"; - this.container = this.createContainer(this.videoSpanId); - this.$container = $(this.container); - this.container.onclick = this.videoClick.bind(this); - this.bindHoverHandler(); - SmallVideo.call(this, VideoLayout); - this.isVideoMuted = true; -} -SharedVideoThumb.prototype = Object.create(SmallVideo.prototype); -SharedVideoThumb.prototype.constructor = SharedVideoThumb; - -/** - * hide display name - */ - -SharedVideoThumb.prototype.setDeviceAvailabilityIcons = function () {}; - -SharedVideoThumb.prototype.avatarChanged = function () {}; - -SharedVideoThumb.prototype.createContainer = function (spanId) { - var container = document.createElement('span'); - container.id = spanId; - container.className = 'videocontainer'; - - // add the avatar - var avatar = document.createElement('img'); - avatar.className = 'sharedVideoAvatar'; - avatar.src = "https://img.youtube.com/vi/" + this.url + "/0.jpg"; - container.appendChild(avatar); - - const displayNameContainer = document.createElement('div'); - displayNameContainer.className = 'displayNameContainer'; - container.appendChild(displayNameContainer); - - var remotes = document.getElementById('filmstripRemoteVideosContainer'); - return remotes.appendChild(container); -}; - -/** - * The thumb click handler. - */ -SharedVideoThumb.prototype.videoClick = function () { - VideoLayout.handleVideoThumbClicked(this.url); -}; - -/** - * Removes RemoteVideo from the page. - */ -SharedVideoThumb.prototype.remove = function () { - logger.log("Remove shared video thumb", this.id); - - // Make sure that the large video is updated if are removing its - // corresponding small video. - this.VideoLayout.updateAfterThumbRemoved(this.id); - - // Remove whole container - if (this.container.parentNode) { - this.container.parentNode.removeChild(this.container); - } -}; - -/** - * Sets the display name for the thumb. - */ -SharedVideoThumb.prototype.setDisplayName = function(displayName) { - if (!this.container) { - logger.warn( "Unable to set displayName - " + this.videoSpanId + - " does not exist"); - return; - } - - this.updateDisplayName({ - displayName: displayName || '', - elementID: `${this.videoSpanId}_name`, - participantID: this.id - }); -}; - /** * Checks if given string is youtube url. * @param {string} url string to check. diff --git a/modules/UI/shared_video/SharedVideoThumb.js b/modules/UI/shared_video/SharedVideoThumb.js new file mode 100644 index 000000000..4171e33a9 --- /dev/null +++ b/modules/UI/shared_video/SharedVideoThumb.js @@ -0,0 +1,88 @@ +/* global $ */ +import SmallVideo from '../videolayout/SmallVideo'; + +const logger = require("jitsi-meet-logger").getLogger(__filename); + +export default function SharedVideoThumb (url, videoType, VideoLayout) +{ + this.id = url; + + this.url = url; + this.setVideoType(videoType); + this.videoSpanId = "sharedVideoContainer"; + this.container = this.createContainer(this.videoSpanId); + this.$container = $(this.container); + this.container.onclick = this.videoClick.bind(this); + this.bindHoverHandler(); + SmallVideo.call(this, VideoLayout); + this.isVideoMuted = true; +} +SharedVideoThumb.prototype = Object.create(SmallVideo.prototype); +SharedVideoThumb.prototype.constructor = SharedVideoThumb; + +/** + * hide display name + */ + +SharedVideoThumb.prototype.setDeviceAvailabilityIcons = function () {}; + +SharedVideoThumb.prototype.avatarChanged = function () {}; + +SharedVideoThumb.prototype.createContainer = function (spanId) { + var container = document.createElement('span'); + container.id = spanId; + container.className = 'videocontainer'; + + // add the avatar + var avatar = document.createElement('img'); + avatar.className = 'sharedVideoAvatar'; + avatar.src = "https://img.youtube.com/vi/" + this.url + "/0.jpg"; + container.appendChild(avatar); + + const displayNameContainer = document.createElement('div'); + displayNameContainer.className = 'displayNameContainer'; + container.appendChild(displayNameContainer); + + var remotes = document.getElementById('filmstripRemoteVideosContainer'); + return remotes.appendChild(container); +}; + +/** + * The thumb click handler. + */ +SharedVideoThumb.prototype.videoClick = function () { + this.VideoLayout.handleVideoThumbClicked(this.url); +}; + +/** + * Removes RemoteVideo from the page. + */ +SharedVideoThumb.prototype.remove = function () { + logger.log("Remove shared video thumb", this.id); + + // Make sure that the large video is updated if are removing its + // corresponding small video. + this.VideoLayout.updateAfterThumbRemoved(this.id); + + // Remove whole container + if (this.container.parentNode) { + this.container.parentNode.removeChild(this.container); + } +}; + +/** + * Sets the display name for the thumb. + */ +SharedVideoThumb.prototype.setDisplayName = function(displayName) { + if (!this.container) { + logger.warn( "Unable to set displayName - " + this.videoSpanId + + " does not exist"); + return; + } + + this.updateDisplayName({ + displayName: displayName || '', + elementID: `${this.videoSpanId}_name`, + participantID: this.id + }); +};