diff --git a/Public/YoutubeFacade/Infrastructure/Services/YoutubeFacadeContentFilter.php b/Public/YoutubeFacade/Infrastructure/Services/YoutubeFacadeContentFilter.php new file mode 100644 index 00000000..32f8b759 --- /dev/null +++ b/Public/YoutubeFacade/Infrastructure/Services/YoutubeFacadeContentFilter.php @@ -0,0 +1,54 @@ +renderer = $renderer; + } + + /** + * Filter content to replace YouTube iframes with facades + * + * @param string $content Post content + * @return string Filtered content + */ + public function filter(string $content): string + { + // Match YouTube iframes (with or without video-wrapper) + // Pattern handles both youtube.com/embed/ and youtube-nocookie.com/embed/ + $pattern = '/
\s*]*src="https?:\/\/(?:www\.)?(?:youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9_-]+)[^"]*"[^>]*><\/iframe>\s*<\/div>/is'; + + $content = preg_replace_callback($pattern, function ($matches) { + $videoId = $matches[1]; + return $this->renderer->render($videoId); + }, $content); + + // Also match standalone iframes without wrapper + $patternStandalone = '/]*src="https?:\/\/(?:www\.)?(?:youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9_-]+)[^"]*"[^>]*><\/iframe>/is'; + + $content = preg_replace_callback($patternStandalone, function ($matches) { + $videoId = $matches[1]; + return $this->renderer->render($videoId); + }, $content); + + return $content; + } +} diff --git a/Public/YoutubeFacade/Infrastructure/Ui/Assets/Css/youtube-facade.css b/Public/YoutubeFacade/Infrastructure/Ui/Assets/Css/youtube-facade.css new file mode 100644 index 00000000..049f7160 --- /dev/null +++ b/Public/YoutubeFacade/Infrastructure/Ui/Assets/Css/youtube-facade.css @@ -0,0 +1,112 @@ +/** + * YouTube Facade Styles + * + * PageSpeed Optimization Phase 2.4: + * Styles for the YouTube facade pattern (thumbnail + play button) + * + * @package ROITheme + * @since 1.0.6 + */ + +/* ======================================== + FACADE CONTAINER + Inherits video-wrapper base styles + ======================================== */ + +.youtube-facade { + position: relative; + cursor: pointer; + aspect-ratio: 16 / 9; + background-color: #000; +} + +/* ======================================== + THUMBNAIL + ======================================== */ + +.youtube-facade__thumbnail { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 8px; +} + +/* ======================================== + PLAY BUTTON + ======================================== */ + +.youtube-facade__play { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: none; + background: transparent; + cursor: pointer; + padding: 0; + z-index: 1; + transition: transform 0.2s ease, filter 0.2s ease; +} + +.youtube-facade__play:hover { + transform: translate(-50%, -50%) scale(1.1); +} + +.youtube-facade__play:hover .youtube-facade__play-bg { + fill: #f00; + fill-opacity: 1; +} + +.youtube-facade__play:focus { + outline: none; +} + +.youtube-facade__play:focus-visible { + outline: 2px solid #fff; + outline-offset: 4px; +} + +/* ======================================== + IFRAME (after activation) + ======================================== */ + +.youtube-facade iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + border-radius: 8px; +} + +/* ======================================== + LOADING STATE + ======================================== */ + +.youtube-facade--loading .youtube-facade__play { + display: none; +} + +.youtube-facade--loading::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 48px; + height: 48px; + margin: -24px 0 0 -24px; + border: 4px solid rgba(255, 255, 255, 0.3); + border-top-color: #fff; + border-radius: 50%; + animation: youtube-facade-spin 0.8s linear infinite; +} + +@keyframes youtube-facade-spin { + to { + transform: rotate(360deg); + } +} diff --git a/Public/YoutubeFacade/Infrastructure/Ui/Assets/Js/youtube-facade.js b/Public/YoutubeFacade/Infrastructure/Ui/Assets/Js/youtube-facade.js new file mode 100644 index 00000000..d5200e9f --- /dev/null +++ b/Public/YoutubeFacade/Infrastructure/Ui/Assets/Js/youtube-facade.js @@ -0,0 +1,71 @@ +/** + * YouTube Facade - Lazy Load Handler + * + * PageSpeed Optimization Phase 2.4: + * - Loads YouTube iframe only on user click + * - Reduces TBT by ~2000ms + * + * @package ROITheme + * @since 1.0.6 + */ + +(function() { + 'use strict'; + + /** + * Initialize facade click handlers + */ + function initYoutubeFacades() { + var facades = document.querySelectorAll('.youtube-facade[data-video-id]'); + + facades.forEach(function(facade) { + facade.addEventListener('click', handleFacadeClick); + }); + } + + /** + * Handle click on facade - load real iframe + * @param {Event} event Click event + */ + function handleFacadeClick(event) { + event.preventDefault(); + + var facade = event.currentTarget; + var videoId = facade.getAttribute('data-video-id'); + + if (!videoId) { + return; + } + + // Show loading state + facade.classList.add('youtube-facade--loading'); + + // Create iframe + var iframe = document.createElement('iframe'); + iframe.setAttribute('src', 'https://www.youtube-nocookie.com/embed/' + videoId + '?autoplay=1&rel=0'); + iframe.setAttribute('title', 'YouTube video'); + iframe.setAttribute('frameborder', '0'); + iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'); + iframe.setAttribute('allowfullscreen', ''); + + // Wait for iframe to load before showing + iframe.addEventListener('load', function() { + facade.classList.remove('youtube-facade--loading'); + }); + + // Clear facade content and add iframe + facade.innerHTML = ''; + facade.appendChild(iframe); + + // Remove click handler (one-time activation) + facade.removeEventListener('click', handleFacadeClick); + facade.style.cursor = 'default'; + } + + // Initialize when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initYoutubeFacades); + } else { + initYoutubeFacades(); + } +})(); diff --git a/Public/YoutubeFacade/Infrastructure/Ui/YoutubeFacadeRenderer.php b/Public/YoutubeFacade/Infrastructure/Ui/YoutubeFacadeRenderer.php new file mode 100644 index 00000000..7860df54 --- /dev/null +++ b/Public/YoutubeFacade/Infrastructure/Ui/YoutubeFacadeRenderer.php @@ -0,0 +1,55 @@ + + Video thumbnail + +
+HTML; + + return $html; + } +} diff --git a/Public/YoutubeFacade/Infrastructure/Wordpress/YoutubeFacadeHooksRegistrar.php b/Public/YoutubeFacade/Infrastructure/Wordpress/YoutubeFacadeHooksRegistrar.php new file mode 100644 index 00000000..d7a0afd4 --- /dev/null +++ b/Public/YoutubeFacade/Infrastructure/Wordpress/YoutubeFacadeHooksRegistrar.php @@ -0,0 +1,70 @@ +contentFilter = $contentFilter; + } + + /** + * Register all hooks + */ + public function register(): void + { + // Filter post content to replace YouTube iframes with facades + add_filter('the_content', [$this->contentFilter, 'filter'], 20); + + // Enqueue facade assets + add_action('wp_enqueue_scripts', [$this, 'enqueueAssets'], 15); + } + + /** + * Enqueue CSS and JS for YouTube facades + */ + public function enqueueAssets(): void + { + // Only on single posts where videos might appear + if (!is_single()) { + return; + } + + wp_enqueue_style( + 'roi-youtube-facade', + get_template_directory_uri() . '/Public/YoutubeFacade/Infrastructure/Ui/Assets/Css/youtube-facade.css', + [], + ROI_VERSION, + 'all' + ); + + wp_enqueue_script( + 'roi-youtube-facade', + get_template_directory_uri() . '/Public/YoutubeFacade/Infrastructure/Ui/Assets/Js/youtube-facade.js', + [], + ROI_VERSION, + [ + 'in_footer' => true, + 'strategy' => 'defer', + ] + ); + } +} diff --git a/functions.php b/functions.php index 908289bb..d81e9d2b 100644 --- a/functions.php +++ b/functions.php @@ -156,6 +156,17 @@ try { ); $themeSettingsInjector->register(); + // === YOUTUBE FACADE (PageSpeed Optimization Phase 2.4) === + // Lazy-load YouTube iframes to reduce TBT by ~2000ms + $youtubeFacadeRenderer = new \ROITheme\Public\YoutubeFacade\Infrastructure\Ui\YoutubeFacadeRenderer(); + $youtubeFacadeFilter = new \ROITheme\Public\YoutubeFacade\Infrastructure\Services\YoutubeFacadeContentFilter( + $youtubeFacadeRenderer + ); + $youtubeFacadeHooksRegistrar = new \ROITheme\Public\YoutubeFacade\Infrastructure\Wordpress\YoutubeFacadeHooksRegistrar( + $youtubeFacadeFilter + ); + $youtubeFacadeHooksRegistrar->register(); + // Log en modo debug if (defined('WP_DEBUG') && WP_DEBUG) { error_log('ROI Theme: Admin Panel initialized successfully');