From 5babf8627147e1710f1de1bddff542edcb10282c Mon Sep 17 00:00:00 2001 From: Burhan Nasir Date: Tue, 30 Jul 2024 12:31:07 +0500 Subject: [PATCH 1/2] Fix video width issue --- assets/js/src/block.js | 160 ++---------------- assets/js/src/views/media-details.js | 51 +----- .../class-bc-in-page-experience-shortcode.php | 12 +- includes/class-bc-utility.php | 70 ++++---- 4 files changed, 58 insertions(+), 235 deletions(-) diff --git a/assets/js/src/block.js b/assets/js/src/block.js index a920c1cf..319eaa87 100644 --- a/assets/js/src/block.js +++ b/assets/js/src/block.js @@ -38,8 +38,6 @@ var playlistId = props.attributes.playlist_id || ''; var experienceId = props.attributes.experience_id || ''; var videoIds = props.attributes.video_ids || ''; - var minWidth = props.attributes.min_width || ''; - var paddingTop = props.attributes.padding_top || ''; var autoplay = props.attributes.autoplay || ''; var playsinline = props.attributes.playsinline || ''; var pictureinpicture = props.attributes.picture_in_picture || ''; @@ -50,11 +48,8 @@ var sizing = props.attributes.sizing || 'responsive'; var aspectRatio = props.attributes.aspect_ratio || '16:9'; - var width = props.attributes.width || '640px'; - var height = props.attributes.height || '360px'; - - const maxHeight = props.attributes.max_height || height; - const maxWidth = props.attributes.max_width || width; + const width = props.attributes.width || '640px'; + const height = props.attributes.height || '360px'; const inPageExperienceId = props.attributes.in_page_experience_id || ''; @@ -72,90 +67,22 @@ }, [aspectRatio]); element.useEffect(() => { - if (sizing === 'responsive' && maxWidth && !inPageExperienceId) { - props.setAttributes({ ...props.attributes, width: maxWidth || '640px' }); - } - }, [sizing, width, maxWidth, inPageExperienceId]); - - element.useEffect(() => { - if (!maxHeight) { - let newMaxHeight; - if (aspectRatio === '16:9') { - newMaxHeight = '360px'; - } else if (aspectRatio === '4:3') { - newMaxHeight = '480px'; - } else { - newMaxHeight = height; - } - - props.setAttributes({ - ...props.attributes, - max_height: height === '100%' && newMaxHeight ? newMaxHeight : height, - }); - } - }, []); - - element.useEffect(() => { - if (sizing === 'responsive' && height !== '100%' && !inPageExperienceId) { - let newMaxHeight; - if (aspectRatio === '16:9') { - newMaxHeight = '360px'; - } else if (aspectRatio === '4:3') { - newMaxHeight = '480px'; - } else { - newMaxHeight = height; - } - - props.setAttributes({ - ...props.attributes, - height: '100%', - max_height: newMaxHeight, - }); - } - }, [height, sizing, aspectRatio, inPageExperienceId]); - - element.useEffect(() => { - if (sizing === 'responsive' && !maxHeight && !inPageExperienceId) { - let newMaxHeight; + if (!experienceId) { + let newHeight; if (aspectRatio === '16:9') { - newMaxHeight = '360px'; + newHeight = parseInt(parseInt(width, 10) * (9 / 16), 10) + 'px'; } else if (aspectRatio === '4:3') { - newMaxHeight = '480px'; + newHeight = parseInt(parseInt(width, 10) * (3 / 4), 10) + 'px'; } else { - newMaxHeight = height; + newHeight = height; } props.setAttributes({ ...props.attributes, - max_height: newMaxHeight, - }); - } - }, [maxHeight, sizing, aspectRatio, height, inPageExperienceId]); - - element.useEffect(() => { - if ( - sizing === 'fixed' && - (width === '100%' || height === '100%') && - !inPageExperienceId - ) { - props.setAttributes({ - ...props.attributes, - width: width === '100%' ? maxWidth : undefined, - height: height === '100%' ? maxHeight : undefined, + height: newHeight, }); } - }, [width, sizing, height, maxWidth, maxHeight, inPageExperienceId]); - - element.useEffect(() => { - if (aspectRatio === 'custom') { - const padding_top = - typeof maxHeight === 'number' && typeof maxWidth === 'number' - ? `${(maxHeight / maxWidth) * 100}%` - : '56%'; - - props.setAttributes({ ...props.attributes, padding_top }); - } - }, [maxWidth, maxHeight, aspectRatio]); + }, [width, sizing, aspectRatio, height, experienceId]); element.useEffect(() => { if (embed === 'in-page-horizontal' || embed === 'in-page-vertical') { @@ -370,14 +297,6 @@ playlistId; } - if (typeof height === 'undefined') { - height = maxHeight || 250; - } - - if (typeof width === 'undefined') { - width = maxWidth || 500; - } - const players = wpbc.players[accountId] .filter((player) => { return playlistId ? player.is_playlist : !player.is_playlist; @@ -483,7 +402,12 @@ userPermission ? controls : '', el('iframe', { src: src, - style: { height: height, width: width, display: 'block', margin: '0 auto' }, + style: { + height: height, + width: width, + display: 'block', + margin: '0 auto', + }, allowFullScreen: true, key: 'iframe', }), @@ -599,40 +523,9 @@ }, ], onChange: function (value) { - let height; - let padding_top; - - if (value === '16:9') { - height = '360px'; - padding_top = '56%'; - } else if (value === '4:3') { - height = '480px'; - padding_top = '75%'; - } else { - const maxHeightNumber = - maxHeight && Number(maxHeight?.replace(/[^0-9]/g, '')); - const maxWidthNumber = - maxWidth && Number(maxWidth?.replace(/[^0-9]/g, '')); - const isMaxHeightNumber = - typeof maxHeightNumber === 'number'; - const isMaxWidthNumber = typeof maxWidthNumber === 'number'; - - height = isMaxHeightNumber ? maxHeight : undefined; - - padding_top = - isMaxHeightNumber && - isMaxWidthNumber && - maxHeightNumber > 0 - ? `${(maxHeightNumber / maxWidthNumber) * 100}%` - : '56%'; - } - props.setAttributes({ ...props.attributes, aspect_ratio: value, - height, - max_height: height, - padding_top, }); }, }), @@ -642,17 +535,10 @@ type: 'number', value: width?.replace(/[^0-9]/g, ''), onChange: function (value) { - let width = `${value}px`; - const max_width = width; - - if (sizing === 'responsive') { - width = '100%'; - } - + const newWidth = `${value}px`; props.setAttributes({ ...props.attributes, - width, - max_width, + width: newWidth, }); }, }), @@ -660,23 +546,13 @@ el(components.TextControl, { label: __('Height', 'brightcove'), type: 'number', - value: - sizing === 'fixed' - ? height?.replace(/[^0-9]/g, '') - : maxHeight?.replace(/[^0-9]/g, ''), + value: height?.replace(/[^0-9]/g, ''), disabled: isHeightFieldDisabled, onChange: function (value) { let height = `${value}px`; - const max_height = height; - - if (sizing === 'responsive') { - height = '100%'; - } - props.setAttributes({ ...props.attributes, height, - max_height, }); }, }), diff --git a/assets/js/src/views/media-details.js b/assets/js/src/views/media-details.js index 320d2b9d..f2cca3bb 100644 --- a/assets/js/src/views/media-details.js +++ b/assets/js/src/views/media-details.js @@ -167,30 +167,8 @@ var MediaDetailsView = BrightcoveView.extend({ width = $('#width').val(), height = $('#height').val(), units = 'px', - minWidth = '0px', - maxWidth = width + units, shortcode; - if (aspectRatio === '16:9') { - paddingTop = '56'; - } else if (aspectRatio === '4:3') { - paddingTop = '75'; - } else { - paddingTop = (height / width) * 100; - } - - if (sizing === 'responsive') { - width = '100%'; - height = '100%'; - } else { - width += units; - height += units; - - if (embedStyle === 'iframe') { - minWidth = width; - } - } - shortcode = '[bc_video video_id="' + videoId + @@ -206,8 +184,6 @@ var MediaDetailsView = BrightcoveView.extend({ '%" autoplay="' + autoplay + '" ' + - 'min_width="' + - minWidth + '" playsinline="' + playsinline + '" picture_in_picture="' + @@ -216,15 +192,14 @@ var MediaDetailsView = BrightcoveView.extend({ languagedetection + '" application_id="' + applicationId + - '" max_width="' + - maxWidth + - '" ' + 'mute="' + mute + '" width="' + width + + units + '" height="' + height + + units + '" aspect_ratio="' + aspectRatio + '" sizing="' + @@ -248,26 +223,11 @@ var MediaDetailsView = BrightcoveView.extend({ var experienceId = $('#video-player').val(), embedStyle = $('input[name="embed-style"]:checked').val(), - sizing = $('input[name="sizing"]:checked').val(), width = $('#width').val(), height = $('#height').val(), units = 'px', - minWidth = '0px', - maxWidth = width + units, shortcode; - if (sizing === 'responsive') { - width = '100%'; - height = '100%'; - } else { - width += units; - height += units; - - if (embedStyle === 'iframe') { - minWidth = width; - } - } - shortcode = '[bc_experience experience_id="' + experienceId + @@ -276,15 +236,12 @@ var MediaDetailsView = BrightcoveView.extend({ '" ' + 'embed="' + embedStyle + - '" min_width="' + - minWidth + - '" max_width="' + - maxWidth + - '" ' + 'width="' + width + + units + '" height="' + height + + units + '" ' + 'video_ids="' + videoIds + diff --git a/includes/class-bc-in-page-experience-shortcode.php b/includes/class-bc-in-page-experience-shortcode.php index 7766bb8c..b94b5c44 100644 --- a/includes/class-bc-in-page-experience-shortcode.php +++ b/includes/class-bc-in-page-experience-shortcode.php @@ -66,11 +66,11 @@ public static function bc_in_page_experience( $atts ) {
- @@ -80,6 +80,6 @@ public static function bc_in_page_experience( $atts ) { $html = ob_get_clean(); - return apply_filters( 'brightcove_in_page_experience_html', $html, $atts['experience_id'] ); + return apply_filters( 'brightcove_in_page_experience_html', $html, $atts['in_page_experience_id'] ); } } diff --git a/includes/class-bc-utility.php b/includes/class-bc-utility.php index 5268d802..ec660513 100644 --- a/includes/class-bc-utility.php +++ b/includes/class-bc-utility.php @@ -122,7 +122,6 @@ public static function remove_pending_uploads( $video_id = null ) { // Return true as we may not have expired any videos. return true; - } /** @@ -234,7 +233,6 @@ public static function hash_changed( $type, $data, $account_id ) { $existing_hash = get_option( $key ); return $existing_hash !== $data_hash; - } /** @@ -685,7 +683,6 @@ public static function list_cache_items() { } return $transient_keys; - } /** @@ -778,7 +775,6 @@ public static function delete_cache_item( $key = '' ) { } else { return delete_transient( sanitize_key( $key ) ); } - } /** @@ -804,7 +800,6 @@ public static function get_cache_item( $key ) { $transient = get_transient( $key ); return $transient; - } /** @@ -933,8 +928,6 @@ 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'] ); - $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'] ); @@ -960,7 +953,7 @@ public static function get_video_player( $atts ) { controls data-video-id="" data-application-id="" - width="" height="315"> + width="" height=""> @@ -975,20 +968,22 @@ public static function get_video_player( $atts ) { -
-
- - style="width: ; height: ; position: absolute; top: 0; bottom: 0; right: 0; left: 0;"> - +
+ + style="width: ; height: ; position: absolute; top: 0; bottom: 0; right: 0; left: 0;"> + + +
+
-
-
- -
+
+
@@ -1085,7 +1078,6 @@ 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'] ); @@ -1240,15 +1232,13 @@ class="video-js" ?>
-
- -
+
From b92afb69b232313c162d7717bc444a8a8a283a1f Mon Sep 17 00:00:00 2001 From: Burhan Nasir Date: Thu, 1 Aug 2024 11:00:30 +0500 Subject: [PATCH 2/2] Minor change --- assets/js/src/views/media-details.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/src/views/media-details.js b/assets/js/src/views/media-details.js index f2cca3bb..8c41d1d2 100644 --- a/assets/js/src/views/media-details.js +++ b/assets/js/src/views/media-details.js @@ -183,7 +183,6 @@ var MediaDetailsView = BrightcoveView.extend({ paddingTop + '%" autoplay="' + autoplay + - '" ' + '" playsinline="' + playsinline + '" picture_in_picture="' + @@ -192,6 +191,7 @@ var MediaDetailsView = BrightcoveView.extend({ languagedetection + '" application_id="' + applicationId + + '" ' + 'mute="' + mute + '" width="' + @@ -236,7 +236,7 @@ var MediaDetailsView = BrightcoveView.extend({ '" ' + 'embed="' + embedStyle + - 'width="' + + '" width="' + width + units + '" height="' +