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> </style>
<div class="noscript"> <div class="noscript">
<img src="https://github.com/gabek/owncast/raw/master/doc/logo.png" /> <img src="https://owncast.online/images/logo.png" />
<br/> <br/>
<p> <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> </p>
</div> </div>
</noscript> </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'; import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(h); const html = htm.bind(h);
import Message from './message.js'; import Message from './message.js';
import ChatInput from './chat-input.js'; import ChatInput from './chat-input.js';
import { CALLBACKS, SOCKET_MESSAGE_TYPES } from '../../utils/websocket.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 { extraUserNamesFromMessageHistory } from '../../utils/chat.js';
import { URL_CHAT_HISTORY } from '../../utils/constants.js'; import { URL_CHAT_HISTORY } from '../../utils/constants.js';
@ -19,6 +19,9 @@ export default class Chat extends Component {
chatUserNames: [], chatUserNames: [],
}; };
this.scrollableMessagesContainer = createRef();
this.websocket = null; this.websocket = null;
this.getChatHistory = this.getChatHistory.bind(this); 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: prevName } = prevProps;
const { username, userAvatarImage } = this.props; const { username, userAvatarImage } = this.props;
const { messages: prevMessages } = prevState;
const { messages } = this.state;
// if username updated, send a message // if username updated, send a message
if (prevName !== username) { if (prevName !== username) {
this.sendUsernameChange(prevName, username, userAvatarImage); 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() { setupWebSocketCallbacks() {
@ -109,9 +120,6 @@ export default class Chat extends Component {
} }
this.setState(newState); this.setState(newState);
} }
// todo - jump to bottom
// jumpToBottom(this.scrollableMessagesContainer);
} }
websocketDisconnected() { websocketDisconnected() {
// this.websocket = null; // this.websocket = null;
@ -171,7 +179,11 @@ export default class Chat extends Component {
if (messagesOnly) { if (messagesOnly) {
return ( return (
html` html`
<div id="messages-container" class="py-1 overflow-auto"> <div
id="messages-container"
ref=${this.scrollableMessagesContainer}
class="py-1 overflow-auto"
>
${messageList} ${messageList}
</div> </div>
`); `);
@ -181,7 +193,11 @@ export default class Chat extends Component {
html` html`
<section id="chat-container-wrap" class="flex flex-col"> <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="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} ${messageList}
</div> </div>
<${ChatInput} <${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_OFFLINE = 'Stream is offline.';
export const MESSAGE_ONLINE = 'Stream is online.'; 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'; export const KEY_USERNAME = 'owncast_username';