From 1b5f8b9f1d6d9e34948da7c9f9c0e886deee5504 Mon Sep 17 00:00:00 2001
From: Timur Zhigmytov <40149112+jyggiz@users.noreply.github.com>
Date: Sun, 20 Jun 2021 07:12:28 +0600
Subject: [PATCH] Remove div container when action buttons is empty (#1124)

Co-authored-by: Timur Zhigmytov <timur.zhigmytov@mediamonks.com>
---
 webroot/js/app.js | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/webroot/js/app.js b/webroot/js/app.js
index 65ecc044c..b75610238 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -550,21 +550,22 @@ export default class App extends Component {
       : html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `;
 
     const externalActionButtons =
-      externalActions &&
-      html`<div
-        id="external-actions-container"
-        class="flex flex-row align-center"
-      >
-        ${externalActions.map(
-          function (action, index) {
-            return html`<${ExternalActionButton}
-              onClick=${this.displayExternalAction}
-              action=${action}
-              index=${index}
-            />`;
-          }.bind(this)
-        )}
-      </div>`;
+      externalActions && externalActions.length > 0
+      ? html`<div
+          id="external-actions-container"
+          class="flex flex-row align-center"
+        >
+          ${externalActions.map(
+            function (action, index) {
+              return html`<${ExternalActionButton}
+                onClick=${this.displayExternalAction}
+                action=${action}
+                index=${index}
+              />`;
+            }.bind(this)
+          )}
+        </div>`
+      : null;
 
     const externalActionModal = externalAction
       ? html`<${ExternalActionModal}
@@ -667,7 +668,7 @@ export default class App extends Component {
               <h2 class="font-semibold text-5xl">
                 <span class="streamer-name text-indigo-600">${name}</span>
               </h2>
-              <div>${externalActionButtons}</div>
+              ${externalActionButtons && html`<div>${externalActionButtons}</div>`}
               <h3 class="font-semibold text-3xl">
                 ${streamOnline && streamTitle}
               </h3>