From a30cc5643c1e8366d2e8743fbe7c01ce1a468111 Mon Sep 17 00:00:00 2001 From: RblSb Date: Sat, 18 Jan 2025 08:37:21 +0300 Subject: Make raw videos adaptive for aspect ratios Sadly there is no info about video size for iframes, so they will be keeped as 16/9. Let me know if this change breaks anything. --- res/client.js | 32 +++++++++++----------------- res/css/des.css | 50 ++++++++++++++++++++++++++------------------ res/index.html | 2 +- src/client/Buttons.hx | 4 ++-- src/client/players/Iframe.hx | 2 +- src/client/players/Raw.hx | 1 + src/client/players/Vk.hx | 28 +++++++++++-------------- 7 files changed, 59 insertions(+), 60 deletions(-) diff --git a/res/client.js b/res/client.js index efcd05c..e641be7 100644 --- a/res/client.js +++ b/res/client.js @@ -670,9 +670,7 @@ client_Buttons.init = function(main) { if(isHidden) { icon.setAttribute("name","chevron-down"); style.display = "block"; - var list = wrap.firstElementChild; - var tmp = client_Buttons.outerHeight(list); - wrap.style.height = tmp + "px"; + wrap.style.height = "15vh"; wrap.style.marginBottom = "1rem"; } else { icon.setAttribute("name","chevron-forward"); @@ -687,10 +685,7 @@ client_Buttons.init = function(main) { if(client_Buttons.settings.isUserListHidden) { userlistToggle.onclick(); } else { - var wrap = window.document.querySelector("#userlist-wrap"); - var list = wrap.firstElementChild; - var tmp = client_Buttons.outerHeight(list); - wrap.style.height = tmp + "px"; + window.document.querySelector("#userlist-wrap").style.height = "15vh"; } haxe_Timer.delay(function() { window.document.querySelector("#userlist-wrap").style.transition = "200ms"; @@ -3311,7 +3306,6 @@ client_players_Iframe.prototype = { ,loadVideo: function(item) { this.removeVideo(); this.video = window.document.createElement("div"); - this.video.id = "videoplayer"; this.video.innerHTML = item.url; if(!this.isValidIframe(this.video)) { this.video = null; @@ -3320,6 +3314,7 @@ client_players_Iframe.prototype = { if(this.video.firstChild.nodeName == "IFRAME") { this.video.setAttribute("sandbox","allow-scripts"); } + this.video.firstElementChild.id = "videoplayer"; this.playerEl.appendChild(this.video); } ,removeVideo: function() { @@ -3405,6 +3400,7 @@ client_players_Raw.prototype = { var subs = StringTools.trim(this.subsInput.value); this.subsInput.value = ""; var video = window.document.createElement("video"); + video.id = "temp-videoplayer"; video.src = url; video.onerror = function(e) { if(_gthis.playerEl.contains(video)) { @@ -3906,21 +3902,19 @@ client_players_Vk.prototype = { return; } var url = data.url; - var video = window.document.createElement("div"); - video.id = "temp-videoplayer"; var ids = this.getVideoIds(url); if(ids == null) { callback({ duration : 0}); return; } - video.innerHTML = StringTools.trim("\n\t\t\t\n\t\t"); - client_Utils.prepend(this.playerEl,video); - var tempVkPlayer = this.createVkPlayer(video.firstChild); + var tempVideo = client_Utils.nodeFromString(StringTools.trim("")); + client_Utils.prepend(this.playerEl,tempVideo); + var tempVkPlayer = this.createVkPlayer(tempVideo); tempVkPlayer.on("inited",function() { callback({ duration : tempVkPlayer.getDuration(), title : "VK media", url : url}); tempVkPlayer.destroy(); - if(_gthis.playerEl.contains(video)) { - _gthis.playerEl.removeChild(video); + if(_gthis.playerEl.contains(tempVideo)) { + _gthis.playerEl.removeChild(tempVideo); } }); } @@ -3937,11 +3931,9 @@ client_players_Vk.prototype = { if(tmp == null) { return; } - this.video = window.document.createElement("div"); - this.video.id = "videoplayer"; - this.video.innerHTML = StringTools.trim("\n\t\t\t\n\t\t"); + this.video = client_Utils.nodeFromString(StringTools.trim("")); this.playerEl.appendChild(this.video); - this.vkPlayer = this.createVkPlayer(this.video.firstChild); + this.vkPlayer = this.createVkPlayer(this.video); this.vkPlayer.on("inited",function() { if(!_gthis.main.isAutoplayAllowed()) { _gthis.vkPlayer.mute(); @@ -3961,7 +3953,7 @@ client_players_Vk.prototype = { _gthis.player.onPause(); }); this.vkPlayer.on("error",function(e) { - haxe_Log.trace("Error " + e,{ fileName : "src/client/players/Vk.hx", lineNumber : 166, className : "client.players.Vk", methodName : "loadVideo"}); + haxe_Log.trace("Error " + e,{ fileName : "src/client/players/Vk.hx", lineNumber : 162, className : "client.players.Vk", methodName : "loadVideo"}); }); var prevTime = 0.0; this.vkPlayer.on("timeupdate",function(e) { diff --git a/res/css/des.css b/res/css/des.css index bd354a7..a6fd43d 100644 --- a/res/css/des.css +++ b/res/css/des.css @@ -360,32 +360,43 @@ header h4 { /* Embed responsive */ +.embed-responsive:empty { + min-height: 60vh; +} + .embed-responsive { - position: relative; - display: block; - height: 0; - padding: 0; - overflow: hidden; - background-color: var(--background-video); + background-color: var(--background); + width: 100%; + max-height: 80vh; } -.embed-responsive video, -.embed-responsive iframe { - position: absolute; - top: 0; - left: 0; - bottom: 0; - height: 100%; +#temp-videoplayer { + display: none; +} + +#videoplayer { width: 100%; - border: 0; + max-height: 80vh; } -.embed-responsive.embed-responsive-16by9 { - padding-bottom: 56.25%; +iframe#videoplayer { + width: 100%; + height: 100%; + aspect-ratio: 16 / 9; } -.embed-responsive.embed-responsive-4by3 { - padding-bottom: 75% +@media only screen and (orientation: portrait) { + .embed-responsive:empty { + min-height: 20vh; + } + + .embed-responsive { + max-height: 50vh; + } + + #videoplayer { + max-height: 50vh; + } } /* Playlist */ @@ -509,7 +520,7 @@ footer#footer { flex-direction: column; flex-wrap: nowrap; padding: 1rem; - height: calc(100vh - 56.25vw); + height: 40vh; } #chat header { @@ -540,7 +551,6 @@ footer#footer { #userlist { padding: 1rem; - height: 11rem; } .userlist_item { diff --git a/res/index.html b/res/index.html index d9ddfd5..0d7c797 100644 --- a/res/index.html +++ b/res/index.html @@ -18,7 +18,7 @@
-
+