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.

4 files changed, 16 insertions, 19 deletions

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;