Improve video blocker, DEV-1618

Model/ExternalVideoReplacer.php

@@ -7,6 +7,14 @@
 class ExternalVideoReplacer
 {
     public function replaceIframeSources(string $content): string
+    {
+        $content = $this->replaceIframeTags($content);
+        $content = $this->replaceVideoBackgroundAttributes($content);
+
+        return $content;
+    }
+
+    private function replaceIframeTags(string $content): string
     {
         $iframePatterns = [
             // YouTube patterns
@@ -36,4 +44,35 @@ public function replaceIframeSources(string $content): string
 
         return $content;
     }
+
+    private function replaceVideoBackgroundAttributes(string $content): string
+    {
+        // Pattern to match elements with data-video-src attribute containing YouTube or Vimeo URLs
+        $videoBackgroundPatterns = [
+            // YouTube patterns in data-video-src
+            '/(<[^>]+)data-video-src=["\'](https?:\/\/(?:www\.)?(?:youtube\.com|youtube-nocookie\.com)\/embed\/[^"\']+)["\']([^>]*>)/i',
+            '/(<[^>]+)data-video-src=["\'](https?:\/\/(?:www\.)?youtu\.be\/[^"\']+)["\']([^>]*>)/i',
+            // Vimeo patterns in data-video-src
+            '/(<[^>]+)data-video-src=["\'](https?:\/\/(?:www\.)?vimeo\.com\/[^"\']+)["\']([^>]*>)/i',
+            '/(<[^>]+)data-video-src=["\'](https?:\/\/(?:www\.)?player\.vimeo\.com\/[^"\']+)["\']([^>]*>)/i'
+        ];
+
+        foreach ($videoBackgroundPatterns as $pattern) {
+            $content = preg_replace_callback($pattern, function (array $matches) {
+                $beforeAttr = $matches[1];
+                $videoUrl   = $matches[2];
+                $afterAttr  = $matches[3];
+
+                // Check if data-cookieconsent already exists
+                if (preg_match('/data-cookieconsent=["\'][^"\']*["\']/', $beforeAttr . $afterAttr)) {
+                    return $beforeAttr . 'data-cookieblock-src="' . $videoUrl . '"' . $afterAttr;
+                }
+
+                return $beforeAttr . 'data-cookieblock-src="' . $videoUrl
+                    . '" data-cookieconsent="marketing"' . $afterAttr;
+            }, $content);
+        }
+
+        return $content;
+    }
 }

view/frontend/requirejs-config.js

@@ -4,12 +4,15 @@ var config = {
             'Magento_GoogleAnalytics/js/google-analytics': {
                 'CustomGento_Cookiebot/js/google-analytics-mixin': true
             },
-            'Magento_ProductVideo/js/fotorama-add-video-events': {
-                'CustomGento_Cookiebot/js/fotorama-video-events-mixin': true
+            'Magento_PageBuilder/js/widget/video-background': {
+                'CustomGento_Cookiebot/js/video-background-mixin': true
             },
             'Magento_PageBuilder/js/content-type/slide/appearance/default/widget': {
                 'CustomGento_Cookiebot/js/slide-widget-mixin': true
             },
+            'Magento_ProductVideo/js/fotorama-add-video-events': {
+                'CustomGento_Cookiebot/js/fotorama-video-events-mixin': true
+            }
         }
     }
 };

view/frontend/web/js/video-background-mixin.js

@@ -0,0 +1,92 @@
+define([
+    'jquery',
+    'CustomGento_Cookiebot/js/video-blocker-widget'
+], function ($, createVideoBlocker) {
+    'use strict';
+
+    return function (originalWidget) {
+        function isSupportedVideoPlatform(url) {
+            if (!url) {
+                return false;
+            }
+
+            var youtubePattern = /^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\//i;
+            var youtubeNocookiePattern = /^https?:\/\/(www\.)?youtube-nocookie\.com\//i;
+            var vimeoPattern = /^https?:\/\/(www\.)?(vimeo\.com|player\.vimeo\.com)\//i;
+
+            return youtubePattern.test(url) ||
+                youtubeNocookiePattern.test(url) ||
+                vimeoPattern.test(url);
+        }
+
+        function getValidDimension(value, fallback) {
+            if (!value || parseFloat(value) === 0) {
+                return fallback;
+            }
+            return value;
+        }
+
+        return function (config, element) {
+            const videoElementContainer = $(element);
+            const videoElement = videoElementContainer[0];
+            const videoElementStyles = window.getComputedStyle(element);
+            const height = getValidDimension(videoElementStyles.minHeight, '300px');
+            const width = getValidDimension(videoElementStyles.width, '400px');
+
+            if (videoElementContainer.data('background-type') !== 'video') {
+                originalWidget(config, element);
+                return;
+            }
+
+            var blockVideoConsentConfig = window.cookiebotConfig && window.cookiebotConfig.blockVideosUntilConsent;
+            var videoSrc = videoElement.getAttribute('data-video-src');
+            var cookieblockSrc = videoElement.getAttribute('data-cookieblock-src');
+            var src = videoSrc || cookieblockSrc;
+            var previousStatus = '';
+            var blockerElement = null;
+
+            if (!blockVideoConsentConfig || !isSupportedVideoPlatform(src)) {
+                originalWidget(config, element);
+                return;
+            }
+
+            addEventListener('CookiebotOnLoad', videoBackgroundBlocker);
+
+            function videoBackgroundBlocker() {
+                if (previousStatus === 'blocked' && (!window.Cookiebot?.consent?.marketing)) {
+                    return;
+                }
+
+                if (!window.Cookiebot?.consent?.marketing) {
+                    if (videoSrc) {
+                        videoElement.setAttribute('data-cookieblock-src', videoSrc);
+                        videoElement.removeAttribute('data-video-src');
+                    }
+                    videoElement.style.display = 'none';
+                    blockerElement = createVideoBlocker(videoElement);
+                    const blockerElementContent = blockerElement.querySelector('div');
+                    blockerElementContent.style.height = height;
+                    blockerElementContent.style.width = width;
+                    previousStatus = 'blocked';
+                    return;
+                }
+
+                if (!videoElement.getAttribute('data-video-src') && cookieblockSrc) {
+                    videoElement.setAttribute('data-video-src', cookieblockSrc);
+                    videoElement.removeAttribute('data-cookieblock-src');
+                }
+                videoElement.style.display = 'block';
+
+                if (blockerElement) {
+                    blockerElement.remove();
+                    blockerElement = null;
+                }
+
+                originalWidget(config, element);
+                previousStatus = 'unblocked';
+            }
+
+            videoBackgroundBlocker();
+        };
+    };
+});