ref(remote-video): set inner html instead of creating elements

This better mimics declarative jsx.
This commit is contained in:
Leonard Kim 2017-06-30 15:26:37 -07:00 committed by yanas
parent 16fbf90a00
commit 670d575bcb
1 changed files with 10 additions and 32 deletions

View File

@ -655,41 +655,19 @@ RemoteVideo.prototype.removePresenceLabel = function () {
}; };
RemoteVideo.createContainer = function (spanId) { RemoteVideo.createContainer = function (spanId) {
let container = document.createElement('span'); const container = document.createElement('span');
container.id = spanId; container.id = spanId;
container.className = 'videocontainer'; container.className = 'videocontainer';
let wrapper = document.createElement('div'); container.innerHTML = `
wrapper.className = 'videocontainer__background'; <div class = 'videocontainer__background'></div>
container.appendChild(wrapper); <div class = 'videocontainer__toptoolbar'></div>
<div class = 'videocontainer__toolbar'></div>
let indicatorBar = document.createElement('div'); <div class = 'videocontainer__hoverOverlay'></div>
indicatorBar.className = "videocontainer__toptoolbar"; <div class = 'displayNameContainer'></div>
container.appendChild(indicatorBar); <div class = 'avatar-container'></div>
<div class ='presence-label-container'></div>
let toolbar = document.createElement('div'); <span class = 'remotevideomenu'></span>`;
toolbar.className = "videocontainer__toolbar";
container.appendChild(toolbar);
let overlay = document.createElement('div');
overlay.className = "videocontainer__hoverOverlay";
container.appendChild(overlay);
const displayNameContainer = document.createElement('div');
displayNameContainer.className = 'displayNameContainer';
container.appendChild(displayNameContainer);
const avatarContainer = document.createElement('div');
avatarContainer.className = 'avatar-container';
container.appendChild(avatarContainer);
const presenceLabelContainer = document.createElement('div');
presenceLabelContainer.className = 'presence-label-container';
container.appendChild(presenceLabelContainer);
const remoteVideoMenuContainer = document.createElement('span');
remoteVideoMenuContainer.className = 'remotevideomenu';
container.appendChild(remoteVideoMenuContainer);
var remotes = document.getElementById('filmstripRemoteVideosContainer'); var remotes = document.getElementById('filmstripRemoteVideosContainer');
return remotes.appendChild(container); return remotes.appendChild(container);