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

@@ -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;
+}

www/js/ui.js

@@ -81,8 +81,16 @@ $("#usercount").mouseleave(function () {
     $("#usercount").find(".profile-box").remove();
 });
 
-$("#messagebuffer").mouseenter(function() { SCROLLCHAT = false; });
+$("#messagebuffer").scroll(function () {
-$("#messagebuffer").mouseleave(function() { SCROLLCHAT = true; });
+    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) {

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();
+    var numRemoved = trimChatBuffer();
-    if(SCROLLCHAT)
+    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) {