fix(filmstrip): Separate remote videos and local video

The 1:1 call UI and vertical filmstrip act on remote videos
while leaving local video alone. To facilitate acting only on
remote videos, place remote videos into their own container element.

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;

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

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)
+        let remoteThumbs = this.filmstripRemoteVideos.children(selector);
-            .not("#localVideoContainer");
 
         // Exclude the local video container if it has been hidden.
         if (localThumb.hasClass("hidden")) {

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

react/features/conference/components/Conference.web.js

@@ -106,10 +106,31 @@ class Conference extends Component {
                                 src = 'images/spin.svg' />
                         </span>
                     </div>
+                    { this._renderFilmstrip() }
+                </div>
+
+                <DialogContainer />
+                <OverlayContainer />
+                <HideNotificationBarStyle />
+            </div>
+        );
+    }
+
+    /**
+     * Creates a React Element for displaying filmstrip videos.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderFilmstrip() {
+        return (
             <div className = 'filmstrip'>
                 <div
                     className = 'filmstrip__videos'
                     id = 'remoteVideos'>
+                    <div
+                        className = 'filmstrip__videos'
+                        id = 'filmstripLocalVideo'>
                         <span
                             className = 'videocontainer'
                             id = 'localVideoContainer'>
@@ -125,6 +146,23 @@ class Conference extends Component {
                                 className
                                     = 'videocontainer__hoverOverlay' />
                         </span>
+                    </div>
+                    <div
+                        className = 'filmstrip__videos'
+                        id = 'filmstripRemoteVideos'>
+                        {
+
+                            /*
+                                This extra video container is needed for
+                                scrolling thumbnails in firefox, otherwise the
+                                flex thumbnails resize instead of causing
+                                overflow.
+                            */
+                        }
+                        <div
+                            className = 'remote-videos-container'
+                            id = 'filmstripRemoteVideosContainer' />
+                    </div>
                     <audio
                         id = 'userJoined'
                         preload = 'auto'
@@ -135,12 +173,6 @@ class Conference extends Component {
                         src = 'sounds/left.wav' />
                 </div>
             </div>
-                </div>
-
-                <DialogContainer />
-                <OverlayContainer />
-                <HideNotificationBarStyle />
-            </div>
         );
     }
 }