Skip to content

Commit

Permalink
Enhancement/5111 add webp for youtube (#113)
Browse files Browse the repository at this point in the history 
* Added new extension

* Updated tests

* Fixed a bug with webp on get youtube thumbnail due to a wrong url

* Fixed an issue in the code

* Changed expectations from `getYoutubeThumbnailScript`

* Fixed CR

* Fixed CR

* Fixed CR
  • Loading branch information
@CrochetFeve0251
CrochetFeve0251 authored Apr 20, 2023
1 parent 20618e4 commit df4369b
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 4 deletions.
13 changes: 11 additions & 2 deletions Tests/Unit/Assets/getYoutubeThumbnailScript.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ public function youtubeDataProvider() {
'native' => true,
'extension' => 'webp',
],
$this->add_element( '<img loading="lazy" src="https://i.ytimg.com/vi/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">' ),
],
[
[
Expand All @@ -107,7 +107,16 @@ public function youtubeDataProvider() {
'native' => true,
'extension' => 'webp',
],
"<script>function lazyLoadThumb(e,alt){var t='<img loading=\"lazy\" src=\"https://i.ytimg.com/vi/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){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>",
],
[
[
'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>"
],
];
}
Expand Down
7 changes: 5 additions & 2 deletions src/Assets.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,11 +251,14 @@ public function getYoutubeThumbnailScript( $args = [] ) {

$args = wp_parse_args( $args, $defaults );

$image = '<img src="https://i.ytimg.com/vi/ID/' . $args['resolution'] . '.' . $args['extension'] . '" alt="" width="' . $allowed_resolutions[ $args['resolution'] ]['width'] . '" height="' . $allowed_resolutions[ $args['resolution'] ]['height'] . '">';
$extension_uri = 'webp' === $args['extension'] ? 'vi_webp' : 'vi';

$image_url = 'https://i.ytimg.com/' . $extension_uri . '/ID/' . $args['resolution'] . '.' . $args['extension'];

$image = '<img src="' . $image_url . '" alt="" width="' . $allowed_resolutions[ $args['resolution'] ]['width'] . '" height="' . $allowed_resolutions[ $args['resolution'] ]['height'] . '">';

if ( isset( $args['lazy_image'] ) && $args['lazy_image'] ) {
$attributes = 'alt="" width="' . $allowed_resolutions[ $args['resolution'] ]['width'] . '" height="' . $allowed_resolutions[ $args['resolution'] ]['height'] . '"';
$image_url = 'https://i.ytimg.com/vi/ID/' . $args['resolution'] . '.' . $args['extension'];

$image = '<img data-lazy-src="' . $image_url . '" ' . $attributes . '><noscript><img src="' . $image_url . '" ' . $attributes . '></noscript>';

Expand Down

0 comments on commit df4369b

Please sign in to comment.