Skip to content

Commit 70b89e4

Browse files
iranimijiranimij
authored
Merge pull request #45 from customgento/DEV-1618-block-video-until-consent
Improve video blocker, DEV-1618
2 parents 45716cd + 3f96e01 commit 70b89e4

File tree

5 files changed

+144
-20
lines changed

5 files changed

+144
-20
lines changed

‎Model/ExternalVideoReplacer.php‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@
77
class ExternalVideoReplacer
88
{
99
public function replaceIframeSources(string $content): string
10+
{
11+
$content = $this->replaceIframeTags($content);
12+
$content = $this->replaceVideoBackgroundAttributes($content);
13+
14+
return $content;
15+
}
16+
17+
private function replaceIframeTags(string $content): string
1018
{
1119
$iframePatterns = [
1220
// YouTube patterns
@@ -36,4 +44,35 @@ public function replaceIframeSources(string $content): string
3644

3745
return $content;
3846
}
47+
48+
private function replaceVideoBackgroundAttributes(string $content): string
49+
{
50+
// Pattern to match elements with data-video-src attribute containing YouTube or Vimeo URLs
51+
$videoBackgroundPatterns = [
52+
// YouTube patterns in data-video-src
53+
'/(<[^>]+)data-video-src=["\'](https?:\/\/(?:www\.)?(?:youtube\.com|youtube-nocookie\.com)\/embed\/[^"\']+)["\']([^>]*>)/i',
54+
'/(<[^>]+)data-video-src=["\'](https?:\/\/(?:www\.)?youtu\.be\/[^"\']+)["\']([^>]*>)/i',
55+
// Vimeo patterns in data-video-src
56+
'/(<[^>]+)data-video-src=["\'](https?:\/\/(?:www\.)?vimeo\.com\/[^"\']+)["\']([^>]*>)/i',
57+
'/(<[^>]+)data-video-src=["\'](https?:\/\/(?:www\.)?player\.vimeo\.com\/[^"\']+)["\']([^>]*>)/i'
58+
];
59+
60+
foreach ($videoBackgroundPatterns as $pattern) {
61+
$content = preg_replace_callback($pattern, function (array $matches) {
62+
$beforeAttr = $matches[1];
63+
$videoUrl = $matches[2];
64+
$afterAttr = $matches[3];
65+
66+
// Check if data-cookieconsent already exists
67+
if (preg_match('/data-cookieconsent=["\'][^"\']*["\']/', $beforeAttr . $afterAttr)) {
68+
return $beforeAttr . 'data-cookieblock-src="' . $videoUrl . '"' . $afterAttr;
69+
}
70+
71+
return $beforeAttr . 'data-cookieblock-src="' . $videoUrl
72+
. '" data-cookieconsent="marketing"' . $afterAttr;
73+
}, $content);
74+
}
75+
76+
return $content;
77+
}
3978
}

‎view/frontend/requirejs-config.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ var config = {
44
'Magento_GoogleAnalytics/js/google-analytics': {
55
'CustomGento_Cookiebot/js/google-analytics-mixin': true
66
},
7-
'Magento_ProductVideo/js/fotorama-add-video-events': {
8-
'CustomGento_Cookiebot/js/fotorama-video-events-mixin': true
7+
'Magento_PageBuilder/js/widget/video-background': {
8+
'CustomGento_Cookiebot/js/video-background-mixin': true
99
},
1010
'Magento_PageBuilder/js/content-type/slide/appearance/default/widget': {
1111
'CustomGento_Cookiebot/js/slide-widget-mixin': true
1212
},
13+
'Magento_ProductVideo/js/fotorama-add-video-events': {
14+
'CustomGento_Cookiebot/js/fotorama-video-events-mixin': true
15+
}
1316
}
1417
}
1518
};

‎view/frontend/web/js/slide-widget-mixin.js‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,14 @@
11
define([
22
'jquery',
33
'underscore',
4+
'CustomGento_Cookiebot/js/video-blocker-widget',
5+
'CustomGento_Cookiebot/js/video-platform-validator',
46
'Magento_PageBuilder/js/widget/show-on-hover',
5-
'Magento_PageBuilder/js/widget/video-background',
6-
'CustomGento_Cookiebot/js/video-blocker-widget'
7-
], function ($, _, showOnHover, videoBackground, createVideoBlocker) {
7+
'Magento_PageBuilder/js/widget/video-background'
8+
], function ($, _, createVideoBlocker, isSupportedVideoPlatform, showOnHover, videoBackground) {
89
'use strict';
910

1011
return function (originalWidget) {
11-
function isSupportedVideoPlatform(url) {
12-
if (!url) {
13-
return false;
14-
}
15-
16-
// Regex patterns for supported video platforms
17-
const youtubePattern = /^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\//i;
18-
const youtubeNocookiePattern = /^https?:\/\/(www\.)?youtube-nocookie\.com\//i;
19-
const vimeoPattern = /^https?:\/\/(www\.)?(vimeo\.com|player\.vimeo\.com)\//i;
20-
21-
return youtubePattern.test(url) ||
22-
youtubeNocookiePattern.test(url) ||
23-
vimeoPattern.test(url);
24-
}
25-
2612
return function (config, element) {
2713
const videoElement = element[0].querySelector('[data-background-type=video]');
2814

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
define([
2+
'jquery',
3+
'CustomGento_Cookiebot/js/video-blocker-widget',
4+
'CustomGento_Cookiebot/js/video-platform-validator'
5+
], function ($, createVideoBlocker, isSupportedVideoPlatform) {
6+
'use strict';
7+
8+
return function (originalWidget) {
9+
function getValidDimension(value, fallback) {
10+
if (!value || parseFloat(value) === 0) {
11+
return fallback;
12+
}
13+
return value;
14+
}
15+
16+
return function (config, element) {
17+
const videoElementContainer = $(element);
18+
const videoElement = videoElementContainer[0];
19+
const videoElementStyles = window.getComputedStyle(element);
20+
const height = getValidDimension(videoElementStyles.minHeight, '300px');
21+
const width = getValidDimension(videoElementStyles.width, '400px');
22+
23+
if (videoElementContainer.data('background-type') !== 'video') {
24+
originalWidget(config, element);
25+
return;
26+
}
27+
28+
const blockVideoConsentConfig = window.cookiebotConfig && window.cookiebotConfig.blockVideosUntilConsent;
29+
const videoSrc = videoElement.getAttribute('data-video-src');
30+
const cookieblockSrc = videoElement.getAttribute('data-cookieblock-src');
31+
const src = videoSrc || cookieblockSrc;
32+
let previousStatus = '';
33+
let blockerElement = null;
34+
35+
if (!blockVideoConsentConfig || !isSupportedVideoPlatform(src)) {
36+
originalWidget(config, element);
37+
return;
38+
}
39+
40+
addEventListener('CookiebotOnLoad', videoBackgroundBlocker);
41+
42+
function videoBackgroundBlocker() {
43+
if (previousStatus === 'blocked' && (!window.Cookiebot?.consent?.marketing)) {
44+
return;
45+
}
46+
47+
if (!window.Cookiebot?.consent?.marketing) {
48+
if (videoSrc) {
49+
videoElement.setAttribute('data-cookieblock-src', videoSrc);
50+
videoElement.removeAttribute('data-video-src');
51+
}
52+
videoElement.style.display = 'none';
53+
blockerElement = createVideoBlocker(videoElement);
54+
const blockerElementContent = blockerElement.querySelector('div');
55+
blockerElementContent.style.height = height;
56+
blockerElementContent.style.width = width;
57+
previousStatus = 'blocked';
58+
return;
59+
}
60+
61+
if (!videoElement.getAttribute('data-video-src') && cookieblockSrc) {
62+
videoElement.setAttribute('data-video-src', cookieblockSrc);
63+
videoElement.removeAttribute('data-cookieblock-src');
64+
}
65+
videoElement.style.display = 'block';
66+
67+
if (blockerElement) {
68+
blockerElement.remove();
69+
blockerElement = null;
70+
}
71+
72+
originalWidget(config, element);
73+
previousStatus = 'unblocked';
74+
}
75+
76+
videoBackgroundBlocker();
77+
};
78+
};
79+
});

‎view/frontend/web/js/video-platform-validator.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
define([], function () {
2+
'use strict';
3+
4+
return function isSupportedVideoPlatform(url) {
5+
if (!url) {
6+
return false;
7+
}
8+
9+
const youtubePattern = /^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\//i;
10+
const youtubeNocookiePattern = /^https?:\/\/(www\.)?youtube-nocookie\.com\//i;
11+
const vimeoPattern = /^https?:\/\/(www\.)?(vimeo\.com|player\.vimeo\.com)\//i;
12+
13+
return youtubePattern.test(url) ||
14+
youtubeNocookiePattern.test(url) ||
15+
vimeoPattern.test(url);
16+
};
17+
});

0 commit comments

Comments
 (0)