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)
-            .not("#localVideoContainer");
+        let remoteThumbs = this.filmstripRemoteVideos.children(selector);
 
         // 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,35 +106,7 @@ class Conference extends Component {
                                 src = 'images/spin.svg' />
                         </span>
                     </div>
-                    <div className = 'filmstrip'>
-                        <div
-                            className = 'filmstrip__videos'
-                            id = 'remoteVideos'>
-                            <span
-                                className = 'videocontainer'
-                                id = 'localVideoContainer'>
-                                <div className = 'videocontainer__background' />
-                                <span id = 'localVideoWrapper' />
-                                <audio
-                                    autoPlay = { true }
-                                    id = 'localAudio'
-                                    muted = { true } />
-                                <div className = 'videocontainer__toolbar' />
-                                <div className = 'videocontainer__toptoolbar' />
-                                <div
-                                    className
-                                        = 'videocontainer__hoverOverlay' />
-                            </span>
-                            <audio
-                                id = 'userJoined'
-                                preload = 'auto'
-                                src = 'sounds/joined.wav' />
-                            <audio
-                                id = 'userLeft'
-                                preload = 'auto'
-                                src = 'sounds/left.wav' />
-                        </div>
-                    </div>
+                    { this._renderFilmstrip() }
                 </div>
 
                 <DialogContainer />
@@ -143,6 +115,66 @@ class Conference extends Component {
             </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'>
+                            <div className = 'videocontainer__background' />
+                            <span id = 'localVideoWrapper' />
+                            <audio
+                                autoPlay = { true }
+                                id = 'localAudio'
+                                muted = { true } />
+                            <div className = 'videocontainer__toolbar' />
+                            <div className = 'videocontainer__toptoolbar' />
+                            <div
+                                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'
+                        src = 'sounds/joined.wav' />
+                    <audio
+                        id = 'userLeft'
+                        preload = 'auto'
+                        src = 'sounds/left.wav' />
+                </div>
+            </div>
+        );
+    }
 }
 
 export default reactReduxConnect()(Conference);