Skip to content

Commit ea0940d

Browse files
iranimijiranimij
committed
Add video block mixins, DEV-1111
Signed-off-by: Iman Aboheydary <[email protected]>
1 parent 1d0fb6a commit ea0940d

File tree

2 files changed

+169
-0
lines changed

2 files changed

+169
-0
lines changed

‎view/frontend/requirejs-config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ var config = {
33
mixins: {
44
'Magento_GoogleAnalytics/js/google-analytics': {
55
'CustomGento_Cookiebot/js/google-analytics-mixin': true
6+
},
7+
'Magento_ProductVideo/js/load-player': {
8+
'CustomGento_Cookiebot/js/load-player-mixin': true
69
}
710
}
811
}

‎view/frontend/web/js/load-player-mixin.js‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
define([
2+
'jquery'
3+
], function ($) {
4+
'use strict';
5+
6+
function createCookiebotPlaceholders() {
7+
((d,i,m)=>{let ct=t=>d.createTextNode(t);let ce=e=>d.createElement(e);d.querySelectorAll(i)
8+
.forEach(e=>{const a=ce('a'),div=ce('div'),p=ce('p'),s=e.dataset.cookieblockSrc,sp=
9+
/google\.com\/maps\/embed/.test(s)?'Google Maps':/player\.vimeo\.com\/video\//
10+
.test(s)?'Vimeo':/youtube(-nocookie)?\.com\/embed\//.test(s)?'YouTube':undefined;
11+
if(!sp)return;div.innerHTML=`<div style="background-color:#CCC;display:inline-`+
12+
`block;height:${e.height}px;position:relative;width:${e.width}px;"><div style=`+
13+
'"background-color:#848484;border-radius:15px;height:50%;position:absolute;'+
14+
'transform:translate(50%,50%);width:50%;"><p style="color:#FFF;font-size:7.5em;'+
15+
'position:relative;top:50%;left:50%;margin:0;text-align:center;transform:translate'
16+
+'(-50%,-50%);">&ctdot;</p></div>';div.classList.add(`cookieconsent-optout-${m}`);
17+
a.textContent=`accept ${m} cookies`;a.href='javascript:Cookiebot.renew()';p.append(
18+
ct('Please '), a, ct(` to view this ${sp} content.`));div.append(p);e.parentNode
19+
.insertBefore(div, e);})})(document, 'iframe[data-cookieblock-src]', 'marketing');
20+
}
21+
22+
return function (originalWidget) {
23+
24+
$.widget('mage.videoYoutube', $.mage.videoYoutube, {
25+
_create: function () {
26+
var self = this;
27+
28+
this._initialize();
29+
30+
this.element.append('<div></div>');
31+
32+
this._on(window, {
33+
'youtubeapiready': function () {
34+
var host = 'https://www.youtube.com';
35+
36+
if (self.useYoutubeNocookie) {
37+
host = 'https://www.youtube-nocookie.com';
38+
}
39+
40+
if (self._player !== undefined) {
41+
return;
42+
}
43+
self._autoplay = true;
44+
45+
if (self._autoplay) {
46+
self._params.autoplay = 1;
47+
}
48+
49+
if (!self._rel) {
50+
self._params.rel = 0;
51+
}
52+
53+
self._player = new window.YT.Player(self.element.children(':first')[0], {
54+
height: self._height,
55+
width: self._width,
56+
videoId: self._code,
57+
playerVars: self._params,
58+
host: host,
59+
events: {
60+
'onReady': function onPlayerReady() {
61+
self._player.getDuration();
62+
self.element.closest('.fotorama__stage__frame')
63+
.addClass('fotorama__product-video--loaded');
64+
65+
// Add Cookiebot integration
66+
const iframes = document.querySelectorAll('.product-video[data-type="youtube"] iframe');
67+
iframes.forEach((iframe) => {
68+
if (!Cookiebot.consent.marketing) {
69+
iframe.setAttribute('data-cookieblock-src', iframe.src);
70+
iframe.setAttribute('data-cookieconsent', 'marketing');
71+
iframe.removeAttribute('src');
72+
}
73+
});
74+
75+
createCookiebotPlaceholders();
76+
},
77+
onStateChange: function (data) {
78+
switch (window.parseInt(data.data, 10)) {
79+
case 1:
80+
self._playing = true;
81+
break;
82+
default:
83+
self._playing = false;
84+
break;
85+
}
86+
87+
self._trigger('statechange', {}, data);
88+
89+
if (data.data === window.YT.PlayerState.ENDED && self._loop) {
90+
self._player.playVideo();
91+
}
92+
}
93+
}
94+
});
95+
}
96+
});
97+
98+
this._loadApi();
99+
}
100+
});
101+
102+
$.widget('mage.videoVimeo', $.mage.videoVimeo, {
103+
_create: function () {
104+
var timestamp,
105+
additionalParams = '',
106+
src,
107+
id;
108+
109+
this._initialize();
110+
timestamp = new Date().getTime();
111+
this._autoplay = true;
112+
113+
if (this._autoplay) {
114+
additionalParams += '&autoplay=1';
115+
}
116+
117+
if (this._loop) {
118+
additionalParams += '&loop=1';
119+
}
120+
src = 'https://player.vimeo.com/video/' +
121+
this._code + '?api=1&player_id=vimeo' +
122+
this._code +
123+
timestamp +
124+
additionalParams;
125+
id = 'vimeo' + this._code + timestamp;
126+
this.element.append(
127+
$('<iframe></iframe>')
128+
.attr('frameborder', 0)
129+
.attr('id', id)
130+
.attr('width', this._width)
131+
.attr('height', this._height)
132+
.attr('src', src)
133+
.attr('data-cookieblock-src', src)
134+
.attr('data-cookieconsent', 'marketing')
135+
.attr('webkitallowfullscreen', '')
136+
.attr('mozallowfullscreen', '')
137+
.attr('allowfullscreen', '')
138+
.attr('referrerPolicy', 'origin')
139+
.attr('allow', 'autoplay')
140+
);
141+
142+
/* eslint-disable no-undef */
143+
this._player = new Vimeo.Player(this.element.children(':first')[0]);
144+
145+
this._player.ready().then(function () {
146+
$('#' + id).closest('.fotorama__stage__frame').addClass('fotorama__product-video--loaded');
147+
148+
// Add Cookiebot integration
149+
const iframes = document.querySelectorAll('.product-video[data-type="vimeo"] iframe');
150+
151+
iframes.forEach((iframe) => {
152+
if (!Cookiebot.consent.marketing) {
153+
iframe.setAttribute('data-cookieblock-src', iframe.src);
154+
iframe.setAttribute('data-cookieconsent', 'marketing');
155+
iframe.removeAttribute('src');
156+
}
157+
});
158+
159+
createCookiebotPlaceholders();
160+
});
161+
}
162+
});
163+
164+
return originalWidget;
165+
};
166+
});

0 commit comments

Comments
 (0)