From d6dadcabf81cb7726da0d8d80f0b3797cebdda38 Mon Sep 17 00:00:00 2001
From: Jannik <jannik@outlook.com>
Date: Fri, 2 Oct 2020 21:27:10 +0200
Subject: [PATCH 1/3] Fix: Optional socialHandles and tags

---
 webroot/js/app.js | 51 +++++++++++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/webroot/js/app.js b/webroot/js/app.js
index 9fe34ca40..5b5598049 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -387,9 +387,8 @@ export default class App extends Component {
     const bgLogo = { backgroundImage: `url(${smallLogo})` };
     const bgLogoLarge = { backgroundImage: `url(${largeLogo})` };
 
-    const tagList = !tags.length
-      ? null
-      : tags.map(
+    const tagList = (tags !== null && tags.length > 0)
+      ? tags.map(
           (tag, index) => html`
             <li
               key="tag${index}"
@@ -398,17 +397,33 @@ export default class App extends Component {
               ${tag}
             </li>
           `
-        );
+        )
+      : null;
 
-    const socialIconsList = !socialHandles.length
-      ? null
-      : socialHandles.map(
-          (item, index) => html`
-            <li key="social${index}">
-              <${SocialIcon} platform=${item.platform} url=${item.url} />
-            </li>
-          `
-        );
+    const socialIconsList = (function () {
+      if (socialHandles === null || socialHandles.length === 0) {
+        return null;
+      }
+
+	     const list = socialHandles.map(
+        (item, index) => html`
+          <li key="social${index}">
+            <${SocialIcon} platform=${item.platform} url=${item.url} />
+          </li>
+        `
+      );
+	
+	    return html`<ul
+          id="social-list"
+          class="social-list flex flex-row items-center justify-start flex-wrap"
+        >
+          <span class="follow-label text-xs	font-bold mr-2 uppercase"
+            >Follow me:
+          </span>
+          ${list}
+        </ul>
+	    `;
+    })();
 
     const mainClass = playerActive ? 'online' : '';
     const streamInfoClass = streamOnline ? 'online' : ''; // need?
@@ -517,15 +532,7 @@ export default class App extends Component {
                   >${streamerName}</span
                 >
               </h2>
-              <ul
-                id="social-list"
-                class="social-list flex flex-row items-center justify-start flex-wrap"
-              >
-                <span class="follow-label text-xs	font-bold mr-2 uppercase"
-                  >Follow me:
-                </span>
-                ${socialIconsList}
-              </ul>
+              ${socialIconsList}
               <div
                 id="stream-summary"
                 class="stream-summary my-4"

From 4c02b6eea145fc9393bbaece647ae89f2432bc64 Mon Sep 17 00:00:00 2001
From: Jannik <jannik@outlook.com>
Date: Sun, 4 Oct 2020 20:36:05 +0200
Subject: [PATCH 2/3] Move socialIconsList to its own component

---
 webroot/js/app.js                             | 29 ++-----------------
 .../{social.js => socialIconsList.js}         | 25 ++++++++++++++--
 2 files changed, 25 insertions(+), 29 deletions(-)
 rename webroot/js/components/{social.js => socialIconsList.js} (66%)

diff --git a/webroot/js/app.js b/webroot/js/app.js
index 5b5598049..e07e8896a 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -3,7 +3,7 @@ import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
 
 import { OwncastPlayer } from './components/player.js';
-import SocialIcon from './components/social.js';
+import SocialIconsList from './components/socialIconsList.js';
 import UsernameForm from './components/chat/username.js';
 import Chat from './components/chat/chat.js';
 import Websocket from './utils/websocket.js';
@@ -400,31 +400,6 @@ export default class App extends Component {
         )
       : null;
 
-    const socialIconsList = (function () {
-      if (socialHandles === null || socialHandles.length === 0) {
-        return null;
-      }
-
-	     const list = socialHandles.map(
-        (item, index) => html`
-          <li key="social${index}">
-            <${SocialIcon} platform=${item.platform} url=${item.url} />
-          </li>
-        `
-      );
-	
-	    return html`<ul
-          id="social-list"
-          class="social-list flex flex-row items-center justify-start flex-wrap"
-        >
-          <span class="follow-label text-xs	font-bold mr-2 uppercase"
-            >Follow me:
-          </span>
-          ${list}
-        </ul>
-	    `;
-    })();
-
     const mainClass = playerActive ? 'online' : '';
     const streamInfoClass = streamOnline ? 'online' : ''; // need?
 
@@ -532,7 +507,7 @@ export default class App extends Component {
                   >${streamerName}</span
                 >
               </h2>
-              ${socialIconsList}
+              <${SocialIconsList} handles=${socialHandles} />
               <div
                 id="stream-summary"
                 class="stream-summary my-4"
diff --git a/webroot/js/components/social.js b/webroot/js/components/socialIconsList.js
similarity index 66%
rename from webroot/js/components/social.js
rename to webroot/js/components/socialIconsList.js
index 20d69f1f7..d86196703 100644
--- a/webroot/js/components/social.js
+++ b/webroot/js/components/socialIconsList.js
@@ -1,10 +1,11 @@
-import { h } from 'https://unpkg.com/preact?module';
+import { h, Component } from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
+
 import { SOCIAL_PLATFORMS } from '../utils/social.js';
 import { classNames } from '../utils/helpers.js';
 
-export default function SocialIcon(props) {
+function SocialIcon(props) {
   const { platform, url } = props;
   const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
   const inList = !!platformInfo;
@@ -40,3 +41,23 @@ export default function SocialIcon(props) {
       </a>
   `);
 }
+
+export default function (props) {
+  const { handles } = props;
+  if (handles == null) {
+    return null;
+  }
+
+  const list = handles.map((item, index) => html`
+    <li key="social${index}">
+      <${SocialIcon} platform=${item.platform} url=${item.url} />
+    </li>
+  `);
+
+  return html`<ul
+      id="social-list"
+      class="social-list flex flex-row items-center justify-start flex-wrap">
+    <span class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
+    ${list}
+  </ul>`;
+} 
\ No newline at end of file

From 813884ef2108e17c948563bb1c6c4f072bccd5bc Mon Sep 17 00:00:00 2001
From: Jannik Volkland <volkland@sipgate.de>
Date: Wed, 7 Oct 2020 08:42:46 +0200
Subject: [PATCH 3/3] fix: Use Kebab-Case, and resolve Merge Conflict

---
 webroot/js/app.js                                           | 2 +-
 .../components/{socialIconsList.js => social-icons-list.js} | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename webroot/js/components/{socialIconsList.js => social-icons-list.js} (93%)

diff --git a/webroot/js/app.js b/webroot/js/app.js
index e07e8896a..c47b4a441 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -3,7 +3,7 @@ import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
 
 import { OwncastPlayer } from './components/player.js';
-import SocialIconsList from './components/socialIconsList.js';
+import SocialIconsList from './components/social-icons-list.js';
 import UsernameForm from './components/chat/username.js';
 import Chat from './components/chat/chat.js';
 import Websocket from './utils/websocket.js';
diff --git a/webroot/js/components/socialIconsList.js b/webroot/js/components/social-icons-list.js
similarity index 93%
rename from webroot/js/components/socialIconsList.js
rename to webroot/js/components/social-icons-list.js
index d86196703..55156dea8 100644
--- a/webroot/js/components/socialIconsList.js
+++ b/webroot/js/components/social-icons-list.js
@@ -1,5 +1,5 @@
-import { h, Component } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h, Component } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 import { SOCIAL_PLATFORMS } from '../utils/social.js';
@@ -60,4 +60,4 @@ export default function (props) {
     <span class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
     ${list}
   </ul>`;
-} 
\ No newline at end of file
+}