From d4c8c187fde4999d0573ed1d7cef7baf302285f1 Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Sun, 23 Aug 2020 19:37:06 -0700
Subject: [PATCH] fix some styles

---
 webroot/index2.html                      |  4 ---
 webroot/js/components/chat/chat-input.js |  7 +++--
 webroot/js/standalone-chat-app.js        | 35 ++++--------------------
 webroot/js/utils/constants.js            |  2 +-
 webroot/standalone-chat.html             |  6 +---
 webroot/styles/app.css                   |  7 ++++-
 webroot/styles/chat.css                  |  2 +-
 7 files changed, 19 insertions(+), 44 deletions(-)

diff --git a/webroot/index2.html b/webroot/index2.html
index babc44c3f..a751cacfb 100644
--- a/webroot/index2.html
+++ b/webroot/index2.html
@@ -1,10 +1,6 @@
 <!--
   todo
-  - clean up commented out css
   - fix / consolidate responsive styles
-  - consolidate utils
-  - remove unused files
-  - reorg /js
   - standalone video.html
 
  -->
diff --git a/webroot/js/components/chat/chat-input.js b/webroot/js/components/chat/chat-input.js
index fd472626b..0ba1e1cc1 100644
--- a/webroot/js/components/chat/chat-input.js
+++ b/webroot/js/components/chat/chat-input.js
@@ -62,8 +62,9 @@ export default class ChatInput extends Component {
           initialCategory: 'custom',
           showPreview: false,
           emojiSize: '30px',
-          emojisPerRow: 6,
-          position: 'top'
+          // emojisPerRow: 6,
+          position: 'right-start',
+          strategy: 'absolute',
         });
         this.emojiPicker.on('emoji', emoji => {
           this.handleEmojiSelected(emoji);
@@ -260,10 +261,12 @@ export default class ChatInput extends Component {
                 type="button"
                 style=${emojiButtonStyle}
                 onclick=${this.handleEmojiButtonClick}
+                disabled=${!inputEnabled}
               >😏</button>
 
               <button
                 onclick=${this.handleSubmitChatButton}
+                disabled=${!inputEnabled}
                 type="button"
                 id="button-submit-message"
                 class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
diff --git a/webroot/js/standalone-chat-app.js b/webroot/js/standalone-chat-app.js
index 221083466..fed24a391 100644
--- a/webroot/js/standalone-chat-app.js
+++ b/webroot/js/standalone-chat-app.js
@@ -2,12 +2,10 @@ import { h, Component, Fragment } from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
 
-import UsernameForm from './components/chat/username.js';
-import Chat from './components/chat.js';
+import Chat from './components/chat/chat.js';
 import Websocket from './utils/websocket.js';
-
 import { getLocalStorage, generateAvatar, generateUsername } from './utils/helpers.js';
-import { KEY_USERNAME, KEY_AVATAR } from '../utils/constants.js';
+import { KEY_USERNAME, KEY_AVATAR } from './utils/constants.js';
 
 export default class StandaloneChat extends Component {
   constructor(props, context) {
@@ -36,12 +34,9 @@ export default class StandaloneChat extends Component {
   }
 
   render(props, state) {
-    const { messagesOnly } = props;
     const { username, userAvatarImage, websocket } = state;
 
-
-    if (messagesOnly) {
-      return (
+    return (
       html`
         <${Chat}
           websocket=${websocket}
@@ -49,27 +44,7 @@ export default class StandaloneChat extends Component {
           userAvatarImage=${userAvatarImage}
           messagesOnly
         />
-      `);
-    }
-
-    // not needed for standalone, just messages only. remove later.
-    return (
-      html`
-        <${Fragment}>
-          <${UsernameForm}
-            username=${username}
-            userAvatarImage=${userAvatarImage}
-            handleUsernameChange=${this.handleUsernameChange}
-            handleChatToggle=${this.handleChatToggle}
-          />
-
-          <${Chat}
-            websocket=${websocket}
-            username=${username}
-            userAvatarImage=${userAvatarImage}
-          />
-        </${Fragment}>
-    `);
+      `
+    );
   }
-
 }
diff --git a/webroot/js/utils/constants.js b/webroot/js/utils/constants.js
index a21d32997..9eb6bfae2 100644
--- a/webroot/js/utils/constants.js
+++ b/webroot/js/utils/constants.js
@@ -15,7 +15,7 @@ export const TIMER_STREAM_DURATION_COUNTER = 1000;
 export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
 export const MESSAGE_OFFLINE = 'Stream is offline.';
-export const MESSAGE_ONLINE = 'Stream is online';
+export const MESSAGE_ONLINE = 'Stream is online.';
 
 export const URL_OWNCAST = 'https://github.com/gabek/owncast'; // used in footer
 
diff --git a/webroot/standalone-chat.html b/webroot/standalone-chat.html
index ec3899684..96fd8aa76 100644
--- a/webroot/standalone-chat.html
+++ b/webroot/standalone-chat.html
@@ -4,11 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <!-- <link href="./styles/layout.css" rel="stylesheet" /> -->
     <link href="./styles/chat.css" rel="stylesheet" />
     <link href="./styles/standalone-chat.css" rel="stylesheet" />
 
-
     <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
 
   </head>
@@ -21,10 +19,8 @@
       import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
       import StandaloneChat from './js/standalone-chat-app.js';
 
-      const messagesOnly = false;
-
       (function () {
-        render(html`<${StandaloneChat} messagesOnly=${messagesOnly} />`, document.getElementById("chat-container"));
+        render(html`<${StandaloneChat} messagesOnly />`, document.getElementById("chat-container"));
       })();
     </script>
   </body>
diff --git a/webroot/styles/app.css b/webroot/styles/app.css
index ea9fa9873..e42f6e507 100644
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -25,6 +25,11 @@ a:hover {
   background: transparent;
 }
 
+button[disabled] {
+  opacity: .5;
+  pointer-events: none;
+}
+
 .visually-hidden {
   position: absolute !important;
   height: 1px;
@@ -72,7 +77,7 @@ header {
   opacity: 0;
   pointer-events: none;
 }
-.online #video {
+.online #video-container #video {
   opacity: 1;
   pointer-events: auto;
 }
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index 2db8094ea..66334a20c 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -61,7 +61,7 @@
 
 
 .emoji-picker__emoji {
-  border-radius: 10px;
+  border-radius: 5px;
 }