Skip to content

Commit 21ff2dc

Browse files
iranimijiranimij
committed
Add video blocker to cms, DEV-1111
Signed-off-by: Iman Aboheydary <[email protected]>
1 parent 5c55e3b commit 21ff2dc

File tree

7 files changed

+100
-259
lines changed

7 files changed

+100
-259
lines changed

Model/YouTubeReplacer.php renamed to Model/ExternalVideoReplacer.php

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
namespace CustomGento\Cookiebot\Model;
66

7-
class YouTubeReplacer
7+
class ExternalVideoReplacer
88
{
99
/**
1010
* Replace iframe sources with cookie consent attributes for YouTube, Vimeo, and Google Maps
@@ -21,10 +21,7 @@ public function replaceIframeSources(string $content): string
2121
'/<iframe([^>]*)\s+src=["\'](https?:\/\/(?:www\.)?youtu\.be\/[^"\']+)["\']([^>]*)>/i',
2222
// Vimeo patterns
2323
'/<iframe([^>]*)\s+src=["\'](https?:\/\/(?:www\.)?vimeo\.com\/[^"\']+)["\']([^>]*)>/i',
24-
'/<iframe([^>]*)\s+src=["\'](https?:\/\/(?:www\.)?player\.vimeo\.com\/[^"\']+)["\']([^>]*)>/i',
25-
// Google Maps patterns
26-
'/<iframe([^>]*)\s+src=["\'](https?:\/\/(?:www\.)?google\.com\/maps\/[^"\']+)["\']([^>]*)>/i',
27-
'/<iframe([^>]*)\s+src=["\'](https?:\/\/(?:www\.)?maps\.google\.com\/[^"\']+)["\']([^>]*)>/i',
24+
'/<iframe([^>]*)\s+src=["\'](https?:\/\/(?:www\.)?player\.vimeo\.com\/[^"\']+)["\']([^>]*)>/i'
2825
];
2926

3027
foreach ($iframePatterns as $pattern) {

‎Plugin/PageBuilder/Model/Filter/TemplatePlugin.php‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
namespace CustomGento\Cookiebot\Plugin\PageBuilder\Model\Filter;
66

77
use CustomGento\Cookiebot\Model\Config;
8-
use CustomGento\Cookiebot\Model\YouTubeReplacer;
8+
use CustomGento\Cookiebot\Model\ExternalVideoReplacer;
99
use Magento\PageBuilder\Model\Filter\Template;
1010

1111
class TemplatePlugin
@@ -16,18 +16,18 @@ class TemplatePlugin
1616
private $config;
1717

1818
/**
19-
* @var YouTubeReplacer
19+
* @var ExternalVideoReplacer
2020
*/
21-
private $youTubeReplacer;
21+
private $externalVideoReplacer;
2222

2323
/**
24-
* @param Config $config
25-
* @param YouTubeReplacer $youTubeReplacer
24+
* @param Config $config
25+
* @param ExternalVideoReplacer $externalVideoReplacer
2626
*/
27-
public function __construct(Config $config, YouTubeReplacer $youTubeReplacer)
27+
public function __construct(Config $config, ExternalVideoReplacer $externalVideoReplacer)
2828
{
2929
$this->config = $config;
30-
$this->youTubeReplacer = $youTubeReplacer;
30+
$this->externalVideoReplacer = $externalVideoReplacer;
3131
}
3232

3333
/**
@@ -40,6 +40,6 @@ public function afterFilter(Template $subject, string $result): string
4040
return $result;
4141
}
4242

43-
return $this->youTubeReplacer->replaceIframeSources($result);
43+
return $this->externalVideoReplacer->replaceIframeSources($result);
4444
}
4545
}

Test/Unit/Model/YouTubeReplacerTest.php renamed to Test/Unit/Model/ExternalVideoReplacerTest.php

Lines changed: 21 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,27 @@
44

55
namespace CustomGento\Cookiebot\Test\Unit\Model;
66

7-
use CustomGento\Cookiebot\Model\YouTubeReplacer;
7+
use CustomGento\Cookiebot\Model\ExternalVideoReplacer;
88
use PHPUnit\Framework\TestCase;
99

10-
class YouTubeReplacerTest extends TestCase
10+
class ExternalVideoReplacerTest extends TestCase
1111
{
1212
/**
13-
* @var YouTubeReplacer
13+
* @var ExternalVideoReplacer
1414
*/
15-
private $youTubeReplacer;
15+
private $externalVideoReplacer;
1616

1717
protected function setUp(): void
1818
{
19-
$this->youTubeReplacer = new YouTubeReplacer();
19+
$this->externalVideoReplacer = new ExternalVideoReplacer();
2020
}
2121

2222
/**
2323
* @dataProvider iframeDataProvider
2424
*/
2525
public function testReplaceIframeSources(string $input, string $expected): void
2626
{
27-
$result = $this->youTubeReplacer->replaceIframeSources($input);
27+
$result = $this->externalVideoReplacer->replaceIframeSources($input);
2828
$this->assertEquals($expected, $result);
2929
}
3030

@@ -34,93 +34,70 @@ public function iframeDataProvider(): array
3434
// YouTube test cases
3535
'youtube.com embed' => [
3636
'<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>',
37-
'<iframe data-cookieblock-src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" data-cookieconsent="marketing"></iframe>'
37+
'<iframe data-cookieblock-src="https://www.youtube.com/embed/dQw4w9WgXcQ" data-cookieconsent="marketing" width="560" height="315"></iframe>'
3838
],
3939
'youtube-nocookie.com embed' => [
4040
'<iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>',
41-
'<iframe data-cookieblock-src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" width="560" height="315" data-cookieconsent="marketing"></iframe>'
41+
'<iframe data-cookieblock-src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" data-cookieconsent="marketing" width="560" height="315"></iframe>'
4242
],
4343
'youtu.be URL' => [
4444
'<iframe src="https://youtu.be/dQw4w9WgXcQ" width="560" height="315"></iframe>',
45-
'<iframe data-cookieblock-src="https://youtu.be/dQw4w9WgXcQ" width="560" height="315" data-cookieconsent="marketing"></iframe>'
45+
'<iframe data-cookieblock-src="https://youtu.be/dQw4w9WgXcQ" data-cookieconsent="marketing" width="560" height="315"></iframe>'
4646
],
4747
'youtube.com without www' => [
4848
'<iframe src="https://youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>',
49-
'<iframe data-cookieblock-src="https://youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" data-cookieconsent="marketing"></iframe>'
49+
'<iframe data-cookieblock-src="https://youtube.com/embed/dQw4w9WgXcQ" data-cookieconsent="marketing" width="560" height="315"></iframe>'
5050
],
5151
'youtube-nocookie.com without www' => [
5252
'<iframe src="https://youtube-nocookie.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>',
53-
'<iframe data-cookieblock-src="https://youtube-nocookie.com/embed/dQw4w9WgXcQ" width="560" height="315" data-cookieconsent="marketing"></iframe>'
53+
'<iframe data-cookieblock-src="https://youtube-nocookie.com/embed/dQw4w9WgXcQ" data-cookieconsent="marketing" width="560" height="315"></iframe>'
5454
],
5555
'youtu.be without www' => [
5656
'<iframe src="https://youtu.be/dQw4w9WgXcQ" width="560" height="315"></iframe>',
57-
'<iframe data-cookieblock-src="https://youtu.be/dQw4w9WgXcQ" width="560" height="315" data-cookieconsent="marketing"></iframe>'
57+
'<iframe data-cookieblock-src="https://youtu.be/dQw4w9WgXcQ" data-cookieconsent="marketing" width="560" height="315"></iframe>'
5858
],
5959
'http instead of https for youtube' => [
6060
'<iframe src="http://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>',
61-
'<iframe data-cookieblock-src="http://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" data-cookieconsent="marketing"></iframe>'
61+
'<iframe data-cookieblock-src="http://www.youtube.com/embed/dQw4w9WgXcQ" data-cookieconsent="marketing" width="560" height="315"></iframe>'
6262
],
6363

6464
// Vimeo test cases
6565
'vimeo.com embed' => [
6666
'<iframe src="https://vimeo.com/123456789" width="640" height="360"></iframe>',
67-
'<iframe data-cookieblock-src="https://vimeo.com/123456789" width="640" height="360" data-cookieconsent="marketing"></iframe>'
67+
'<iframe data-cookieblock-src="https://vimeo.com/123456789" data-cookieconsent="marketing" width="640" height="360"></iframe>'
6868
],
6969
'player.vimeo.com embed' => [
7070
'<iframe src="https://player.vimeo.com/video/123456789" width="640" height="360"></iframe>',
71-
'<iframe data-cookieblock-src="https://player.vimeo.com/video/123456789" width="640" height="360" data-cookieconsent="marketing"></iframe>'
71+
'<iframe data-cookieblock-src="https://player.vimeo.com/video/123456789" data-cookieconsent="marketing" width="640" height="360"></iframe>'
7272
],
7373
'www.vimeo.com embed' => [
7474
'<iframe src="https://www.vimeo.com/123456789" width="640" height="360"></iframe>',
75-
'<iframe data-cookieblock-src="https://www.vimeo.com/123456789" width="640" height="360" data-cookieconsent="marketing"></iframe>'
75+
'<iframe data-cookieblock-src="https://www.vimeo.com/123456789" data-cookieconsent="marketing" width="640" height="360"></iframe>'
7676
],
7777
'www.player.vimeo.com embed' => [
7878
'<iframe src="https://www.player.vimeo.com/video/123456789" width="640" height="360"></iframe>',
79-
'<iframe data-cookieblock-src="https://www.player.vimeo.com/video/123456789" width="640" height="360" data-cookieconsent="marketing"></iframe>'
79+
'<iframe data-cookieblock-src="https://www.player.vimeo.com/video/123456789" data-cookieconsent="marketing" width="640" height="360"></iframe>'
8080
],
8181
'http vimeo' => [
8282
'<iframe src="http://vimeo.com/123456789" width="640" height="360"></iframe>',
83-
'<iframe data-cookieblock-src="http://vimeo.com/123456789" width="640" height="360" data-cookieconsent="marketing"></iframe>'
83+
'<iframe data-cookieblock-src="http://vimeo.com/123456789" data-cookieconsent="marketing" width="640" height="360"></iframe>'
8484
],
85-
86-
// Google Maps test cases
87-
'google.com/maps embed' => [
88-
'<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a23e28c1191%3A0x49f75d3281df052a!2s150%20Park%20Row%2C%20New%20York%2C%20NY%2010007!5e0!3m2!1sen!2sus!4v1640995200000!5m2!1sen!2sus" width="600" height="450"></iframe>',
89-
'<iframe data-cookieblock-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a23e28c1191%3A0x49f75d3281df052a!2s150%20Park%20Row%2C%20New%20York%2C%20NY%2010007!5e0!3m2!1sen!2sus!4v1640995200000!5m2!1sen!2sus" width="600" height="450" data-cookieconsent="marketing"></iframe>'
90-
],
91-
'maps.google.com embed' => [
92-
'<iframe src="https://maps.google.com/maps?q=New+York&t=&z=13&ie=UTF8&iwloc=&output=embed" width="600" height="450"></iframe>',
93-
'<iframe data-cookieblock-src="https://maps.google.com/maps?q=New+York&t=&z=13&ie=UTF8&iwloc=&output=embed" width="600" height="450" data-cookieconsent="marketing"></iframe>'
94-
],
95-
'google.com/maps without www' => [
96-
'<iframe src="https://google.com/maps/embed?pb=test" width="600" height="450"></iframe>',
97-
'<iframe data-cookieblock-src="https://google.com/maps/embed?pb=test" width="600" height="450" data-cookieconsent="marketing"></iframe>'
98-
],
99-
'maps.google.com without www' => [
100-
'<iframe src="https://maps.google.com/maps?q=test" width="600" height="450"></iframe>',
101-
'<iframe data-cookieblock-src="https://maps.google.com/maps?q=test" width="600" height="450" data-cookieconsent="marketing"></iframe>'
102-
],
103-
'http google maps' => [
104-
'<iframe src="http://www.google.com/maps/embed?pb=test" width="600" height="450"></iframe>',
105-
'<iframe data-cookieblock-src="http://www.google.com/maps/embed?pb=test" width="600" height="450" data-cookieconsent="marketing"></iframe>'
106-
],
107-
10885
// General test cases
10986
'single quotes' => [
11087
'<iframe src=\'https://www.youtube.com/embed/dQw4w9WgXcQ\' width="560" height="315"></iframe>',
111-
'<iframe data-cookieblock-src=\'https://www.youtube.com/embed/dQw4w9WgXcQ\' width="560" height="315" data-cookieconsent="marketing"></iframe>'
88+
'<iframe data-cookieblock-src="https://www.youtube.com/embed/dQw4w9WgXcQ" data-cookieconsent="marketing" width="560" height="315"></iframe>'
11289
],
11390
'multiple iframes different services' => [
11491
'<iframe src="https://www.youtube.com/embed/video1"></iframe><iframe src="https://vimeo.com/video2"></iframe><iframe src="https://www.google.com/maps/embed?pb=test"></iframe>',
115-
'<iframe data-cookieblock-src="https://www.youtube.com/embed/video1" data-cookieconsent="marketing"></iframe><iframe data-cookieblock-src="https://vimeo.com/video2" data-cookieconsent="marketing"></iframe><iframe data-cookieblock-src="https://www.google.com/maps/embed?pb=test" data-cookieconsent="marketing"></iframe>'
92+
'<iframe data-cookieblock-src="https://www.youtube.com/embed/video1" data-cookieconsent="marketing"></iframe><iframe data-cookieblock-src="https://vimeo.com/video2" data-cookieconsent="marketing"></iframe><iframe src="https://www.google.com/maps/embed?pb=test"></iframe>'
11693
],
11794
'mixed content' => [
11895
'<p>Some text</p><iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe><p>More text</p><iframe src="https://vimeo.com/123456789"></iframe>',
11996
'<p>Some text</p><iframe data-cookieblock-src="https://www.youtube.com/embed/dQw4w9WgXcQ" data-cookieconsent="marketing"></iframe><p>More text</p><iframe data-cookieblock-src="https://vimeo.com/123456789" data-cookieconsent="marketing"></iframe>'
12097
],
12198
'iframe with frameborder and allowfullscreen' => [
12299
'<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen=""></iframe>',
123-
'<iframe data-cookieblock-src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen="" data-cookieconsent="marketing"></iframe>'
100+
'<iframe data-cookieblock-src="https://www.youtube.com/embed/dQw4w9WgXcQ" data-cookieconsent="marketing" frameborder="0" allowfullscreen=""></iframe>'
124101
],
125102
'iframe with existing data-cookieconsent' => [
126103
'<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" data-cookieconsent="marketing"></iframe>',

‎view/frontend/requirejs-config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ var config = {
44
'Magento_GoogleAnalytics/js/google-analytics': {
55
'CustomGento_Cookiebot/js/google-analytics-mixin': true
66
},
7-
'Magento_ProductVideo/js/load-player': {
8-
'CustomGento_Cookiebot/js/load-player-mixin': true
7+
'Magento_ProductVideo/js/fotorama-add-video-events': {
8+
'CustomGento_Cookiebot/js/fotorama-video-events-mixin': true
99
}
1010
}
1111
}

‎view/frontend/templates/iframe-handler.phtml‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -101,20 +101,6 @@ if ($viewModel && $viewModel->isBlockVideosUntilConsentEnabled()) {
101101
});
102102
';
103103

104-
$newScript = '
105-
document.addEventListener("DOMContentLoaded", function() {
106-
alert("test");
107-
})
108-
';
109-
110-
// Render scripts with secure renderer
111-
// echo $secureRenderer->renderTag(
112-
// 'script',
113-
// ['type' => 'text/javascript', 'data-cookieconsent' => 'ignore'],
114-
// $addRequiredAttributesScript,
115-
// false
116-
// );
117-
118104
echo $secureRenderer->renderTag(
119105
'script',
120106
['type' => 'text/javascript', 'data-cookieconsent' => 'ignore'],
@@ -123,10 +109,3 @@ if ($viewModel && $viewModel->isBlockVideosUntilConsentEnabled()) {
123109
);
124110
}
125111
?>
126-
127-
<!--<script>-->
128-
<!-- document.addEventListener("DOMContentLoaded", function() {-->
129-
<!-- const gallery = document.querySelector('.fotorama__wrap .fotorama__stage');-->
130-
<!-- gallery.classList.add('fotorama-video-container');-->
131-
<!-- }-->
132-
<!--</script>-->

‎view/frontend/web/js/fotorama-video-events-mixin.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
define([
2+
'jquery'
3+
], function ($) {
4+
'use strict';
5+
6+
return function (widget) {
7+
$.widget('mage.AddFotoramaVideoEvents', widget, {
8+
9+
_clickHandler: function (e) {
10+
const blockVideoConsentConfig = window.cookiebotConfig && window.cookiebotConfig.blockVideosUntilConsent;
11+
console.log('blockVideoConsentConfig', blockVideoConsentConfig);
12+
if (!Cookiebot?.consent?.marketing && blockVideoConsentConfig) {
13+
const videoElement = event.target.querySelector('.product-video');
14+
if (!Cookiebot?.consent?.marketing) {
15+
// Add placeholder before each video element
16+
// videoElements.forEach(function(videoElement) {
17+
if (Cookiebot?.consent?.marketing) {
18+
return;
19+
}
20+
const linkElement = document.createElement("a");
21+
const divElement = document.createElement("div");
22+
const paragraphElement = document.createElement("p");
23+
24+
const iframeHeight = videoElement.getBoundingClientRect().height || 300;
25+
const iframeWidth = videoElement.getBoundingClientRect().width || 400;
26+
27+
28+
divElement.innerHTML = `
29+
<div style="background-color:#CCC;display:inline-block;height:${iframeHeight}px;position:relative;width:${iframeWidth}px; z-index: 1000;">
30+
<div style="background-color:#848484;border-radius:15px;height:50%;position:absolute;transform:translate(50%,50%);width:50%;">
31+
<p style="color:#FFF;font-size:7.5em;position:relative;top:50%;left:50%;margin:0;text-align:center;transform:translate(-50%,-50%);">&ctdot;</p>
32+
</div>
33+
</div>
34+
`;
35+
36+
divElement.classList.add('cookieconsent-optout-marketing');
37+
linkElement.textContent = 'accept marketing cookies';
38+
linkElement.href = "javascript:Cookiebot.renew()";
39+
paragraphElement.append(
40+
document.createTextNode("Please "),
41+
linkElement,
42+
document.createTextNode(' to view this content.')
43+
);
44+
45+
// Insert the placeholder before the video element
46+
divElement.style.fontSize = "1.4rem";
47+
console.log('paragraphElement', paragraphElement);
48+
divElement.append(paragraphElement);
49+
console.log('divElement', divElement);
50+
paragraphElement.style.zIndex = "1000";
51+
paragraphElement.style.position = "relative";
52+
videoElement.parentNode.insertBefore(divElement, videoElement);
53+
// });
54+
55+
return;
56+
} else {
57+
58+
}
59+
return;
60+
}
61+
this._super(e);
62+
},
63+
});
64+
65+
return $.mage.AddFotoramaVideoEvents;
66+
};
67+
});

0 commit comments

Comments
 (0)