diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss index 00f6338d7..d8bc409e5 100644 --- a/css/_filmstrip.scss +++ b/css/_filmstrip.scss @@ -62,10 +62,18 @@ videos. */ font-size: 0pt; + #filmstripLocalVideo { + padding-left: 0; + } + &.hidden { bottom: -196px; } + .remote-videos-container { + display: flex; + } + .videocontainer { display: none; position: relative; diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js index 35d4d59f6..9458a644c 100644 --- a/modules/UI/shared_video/SharedVideo.js +++ b/modules/UI/shared_video/SharedVideo.js @@ -656,7 +656,7 @@ SharedVideoThumb.prototype.createContainer = function (spanId) { avatar.src = "https://img.youtube.com/vi/" + this.url + "/0.jpg"; container.appendChild(avatar); - var remotes = document.getElementById('remoteVideos'); + var remotes = document.getElementById('filmstripRemoteVideosContainer'); return remotes.appendChild(container); }; diff --git a/modules/UI/videolayout/Filmstrip.js b/modules/UI/videolayout/Filmstrip.js index 1d32698e1..7c9865878 100644 --- a/modules/UI/videolayout/Filmstrip.js +++ b/modules/UI/videolayout/Filmstrip.js @@ -14,6 +14,7 @@ const Filmstrip = { this.iconMenuUpClassName = 'icon-menu-up'; this.filmstripContainerClassName = 'filmstrip'; this.filmstrip = $('#remoteVideos'); + this.filmstripRemoteVideos = $('#filmstripRemoteVideosContainer'); this.eventEmitter = eventEmitter; // Show the toggle button and add event listeners only when out of @@ -456,8 +457,7 @@ const Filmstrip = { } let localThumb = $("#localVideoContainer"); - let remoteThumbs = this.filmstrip.children(selector) - .not("#localVideoContainer"); + let remoteThumbs = this.filmstripRemoteVideos.children(selector); // Exclude the local video container if it has been hidden. if (localThumb.hasClass("hidden")) { diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 834abe968..f06a74145 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -800,7 +800,7 @@ RemoteVideo.createContainer = function (spanId) { overlay.className = "videocontainer__hoverOverlay"; container.appendChild(overlay); - var remotes = document.getElementById('remoteVideos'); + var remotes = document.getElementById('filmstripRemoteVideosContainer'); return remotes.appendChild(container); }; diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js index 8b91441f1..716e22906 100644 --- a/react/features/conference/components/Conference.web.js +++ b/react/features/conference/components/Conference.web.js @@ -106,35 +106,7 @@ class Conference extends Component { src = 'images/spin.svg' /> -
-
- -
- -
); } + + /** + * Creates a React Element for displaying filmstrip videos. + * + * @private + * @returns {ReactElement} + */ + _renderFilmstrip() { + return ( +
+
+
+ +
+ +