From ec22329408080ec178b0a6fb6887d0fae0cc8472 Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Fri, 30 Jun 2017 10:40:55 -0700
Subject: [PATCH] ref(local-video): generate html instead of hardcoding in
 filmstrip

This would better mimic React behavior where each component has
its own markup, instead of relying on markup existing elsewhere.
---
 modules/UI/videolayout/LocalVideo.js          | 26 ++++++++++++++++++-
 .../filmstrip/components/Filmstrip.web.js     | 18 +------------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js
index d69a22e21..11ee2e5e0 100644
--- a/modules/UI/videolayout/LocalVideo.js
+++ b/modules/UI/videolayout/LocalVideo.js
@@ -17,7 +17,10 @@ const TrackEvents = JitsiMeetJS.events.track;
 
 function LocalVideo(VideoLayout, emitter) {
     this.videoSpanId = "localVideoContainer";
-    this.container = $("#localVideoContainer").get(0);
+
+    this.container = this.createContainer();
+    $("#filmstripLocalVideo").append(this.container);
+
     this.localVideoId = null;
     this.bindHoverHandler();
     if(config.enableLocalVideoFlip)
@@ -46,6 +49,27 @@ function LocalVideo(VideoLayout, emitter) {
 LocalVideo.prototype = Object.create(SmallVideo.prototype);
 LocalVideo.prototype.constructor = LocalVideo;
 
+LocalVideo.prototype.createContainer = function () {
+    const containerSpan = document.createElement('span');
+    containerSpan.classList.add('videocontainer');
+    containerSpan.id = this.videoSpanId;
+
+    containerSpan.innerHTML = `
+        <div class = 'videocontainer__background'></div>
+        <span id = 'localVideoWrapper'></span>
+        <audio
+            autoplay = true
+            id = 'localAudio'
+            muted = true></audio>
+        <div class = 'videocontainer__toolbar'></div>
+        <div class = 'videocontainer__toptoolbar'></div>
+        <div class = 'videocontainer__hoverOverlay'></div>
+        <div class = 'displayNameContainer'></div>
+        <div class = 'avatar-container'></div>`;
+
+    return containerSpan;
+};
+
 /**
  * Sets the display name for the given video span id.
  */
diff --git a/react/features/filmstrip/components/Filmstrip.web.js b/react/features/filmstrip/components/Filmstrip.web.js
index 9c345ae56..c0e1fe5d8 100644
--- a/react/features/filmstrip/components/Filmstrip.web.js
+++ b/react/features/filmstrip/components/Filmstrip.web.js
@@ -52,23 +52,7 @@ class Filmstrip extends Component {
                     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' />
-                            <div className = 'displayNameContainer' />
-                            <div className = 'avatar-container' />
-                        </span>
-                    </div>
+                        id = 'filmstripLocalVideo' />
                     <div
                         className = 'filmstrip__videos'
                         id = 'filmstripRemoteVideos'>