Resolve merge conflict

www/css/cytube.css

@@ -557,15 +557,15 @@ body.chatOnly .pm-panel, body.chatOnly .pm-panel-placeholder {
 }
 
 @media screen and (min-width: 768px) {
-    .modal {
-        padding: 30px;
-    }
-
     .modal-dialog {
         min-width: 600px!important;
         max-width: 1200px!important;
         width: auto!important;
     }
+
+    .modal-dialog-nonfluid.modal-dialog {
+        max-width: 600px!important;
+    }
 }
 
 table td {
@@ -592,3 +592,36 @@ table td {
     border: 1px solid;
     border-top-width: 0;
 }
+
+#emotelist table {
+    margin: auto;
+}
+
+.emote-preview-container {
+    width: 100px;
+    height: 100px;
+    float: left;
+    text-align: center;
+    white-space: nowrap;
+    margin: 5px;
+}
+
+.emote-preview-hax {
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+}
+
+.emote-preview {
+    max-width: 100px;
+    max-height: 100px;
+    cursor: pointer;
+}
+
+#emotelist-paginator-container {
+    text-align: center;
+}
+
+#leftcontrols .btn {
+    margin-right: 5px;
+}

www/css/themes/bootstrap-theme.min.css

@@ -32,6 +32,10 @@ footer {
     background-color: #ffffff;
 }
 
+#emotelist td {
+    background-color: #f0f0f0;
+}
+
 .chat-shadow {
     color: #aaaaaa;
 }

www/css/themes/cyborg.css

@@ -39,7 +39,7 @@ input.form-control[type="email"], textarea.form-control {
     color: #c8c8c8;
 }
 
-.profile-box, .user-dropdown {
+.profile-box, .user-dropdown, #emotelist td {
     color: #c8c8c8;
     background-color: #2d2d2d;
 }

www/css/themes/light.css

@@ -26,6 +26,10 @@ footer {
     background-color: #ffffff;
 }
 
+#emotelist td {
+    background-color: #f0f0f0;
+}
+
 .chat-shadow {
     color: #aaaaaa;
 }

www/css/themes/modern.css

@@ -46,6 +46,15 @@ input.form-control[type="email"], textarea.form-control {
     border-radius: 0px !important;
 }
 
+#emotelist table {
+    background-color: #2a2d30;
+}
+
+#emotelist td {
+    background-color: rgba(28, 30, 34, 0.95);
+    border: none;
+}
+
 .profile-image {
     border-radius: 0px;
     border: solid 1px #000000 !important;
@@ -176,4 +185,4 @@ input.form-control[type="email"], textarea.form-control {
     margin-bottom: 9px;
     min-height: 20px;
     padding: 10px 19px !important;
-}
+}

www/css/themes/slate.css

@@ -51,7 +51,7 @@ input.form-control[type="email"], textarea.form-control {
   background-image: linear-gradient(#484e55, #3a3f44 60%, #313539) !important;
 }
 
-.profile-box, .user-dropdown {
+.profile-box, .user-dropdown, #emotelist td {
   color: #c8c8c8;
   background-color: #161a20;
 }

www/js/callbacks.js

@@ -124,6 +124,7 @@ Callbacks = {
     cooldown: function (time) {
         time = time + 200;
         $("#chatline").css("color", "#ff0000");
+        $(".pm-input").css("color", "#ff0000");
         if (CHATTHROTTLE && $("#chatline").data("throttle_timer")) {
             clearTimeout($("#chatline").data("throttle_timer"));
         }
@@ -131,6 +132,7 @@ Callbacks = {
         $("#chatline").data("throttle_timer", setTimeout(function () {
             CHATTHROTTLE = false;
             $("#chatline").css("color", "");
+            $(".pm-input").css("color", "");
         }, time));
     },
 
@@ -279,7 +281,7 @@ Callbacks = {
     channelCSSJS: function(data) {
         $("#chancss").remove();
         CHANNEL.css = data.css;
-        $("#csstext").val(data.css);
+        $("#cs-csstext").val(data.css);
         if(data.css && !USEROPTS.ignore_channelcss) {
             $("<style/>").attr("type", "text/css")
                 .attr("id", "chancss")
@@ -289,7 +291,7 @@ Callbacks = {
 
         $("#chanjs").remove();
         CHANNEL.js = data.js;
-        $("#jstext").val(data.js);
+        $("#cs-jstext").val(data.js);
 
         if(data.js && !USEROPTS.ignore_channeljs) {
             var src = data.js
@@ -1015,6 +1017,7 @@ Callbacks = {
         var tbl = $("#cs-emotes table");
         tbl.data("entries", data);
         formatCSEmoteList();
+        EMOTELIST.emoteListChanged = true;
     },
 
     updateEmote: function (data) {

www/js/data.js

@@ -44,6 +44,7 @@ var IGNORED = [];
 var CHATHIST = [];
 var CHATHISTIDX = 0;
 var CHATTHROTTLE = false;
+var CHATMAXSIZE = 100;
 var SCROLLCHAT = true;
 var LASTCHAT = {
     name: ""
@@ -115,7 +116,9 @@ var USEROPTS = {
     default_quality      : getOrDefault("default_quality", "auto"),
     boop                 : getOrDefault("boop", "never"),
     secure_connection    : getOrDefault("secure_connection", false),
-    show_shadowchat      : getOrDefault("show_shadowchat", false)
+    show_shadowchat      : getOrDefault("show_shadowchat", false),
+    emotelist_sort       : getOrDefault("emotelist_sort", true),
+    no_emotes            : getOrDefault("no_emotes", false)
 };
 
 /* Backwards compatibility check */

www/js/paginator.js

@@ -103,3 +103,108 @@
        return p;
     };
 })();
+
+function NewPaginator(numItems, itemsPerPage, pageLoader) {
+    this.numItems = numItems;
+    this.itemsPerPage = itemsPerPage;
+    this.elem = document.createElement("ul");
+    this.elem.className = "pagination";
+    this.btnBefore = 3;
+    this.btnAfter = 3;
+    this.pageLoader = pageLoader;
+}
+
+NewPaginator.prototype.makeButton = function (target, text) {
+    var li = document.createElement("li");
+    var btn = document.createElement("a");
+    btn.href = "javascript:void(0)";
+    btn.innerHTML = text;
+    var _this = this;
+    if (target !== null) {
+        btn.onclick = function (event) {
+            if (this.parentNode.className === "disabled") {
+                event.preventDefault();
+                return false;
+            }
+            _this.loadPage(target);
+        };
+    }
+
+    li.appendChild(btn);
+    return li;
+};
+
+NewPaginator.prototype.makeBreak = function () {
+    var btn = this.makeButton(null, "…");
+    btn.className = "disabled";
+    return btn;
+};
+
+NewPaginator.prototype.loadButtons = function (page) {
+    this.elem.innerHTML = "";
+
+    var first = this.makeButton(0, "First");
+    this.elem.appendChild(first);
+    if (page === 0) {
+        first.className = "disabled";
+    }
+
+    var prev = this.makeButton(page - 1, "«");
+    this.elem.appendChild(prev);
+    if (page === 0) {
+        prev.className = "disabled";
+    }
+
+    if (page > this.btnBefore) {
+        var sep = this.makeBreak();
+        this.elem.appendChild(sep);
+    }
+
+    var numPages = Math.ceil(this.numItems / this.itemsPerPage);
+    numPages = Math.max(numPages, 1);
+    var numBtns = Math.min(this.btnBefore + this.btnAfter + 1, numPages);
+    var start;
+    if (page < this.btnBefore) {
+        start = 0;
+    } else if (page > numPages - this.btnAfter - 1) {
+        start = numPages - numBtns;
+    } else {
+        start = page - this.btnBefore;
+    }
+    var end = start + numBtns;
+
+    var _this = this;
+    for (var i = start; i < end; i++) {
+        (function (i) {
+            var btn = _this.makeButton(i, String(i + 1));
+            _this.elem.appendChild(btn);
+            if (i === page) {
+                btn.className = "disabled";
+            }
+        })(i);
+    }
+
+    if (page < numPages - this.btnAfter - 1) {
+        var sep = this.makeBreak();
+        this.elem.appendChild(sep);
+    }
+
+    var next = this.makeButton(page + 1, "&raquo;");
+    this.elem.appendChild(next);
+    if (page === numPages - 1) {
+        next.className = "disabled";
+    }
+
+    var last = this.makeButton(numPages - 1, "Last");
+    this.elem.appendChild(last);
+    if (page === numPages - 1) {
+        last.className = "disabled";
+    }
+};
+
+NewPaginator.prototype.loadPage = function (page) {
+    this.loadButtons(page);
+    if (this.pageLoader) {
+        this.pageLoader(page);
+    }
+};

www/js/ui.js

@@ -740,6 +740,11 @@ $("#channeloptions li > a[data-toggle='tab']").on("shown.bs.tab", function () {
 applyOpts();
 
 (function () {
+    var embed = document.querySelector("#videowrap .embed-responsive");
+    if (!embed) {
+        return;
+    }
+
     if (typeof window.MutationObserver === "function") {
         var mr = new MutationObserver(function (records) {
             records.forEach(function (record) {
@@ -751,14 +756,39 @@ applyOpts();
             });
         });
 
-        mr.observe($("#videowrap").find(".embed-responsive")[0], { childList: true });
+        mr.observe(embed, { childList: true });
     } else {
         /*
          * DOMNodeInserted is deprecated.  This code is here only as a fallback
          * for browsers that do not support MutationObserver
          */
-        $("#videowrap").find(".embed-responsive")[0].addEventListener("DOMNodeInserted", function (ev) {
+        embed.addEventListener("DOMNodeInserted", function (ev) {
             if (ev.target.id === "ytapiplayer") handleVideoResize();
         });
     }
 })();
+
+$("#emotelistbtn").click(function () {
+    EMOTELIST.show();
+});
+
+$("#emotelist-search").keyup(function () {
+    var value = this.value.toLowerCase();
+    if (value) {
+        EMOTELIST.filter = function (emote) {
+            return emote.name.toLowerCase().indexOf(value) >= 0;
+        };
+    } else {
+        EMOTELIST.filter = null;
+    }
+    EMOTELIST.handleChange();
+    EMOTELIST.loadPage(0);
+});
+
+$("#emotelist-alphabetical").prop("checked", USEROPTS.emotelist_sort);
+$("#emotelist-alphabetical").change(function () {
+    USEROPTS.emotelist_sort = this.checked;
+    setOpt("emotelist_sort", USEROPTS.emotelist_sort);
+    EMOTELIST.handleChange();
+    EMOTELIST.loadPage(0);
+});

www/js/util.js

@@ -733,9 +733,7 @@ function applyOpts() {
     }
 
     if(USEROPTS.hidevid) {
-        $("#qualitywrap").html("");
         removeVideo();
-        $("#chatwrap").removeClass("col-lg-5 col-md-5").addClass("col-lg-12 col-md-12");
     }
 
     $("#chatbtn").remove();
@@ -1492,10 +1490,7 @@ function addChatMessage(data) {
     div.mouseleave(function() {
         $(".nick-hover").removeClass("nick-hover");
     });
-    // Cap chatbox at most recent 100 messages
-    if($("#messagebuffer").children().length > 100) {
-        $($("#messagebuffer").children()[0]).remove();
-    }
+    trimChatBuffer();
     if(SCROLLCHAT)
         scrollChat();
 
@@ -1511,6 +1506,18 @@ function addChatMessage(data) {
 
 }
 
+function trimChatBuffer() {
+    var maxSize = window.CHATMAXSIZE;
+    if (!maxSize || typeof maxSize !== "number")
+        maxSize = parseInt(maxSize || 100, 10) || 100;
+    var buffer = document.getElementById("messagebuffer");
+    var count = buffer.childNodes.length - maxSize;
+
+    for (var i = 0; i < count; i++) {
+        buffer.firstChild.remove();
+    }
+}
+
 function pingMessage(isHighlight) {
     if (!FOCUSED) {
         if (!TITLE_BLINK && (USEROPTS.blink_title === "always" ||
@@ -1688,7 +1695,14 @@ function chatOnly() {
         .click(function () {
             $("#channeloptions").modal();
         });
+    $("<span/>").addClass("label label-default pull-right pointer")
+        .text("Emote List")
+        .appendTo($("#chatheader"))
+        .click(function () {
+            EMOTELIST.show();
+        });
     setVisible("#showchansettings", CLIENT.rank >= 2);
+
     $("body").addClass("chatOnly");
     handleWindowResize();
 }
@@ -1711,7 +1725,7 @@ function handleVideoResize() {
     var intv, ticks = 0;
     var resize = function () {
         if (++ticks > 10) clearInterval(intv);
-        if ($("#ytapiplayer").parent().height() === 0) return;
+        if ($("#ytapiplayer").parent().outerHeight() <= 0) return;
         clearInterval(intv);
 
         var responsiveFrame = $("#ytapiplayer").parent();
@@ -1730,7 +1744,7 @@ function handleVideoResize() {
 $(window).resize(handleWindowResize);
 handleWindowResize();
 
-function removeVideo() {
+function removeVideo(event) {
     try {
         PLAYER.setVolume(0);
         if (PLAYER.type === "rv") {
@@ -1741,6 +1755,7 @@ function removeVideo() {
 
     $("#videowrap").remove();
     $("#chatwrap").removeClass("col-lg-5 col-md-5").addClass("col-md-12");
+    if (event) event.preventDefault();
 }
 
 /* channel administration stuff */
@@ -2514,6 +2529,11 @@ function formatUserPlaylistList() {
             .attr("title", "Delete playlist")
             .appendTo(btns)
             .click(function () {
+                var really = confirm("Are you sure you want to delete" +
+                    " this playlist? This cannot be undone.");
+                if (!really) {
+                    return;
+                }
                 socket.emit("deletePlaylist", {
                     name: pl.name
                 });
@@ -2581,10 +2601,14 @@ function initPm(user) {
     var buffer = $("<div/>").addClass("pm-buffer linewrap").appendTo(body);
     $("<hr/>").appendTo(body);
     var input = $("<input/>").addClass("form-control pm-input").attr("type", "text")
+        .attr("maxlength", 240)
         .appendTo(body);
 
     input.keydown(function (ev) {
         if (ev.keyCode === 13) {
+            if (CHATTHROTTLE) {
+                return;
+            }
             var meta = {};
             var msg = input.val();
             if (msg.trim() === "") {
@@ -2836,3 +2860,106 @@ function googlePlusSimulator2014(data) {
     data.contentType = data.meta.gpdirect[q].contentType;
     return data;
 }
+
+function EmoteList() {
+    this.modal = $("#emotelist");
+    this.modal.on("hidden.bs.modal", unhidePlayer);
+    this.table = document.querySelector("#emotelist table");
+    this.cols = 5;
+    this.itemsPerPage = 25;
+    this.emotes = [];
+    this.emoteListChanged = true;
+    this.page = 0;
+}
+
+EmoteList.prototype.handleChange = function () {
+    this.emotes = CHANNEL.emotes.slice();
+    if (USEROPTS.emotelist_sort) {
+        this.emotes.sort(function (a, b) {
+            var x = a.name.toLowerCase();
+            var y = b.name.toLowerCase();
+
+            if (x < y) {
+                return -1;
+            } else if (x > y) {
+                return 1;
+            } else {
+                return 0;
+            }
+        });
+    }
+
+    if (this.filter) {
+        this.emotes = this.emotes.filter(this.filter);
+    }
+
+    this.paginator = new NewPaginator(this.emotes.length, this.itemsPerPage,
+            this.loadPage.bind(this));
+    var container = document.getElementById("emotelist-paginator-container");
+    container.innerHTML = "";
+    container.appendChild(this.paginator.elem);
+    this.paginator.loadPage(this.page);
+    this.emoteListChanged = false;
+};
+
+EmoteList.prototype.show = function () {
+    if (this.emoteListChanged) {
+        this.handleChange();
+    }
+
+    this.modal.modal();
+};
+
+EmoteList.prototype.loadPage = function (page) {
+    var tbody = this.table.children[0];
+    tbody.innerHTML = "";
+
+    var row;
+    var start = page * this.itemsPerPage;
+    if (start >= this.emotes.length) return;
+    var end = Math.min(start + this.itemsPerPage, this.emotes.length);
+    var _this = this;
+
+    for (var i = start; i < end; i++) {
+        if ((i - start) % this.cols === 0) {
+            row = document.createElement("tr");
+            tbody.appendChild(row);
+        }
+
+        (function (emote) {
+            var td = document.createElement("td");
+            td.className = "emote-preview-container";
+
+            // Trick element to vertically align the emote within the container
+            var hax = document.createElement("span");
+            hax.className = "emote-preview-hax";
+            td.appendChild(hax);
+
+            var img = document.createElement("img");
+            img.src = emote.image;
+            img.className = "emote-preview";
+            img.title = emote.name;
+            img.onclick = function () {
+                var val = chatline.value;
+                if (!val) {
+                    chatline.value = emote.name;
+                } else {
+                    if (!val.charAt(val.length - 1).match(/\s/)) {
+                        chatline.value += " ";
+                    }
+                    chatline.value += emote.name;
+                }
+
+                _this.modal.modal("hide");
+                chatline.focus();
+            };
+
+            td.appendChild(img);
+            row.appendChild(td);
+        })(this.emotes[i]);
+    }
+
+    this.page = page;
+};
+
+window.EMOTELIST = new EmoteList();