ref(shared-video): move SharedVideoThumb to own file

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.

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
+    });
+};