fix some styles

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,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}>
-    `);
+      `
+    );
   }
-
 }

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