ref(filmstrip): create an empty container for local filmstrip move (#3303)

* ref(filmstrip): create an empty container for local filmstrip move

This might be necessary for tile view. To support making the
local video display at the end of remote videos while in tile
view, but separateed from scrollable remote videos, moving
the local video might be necessary. By creating an empty
container, there is a target for local video to move to.

* squash: rename id

modules/UI/shared_video/SharedVideoThumb.js

@@ -50,10 +50,14 @@ SharedVideoThumb.prototype.createContainer = function(spanId) {
     displayNameContainer.className = 'displayNameContainer';
     container.appendChild(displayNameContainer);
 
-    const remotes = document.getElementById('filmstripRemoteVideosContainer');
+    const remoteVideosContainer
+        = document.getElementById('filmstripRemoteVideosContainer');
+    const localVideoContainer
+        = document.getElementById('localVideoTileViewContainer');
 
+    remoteVideosContainer.insertBefore(container, localVideoContainer);
 
-    return remotes.appendChild(container);
+    return container;
 };
 
 /**

modules/UI/videolayout/RemoteVideo.js

@@ -642,10 +642,14 @@ RemoteVideo.createContainer = function(spanId) {
         <div class ='presence-label-container'></div>
         <span class = 'remotevideomenu'></span>`;
 
-    const remotes = document.getElementById('filmstripRemoteVideosContainer');
+    const remoteVideosContainer
+        = document.getElementById('filmstripRemoteVideosContainer');
+    const localVideoContainer
+        = document.getElementById('localVideoTileViewContainer');
 
+    remoteVideosContainer.insertBefore(container, localVideoContainer);
 
-    return remotes.appendChild(container);
+    return container;
 };
 
 export default RemoteVideo;

react/features/filmstrip/components/web/Filmstrip.js

@@ -119,7 +119,9 @@ class Filmstrip extends Component <Props> {
                             className = 'remote-videos-container'
                             id = 'filmstripRemoteVideosContainer'
                             onMouseOut = { this._onMouseOut }
-                            onMouseOver = { this._onMouseOver } />
+                            onMouseOver = { this._onMouseOver }>
+                            <div id = 'localVideoTileViewContainer' />
+                        </div>
                     </div>
                 </div>
             </div>