Closes #6312: Exclude youtube thumbnail from lazyload (#6391)

wp-media · Feb 21, 2024 · 96cd8a0 · 96cd8a0
1 parent a4249e2
commit 96cd8a0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/inc/Dependencies/RocketLazyload/Assets.php b/inc/Dependencies/RocketLazyload/Assets.php
@@ -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>";
 	}
 
 	/**

diff --git a/inc/Engine/Media/Lazyload/Subscriber.php b/inc/Engine/Media/Lazyload/Subscriber.php
@@ -75,20 +75,21 @@ public function __construct( Options_Data $options, Assets $assets, Image $image
 	 */
 	public static function get_subscribed_events() {
 		return [
-			'wp_footer'                                => [
+			'wp_footer'                                 => [
 				[ 'insert_lazyload_script', PHP_INT_MAX ],
 				[ 'insert_youtube_thumbnail_script', PHP_INT_MAX ],
 			],
-			'wp_head'                                  => [ 'insert_nojs_style', PHP_INT_MAX ],
-			'wp_enqueue_scripts'                       => [ 'insert_youtube_thumbnail_style', PHP_INT_MAX ],
-			'rocket_buffer'                            => [ 'lazyload', 18 ],
-			'rocket_lazyload_html'                     => 'lazyload_responsive',
-			'init'                                     => 'lazyload_smilies',
-			'wp'                                       => 'deactivate_lazyload_on_specific_posts',
-			'wp_lazy_loading_enabled'                  => [ 'maybe_disable_core_lazyload', 10, 2 ],
-			'rocket_lazyload_excluded_attributes'      => 'add_exclusions',
-			'rocket_lazyload_excluded_src'             => 'add_exclusions',
-			'rocket_lazyload_iframe_excluded_patterns' => 'add_exclusions',
+			'wp_head'                                   => [ 'insert_nojs_style', PHP_INT_MAX ],
+			'wp_enqueue_scripts'                        => [ 'insert_youtube_thumbnail_style', PHP_INT_MAX ],
+			'rocket_buffer'                             => [ 'lazyload', 18 ],
+			'rocket_lazyload_html'                      => 'lazyload_responsive',
+			'init'                                      => 'lazyload_smilies',
+			'wp'                                        => 'deactivate_lazyload_on_specific_posts',
+			'wp_lazy_loading_enabled'                   => [ 'maybe_disable_core_lazyload', 10, 2 ],
+			'rocket_lazyload_excluded_attributes'       => 'add_exclusions',
+			'rocket_lazyload_excluded_src'              => 'add_exclusions',
+			'rocket_lazyload_iframe_excluded_patterns'  => 'add_exclusions',
+			'rocket_lazyload_exclude_youtube_thumbnail' => 'add_exclusions',
 		];
 	}
 
@@ -455,7 +456,11 @@ public function maybe_disable_core_lazyload( $value, $tag_name ) {
 	 * @param array $exclusions Array of excluded patterns.
 	 * @return array
 	 */
-	public function add_exclusions( array $exclusions ): array {
+	public function add_exclusions( $exclusions ): array {
+		if ( ! is_array( $exclusions ) ) {
+			$exclusions = [];
+		}
+
 		$exclude_lazyload = $this->options->get( 'exclude_lazyload', [] );
 
 		if ( empty( $exclude_lazyload ) ) {