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

Enhancement/exclude youtube thumbnail from lazyload #116

Merged
merged 4 commits into from
Feb 26, 2024
Merged

Enhancement/exclude youtube thumbnail from lazyload #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a11baaa
Exclude youtube thumbnail
jeawhanlee Jan 18, 2024
5ec5c1f
Updated tests
jeawhanlee Jan 18, 2024
565da9e
Backport change from wprocket
jeawhanlee Feb 14, 2024
69ddaa2
Updated tests
jeawhanlee Feb 14, 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
46 changes: 31 additions & 15 deletions Tests/Unit/Assets/getYoutubeThumbnailScript.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
namespace RocketLazyload\Tests\Unit\Assets;

use Brain\Monkey\Functions;
use Brain\Monkey\Filters;
use RocketLazyload\Assets;
use RocketLazyload\Tests\Unit\TestCase;

Expand All @@ -27,7 +28,10 @@ protected function set_up() {
* @param array $args An array of arguments to configure the inline script.
* @param string $expected the expected HTML.
*/
public function testShouldReturnYoutubeThumbnailScript( $args, $expected ) {
public function testShouldReturnYoutubeThumbnailScript( $args, $excluded, $expected ) {
Filters\expectApplied( 'rocket_lazyload_exclude_youtube_thumbnail' )
->andReturn( $excluded );

$this->assertSame(
$expected,
$this->assets->getYoutubeThumbnailScript( $args )
Expand All @@ -43,53 +47,61 @@ public function youtubeDataProvider() {
return [
[
[],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">' ),
[],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">', '[]', 'https://i.ytimg.com/vi/ID/hqdefault.jpg' ),
],
[
[
'resolution' => 'mqdefault',
],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/mqdefault.jpg" alt="" width="320" height="180">' ),
[],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/mqdefault.jpg" alt="" width="320" height="180">', '[]', 'https://i.ytimg.com/vi/ID/mqdefault.jpg' ),
],
[
[
'resolution' => 'sddefault',
],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/sddefault.jpg" alt="" width="640" height="480">' ),
[],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/sddefault.jpg" alt="" width="640" height="480">', '[]', 'https://i.ytimg.com/vi/ID/sddefault.jpg' ),
],
[
[
'resolution' => 'hqdefault',
],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">' ),
[],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">', '[]', 'https://i.ytimg.com/vi/ID/hqdefault.jpg' ),
],
[
[
'resolution' => 'maxresdefault',
],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/maxresdefault.jpg" alt="" width="1280" height="720">' ),
[],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/maxresdefault.jpg" alt="" width="1280" height="720">', '[]', 'https://i.ytimg.com/vi/ID/maxresdefault.jpg' ),
],
[
[
'resolution' => 'ultra',
],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">' ),
[],
$this->add_element( '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">', '[]', 'https://i.ytimg.com/vi/ID/hqdefault.jpg' ),
],
[
[
'resolution' => 'hqdefault',
'lazy_image' => true,
'native' => false,
],
$this->add_element( '<img data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>' ),
[],
$this->add_element( '<img data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>', '[]', 'https://i.ytimg.com/vi/ID/hqdefault.jpg' ),
],
[
[
'resolution' => 'hqdefault',
'lazy_image' => true,
'native' => true,
],
$this->add_element( '<img loading="lazy" src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">' ),
[],
$this->add_element( '<img loading="lazy" src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">', '[]', 'https://i.ytimg.com/vi/ID/hqdefault.jpg' ),
],
[
[
Expand All @@ -98,16 +110,19 @@ public function youtubeDataProvider() {
'native' => true,
'extension' => 'webp',
],
$this->add_element( '<img loading="lazy" src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp" alt="" width="480" height="360">' ),
[],
$this->add_element( '<img loading="lazy" src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp" alt="" width="480" height="360">', '[]', 'https://i.ytimg.com/vi_webp/ID/hqdefault.webp' ),
],
[
[
'resolution' => 'hqdefault',
'lazy_image' => true,
'native' => true,
'extension' => 'webp',
],
"<script>function lazyLoadThumb(e,alt){var t='<img loading=\"lazy\" src=\"https://i.ytimg.com/vi_webp/ID/hqdefault.webp\" alt=\"\" width=\"480\" height=\"360\">',a='<button class=\"play\" aria-label=\"play Youtube video\"></button>';t=t.replace('alt=\"\"','alt=\"'+alt+'\"');return t.replace(\"ID\",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement(\"iframe\"),t=\"ID?autoplay=1\";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute(\"src\",t.replace(\"ID\",this.parentNode.dataset.src)),e.setAttribute(\"frameborder\",\"0\"),e.setAttribute(\"allowfullscreen\",\"1\"),e.setAttribute(\"allow\", \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener(\"DOMContentLoaded\",function(){var e,t,p,a=document.getElementsByClassName(\"rll-youtube-player\");for(t=0;t<a.length;t++)e=document.createElement(\"div\"),e.setAttribute(\"data-id\",a[t].dataset.id),e.setAttribute(\"data-query\", a[t].dataset.query),e.setAttribute(\"data-src\", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script>",
[
'https://i.ytimg.com/vi/12345/hqdefault.jpg',
],
$this->add_element( '<img loading="lazy" src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">', '["https:\/\/i.ytimg.com\/vi\/12345\/hqdefault.jpg"]', 'https://i.ytimg.com/vi/ID/hqdefault.jpg' ),
],
[
[
Expand All @@ -116,12 +131,13 @@ public function youtubeDataProvider() {
'native' => true,
'extension' => 'webp',
],
"<script>function lazyLoadThumb(e,alt){var t='<img loading=\"lazy\" src=\"https://i.ytimg.com/vi_webp/ID/hqdefault.webp\" alt=\"\" width=\"480\" height=\"360\">',a='<button class=\"play\" aria-label=\"play Youtube video\"></button>';t=t.replace('alt=\"\"','alt=\"'+alt+'\"');return t.replace(\"ID\",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement(\"iframe\"),t=\"ID?autoplay=1\";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute(\"src\",t.replace(\"ID\",this.parentNode.dataset.src)),e.setAttribute(\"frameborder\",\"0\"),e.setAttribute(\"allowfullscreen\",\"1\"),e.setAttribute(\"allow\", \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener(\"DOMContentLoaded\",function(){var e,t,p,a=document.getElementsByClassName(\"rll-youtube-player\");for(t=0;t<a.length;t++)e=document.createElement(\"div\"),e.setAttribute(\"data-id\",a[t].dataset.id),e.setAttribute(\"data-query\", a[t].dataset.query),e.setAttribute(\"data-src\", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script>"
[],
"<script>function lazyLoadThumb(e,alt,l){var t='<img loading=\"lazy\" src=\"https://i.ytimg.com/vi_webp/ID/hqdefault.webp\" alt=\"\" width=\"480\" height=\"360\">',a='<button class=\"play\" aria-label=\"play Youtube video\"></button>';if(l){t=t.replace('data-lazy-','');t=t.replace('loading=\"lazy\"','');t=t.replace(/<noscript>.*?<\/noscript>/g,'');}t=t.replace('alt=\"\"','alt=\"'+alt+'\"');return t.replace(\"ID\",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement(\"iframe\"),t=\"ID?autoplay=1\";t+=0===this.parentNode.dataset.query.length?\"\":\"&\"+this.parentNode.dataset.query;e.setAttribute(\"src\",t.replace(\"ID\",this.parentNode.dataset.src)),e.setAttribute(\"frameborder\",\"0\"),e.setAttribute(\"allowfullscreen\",\"1\"),e.setAttribute(\"allow\",\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener(\"DOMContentLoaded\",function(){var exclusions=[];var e,t,p,u,l,a=document.getElementsByClassName(\"rll-youtube-player\");for(t=0;t<a.length;t++)(e=document.createElement(\"div\")),(u='https://i.ytimg.com/vi_webp/ID/hqdefault.webp'),(u=u.replace('ID',a[t].dataset.id)),(l=exclusions.some(exclusion=>u.includes(exclusion))),e.setAttribute(\"data-id\",a[t].dataset.id),e.setAttribute(\"data-query\",a[t].dataset.query),e.setAttribute(\"data-src\",a[t].dataset.src),(e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt,l)),a[t].appendChild(e),(p=e.querySelector(\".play\")),(p.onclick=lazyLoadYoutubeIframe)});</script>"
],
];
}

private function add_element( $element ) {
return "<script>function lazyLoadThumb(e,alt){var t='{$element}',a='<button class=\"play\" aria-label=\"play Youtube video\"></button>';t=t.replace('alt=\"\"','alt=\"'+alt+'\"');return t.replace(\"ID\",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement(\"iframe\"),t=\"ID?autoplay=1\";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute(\"src\",t.replace(\"ID\",this.parentNode.dataset.src)),e.setAttribute(\"frameborder\",\"0\"),e.setAttribute(\"allowfullscreen\",\"1\"),e.setAttribute(\"allow\", \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener(\"DOMContentLoaded\",function(){var e,t,p,a=document.getElementsByClassName(\"rll-youtube-player\");for(t=0;t<a.length;t++)e=document.createElement(\"div\"),e.setAttribute(\"data-id\",a[t].dataset.id),e.setAttribute(\"data-query\", a[t].dataset.query),e.setAttribute(\"data-src\", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script>";
private function add_element( $element, $excluded_patterns, $image_url ) {
return "<script>function lazyLoadThumb(e,alt,l){var t='{$element}',a='<button class=\"play\" aria-label=\"play Youtube video\"></button>';if(l){t=t.replace('data-lazy-','');t=t.replace('loading=\"lazy\"','');t=t.replace(/<noscript>.*?<\/noscript>/g,'');}t=t.replace('alt=\"\"','alt=\"'+alt+'\"');return t.replace(\"ID\",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement(\"iframe\"),t=\"ID?autoplay=1\";t+=0===this.parentNode.dataset.query.length?\"\":\"&\"+this.parentNode.dataset.query;e.setAttribute(\"src\",t.replace(\"ID\",this.parentNode.dataset.src)),e.setAttribute(\"frameborder\",\"0\"),e.setAttribute(\"allowfullscreen\",\"1\"),e.setAttribute(\"allow\",\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener(\"DOMContentLoaded\",function(){var exclusions={$excluded_patterns};var e,t,p,u,l,a=document.getElementsByClassName(\"rll-youtube-player\");for(t=0;t<a.length;t++)(e=document.createElement(\"div\")),(u='{$image_url}'),(u=u.replace('ID',a[t].dataset.id)),(l=exclusions.some(exclusion=>u.includes(exclusion))),e.setAttribute(\"data-id\",a[t].dataset.id),e.setAttribute(\"data-query\",a[t].dataset.query),e.setAttribute(\"data-src\",a[t].dataset.src),(e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt,l)),a[t].appendChild(e),(p=e.querySelector(\".play\")),(p.onclick=lazyLoadYoutubeIframe)});</script>";
}
}
15 changes: 14 additions & 1 deletion src/Assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,20 @@ public function getYoutubeThumbnailScript( $args = [] ) {
}
}

return "<script>function lazyLoadThumb(e,alt){var t='{$image}',a='<button class=\"play\" aria-label=\"play Youtube video\"></button>';t=t.replace('alt=\"\"','alt=\"'+alt+'\"');return t.replace(\"ID\",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement(\"iframe\"),t=\"ID?autoplay=1\";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute(\"src\",t.replace(\"ID\",this.parentNode.dataset.src)),e.setAttribute(\"frameborder\",\"0\"),e.setAttribute(\"allowfullscreen\",\"1\"),e.setAttribute(\"allow\", \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener(\"DOMContentLoaded\",function(){var e,t,p,a=document.getElementsByClassName(\"rll-youtube-player\");for(t=0;t<a.length;t++)e=document.createElement(\"div\"),e.setAttribute(\"data-id\",a[t].dataset.id),e.setAttribute(\"data-query\", a[t].dataset.query),e.setAttribute(\"data-src\", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script>";
/**
* Filters the patterns excluded from lazyload for youtube thumbnails.
*
* @param array $excluded_patterns Array of excluded patterns.
*/
$excluded_patterns = apply_filters( 'rocket_lazyload_exclude_youtube_thumbnail', [] );

if ( ! is_array( $excluded_patterns ) ) {
$excluded_patterns = [];
}

$excluded_patterns = wp_json_encode( $excluded_patterns );

return "<script>function lazyLoadThumb(e,alt,l){var t='{$image}',a='<button class=\"play\" aria-label=\"play Youtube video\"></button>';if(l){t=t.replace('data-lazy-','');t=t.replace('loading=\"lazy\"','');t=t.replace(/<noscript>.*?<\/noscript>/g,'');}t=t.replace('alt=\"\"','alt=\"'+alt+'\"');return t.replace(\"ID\",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement(\"iframe\"),t=\"ID?autoplay=1\";t+=0===this.parentNode.dataset.query.length?\"\":\"&\"+this.parentNode.dataset.query;e.setAttribute(\"src\",t.replace(\"ID\",this.parentNode.dataset.src)),e.setAttribute(\"frameborder\",\"0\"),e.setAttribute(\"allowfullscreen\",\"1\"),e.setAttribute(\"allow\",\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener(\"DOMContentLoaded\",function(){var exclusions={$excluded_patterns};var e,t,p,u,l,a=document.getElementsByClassName(\"rll-youtube-player\");for(t=0;t<a.length;t++)(e=document.createElement(\"div\")),(u='{$image_url}'),(u=u.replace('ID',a[t].dataset.id)),(l=exclusions.some(exclusion=>u.includes(exclusion))),e.setAttribute(\"data-id\",a[t].dataset.id),e.setAttribute(\"data-query\",a[t].dataset.query),e.setAttribute(\"data-src\",a[t].dataset.src),(e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt,l)),a[t].appendChild(e),(p=e.querySelector(\".play\")),(p.onclick=lazyLoadYoutubeIframe)});</script>";
}

/**
Expand Down
Loading