+ private containerBuilder (el: HTMLElement) {
+ const data = el.dataset as ContainerMarkupData
+
+ // Move inner HTML in the new element we'll create
+ const content = el.innerHTML
+ el.innerHTML = ''
+
+ const root = document.createElement('div')
+ root.innerHTML = content
+
+ const layoutClass = data.layout
+ ? 'layout-' + data.layout
+ : 'layout-column'
+
+ root.classList.add('peertube-container', layoutClass)
+
+ root.style.justifyContent = data.justifyContent || 'space-between'
+
+ if (data.width) {
+ root.setAttribute('width', data.width)
+ }
+
+ if (data.title || data.description) {
+ const headerElement = document.createElement('div')
+ headerElement.classList.add('header')
+
+ if (data.title) {
+ const titleElement = document.createElement('h4')
+ titleElement.innerText = data.title
+ headerElement.appendChild(titleElement)
+ }
+
+ if (data.description) {
+ const descriptionElement = document.createElement('div')
+ descriptionElement.innerText = data.description
+ headerElement.append(descriptionElement)
+ }
+
+ root.insertBefore(headerElement, root.firstChild)
+ }
+
+ return root
+ }
+