Misc web updates (#147)

* Try and clarify max viewer count string

* Shrink title font size on small screens to fit username

* Hide stream info on small screens to buy some space

* Hide emoji button on small screens until we can fix it. For #140

* Make jumping to bottom be a part of the render pass to fix race condition. For #140

* Remove About in info view. We can add it back. Just playing with that since it was missing a space anyway

* address some own mr comments

Co-authored-by: Ginger Wong <omqmail@gmail.com>

webroot/js/app.js

@@ -476,11 +476,12 @@ export default class App extends Component {
           >
             <span>${streamStatusMessage}</span>
             <span>${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
-            <span
-              >${sessionMaxViewerCount} Max
-              ${pluralize('viewer', sessionMaxViewerCount)}.</span
-            >
-            <span>${overallMaxViewerCount} overall.</span>
+            <span>
+              Max ${sessionMaxViewerCount} ${" "} ${pluralize('viewer', sessionMaxViewerCount)} this stream.
+            </span>
+            <span>
+              ${overallMaxViewerCount} all time.
+            </span>
           </section>
         </main>
 
@@ -496,7 +497,6 @@ export default class App extends Component {
               class="user-content-header border-b border-gray-500 border-solid"
             >
               <h2 class="font-semibold text-5xl">
-                About
                 <span class="streamer-name text-indigo-600"
                   >${streamerName}</span
                 >

webroot/js/components/chat/chat.js

@@ -27,6 +27,9 @@ export default class Chat extends Component {
     this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
     this.websocketDisconnected = this.websocketDisconnected.bind(this);
     this.submitChat = this.submitChat.bind(this);
+    this.submitChat = this.submitChat.bind(this);
+    this.scrollToBottom = this.scrollToBottom.bind(this);
+    this.jumpToBottomPending = false;
   }
 
   componentDidMount() {
@@ -52,7 +55,7 @@ export default class Chat extends Component {
     }
     // scroll to bottom of messages list when new ones come in
     if (messages.length > prevMessages.length) {
-      jumpToBottom(this.scrollableMessagesContainer.current);
+      this.jumpToBottomPending = true;
     }
   }
 
@@ -161,24 +164,41 @@ export default class Chat extends Component {
     return [];
   }
 
+  scrollToBottom() {
+    jumpToBottom(this.scrollableMessagesContainer.current);
+  }
 
   render(props, state) {
     const { username, messagesOnly, chatInputEnabled } = props;
-    const { messages, inputEnabled, chatUserNames } = state;
+    const { messages, chatUserNames } = state;
 
-    const messageList = messages.map((message) => (html`<${Message} message=${message} username=${username} key=${message.id} />`));
+    const messageList = messages.map(
+      (message) =>
+        html`<${Message}
+          message=${message}
+          username=${username}
+          key=${message.id}
+        />`
+    );
+
+    // After the render completes (based on requestAnimationFrame) then jump to bottom.
+    // This hopefully fixes the race conditions where jumpTobottom fires before the
+    // DOM element has re-drawn with its new size.
+    if (this.jumpToBottomPending) {
+      this.jumpToBottomPending = false;
+      window.requestAnimationFrame(this.scrollToBottom);
+    }
 
     if (messagesOnly) {
-      return (
-        html`
-          <div
-            id="messages-container"
-            ref=${this.scrollableMessagesContainer}
-            class="py-1 overflow-auto"
-          >
-            ${messageList}
-          </div>
-      `);
+      return html`
+        <div
+          id="messages-container"
+          ref=${this.scrollableMessagesContainer}
+          class="py-1 overflow-auto"
+        >
+          ${messageList}
+        </div>
+      `;
     }
 
     return html`

webroot/styles/app.css

@@ -201,6 +201,11 @@ header {
   #video-container {
     min-height: 240px;
   }
-}
+  .instance-title {
+    font-size: 1rem;
+  }
 
-/* ************************************************8 */
+  #stream-info {
+    display: none;
+  }
+}

webroot/styles/chat.css

@@ -102,6 +102,13 @@
   padding: .25rem;
 }
 
+/* Hide emoji button on small screens */
+@media screen and (max-width: 860px) {
+  #emoji-button {
+    /* Emoji library overrides this so important is needed */
+    display: none !important;
+  }
+}
 
 
 .message-text .chat-embed {