Skip to content

Commit fe3da1f

Browse files
iranimijiranimij
authored
Merge pull request #37 from customgento/DEV-1111-fix-blocked-video-styles
Dev 1111 fix blocked video styles
2 parents 8e13efa + b945d28 commit fe3da1f

File tree

6 files changed

+144
-35
lines changed

6 files changed

+144
-35
lines changed

‎view/frontend/layout/default.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</block>
1515
</referenceBlock>
1616
<referenceContainer name="before.body.end">
17-
<block name="customgento.cookiebot.iframe.handler" template="CustomGento_Cookiebot::iframe-handler.phtml">
17+
<block name="customgento.cookiebot.iframe.handler" template="CustomGento_Cookiebot::iframe-handler.phtml" ifconfig="web/cookiebot/block_videos_until_consent">
1818
<arguments>
1919
<argument name="view_model" xsi:type="object">CustomGento\Cookiebot\ViewModel\Script</argument>
2020
</arguments>

‎view/frontend/requirejs-config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ var config = {
66
},
77
'Magento_ProductVideo/js/fotorama-add-video-events': {
88
'CustomGento_Cookiebot/js/fotorama-video-events-mixin': true
9-
}
9+
},
10+
'Magento_PageBuilder/js/content-type/slide/appearance/default/widget': {
11+
'CustomGento_Cookiebot/js/slide-widget-mixin': true
12+
},
1013
}
1114
}
1215
};

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

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<?php
2-
32
declare(strict_types=1);
43

54
use CustomGento\Cookiebot\ViewModel\Script;
@@ -12,19 +11,17 @@ use Magento\Framework\View\Helper\SecureHtmlRenderer;
1211
/** @var SecureHtmlRenderer $secureRenderer */
1312
/** @var Script $viewModel */
1413
$viewModel = $block->getData('view_model');
15-
$consentMessage = __('Please <a href="javascript:Cookiebot.renew()" class="cookiebot-iframe-consent-link">accept %1 cookies</a> to view this %2 content.');
16-
14+
$consentMessage
15+
= __('Please <a href="javascript:Cookiebot.renew()" class="cookiebot-iframe-consent-link">accept %1 cookies</a> to view this %2 content.');
1716
$scriptString = '
1817
document.addEventListener("DOMContentLoaded", function () {
1918
((document, selector, consentType) => {
2019
const createTextNode = text => document.createTextNode(text);
2120
const createElement = element => document.createElement(element);
22-
2321
document.querySelectorAll(selector).forEach(iframe => {
2422
const divElement = createElement("div");
2523
const paragraphElement = createElement("p");
2624
const iframeSrc = iframe.dataset.cookieblockSrc;
27-
2825
// Detect service provider type
2926
const serviceProvider =
3027
/google\.com\/maps\/embed/.test(iframeSrc) ? "Google Maps" :
@@ -61,9 +58,29 @@ $scriptString = '
6158
iframe.parentNode.insertBefore(divElement, iframe);
6259
});
6360
})(document, "iframe[data-cookieblock-src]", "marketing");
64-
})
65-
';
66-
61+
62+
function fixIframeStyle () {
63+
((document, selector) => {
64+
document.querySelectorAll(selector).forEach(iframe => {
65+
const pageBuilderContainer = iframe.closest(".pagebuilder-video-container");
66+
const pageBuilderColumn = iframe.closest(".pagebuilder-column");
67+
if (!pageBuilderContainer) {
68+
return;
69+
}
70+
if (!Cookiebot?.consent?.marketing) {
71+
pageBuilderContainer.style.paddingTop = "0";
72+
if (pageBuilderColumn) {
73+
pageBuilderColumn.style.backgroundColor = "#fff";
74+
}
75+
} else {
76+
pageBuilderContainer.style.paddingTop = "56.25%";
77+
}
78+
});
79+
})(document, "iframe");
80+
}
81+
82+
addEventListener("CookiebotOnConsentReady", fixIframeStyle);
83+
})';
6784
// checking on if SecureHtmlRenderer exists first, because this module is still compatible with Magento 2.3.x which doesn't include this class
6885
if (class_exists(SecureHtmlRenderer::class)) {
6986
echo $secureRenderer->renderTag('script', ['data-cookieconsent' => 'ignore'], $scriptString, false);

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

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
define([
22
'jquery',
3-
], function ($) {
3+
'CustomGento_Cookiebot/js/video-blocker-widget'
4+
], function ($, createVideoBlocker) {
45
'use strict';
56

67
return function (widget) {
@@ -13,30 +14,7 @@ define([
1314
return;
1415
}
1516

16-
const videoElement = event.target.querySelector('.product-video');
17-
const divElement = document.createElement('div');
18-
const paragraphElement = document.createElement('p');
19-
const iframeHeight = videoElement?.getBoundingClientRect().height || 300;
20-
const iframeWidth = videoElement?.getBoundingClientRect().width || 400;
21-
22-
divElement.innerHTML = `
23-
<div style="background-color:#CCC;display:inline-block;height:${iframeHeight}px;position:relative;width:${iframeWidth}px; z-index: 1000;">
24-
<div style="background-color:#848484;border-radius:15px;height:50%;position:absolute;transform:translate(50%,50%);width:50%;">
25-
<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>
26-
</div>
27-
</div>
28-
`;
29-
30-
divElement.classList.add('cookieconsent-optout-marketing');
31-
paragraphElement.innerHTML =
32-
$.mage.__('Please <a href="javascript:Cookiebot.renew()">accept marketing cookies</a> to view this content.')
33-
;
34-
35-
divElement.style.fontSize = '1.4rem';
36-
divElement.append(paragraphElement);
37-
paragraphElement.style.zIndex = '10001';
38-
paragraphElement.style.position = 'relative';
39-
videoElement?.parentNode.insertBefore(divElement, videoElement);
17+
createVideoBlocker(e.target.querySelector('.product-video'));
4018
},
4119

4220
_initialize: function () {

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
define([
2+
'jquery',
3+
'underscore',
4+
'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) {
8+
'use strict';
9+
10+
return function (originalWidget) {
11+
return function (config, element) {
12+
const videoElement = element[0].querySelector('[data-background-type=video]');
13+
const blockVideoConsentConfig = window.cookiebotConfig && window.cookiebotConfig.blockVideosUntilConsent;
14+
let previousStatus = '';
15+
if (!videoElement || !blockVideoConsentConfig) {
16+
originalWidget(config, element);
17+
return;
18+
}
19+
20+
const viewportElement = document.createElement('div');
21+
22+
23+
addEventListener('CookiebotOnLoad', sliderVideoBlocker);
24+
25+
function sliderVideoBlocker() {
26+
if (previousStatus === 'blocked' && !Cookiebot?.consent?.marketing) {
27+
return;
28+
}
29+
30+
if (!Cookiebot?.consent?.marketing) {
31+
videoElement.setAttribute('data-cookieblock-src', videoElement.getAttribute('data-video-src'));
32+
videoElement.removeAttribute('data-video-src');
33+
createVideoBlocker(videoElement);
34+
videoElement.style.display = 'none';
35+
previousStatus = 'blocked';
36+
return;
37+
}
38+
39+
viewportElement.classList.add('jarallax-viewport-element');
40+
41+
if (!videoElement) {
42+
return;
43+
}
44+
45+
if (!videoElement.getAttribute('data-video-src')) {
46+
videoElement.setAttribute('data-video-src', videoElement.getAttribute('data-cookieblock-src'));
47+
videoElement.style.display = 'block';
48+
videoElement.removeAttribute('data-cookieblock-src');
49+
50+
const customSlide = videoElement.closest('.slick-slide');
51+
if (customSlide) {
52+
const consentBlocker = customSlide.querySelector('.cookieconsent-optout-marketing');
53+
consentBlocker?.remove();
54+
}
55+
}
56+
videoElement.setAttribute('data-element-in-viewport', '.jarallax-viewport-element');
57+
videoElement.appendChild(viewportElement);
58+
videoBackground(config, videoElement);
59+
videoElement.style.display = 'block';
60+
previousStatus = 'unblocked';
61+
62+
originalWidget(config, element);
63+
}
64+
65+
sliderVideoBlocker();
66+
};
67+
};
68+
});

‎view/frontend/web/js/video-blocker-widget.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
define([
2+
'mage/translate'
3+
], function ($t) {
4+
'use strict';
5+
6+
return function (videoElement) {
7+
'use strict';
8+
9+
if (!videoElement) {
10+
return null;
11+
}
12+
13+
const divElement = document.createElement('div');
14+
const paragraphElement = document.createElement('p');
15+
const iframeHeight = videoElement?.getBoundingClientRect().height || 300;
16+
const iframeWidth = videoElement?.getBoundingClientRect().width || 400;
17+
18+
// Create the video blocker HTML
19+
divElement.innerHTML = `
20+
<div style="background-color:#CCC;display:inline-block;height:${iframeHeight}px;position:relative;width:${iframeWidth}px; z-index: 1000;">
21+
<div style="background-color:#848484;border-radius:15px;height:50%;position:absolute;transform:translate(50%,50%);width:50%;">
22+
<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>
23+
</div>
24+
</div>
25+
`;
26+
27+
// Add CSS classes and styling
28+
divElement.classList.add('cookieconsent-optout-marketing');
29+
paragraphElement.innerHTML = $t('Please <a href="javascript:Cookiebot.renew()">accept marketing cookies</a> to view this content.');
30+
31+
divElement.style.fontSize = '1.4rem';
32+
divElement.append(paragraphElement);
33+
paragraphElement.style.zIndex = '10001';
34+
paragraphElement.style.position = 'relative';
35+
36+
// Insert the blocker before the video element
37+
if (videoElement?.parentNode) {
38+
videoElement.parentNode.insertBefore(divElement, videoElement);
39+
}
40+
41+
return divElement;
42+
};
43+
});

0 commit comments

Comments
 (0)