Improve emotes handling

4 files changed, 41 insertions, 18 deletions

diff --git a/default-config.json b/default-config.json
index ab6dd93..53dfbe5 100644
--- a/default-config.json
+++ b/default-config.json
@@ -58,7 +58,7 @@
 			"name": "image",
 			"regex": "(https?:\\/\\/[^']*\\.)(png|jpg|gif|jpeg)([^' ,]*)",
 			"flags": "g",
-			"replace": "<a href='$1$2$3' target='_blank' rel='noopener noreferrer'><img src='$1$2$3' style='max-width:200px; max-height:200px'/></a>"
+			"replace": "<a href='$1$2$3' target='_blank' rel='noopener noreferrer'><img src='$1$2$3' class='chat-img'/></a>"
 		},
 		{
 			"name": "url",
diff --git a/res/client.js b/res/client.js
index d70fcab..0bacd96 100644
--- a/res/client.js
+++ b/res/client.js
@@ -342,6 +342,15 @@ StringTools.startsWith = function(s,start) {
 		return false;
 	}
 };
+StringTools.endsWith = function(s,end) {
+	var elen = end.length;
+	var slen = s.length;
+	if(slen >= elen) {
+		return s.indexOf(end,slen - elen) == slen - elen;
+	} else {
+		return false;
+	}
+};
 StringTools.replace = function(s,sub,by) {
 	return s.split(sub).join(by);
 };
@@ -1035,7 +1044,7 @@ client_Main.prototype = {
 		var data = JSON.parse(e.data);
 		var t = data.type;
 		var t1 = t.charAt(0).toLowerCase() + HxOverrides.substr(t,1,null);
-		haxe_Log.trace("Event: " + data.type,{ fileName : "src/client/Main.hx", lineNumber : 280, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
+		haxe_Log.trace("Event: " + data.type,{ fileName : "src/client/Main.hx", lineNumber : 281, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
 		switch(data.type) {
 		case "AddVideo":
 			this.player.addVideoItem(data.addVideo.item,data.addVideo.atEnd);
@@ -1254,7 +1263,8 @@ client_Main.prototype = {
 		while(_g2 < _g3.length) {
 			var emote = _g3[_g2];
 			++_g2;
-			this.filters.push({ regex : new EReg(this.escapeRegExp(emote.name),"g"), replace : "<img class=\"channel-emote\" src=\"" + emote.image + "\" title=\"" + emote.name + "\"/>"});
+			var tag = StringTools.endsWith(emote.image,"mp4") ? "video autoplay=\"\" loop=\"\"" : "img";
+			this.filters.push({ regex : new EReg("(^| )" + this.escapeRegExp(emote.name) + "($| )","g"), replace : "$1<" + tag + " class=\"channel-emote\" src=\"" + emote.image + "\" title=\"" + emote.name + "\"/>$2"});
 		}
 		var smilesWrap = window.document.querySelector("#smileswrap");
 		smilesWrap.onclick = function(e) {
@@ -1270,11 +1280,16 @@ client_Main.prototype = {
 		while(_g4 < _g5.length) {
 			var emote1 = _g5[_g4];
 			++_g4;
-			var img = window.document.createElement("img");
-			img.className = "smile-preview";
-			img.dataset.src = emote1.image;
-			img.title = emote1.name;
-			smilesWrap.appendChild(img);
+			var tag1 = StringTools.endsWith(emote1.image,"mp4") ? "video" : "img";
+			var el1 = window.document.createElement(tag1);
+			el1.className = "smile-preview";
+			el1.dataset.src = emote1.image;
+			el1.title = emote1.name;
+			if(tag1 == "video") {
+				el1.autoplay = true;
+				el1.loop = true;
+			}
+			smilesWrap.appendChild(el1);
 		}
 	}
 	,onLogin: function(data,clientName) {
diff --git a/res/css/cytube.css b/res/css/cytube.css
index cf54118..9a79496 100644
--- a/res/css/cytube.css
+++ b/res/css/cytube.css
@@ -92,14 +92,15 @@
   text-align: center;
   color: #fff;
 }
-#smileswrap video {
-  vertical-align: middle;
-}
 .smile-preview {
   padding: 2px;
   max-height: 75px;
   cursor: pointer;
 }
+.channel-emote, .chat-img {
+  max-width: 200px;
+  max-height: 200px;
+}
 
 /*
 #userpl_list li {
diff --git a/src/client/Main.hx b/src/client/Main.hx
index e5c67a7..b0b295e 100644
--- a/src/client/Main.hx
+++ b/src/client/Main.hx
@@ -8,6 +8,7 @@ import js.html.KeyboardEvent;
 import js.html.Event;
 import js.html.Element;
 import js.html.InputElement;
+import js.html.VideoElement;
 import js.html.WebSocket;
 import js.Browser;
 import js.Browser.document;
@@ -474,9 +475,10 @@ class Main {
 			});
 		}
 		for (emote in config.emotes) {
+			final tag = emote.image.endsWith("mp4") ? 'video autoplay="" loop=""' : "img";
 			filters.push({
-				regex: new EReg(escapeRegExp(emote.name), "g"),
-				replace: '<img class="channel-emote" src="${emote.image}" title="${emote.name}"/>'
+				regex: new EReg("(^| )" + escapeRegExp(emote.name) + "($| )", "g"),
+				replace: '$1<$tag class="channel-emote" src="${emote.image}" title="${emote.name}"/>$2'
 			});
 		}
 		final smilesWrap = ge("#smileswrap");
@@ -488,11 +490,16 @@ class Main {
 		}
 		smilesWrap.textContent = "";
 		for (emote in config.emotes) {
-			final img = document.createImageElement();
-			img.className = "smile-preview";
-			img.dataset.src = emote.image;
-			img.title = emote.name;
-			smilesWrap.appendChild(img);
+			final tag = emote.image.endsWith("mp4") ? "video" : "img";
+			final el = document.createElement(tag);
+			el.className = "smile-preview";
+			el.dataset.src = emote.image;
+			el.title = emote.name;
+			if (tag == "video") {
+				(cast el : VideoElement).autoplay = true;
+				(cast el : VideoElement).loop = true;
+			}
+			smilesWrap.appendChild(el);
 		}
 	}