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.

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<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">
diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index f5f26e8..dbcf759 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -116,7 +116,7 @@ class Buttons {
 				icon.setAttribute("name", "chevron-down");
 				style.display = "block";
 				final list = wrap.firstElementChild;
-				wrap.style.height = outerHeight(list) + "px";
+				wrap.style.height = "15vh";
 				wrap.style.marginBottom = "1rem";
 			} else {
 				icon.setAttribute("name", "chevron-forward");
@@ -132,7 +132,7 @@ class Buttons {
 		else {
 			final wrap = ge("#userlist-wrap");
 			final list = wrap.firstElementChild;
-			wrap.style.height = outerHeight(list) + "px";
+			wrap.style.height = "15vh";
 		}
 		// enable animation after page loads
 		Timer.delay(() -> {
diff --git a/src/client/players/Iframe.hx b/src/client/players/Iframe.hx
index 8a2e06e..6614f9d 100644
--- a/src/client/players/Iframe.hx
+++ b/src/client/players/Iframe.hx
@@ -46,7 +46,6 @@ class Iframe implements IPlayer {
 	public function loadVideo(item:VideoItem):Void {
 		removeVideo();
 		video = document.createDivElement();
-		video.id = "videoplayer";
 		video.innerHTML = item.url; // actually data
 		if (!isValidIframe(video)) {
 			video = null;
@@ -55,6 +54,7 @@ class Iframe implements IPlayer {
 		if (video.firstChild.nodeName == "IFRAME") {
 			video.setAttribute("sandbox", "allow-scripts");
 		}
+		video.firstElementChild.id = "videoplayer";
 		playerEl.appendChild(video);
 	}
 
diff --git a/src/client/players/Raw.hx b/src/client/players/Raw.hx
index 7e5e50c..eb93c84 100644
--- a/src/client/players/Raw.hx
+++ b/src/client/players/Raw.hx
@@ -62,6 +62,7 @@ class Raw implements IPlayer {
 		final subs = subsInput.value.trim();
 		subsInput.value = "";
 		final video = document.createVideoElement();
+		video.id = "temp-videoplayer";
 		video.src = url;
 		video.onerror = e -> {
 			if (playerEl.contains(video)) playerEl.removeChild(video);
diff --git a/src/client/players/Vk.hx b/src/client/players/Vk.hx
index a2af220..fbcf60c 100644
--- a/src/client/players/Vk.hx
+++ b/src/client/players/Vk.hx
@@ -94,8 +94,6 @@ class Vk implements IPlayer {
 		}
 		final url = data.url;
 
-		final video = document.createDivElement();
-		video.id = "temp-videoplayer";
 		final ids = getVideoIds(url);
 		if (ids == null) {
 			callback({duration: 0});
@@ -103,14 +101,14 @@ class Vk implements IPlayer {
 		}
 		final oid = ids.oid;
 		final id = ids.id;
-		video.innerHTML = '
-			<iframe src="https://vk.com/video_ext.php?oid=$oid&id=$id&hd=1&js_api=1"
+		final tempVideo = Utils.nodeFromString(
+			'<iframe id="temp-videoplayer" src="https://vk.com/video_ext.php?oid=$oid&id=$id&hd=1&js_api=1"
 				allow="autoplay; encrypted-media; fullscreen; picture-in-picture;"
 				frameborder="0" allowfullscreen>
-			</iframe>
-		'.trim();
-		Utils.prepend(playerEl, video);
-		final tempVkPlayer = createVkPlayer(video.firstChild);
+			</iframe>'.trim()
+		);
+		Utils.prepend(playerEl, tempVideo);
+		final tempVkPlayer = createVkPlayer(tempVideo);
 		tempVkPlayer.on("inited", () -> {
 			callback({
 				duration: tempVkPlayer.getDuration(),
@@ -118,7 +116,7 @@ class Vk implements IPlayer {
 				url: url
 			});
 			tempVkPlayer.destroy();
-			if (playerEl.contains(video)) playerEl.removeChild(video);
+			if (playerEl.contains(tempVideo)) playerEl.removeChild(tempVideo);
 		});
 	}
 
@@ -133,18 +131,16 @@ class Vk implements IPlayer {
 		removeVideo();
 
 		final ids = getVideoIds(item.url) ?? return;
-		video = document.createDivElement();
-		video.id = "videoplayer";
 		final oid = ids.oid;
 		final id = ids.id;
-		video.innerHTML = '
-			<iframe src="https://vk.com/video_ext.php?oid=$oid&id=$id&hd=4&js_api=1"
+		video = Utils.nodeFromString(
+			'<iframe id="videoplayer" src="https://vk.com/video_ext.php?oid=$oid&id=$id&hd=4&js_api=1"
 				allow="autoplay; encrypted-media; fullscreen; picture-in-picture;"
 				frameborder="0" allowfullscreen>
-			</iframe>
-		'.trim();
+			</iframe>'.trim()
+		);
 		playerEl.appendChild(video);
-		vkPlayer = createVkPlayer(video.firstChild);
+		vkPlayer = createVkPlayer(video);
 		vkPlayer.on("inited", () -> {
 			if (!main.isAutoplayAllowed()) vkPlayer.mute();
 			isLoaded = true;