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