Improve video emotes

3 files changed, 30 insertions, 20 deletions

diff --git a/res/client.js b/res/client.js
index 715fe24..f19bebc 100644
--- a/res/client.js
+++ b/res/client.js
@@ -1154,7 +1154,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 : 303, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
+		haxe_Log.trace("Event: " + data.type,{ fileName : "src/client/Main.hx", lineNumber : 305, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]});
 		switch(data.type) {
 		case "AddVideo":
 			this.player.addVideoItem(data.addVideo.item,data.addVideo.atEnd);
@@ -1588,11 +1588,16 @@ client_Main.prototype = {
 		e.target.onload = null;
 	}
 	,onChatVideoLoaded: function(e) {
-		var _gthis = this;
-		haxe_Timer.delay(function() {
-			_gthis.scrollChatToEnd();
-			return e.target.onloadedmetadata = null;
-		},100);
+		var el = e.target;
+		if(this.emoteMaxSize == null) {
+			this.emoteMaxSize = Std.parseInt(window.getComputedStyle(el).getPropertyValue("max-width"));
+		}
+		var max = this.emoteMaxSize;
+		var ratio = Math.min(max / el.videoWidth,max / el.videoHeight);
+		el.style.width = "" + el.videoWidth * ratio + "px";
+		el.style.height = "" + el.videoHeight * ratio + "px";
+		this.scrollChatToEnd();
+		el.onloadedmetadata = null;
 	}
 	,scrollChatToEnd: function() {
 		var msgBuf = window.document.querySelector("#messagebuffer");
diff --git a/res/css/cytube.css b/res/css/cytube.css
index 55e832c..a550826 100644
--- a/res/css/cytube.css
+++ b/res/css/cytube.css
@@ -109,12 +109,6 @@
   max-width: 200px;
   max-height: 200px;
 }
-video.channel-emote, video.chat-img {
-  background-color: transparent;
-  /* Fixes default video tag size in chat when tab unloads videos in background */
-  /* (some browsers optimization i guess) */
-  height: 150px;
-}
 
 /*
 #userpl_list li {
diff --git a/src/client/Main.hx b/src/client/Main.hx
index fda93c7..93a1618 100644
--- a/src/client/Main.hx
+++ b/src/client/Main.hx
@@ -7,10 +7,12 @@ import js.html.MouseEvent;
 import js.html.KeyboardEvent;
 import js.html.Event;
 import js.html.Element;
+import js.html.VideoElement;
 import js.html.InputElement;
 import js.html.WebSocket;
 import js.Browser;
 import js.Browser.document;
+import js.Browser.window;
 import Client.ClientData;
 import Types.VideoData;
 import Types.Config;
@@ -122,7 +124,7 @@ class Main {
 		}
 		final voteSkip = ge("#voteskip");
 		voteSkip.onclick = e -> {
-			if (Utils.isTouch() && !Browser.window.confirm(Lang.get("skipItemConfirm"))) return;
+			if (Utils.isTouch() && !window.confirm(Lang.get("skipItemConfirm"))) return;
 			if (player.isListEmpty()) return;
 			final items = player.getItems();
 			final pos = player.getItemPos();
@@ -549,7 +551,7 @@ class Main {
 		ge("#guestpassword").style.display = "none";
 		ge("#chatline").style.display = "none";
 		ge("#exitBtn").textContent = Lang.get("login");
-		Browser.window.dispatchEvent(new Event("resize"));
+		window.dispatchEvent(new Event("resize"));
 	}
 
 	function hideGuestLoginPanel():Void {
@@ -558,7 +560,7 @@ class Main {
 		ge("#chatline").style.display = "block";
 		ge("#exitBtn").textContent = Lang.get("exit");
 		if (isAdmin()) ge("#clearchatbtn").style.display = "inline-block";
-		Browser.window.dispatchEvent(new Event("resize"));
+		window.dispatchEvent(new Event("resize"));
 	}
 
 	function showGuestPasswordPanel():Void {
@@ -694,12 +696,21 @@ class Main {
 		(cast e.target : Element).onload = null;
 	}
 
+	var emoteMaxSize:Null<Int>;
+
 	function onChatVideoLoaded(e:Event):Void {
-		// for some time default video size is 300x150px
-		Timer.delay(() -> {
-			scrollChatToEnd();
-			(cast e.target : Element).onloadedmetadata = null;
-		}, 100);
+		final el:VideoElement = cast e.target;
+		if (emoteMaxSize == null) {
+			emoteMaxSize = Std.parseInt(window.getComputedStyle(el).getPropertyValue("max-width"));
+		}
+		// fixes default video tag size in chat when tab unloads videos in background
+		// (some browsers optimization i guess)
+		final max = emoteMaxSize;
+		final ratio = Math.min(max / el.videoWidth, max / el.videoHeight);
+		el.style.width = '${el.videoWidth * ratio}px';
+		el.style.height = '${el.videoHeight * ratio}px';
+		scrollChatToEnd();
+		el.onloadedmetadata = null;
 	}
 
 	public function scrollChatToEnd():Void {