Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Single Video Player Embed appears very different in the block editor #399

Merged
merged 2 commits into from
Aug 2, 2024
Merged

Fix: Single Video Player Embed appears very different in the block editor #399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5babf86
Fix video width issue
burhandodhy Jul 30, 2024
b92afb6
Minor change
burhandodhy Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 18 additions & 142 deletions assets/js/src/block.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading