From 0b1f9db4edfd9f08f4c68d5de8fa8fa2834fa9b6 Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Sun, 23 Aug 2020 22:21:42 -0700
Subject: [PATCH] update references to owncast site; enable scrolltobottom on
 new messages

---
 webroot/index.html                 |  4 ++--
 webroot/js/components/chat/chat.js | 32 ++++++++++++++++++++++--------
 webroot/js/utils/constants.js      |  2 +-
 3 files changed, 27 insertions(+), 11 deletions(-)

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 @@
     }
   </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>
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`
-          <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}
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';