From 8118c9e658a9c64a728c938972a2a8082e9b8ab1 Mon Sep 17 00:00:00 2001
From: Burhan Nasir <burhan.nasir@10up.com>
Date: Mon, 26 Aug 2024 13:58:21 +0500
Subject: [PATCH] Calculate height dynamically

---
 assets/js/src/views/media-details.js | 27 ++++++++++---
 includes/class-bc-utility.php        | 58 +++++++++++++++-------------
 2 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/assets/js/src/views/media-details.js b/assets/js/src/views/media-details.js
index 8c41d1d2..707dc75f 100644
--- a/assets/js/src/views/media-details.js
+++ b/assets/js/src/views/media-details.js
@@ -23,9 +23,10 @@ var MediaDetailsView = BrightcoveView.extend({
 		'change #languagedetection': 'toggleIframe',
 		'change .experience-details input[name="sizing"],.experience-details input[name="embed-style"]':
 			'toggleExperienceUnits',
-		'change #video-player, #applicationid, #autoplay, #pictureinpicture, #languagedetection, #playsinline, #mute, input[name="embed-style"], input[name="sizing"], #aspect-ratio, #width, #height':
+		'change #video-player, #applicationid, #autoplay, #pictureinpicture, #languagedetection, #playsinline, #mute, input[name="embed-style"], input[name="sizing"], #aspect-ratio, #height':
 			'generateShortcode',
 		'change #generate-shortcode': 'toggleShortcodeGeneration',
+		'change #width': 'calculateHeight',
 	},
 
 	triggerEditMedia: function (event) {
@@ -56,7 +57,6 @@ var MediaDetailsView = BrightcoveView.extend({
 
 	toggleUnits: function (event) {
 		var value = $('#aspect-ratio').val();
-
 		if (value === 'custom') {
 			$('#height').removeAttr('readonly');
 		} else {
@@ -131,6 +131,23 @@ var MediaDetailsView = BrightcoveView.extend({
 		}
 	},
 
+	/**
+	 * Calculate height based on aspect ratio.
+	 */
+	calculateHeight: function (event) {
+		const aspectRatio = $('#aspect-ratio').val();
+		const width = $('#width').val();
+
+		if (aspectRatio === 'custom') {
+			return;
+		}
+
+		const height = aspectRatio === '16:9' ? width / (16 / 9) : width / (4 / 3);
+		$('#height').val(height);
+
+		this.generateShortcode();
+	},
+
 	generateShortcode: function () {
 		switch (this.mediaType) {
 			case 'videos':
@@ -163,7 +180,6 @@ var MediaDetailsView = BrightcoveView.extend({
 			embedStyle = $('input[name="embed-style"]:checked').val(),
 			sizing = $('input[name="sizing"]:checked').val(),
 			aspectRatio = $('#aspect-ratio').val(),
-			paddingTop = '',
 			width = $('#width').val(),
 			height = $('#height').val(),
 			units = 'px',
@@ -180,8 +196,9 @@ var MediaDetailsView = BrightcoveView.extend({
 			'embed="' +
 			embedStyle +
 			'" padding_top="' +
-			paddingTop +
-			'%" autoplay="' +
+			height +
+			units +
+			'" autoplay="' +
 			autoplay +
 			'" playsinline="' +
 			playsinline +
diff --git a/includes/class-bc-utility.php b/includes/class-bc-utility.php
index ec660513..49035728 100644
--- a/includes/class-bc-utility.php
+++ b/includes/class-bc-utility.php
@@ -928,6 +928,7 @@ public static function get_video_player( $atts ) {
 		$width          = sanitize_text_field( $atts['width'] );
 		$sizing         = sanitize_text_field( $atts['sizing'] );
 		$min_width      = sanitize_text_field( $atts['min_width'] );
+		$padding_top    = sanitize_text_field( $atts['padding_top'] );
 		$autoplay       = ( 'autoplay' === $atts['autoplay'] ) ? 'autoplay' : '';
 		$mute           = ( 'muted' === $atts['mute'] ) ? 'muted' : '';
 		$embed          = sanitize_text_field( $atts['embed'] );
@@ -969,21 +970,19 @@ public static function get_video_player( $atts ) {
 			else :
 				?>
 				<div style="display: block; position: relative; min-width: <?php echo esc_attr( $min_width ); ?>; max-width: <?php echo esc_attr( $width ); ?>;">
-					<video-js
-							id="<?php echo esc_attr( $id ); ?>"
-							data-video-id="<?php echo esc_attr( $id ); ?>" data-account="<?php echo esc_attr( $account_id ); ?>"
-							data-player="<?php echo esc_attr( $player_id ); ?>"
-							data-usage="<?php echo esc_attr( self::get_usage_data() ); ?>javascript"
-							data-embed="default" class="video-js"
-							data-application-id="<?php echo esc_attr( $application_id ); ?>"
-							controls <?php echo esc_attr( $playsinline ); ?> <?php echo esc_attr( $autoplay ); ?> <?php echo esc_attr( $mute ); ?>
-							style="width: <?php echo 'responsive' !== $sizing ? esc_attr( $width ) : '100%'; ?>; height: <?php echo esc_attr( $height ); ?>; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
-					</video-js>
+					<div style="padding-top: <?php echo esc_attr( $padding_top ); ?>; ">
+						<video-js
+								id="<?php echo esc_attr( $id ); ?>"
+								data-video-id="<?php echo esc_attr( $id ); ?>" data-account="<?php echo esc_attr( $account_id ); ?>"
+								data-player="<?php echo esc_attr( $player_id ); ?>"
+								data-usage="<?php echo esc_attr( self::get_usage_data() ); ?>javascript"
+								data-embed="default" class="video-js"
+								data-application-id="<?php echo esc_attr( $application_id ); ?>"
+								controls <?php echo esc_attr( $playsinline ); ?> <?php echo esc_attr( $autoplay ); ?> <?php echo esc_attr( $mute ); ?>
+								style="width: <?php echo 'responsive' !== $sizing ? esc_attr( $width ) : '100%'; ?>; height: <?php echo esc_attr( $height ); ?>; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
+						</video-js>
 
 						<script src="<?php echo esc_url( $js_src ); ?>"></script> <?php // phpcs:ignore ?>
-						<script src="<?php echo esc_url( $js_src ); ?>"></script> <?php // phpcs:ignore ?>
-					</div>
-					<script src="<?php echo esc_url( $js_src ); ?>"></script> <?php // phpcs:ignore ?>
 					</div>
 				</div>
 				<?php
@@ -1031,13 +1030,15 @@ public static function get_video_player( $atts ) {
 			?>
 
 			<div style="display: block; position: relative; min-width: <?php echo esc_attr( $min_width ); ?>; max-width: <?php echo esc_attr( $width ); ?>;">
-				<iframe
-					src="<?php echo esc_url( $iframe_src ); ?>"
-					allowfullscreen
-					webkitallowfullscreen
-					mozallowfullscreen
-					style="width: <?php echo 'responsive' !== $sizing ? esc_attr( $width ) : '100%'; ?>; height: <?php echo esc_attr( $height ); ?>; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
-				</iframe>
+				<div style="padding-top: <?php echo esc_attr( $padding_top ); ?>; ">
+					<iframe
+							src="<?php echo esc_url( $iframe_src ); ?>"
+							allowfullscreen
+							webkitallowfullscreen
+							mozallowfullscreen
+							style="width: <?php echo 'responsive' !== $sizing ? esc_attr( $width ) : '100%'; ?>; height: <?php echo esc_attr( $height ); ?>; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
+					</iframe>
+				</div>
 			</div>
 		<?php endif; ?>
 		<!-- End of Brightcove Player -->
@@ -1078,6 +1079,7 @@ public static function get_playlist_player( $atts ) {
 		$sizing      = sanitize_text_field( $atts['sizing'] );
 		$min_width   = sanitize_text_field( $atts['min_width'] );
 		$max_width   = sanitize_text_field( $atts['max_width'] );
+		$padding_top = sanitize_text_field( $atts['padding_top'] );
 		$autoplay    = ( 'autoplay' === $atts['autoplay'] ) ? 'autoplay' : '';
 		$mute        = ( 'muted' === $atts['mute'] ) ? 'muted' : '';
 		$embed       = sanitize_text_field( $atts['embed'] );
@@ -1232,13 +1234,15 @@ class="video-js"
 			?>
 
 			<div style="display: block; position: relative; min-width: <?php echo esc_attr( $min_width ); ?>; max-width: <?php echo esc_attr( $max_width ); ?>;">
-				<iframe
-					src="<?php echo esc_url( $iframesrc ); ?>"
-					allowfullscreen
-					webkitallowfullscreen
-					mozallowfullscreen
-					style="width: <?php echo 'responsive' !== $sizing ? esc_attr( $width ) : '100%'; ?>; height: <?php echo esc_attr( $height ); ?>; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
-				</iframe>
+				<div style="padding-top: <?php echo esc_attr( $padding_top ); ?>; ">
+					<iframe
+							src="<?php echo esc_url( $iframesrc ); ?>"
+							allowfullscreen
+							webkitallowfullscreen
+							mozallowfullscreen
+							style="width: <?php echo 'responsive' !== $sizing ? esc_attr( $width ) : '100%'; ?>; height: <?php echo esc_attr( $height ); ?>; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
+					</iframe>
+				</div>
 			</div>
 		<?php else : ?>