componentize user info

webroot/js/app.js

@@ -11,6 +11,7 @@ async function setupApp() {
       messages: [],
       extraUserContent: "",
       isOnline: false,
+      layout: "desktop",
       // from config
       logo: null,
       socialHandles: [],

webroot/js/footer.js

@@ -2,7 +2,7 @@ Vue.component('owncast-footer', {
   props: {
     appVersion: {
       type: String,
-      default: "0.1",
+      default: '0.1',
     },
   },
   
@@ -32,4 +32,28 @@ Vue.component('stream-tags', {
       </li>
     </ul>
   `,
-});
+});
+
+Vue.component('user-details', {
+  props:  ['logo', 'platforms', 'summary', 'tags', 'extraContent'],
+  template: `
+    <div class="user-content">
+      <div class="user-image rounded-full bg-white">
+        <img class="logo" alt="Logo" v-bind:src="logo">            
+      </div>
+      <div class="user-content-header border-b border-gray-500 border-solid">
+        <h2 class="font-semibold">
+          About <span class="streamer-name text-indigo-600">
+            <slot></slot>
+          </span>
+        </h2>
+        <social-list v-bind:platforms="platforms"></social-list>
+        <div class="stream-summary" v-html="summary"></div>
+        <stream-tags v-bind:tags="tags"></stream-tags>
+      </div>
+
+      <div v-html="extraContent"></div>
+
+    </div>
+  `,
+});

webroot/js/message.js

@@ -78,10 +78,13 @@ class Messaging {
 		if (hasTouchScreen()) {
 			this.scrollableMessagesContainer = document.body;
 			this.tagAppContainer.classList.add("touch-screen");
+			window.app.layout = "touch";
 			window.onorientationchange = this.handleOrientationChange.bind(this);
 			this.handleOrientationChange();
 		} else {
 			this.tagAppContainer.classList.add("desktop");
+			window.app.layout = "desktop";
+
 		}
 	}