diff --git a/webroot/index.html b/webroot/index.html
index 35af8ff07..32c97a59e 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -77,10 +77,10 @@
}
-

+
- This Owncast stream requires Javascript to play.
+ This Owncast stream requires Javascript to play.
diff --git a/webroot/js/components/chat/chat.js b/webroot/js/components/chat/chat.js
index 4eb1ecc29..4c4b486a3 100644
--- a/webroot/js/components/chat/chat.js
+++ b/webroot/js/components/chat/chat.js
@@ -1,11 +1,11 @@
-import { h, Component } from 'https://unpkg.com/preact?module';
+import { h, Component, createRef } from 'https://unpkg.com/preact?module';
import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(h);
import Message from './message.js';
import ChatInput from './chat-input.js';
import { CALLBACKS, SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
-import { setVHvar, hasTouchScreen } from '../../utils/helpers.js';
+import { setVHvar, hasTouchScreen, jumpToBottom } from '../../utils/helpers.js';
import { extraUserNamesFromMessageHistory } from '../../utils/chat.js';
import { URL_CHAT_HISTORY } from '../../utils/constants.js';
@@ -19,6 +19,9 @@ export default class Chat extends Component {
chatUserNames: [],
};
+ this.scrollableMessagesContainer = createRef();
+
+
this.websocket = null;
this.getChatHistory = this.getChatHistory.bind(this);
@@ -40,13 +43,21 @@ export default class Chat extends Component {
}
}
- componentDidUpdate(prevProps) {
+ componentDidUpdate(prevProps, prevState) {
const { username: prevName } = prevProps;
const { username, userAvatarImage } = this.props;
+
+ const { messages: prevMessages } = prevState;
+ const { messages } = this.state;
+
// if username updated, send a message
if (prevName !== username) {
this.sendUsernameChange(prevName, username, userAvatarImage);
}
+ // scroll to bottom of messages list when new ones come in
+ if (messages.length > prevMessages.length) {
+ jumpToBottom(this.scrollableMessagesContainer.current);
+ }
}
setupWebSocketCallbacks() {
@@ -109,9 +120,6 @@ export default class Chat extends Component {
}
this.setState(newState);
}
-
- // todo - jump to bottom
- // jumpToBottom(this.scrollableMessagesContainer);
}
websocketDisconnected() {
// this.websocket = null;
@@ -171,7 +179,11 @@ export default class Chat extends Component {
if (messagesOnly) {
return (
html`
-
+
${messageList}
`);
@@ -181,7 +193,11 @@ export default class Chat extends Component {
html`
-
+
${messageList}
<${ChatInput}
diff --git a/webroot/js/utils/constants.js b/webroot/js/utils/constants.js
index 9eb6bfae2..a01cdb6c1 100644
--- a/webroot/js/utils/constants.js
+++ b/webroot/js/utils/constants.js
@@ -17,7 +17,7 @@ export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAE
export const MESSAGE_OFFLINE = 'Stream is offline.';
export const MESSAGE_ONLINE = 'Stream is online.';
-export const URL_OWNCAST = 'https://github.com/gabek/owncast'; // used in footer
+export const URL_OWNCAST = 'https://owncast.online'; // used in footer
export const KEY_USERNAME = 'owncast_username';