ref(remote-video): set inner html instead of creating elements
This better mimics declarative jsx.
This commit is contained in:
parent
16fbf90a00
commit
670d575bcb
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue