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.

3 files changed, 43 insertions, 41 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<iframe src=\"https://vk.com/video_ext.php?oid=" + ids.oid + "&id=" + ids.id + "&hd=1&js_api=1\"\n\t\t\t\tallow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n\t\t\t\tframeborder=\"0\" allowfullscreen>\n\t\t\t</iframe>\n\t\t");
-		client_Utils.prepend(this.playerEl,video);
-		var tempVkPlayer = this.createVkPlayer(video.firstChild);
+		var tempVideo = client_Utils.nodeFromString(StringTools.trim("<iframe id=\"temp-videoplayer\" src=\"https://vk.com/video_ext.php?oid=" + ids.oid + "&id=" + ids.id + "&hd=1&js_api=1\"\n\t\t\t\tallow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n\t\t\t\tframeborder=\"0\" allowfullscreen>\n\t\t\t</iframe>"));
+		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<iframe src=\"https://vk.com/video_ext.php?oid=" + tmp.oid + "&id=" + tmp.id + "&hd=4&js_api=1\"\n\t\t\t\tallow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n\t\t\t\tframeborder=\"0\" allowfullscreen>\n\t\t\t</iframe>\n\t\t");
+		this.video = client_Utils.nodeFromString(StringTools.trim("<iframe id=\"videoplayer\" src=\"https://vk.com/video_ext.php?oid=" + tmp.oid + "&id=" + tmp.id + "&hd=4&js_api=1\"\n\t\t\t\tallow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n\t\t\t\tframeborder=\"0\" allowfullscreen>\n\t\t\t</iframe>"));
 		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 @@
   <main id="video">
     <!-- Player -->
     <section id="player">
-      <div id="ytapiplayer" class="embed-responsive embed-responsive-16by9"></div>
+      <div id="ytapiplayer" class="embed-responsive"></div>
       <!-- Video info -->
       <div class="info">
         <header id="header">