Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

update references to owncast site; enable scrolltobottom on new messages

Browse Source
This commit is contained in:
Ginger Wong 2020-08-23 22:21:42 -07:00
parent abf42f1a56
commit 0b1f9db4ed
3 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webroot/index.html
View File

@ -77,10 +77,10 @@
}
</style>
<div class="noscript">
<img src="https://github.com/gabek/owncast/raw/master/doc/logo.png" />
<img src="https://owncast.online/images/logo.png" />
<br/>
<p>
This <a href="https://github.com/gabek/owncast" target="_blank">Owncast</a> stream requires Javascript to play.
This <a href="https://owncast.online" target="_blank">Owncast</a> stream requires Javascript to play.
</p>
</div>
</noscript>

32
webroot/js/components/chat/chat.js
View File

@ -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`
<div id="messages-container" class="py-1 overflow-auto">
<div
id="messages-container"
ref=${this.scrollableMessagesContainer}
class="py-1 overflow-auto"
>
${messageList}
</div>
`);
@ -181,7 +193,11 @@ export default class Chat extends Component {
html`
<section id="chat-container-wrap" class="flex flex-col">
<div id="chat-container" class="bg-gray-800 flex flex-col justify-end overflow-auto">
<div id="messages-container" class="py-1 overflow-auto">
<div
id="messages-container"
ref=${this.scrollableMessagesContainer}
class="py-1 overflow-auto"
>
${messageList}
</div>
<${ChatInput}

2
webroot/js/utils/constants.js
View File

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