diff --git a/webroot/js/app.js b/webroot/js/app.js
index 61f99ec6d..844cbe4a5 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -476,11 +476,12 @@ export default class App extends Component {
>
${streamStatusMessage}
${viewerCount} ${pluralize('viewer', viewerCount)}.
- ${sessionMaxViewerCount} Max
- ${pluralize('viewer', sessionMaxViewerCount)}.
- ${overallMaxViewerCount} overall.
+
+ Max ${sessionMaxViewerCount} ${" "} ${pluralize('viewer', sessionMaxViewerCount)} this stream.
+
+
+ ${overallMaxViewerCount} all time.
+
@@ -496,7 +497,6 @@ export default class App extends Component {
class="user-content-header border-b border-gray-500 border-solid"
>
- About
${streamerName}
diff --git a/webroot/js/components/chat/chat.js b/webroot/js/components/chat/chat.js
index f24113ea1..69678e5fa 100644
--- a/webroot/js/components/chat/chat.js
+++ b/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`
-
- ${messageList}
-
- `);
+ return html`
+
+ ${messageList}
+
+ `;
}
return html`
diff --git a/webroot/styles/app.css b/webroot/styles/app.css
index 829e8e2b4..f4d57f559 100644
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -201,6 +201,11 @@ header {
#video-container {
min-height: 240px;
}
-}
+ .instance-title {
+ font-size: 1rem;
+ }
-/* ************************************************8 */
+ #stream-info {
+ display: none;
+ }
+}
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index c062be8d1..c0a14228d 100644
--- a/webroot/styles/chat.css
+++ b/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 {