From 23f39ab2f5962692f22362f72defb23c52a4fdc5 Mon Sep 17 00:00:00 2001
From: calzoneman <calzoneman@gmail.com>
Date: Sun, 29 Nov 2015 09:28:03 -0800
Subject: [PATCH] Improve chat autoscroll behavior

The previous behavior (don't autoscroll if the mouse is over the chat
area) was not intuitive and caused problems for people in chat only
mode, which led to a lot of people assuming that it was a glitch.

This change introduces the following behavior:

  * Hovering over chat no longer affects autoscroll.
  * Scrolling up in chat turns off autoscroll.
  * Scrolling to the bottom of the chatbox resumes autoscroll.
  * If a new message is added while autoscroll is off, a "New Messages
    Below" indicator is added to the bottom of the chatbox.
---
 www/css/cytube.css | 16 ++++++++++++++++
 www/js/ui.js       | 12 ++++++++++--
 www/js/util.js     | 25 +++++++++++++++++++++++--
 3 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/www/css/cytube.css b/www/css/cytube.css
index 0f9b4f24..b3e7e4b3 100644
--- a/www/css/cytube.css
+++ b/www/css/cytube.css
@@ -649,3 +649,19 @@ input#logout[type="submit"] {
 input#logout[type="submit"]:hover {
     text-decoration: underline;
 }
+
+#newmessages-indicator {
+    background: rgb(0, 0, 0);
+    background: rgba(0, 0, 0, 0.8);
+    line-height: 2.0;
+    position: relative;
+    bottom: 50px;
+    text-align: center;
+    width: 100%;
+    font-weight: bold;
+}
+
+#newmessages-indicator .glyphicon {
+    margin-left: 10px;
+    margin-right: 10px;
+}
diff --git a/www/js/ui.js b/www/js/ui.js
index 1b62b7df..6348391f 100644
--- a/www/js/ui.js
+++ b/www/js/ui.js
@@ -81,8 +81,16 @@ $("#usercount").mouseleave(function () {
     $("#usercount").find(".profile-box").remove();
 });
 
-$("#messagebuffer").mouseenter(function() { SCROLLCHAT = false; });
-$("#messagebuffer").mouseleave(function() { SCROLLCHAT = true; });
+$("#messagebuffer").scroll(function () {
+    var m = $("#messagebuffer");
+    var isCaughtUp = m.height() + m.scrollTop() >= m.prop("scrollHeight");
+    if (isCaughtUp) {
+        SCROLLCHAT = true;
+        $("#newmessages-indicator").remove();
+    } else {
+        SCROLLCHAT = false;
+    }
+});
 
 $("#guestname").keydown(function (ev) {
     if (ev.keyCode === 13) {
diff --git a/www/js/util.js b/www/js/util.js
index 605c6a71..301bf43b 100644
--- a/www/js/util.js
+++ b/www/js/util.js
@@ -821,6 +821,7 @@ function showPollMenu() {
 
 function scrollChat() {
     $("#messagebuffer").scrollTop($("#messagebuffer").prop("scrollHeight"));
+    $("#newmessages-indicator").remove();
 }
 
 function hasPermission(key) {
@@ -1482,9 +1483,27 @@ function addChatMessage(data) {
     div.mouseleave(function() {
         $(".nick-hover").removeClass("nick-hover");
     });
-    trimChatBuffer();
-    if(SCROLLCHAT)
+    var numRemoved = trimChatBuffer();
+    if (SCROLLCHAT) {
         scrollChat();
+    } else {
+        var newMessageDiv = $("#newmessages-indicator");
+        if (!newMessageDiv.length) {
+            newMessageDiv = $("<div/>").attr("id", "newmessages-indicator")
+                    .insertBefore($("#chatline"));
+
+            $("<span/>").addClass("glyphicon glyphicon-chevron-down")
+                    .appendTo(newMessageDiv);
+            $("<span/>").text("New Messages Below").appendTo(newMessageDiv);
+            $("<span/>").addClass("glyphicon glyphicon-chevron-down")
+                    .appendTo(newMessageDiv);
+        }
+
+        if (numRemoved > 0) {
+            $("#messagebuffer").scrollTop(
+                    $("#messagebuffer").scrollTop() - div.height());
+        }
+    }
 
     var isHighlight = false;
     if (CLIENT.name && data.username != CLIENT.name) {
@@ -1508,6 +1527,8 @@ function trimChatBuffer() {
     for (var i = 0; i < count; i++) {
         buffer.firstChild.remove();
     }
+
+    return count;
 }
 
 function pingMessage(isHighlight) {