Skip to content

Commit

Permalink
Fix: Single Video Player Embed appears very different in the block ed…
Browse files Browse the repository at this point in the history 
…itor (#399)
  • Loading branch information
@burhandodhy
burhandodhy authored Aug 2, 2024
1 parent 7458147 commit d2bb255
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 236 deletions.
160 changes: 18 additions & 142 deletions assets/js/src/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 || '';
Expand All @@ -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 || '';

Expand All @@ -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') {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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',
}),
Expand Down Expand Up @@ -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,
});
},
}),
Expand All @@ -642,41 +535,24 @@
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,
});
},
}),
!isExperience &&
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,
});
},
}),
Expand Down
53 changes: 5 additions & 48 deletions assets/js/src/views/media-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 +
Expand All @@ -205,9 +183,6 @@ var MediaDetailsView = BrightcoveView.extend({
paddingTop +
'%" autoplay="' +
autoplay +
'" ' +
'min_width="' +
minWidth +
'" playsinline="' +
playsinline +
'" picture_in_picture="' +
Expand All @@ -216,15 +191,15 @@ var MediaDetailsView = BrightcoveView.extend({
languagedetection +
'" application_id="' +
applicationId +
'" max_width="' +
maxWidth +
'" ' +
'mute="' +
mute +
'" width="' +
width +
units +
'" height="' +
height +
units +
'" aspect_ratio="' +
aspectRatio +
'" sizing="' +
Expand All @@ -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 +
Expand All @@ -276,15 +236,12 @@ var MediaDetailsView = BrightcoveView.extend({
'" ' +
'embed="' +
embedStyle +
'" min_width="' +
minWidth +
'" max_width="' +
maxWidth +
'" ' +
'width="' +
'" width="' +
width +
units +
'" height="' +
height +
units +
'" ' +
'video_ids="' +
videoIds +
Expand Down
12 changes: 6 additions & 6 deletions includes/class-bc-in-page-experience-shortcode.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,11 @@ public static function bc_in_page_experience( $atts ) {
<div data-experience="<?php echo esc_attr( $atts['in_page_experience_id'] ); ?>"></div>
<script src="<?php echo esc_url( $published_url ); // phpcs:ignore ?>"></script>
<?php else : ?>
<iframe
src="<?php echo esc_url( $published_url ); ?>"
allow="autoplay; fullscreen; geolocation; encrypted-media"
allowfullscreen
webkitallowfullscreen
<iframe
src="<?php echo esc_url( $published_url ); ?>"
allow="autoplay; fullscreen; geolocation; encrypted-media"
allowfullscreen
webkitallowfullscreen
mozallowfullscreen
style="<?php echo esc_attr( $style ); ?>">
</iframe>
Expand All @@ -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'] );
}
}
Loading

0 comments on commit d2bb255

Please sign in to comment.