fix some styles

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
 
  -->

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"

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,11 +34,8 @@ export default class StandaloneChat extends Component {
   }
 
   render(props, state) {
-    const { messagesOnly } = props;
     const { username, userAvatarImage, websocket } = state;
 
-
-    if (messagesOnly) {
     return (
       html`
         <${Chat}
@@ -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}>
-    `);
-  }
-
 }

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
 

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>

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;
 }

webroot/styles/chat.css

@@ -61,7 +61,7 @@
 
 
 .emoji-picker__emoji {
-  border-radius: 10px;
+  border-radius: 5px;
 }