Fix autoscroll with unloaded images

5 files changed, 39 insertions, 11 deletions

diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index a7dd4e1..d4533bf 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -90,6 +90,7 @@ class Buttons {
 			settings.isExtendedPlayer = isExtended;
 			writeSplitSize();
 			window.dispatchEvent(new Event("resize"));
+			main.scrollChatToEnd();
 		}
 		if (settings.isExtendedPlayer) extendPlayer.onclick();
 
@@ -281,6 +282,7 @@ class Buttons {
 			initSplit();
 			swapLayoutBtn.blur();
 			hideMenus();
+			main.scrollChatToEnd();
 		}
 		if (settings.isSwapped) swapLayoutBtn.onclick();
 		final removeBtn = ge("#removeVideoBtn");
diff --git a/src/client/Main.hx b/src/client/Main.hx
index 5ee14d6..fda93c7 100644
--- a/src/client/Main.hx
+++ b/src/client/Main.hx
@@ -510,7 +510,7 @@ class Main {
 			});
 		}
 		for (emote in config.emotes) {
-			final tag = emote.image.endsWith("mp4") ? 'video autoplay="" loop=""' : "img";
+			final tag = emote.image.endsWith("mp4") ? 'video autoplay="" loop="" muted=""' : "img";
 			filters.push({
 				regex: new EReg("(^| )" + escapeRegExp(emote.name) + "(?!\\S)", "g"),
 				replace: '$1<$tag class="channel-emote" src="${emote.image}" title="${emote.name}"/>'
@@ -656,8 +656,17 @@ class Main {
 			}
 		}
 		textDiv.innerHTML = text;
-
 		final isInChatEnd = msgBuf.scrollTop + msgBuf.clientHeight >= msgBuf.scrollHeight - 1;
+
+		if (isInChatEnd) { // scroll chat to end after images loaded
+			for (img in textDiv.getElementsByTagName("img")) {
+				img.onload = onChatImageLoaded;
+			}
+			for (video in textDiv.getElementsByTagName("video")) {
+				video.onloadedmetadata = onChatVideoLoaded;
+			}
+		}
+
 		userDiv.appendChild(tstamp);
 		userDiv.appendChild(nameDiv);
 		userDiv.appendChild(textDiv);
@@ -680,6 +689,24 @@ class Main {
 		}
 	}
 
+	function onChatImageLoaded(e:Event):Void {
+		scrollChatToEnd();
+		(cast e.target : Element).onload = null;
+	}
+
+	function onChatVideoLoaded(e:Event):Void {
+		// for some time default video size is 300x150px
+		Timer.delay(() -> {
+			scrollChatToEnd();
+			(cast e.target : Element).onloadedmetadata = null;
+		}, 100);
+	}
+
+	public function scrollChatToEnd():Void {
+		final msgBuf = ge("#messagebuffer");
+		msgBuf.scrollTop = msgBuf.scrollHeight;
+	}
+
 	final matchNumbers = ~/^-?[0-9]+$/;
 
 	function handleCommands(text:String):Void {
diff --git a/src/client/Player.hx b/src/client/Player.hx
index c853464..28b5c09 100644
--- a/src/client/Player.hx
+++ b/src/client/Player.hx
@@ -1,7 +1,6 @@
 package client;
 
 import js.html.Element;
-import js.Browser.document;
 import client.Main.ge;
 import client.players.Raw;
 import client.players.Youtube;
@@ -180,7 +179,7 @@ class Player {
 
 	public function addVideoItem(item:VideoItem, atEnd:Bool):Void {
 		final url = item.url.htmlEscape(true);
-		final itemEl = nodeFromString(
+		final itemEl = Utils.nodeFromString(
 			'<li class="queue_entry pluid-0" title="${Lang.get("addedBy")}: ${item.author}">
 				<a class="qe_title" href="$url" target="_blank">${item.title.htmlEscape()}</a>
 				<span class="qe_time">${duration(item.duration)}</span>
@@ -297,12 +296,6 @@ class Player {
 		return duration(time);
 	}
 
-	function nodeFromString(div:String):Element {
-		final wrapper = document.createDivElement();
-		wrapper.innerHTML = div;
-		return wrapper.firstElementChild;
-	}
-
 	public function isListEmpty():Bool {
 		return items.length == 0;
 	}
diff --git a/src/client/Utils.hx b/src/client/Utils.hx
index 3ac9953..e9d5ff8 100644
--- a/src/client/Utils.hx
+++ b/src/client/Utils.hx
@@ -10,6 +10,12 @@ class Utils {
 		return js.Syntax.code("'ontouchstart' in window");
 	}
 
+	public static function nodeFromString(div:String):Element {
+		final wrapper = document.createDivElement();
+		wrapper.innerHTML = div;
+		return wrapper.firstElementChild;
+	}
+
 	public static function prepend(parent:Element, child:Element):Void {
 		if (parent.firstChild == null) parent.appendChild(child);
 		else parent.insertBefore(child, parent.firstChild);
diff --git a/src/client/players/Raw.hx b/src/client/players/Raw.hx
index 4fa000b..266f0a2 100644
--- a/src/client/players/Raw.hx
+++ b/src/client/players/Raw.hx
@@ -71,8 +71,8 @@ class Raw implements IPlayer {
 	}
 
 	function restartControlsHider():Void {
-		if (Utils.isTouch()) return;
 		video.controls = true;
+		if (Utils.isTouch()) return;
 		if (controlsHider != null) controlsHider.stop();
 		controlsHider = Timer.delay(() -> {
 			video.controls = false;