diff options
| -rw-r--r-- | default-config.json | 2 | ||||
| -rw-r--r-- | res/client.js | 29 | ||||
| -rw-r--r-- | res/css/cytube.css | 7 | ||||
| -rw-r--r-- | src/client/Main.hx | 21 |
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); } } |