From e0f2520fb03ed07a38e96c012c0f599b2fbe7f04 Mon Sep 17 00:00:00 2001 From: RblSb Date: Sun, 26 Apr 2020 06:14:07 +0300 Subject: Fix autoscroll with unloaded images --- res/client.js | 44 +++++++++++++++++++++++++++++++++++--------- res/css/cytube.css | 7 ++++++- 2 files changed, 41 insertions(+), 10 deletions(-) (limited to 'res') diff --git a/res/client.js b/res/client.js index 8161f26..715fe24 100644 --- a/res/client.js +++ b/res/client.js @@ -530,7 +530,9 @@ client_Buttons.init = function(main) { client_Buttons.split.setSizes(sizes); client_Buttons.settings.isExtendedPlayer = isExtended; client_Buttons.writeSplitSize(); - return window.dispatchEvent(new Event("resize")); + window.dispatchEvent(new Event("resize")); + main.scrollChatToEnd(); + return; }; if(client_Buttons.settings.isExtendedPlayer) { extendPlayer.onclick(); @@ -749,6 +751,7 @@ client_Buttons.initNavBar = function(main) { client_Buttons.initSplit(); swapLayoutBtn.blur(); client_Buttons.hideMenus(); + main.scrollChatToEnd(); return; }; if(client_Buttons.settings.isSwapped) { @@ -1389,7 +1392,7 @@ client_Main.prototype = { while(_g2 < _g3.length) { var emote = _g3[_g2]; ++_g2; - var tag = StringTools.endsWith(emote.image,"mp4") ? "video autoplay=\"\" loop=\"\"" : "img"; + var tag = StringTools.endsWith(emote.image,"mp4") ? "video autoplay=\"\" loop=\"\" muted=\"\"" : "img"; this.filters.push({ regex : new EReg("(^| )" + this.escapeRegExp(emote.name) + "(?!\\S)","g"), replace : "$1<" + tag + " class=\"channel-emote\" src=\"" + emote.image + "\" title=\"" + emote.name + "\"/>"}); } window.document.querySelector("#smilesbtn").classList.remove("active"); @@ -1549,6 +1552,14 @@ client_Main.prototype = { } textDiv.innerHTML = text; var isInChatEnd = msgBuf.scrollTop + msgBuf.clientHeight >= msgBuf.scrollHeight - 1; + if(isInChatEnd) { + var _g2 = 0; + var _g11 = textDiv.getElementsByTagName("img"); + while(_g2 < _g11.length) _g11[_g2++].onload = $bind(this,this.onChatImageLoaded); + var _g21 = 0; + var _g3 = textDiv.getElementsByTagName("video"); + while(_g21 < _g3.length) _g3[_g21++].onloadedmetadata = $bind(this,this.onChatVideoLoaded); + } userDiv.appendChild(tstamp); userDiv.appendChild(nameDiv); userDiv.appendChild(textDiv); @@ -1572,6 +1583,21 @@ client_Main.prototype = { this.onBlinkTab.run(); } } + ,onChatImageLoaded: function(e) { + this.scrollChatToEnd(); + e.target.onload = null; + } + ,onChatVideoLoaded: function(e) { + var _gthis = this; + haxe_Timer.delay(function() { + _gthis.scrollChatToEnd(); + return e.target.onloadedmetadata = null; + },100); + } + ,scrollChatToEnd: function() { + var msgBuf = window.document.querySelector("#messagebuffer"); + msgBuf.scrollTop = msgBuf.scrollHeight; + } ,handleCommands: function(text) { if(text == "clear") { if((this.personal.group & 4) != 0) { @@ -1782,7 +1808,7 @@ client_Player.prototype = { } ,addVideoItem: function(item,atEnd) { var url = StringTools.htmlEscape(item.url,true); - var itemEl = this.nodeFromString("
  • \n\t\t\t\t" + StringTools.htmlEscape(item.title) + "\n\t\t\t\t" + this.duration(item.duration) + "\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t
    • "); + var itemEl = client_Utils.nodeFromString("
  • \n\t\t\t\t" + StringTools.htmlEscape(item.title) + "\n\t\t\t\t" + this.duration(item.duration) + "\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t
    • "); _$VideoList_VideoList_$Impl_$.addItem(this.items,item,atEnd,this.itemPos); this.setItemElementType(itemEl,item.isTemp); if(atEnd) { @@ -1907,11 +1933,6 @@ client_Player.prototype = { while(_g < _g1.length) time += _g1[_g++].duration; return this.duration(time); } - ,nodeFromString: function(div) { - var wrapper = window.document.createElement("div"); - wrapper.innerHTML = div; - return wrapper.firstElementChild; - } ,isListEmpty: function() { return this.items.length == 0; } @@ -2053,6 +2074,11 @@ client_Utils.__name__ = true; client_Utils.isTouch = function() { return 'ontouchstart' in window; }; +client_Utils.nodeFromString = function(div) { + var wrapper = window.document.createElement("div"); + wrapper.innerHTML = div; + return wrapper.firstElementChild; +}; client_Utils.prepend = function(parent,child) { if(parent.firstChild == null) { parent.appendChild(child); @@ -2235,10 +2261,10 @@ client_players_Raw.prototype = { } ,restartControlsHider: function() { var _gthis = this; + this.video.controls = true; if(client_Utils.isTouch()) { return; } - this.video.controls = true; if(this.controlsHider != null) { this.controlsHider.stop(); } diff --git a/res/css/cytube.css b/res/css/cytube.css index b080f91..55e832c 100644 --- a/res/css/cytube.css +++ b/res/css/cytube.css @@ -101,11 +101,16 @@ max-height: 75px; cursor: pointer; } -.channel-emote, .chat-img { +.channel-emote { max-width: 150px; max-height: 150px; } +.chat-img { + 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; -- cgit v1.2.3