Skip to content

Commit

Permalink
Merge branch 'release/v1.1'
Browse files Browse the repository at this point in the history
  • Loading branch information
@wpmark
wpmark committed Nov 29, 2022
2 parents d3e8923 + de7d694 commit fa31482
Show file tree
Hide file tree
Showing 6 changed files with 245 additions and 50 deletions.
1 change: 1 addition & 0 deletions assets/css/better-core-video-embeds.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
.hd-bcve-thumbnail {
height: auto;
max-width: 100%;
width: 100%;
}
.hd-bcve-wrapper .play-button {
--hd-play-button-size: 80px;
Expand Down
2 changes: 1 addition & 1 deletion assets/css/better-core-video-embeds.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

60 changes: 40 additions & 20 deletions assets/js/better-core-video-embeds.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,52 @@
// these are the elements that should contain the thumbnail.
document.querySelectorAll( '.hd-bcve-wrapper' ).forEach(( el, i ) => {

// get the youtube video id for the data attribute on the wrapper.
var videoId = el.getAttribute( 'data-id' );

// get the associated template element which holds the embed code.
var template = document.querySelector( '#hd-bcve-embed-html-' + videoId );

/**
* Add autoplay on the iframe as well as loading from youtube no cookie.
* Grabs the iframe from the embed template.
* Adds the autoplay and other attrs to the iframe src URL
* Replaces the standard youtube domain with the no cookie version.
*/
var iframe = template.content.children[0].querySelector( 'iframe' );
var iframeSrc = iframe.getAttribute( 'src' ) + '&rel=0&showinfo=0&autoplay=1';
iframeSrc = iframeSrc.replace( 'www.youtube.com', 'www.youtube-nocookie.com' );

// set the new iframe src including autoplay true.
iframe.setAttribute( 'src', iframeSrc );

// set an allows attribute on the iframe with an autoplay value.
iframe.setAttribute( 'allow', 'autoplay' );

// get the text content of the embed element - this is the caption.
var caption = template.content.textContent.trim();

// if we have a caption.
if ( '' !== caption ) {

// create an element for the embed caption.
var captionEl = document.createElement('figcaption');
captionEl.classList.add( 'wp-element-caption' );
captionEl.textContent = caption;

// add the caption, after the thumbnail.
el.append( captionEl );

}

// when the wrapper is clicked.
el.addEventListener( 'click', () => {

// get the youtube video id for the data attribute on the wrapper.
var videoId = el.getAttribute( 'data-id' );

// get the associated template element which holds the embed code.
var template = document.querySelector( '#hd-bcve-embed-html-' + videoId );

// clone the template element.
var contentOuter = template.content.cloneNode( true );

// grab just the first child of the template - this is the figure block element which wraps the iframe.
var content =contentOuter.children[0]

// find the iframe in the embed content.
var iframe = content.querySelector( 'iframe' );

// add auto play true to the iframe src.
// ensures the video plays when the thumbnail is clicked.
var iframeSrc = iframe.getAttribute( 'src' ) + '&autoplay=true&rel=0&showinfo=0';
var iframeSrcNew = iframeSrc.replace( 'www.youtube.com', 'www.youtube-nocookie.com' );

// set the new iframe src including autoplay true.
iframe.setAttribute( 'src', iframeSrcNew );

// grab just the first child of the template - this is the figure block element which wraps the iframe.
var content = contentOuter.children[0];

// add the iframe embed content before the embed wrapper.
el.before( content );
Expand Down
2 changes: 1 addition & 1 deletion assets/js/better-core-video-embeds.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

218 changes: 192 additions & 26 deletions better-core-video-embeds.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
Description: A plugin which enhances the core video embeds for Youtube and Vimeo videos by not loading unnecessary scripts until they are needed.
Requires at least: 6.0
Requires PHP: 7.0
Version: 1.0
Version: 1.1
Author: Highrise Digital
Author URI: https://highrise.digital/
License: GPL-2.0-or-later
Expand Down Expand Up @@ -56,15 +56,20 @@ function hd_bcve_enqueue_scripts() {
*/
function hd_bcve_register_block_style() {

// register the style for this block.
wp_register_style(
'better-core-video-embeds-styles',
HD_BCVE_LOCATION_URL . '/assets/css/better-core-video-embeds.min.css'
);
// only if the page has a core embed block present.
if ( has_block( 'core/embed' ) ) {

// register the style for this block.
wp_enqueue_style(
'better-core-video-embeds-styles',
HD_BCVE_LOCATION_URL . '/assets/css/better-core-video-embeds.min.css'
);

}

}

add_action( 'wp_head', 'hd_bcve_register_block_style' );
add_action( 'wp_enqueue_scripts', 'hd_bcve_register_block_style' );

/**
* Filters the code embed block output for improved performance on Youtube videos.
Expand All @@ -77,7 +82,7 @@ function hd_bcve_register_block_style() {
*/
function hd_bcve_render_core_embed_block( $block_content, $block, $instance ) {

// if the provider slug name is empty or not youtube.
// if the provider slug name is empty.
if ( empty( $block['attrs']['providerNameSlug'] ) ) {
return $block_content;
}
Expand Down Expand Up @@ -151,6 +156,23 @@ function hd_bcve_render_core_embed_block( $block_content, $block, $instance ) {

// break out the switch.
break;

// for vimeo urls.
case 'www.dailymotion.com';

// if we have a path.
if ( empty( $parsed_video_url['path'] ) ) {
return $block_content;
}

// remove the preceeding slash.
$video_id = str_replace( '/video/', '', $parsed_video_url['path'] );

// get the vimeo thumbnail url for this video.
$thumbnail_url = hd_bcve_get_dailymotion_video_thumbnail_url( $video_id );

// break out the switch.
break;

}

Expand All @@ -164,10 +186,11 @@ function hd_bcve_render_core_embed_block( $block_content, $block, $instance ) {
return $block_content;
}

// create an array of classes to add to the placeholder image figure.
$figure_classes = [
// create an array of classes to add to the placeholder image wrapper.
$wrapper_classes = [
'wp-block-image',
'hd-bcve-wrapper',
'is--' . $block['attrs']['providerNameSlug'],
];

// if we have classNames on the embed block.
Expand All @@ -177,36 +200,37 @@ function hd_bcve_render_core_embed_block( $block_content, $block, $instance ) {
$class_names = explode( ' ', $block['attrs']['className'] );

// merge the class names into the figures classes array.
$figure_classes = array_merge( $figure_classes, $class_names );
$wrapper_classes = array_merge( $wrapper_classes, $class_names );

}

// if the embed block has an alignment.
if ( ! empty( $block['attrs']['align'] ) ) {

// add the alignment class to the figure classes.
$figure_classes[] = 'align' . $block['attrs']['align'];
$wrapper_classes[] = 'align' . $block['attrs']['align'];

}

// allow the classes to be filtered.
$wrapper_classes = apply_filters( '', $wrapper_classes, $block, $video_id, $thumbnail_url );

// buffer the output as we need to return not echo.
ob_start();

//wp_var_dump( hd_job_allowed_innerblock_html() );

?>

<figure class="<?php echo esc_attr( implode( ' ', apply_filters( 'hd_bcve_wrapper_classes', $figure_classes, $block ) ) ); ?>" data-id="<?php echo esc_attr( $video_id ); ?>">
<?php wp_print_styles( 'better-core-video-embeds-styles' ); // output the "block" styles for the thubmnail. ?>
<div class="play-button"></div>
<img loading="lazy" class="hd-bcve-thumbnail" src="<?php echo esc_url( $thumbnail_url ); ?>" />
</figure>

<template id="hd-bcve-embed-html-<?php echo esc_attr( $video_id ); ?>">
<?php echo wp_kses( $block['innerHTML'], hd_job_allowed_innerblock_html() ); ?>
</template>
// output the registered "block" styles for the thubmnail.
wp_print_styles( 'better-core-video-embeds-styles' );

<?php
/**
* Fires and action to which the new block markup is added too.
*
* @hooked hd_bvce_open_markup_figure_element - 10
* @hooked hd_bcve_add_video_play_button - 20
* @hooked hd_bcve_add_video_thumbnail_markup - 30
* @hooked hd_bvce_close_markup_figure_element - 40
* @hooked hd_bcve_add_original_embed_template - 50
*/
do_action( 'hd_bcve_video_thumbnail_markup', $block, $video_id, $thumbnail_url, $wrapper_classes );

// return the new block markup.
return ob_get_clean();
Expand Down Expand Up @@ -309,6 +333,55 @@ function hd_bcve_get_vimeo_video_thumbnail_url( $video_id = '' ) {

}

/**
* Return the dailymotion video thumbnail url.
*
* @param string $video_id The ID of the video.
* @return string $url The URL of the thumbnail or an empty string if no URL found.
*/
function hd_bcve_get_dailymotion_video_thumbnail_url( $video_id = '' ) {

// if we have no video id.
if ( '' === $video_id ) {
return '';
}

// get the URL from the transient.
$image_url = get_transient( 'hd_bcve_' . $video_id );

// if we don't have a transient.
if ( false === $image_url ) {

// get the video details from the api.
$video_details = wp_remote_get(
'https://api.dailymotion.com/video/' . $video_id . '?fields=thumbnail_url'
);

// if the request to the hi res image errors or returns anything other than a http 200 response code.
if ( ( is_wp_error( $video_details )) && ( 200 !== wp_remote_retrieve_response_code( $video_details ) ) ) {
return '';
}

// grab the body of the response.
$video_details = json_decode(
wp_remote_retrieve_body(
$video_details
)
);

// get the image url from the json.
$image_url = $video_details->thumbnail_url;

// set the transient, storing the image url.
set_transient( 'hd_bcve_' . $video_id, $image_url, DAY_IN_SECONDS );

}

// return the url.
return apply_filters( 'hd_bcve_vimeo_video_thumbnail_url', $image_url, $video_id );

}

/**
* Creates a escaping function to allowed certain HTML for embed content.
* Needed for when echoing the innerblock HTML.
Expand Down Expand Up @@ -339,3 +412,96 @@ function hd_job_allowed_innerblock_html() {
];

}

/**
* Adds the opening figure element to the thumbnail markup.
*
* @param array $block The block array.
* @param string $video_id The ID of the embedded video.
* @param string $thumbnail_url The URL of the video thumbnail.
* @param array $wrapper_classes An array of CSS classes to add to the wrapper.
*/
function hd_bvce_open_markup_figure_element( $block, $video_id, $thumbnail_url, $wrapper_classes ) {

?>
<figure class="<?php echo esc_attr( implode( ' ', $wrapper_classes ) ); ?>" data-id="<?php echo esc_attr( $video_id ); ?>">
<?php

}

add_action( 'hd_bcve_video_thumbnail_markup', 'hd_bvce_open_markup_figure_element', 10, 4 );

/**
* Adds the play button div to the markup.
*
* @param array $block The block array.
* @param string $video_id The ID of the embedded video.
* @param string $thumbnail_url The URL of the video thumbnail.
* @param array $wrapper_classes An array of CSS classes to add to the wrapper.
*/
function hd_bcve_add_video_play_button( $block, $video_id, $thumbnail_url, $wrapper_classes ) {

?>
<div class="play-button"></div>
<?php

}

add_action( 'hd_bcve_video_thumbnail_markup', 'hd_bcve_add_video_play_button', 20, 4 );

/**
* Adds the video thumbnail markup output.
*
* @param array $block The block array.
* @param string $video_id The ID of the embedded video.
* @param string $thumbnail_url The URL of the video thumbnail.
* @param array $wrapper_classes An array of CSS classes to add to the wrapper.
*/
function hd_bcve_add_video_thumbnail_markup( $block, $video_id, $thumbnail_url, $wrapper_classes ) {

?>
<img loading="lazy" class="hd-bcve-thumbnail" src="<?php echo esc_url( $thumbnail_url ); ?>" />
<?php

}

add_action( 'hd_bcve_video_thumbnail_markup', 'hd_bcve_add_video_thumbnail_markup', 30, 4 );

/**
* Adds the closing figure element to the thumbnail markup.
*
* @param array $block The block array.
* @param string $video_id The ID of the embedded video.
* @param string $thumbnail_url The URL of the video thumbnail.
* @param array $wrapper_classes An array of CSS classes to add to the wrapper.
*/
function hd_bcve_close_markup_figure_element( $block, $video_id, $thumbnail_url, $wrapper_classes ) {

?>
</figure>
<?php

}

add_action( 'hd_bcve_video_thumbnail_markup', 'hd_bcve_close_markup_figure_element', 40, 4 );

/**
* Adds the original block markup to the template element.
* This is used when the item is cloned when the thumbnail is clicked.
*
* @param array $block The block array.
* @param string $video_id The ID of the embedded video.
* @param string $thumbnail_url The URL of the video thumbnail.
* @param array $wrapper_classes An array of CSS classes to add to the wrapper.
*/
function hd_bcve_add_original_embed_template( $block, $video_id, $thumbnail_url, $wrapper_classes ) {

?>
<template id="hd-bcve-embed-html-<?php echo esc_attr( $video_id ); ?>">
<?php echo wp_kses( $block['innerHTML'], hd_job_allowed_innerblock_html() ); ?>
</template>
<?php

}

add_action( 'hd_bcve_video_thumbnail_markup', 'hd_bcve_add_original_embed_template', 50, 4 );
Loading

0 comments on commit fa31482

Please sign in to comment.