Add execEmotesEfficient behind feature flag

For #645.  Disabled by default, I'll selectively enable it to be sure it
works and then remove the old implementation.

package.json

@@ -2,7 +2,7 @@
   "author": "Calvin Montgomery",
   "name": "CyTube",
   "description": "Online media synchronizer and chat",
-  "version": "3.30.0",
+  "version": "3.30.1",
   "repository": {
     "url": "http://github.com/calzoneman/sync"
   },

www/js/callbacks.js

@@ -997,9 +997,22 @@ Callbacks = {
                 break;
             }
         }
+        for (var i = 0; i < CHANNEL.badEmotes.length; i++) {
+            if (CHANNEL.badEmotes[i].name === data.name) {
+                CHANNEL.badEmotes[i] = data;
+                break;
+            }
+        }
 
         if (!found) {
             CHANNEL.emotes.push(data);
+            if (/\s/g.test(data.name)) {
+                CHANNEL.badEmotes.push(data);
+            } else {
+                CHANNEL.emoteMap[data.name] = data;
+            }
+        } else {
+            CHANNEL.emoteMap[data.name] = data;
         }
 
         EMOTELIST.handleChange();
@@ -1019,6 +1032,13 @@ Callbacks = {
             var row = $("code:contains('" + data.name + "')").parent().parent();
             row.hide("fade", row.remove.bind(row));
             CHANNEL.emotes.splice(i, 1);
+            delete CHANNEL.emoteMap[data.name];
+            for (var i = 0; i < CHANNEL.badEmotes.length; i++) {
+                if (CHANNEL.badEmotes[i].name === data.name) {
+                    CHANNEL.badEmotes.splice(i, 1);
+                    break;
+                }
+            }
         }
     },
 

www/js/data.js

@@ -70,6 +70,9 @@ var HAS_CONNECTED_BEFORE = false;
 var IMAGE_MATCH = /<img\s[^>]*?src\s*=\s*['\"]([^'\"]*?)['\"][^>]*?>/gi;
 var CyTube = {};
 CyTube.ui = {};
+CyTube.featureFlag = {
+    efficientEmotes: false
+};
 
 function getOpt(k) {
     var v = NO_STORAGE ? readCookie(k) : localStorage.getItem(k);

www/js/util.js

@@ -2649,10 +2649,18 @@ function formatUserPlaylistList() {
 
 function loadEmotes(data) {
     CHANNEL.emotes = [];
+    CHANNEL.emoteMap = {};
+    CHANNEL.badEmotes = [];
     data.forEach(function (e) {
         if (e.image && e.name) {
             e.regex = new RegExp(e.source, "gi");
             CHANNEL.emotes.push(e);
+            if (/\s/g.test(e.name)) {
+                // Emotes with spaces can't be hashmapped
+                CHANNEL.badEmotes.push(e);
+            } else {
+                CHANNEL.emoteMap[e.name] = e.image;
+            }
         } else {
             console.error("Rejecting invalid emote: " + JSON.stringify(e));
         }
@@ -2664,6 +2672,11 @@ function execEmotes(msg) {
         return msg;
     }
 
+    if (CyTube.featureFlag && CyTube.featureFlag.efficientEmotes) {
+        execEmotesEfficient(msg);
+        return;
+    }
+
     CHANNEL.emotes.forEach(function (e) {
         msg = msg.replace(e.regex, '$1<img class="channel-emote" src="' +
                                    e.image + '" title="' + e.name + '">');
@@ -2672,6 +2685,22 @@ function execEmotes(msg) {
     return msg;
 }
 
+function execEmotesEfficient(msg) {
+    CHANNEL.badEmotes.forEach(function (e) {
+        msg = msg.replace(e.regex, '$1<img class="channel-emote" src="' +
+                          e.image + '" title="' + e.name + '">');
+    });
+    msg = msg.replace(/[^\s]+/g, function (m) {
+        if (CHANNEL.emoteMap.hasOwnProperty(m)) {
+            var e = CHANNEL.emoteMap[m];
+            return '<img class="channel-emote" src="' + e.image + '" title="' + e.name + '">';
+        } else {
+            return m;
+        }
+    });
+    return msg;
+}
+
 function initPm(user) {
     if ($("#pm-" + user).length > 0) {
         return $("#pm-" + user);