← All changes | assets/js/youtube-handler.js +132 -99 4.3.0-beta3 → 4.0.0-dev4 View file →

		@@ -1,106 +1,139 @@
1	1	"use strict";
	2	+(self["webpackChunkelementorFrontend"] = self["webpackChunkelementorFrontend"] || []).push([["youtube-handler"],{
2	3
3		-(function() {
	4	+/***/ "../modules/atomic-widgets/elements/atomic-youtube/youtube-handler.js":
	5	+/*!****************************************************************************!*\
	6	+ !*** ../modules/atomic-widgets/elements/atomic-youtube/youtube-handler.js ***!
	7	+ \****************************************************************************/
	8	+/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
4	9
5		-//#region \0rolldown/runtime.js
6		- var __defProp = Object.defineProperty;
7		- var __name = (target, value) => __defProp(target, "name", {
8		- value,
9		- configurable: true
10		- });
11	10
12		-//#endregion
13	11
14		-//#region modules/atomic-widgets/elements/atomic-youtube/youtube-handler.js
15		- var _frontendHandlers = (globalThis.elementorV2.frontendHandlers);
16		- var getYoutubeVideoIdFromUrl = (url) => {
17		- const match = url.match(/^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?vi?=|(?:embed|v|vi|user|shorts)\/))([^?&"'>]+)/);
18		- return match ? match[1] : null;
19		- };
20		- var loadYouTubeAPI = () => {
21		- return new Promise((resolve) => {
22		- if (window.YT && window.YT.loaded) {
23		- resolve(window.YT);
24		- return;
25		- }
26		- const YOUTUBE_IFRAME_API_URL = "https://www.youtube.com/iframe_api";
27		- if (!document.querySelector(`script[src="${YOUTUBE_IFRAME_API_URL}"]`)) {
28		- const tag = document.createElement("script");
29		- tag.src = YOUTUBE_IFRAME_API_URL;
30		- const firstScriptTag = document.getElementsByTagName("script")[0];
31		- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
32		- }
33		- const checkYT = () => {
34		- if (window.YT && window.YT.loaded) resolve(window.YT);
35		- else setTimeout(checkYT, 350);
36		- };
37		- checkYT();
38		- });
39		- };
40		- (0, _frontendHandlers.register)({
41		- elementType: "e-youtube",
42		- id: "e-youtube-handler",
43		- callback: ({ element }) => {
44		- const youtubeElement = document.createElement("div");
45		- youtubeElement.style.height = "100%";
46		- element.appendChild(youtubeElement);
47		- const settingsAttr = element.getAttribute("data-settings");
48		- const parsedSettings = settingsAttr ? JSON.parse(settingsAttr) : {};
49		- const videoId = getYoutubeVideoIdFromUrl(parsedSettings.source);
50		- if (!videoId) return;
51		- let player;
52		- let observer;
53		- const prepareYTVideo = (YT) => {
54		- const playerOptions = {
55		- videoId,
56		- events: {
57		- onReady: () => {
58		- if (parsedSettings.mute) player.mute();
59		- if (parsedSettings.autoplay) player.playVideo();
60		- },
61		- onStateChange: (event) => {
62		- if (event.data === YT.PlayerState.ENDED && parsedSettings.loop) player.seekTo(parsedSettings.start || 0);
63		- }
64		- },
65		- playerVars: {
66		- controls: parsedSettings.controls ? 1 : 0,
67		- rel: parsedSettings.rel ? 0 : 1,
68		- cc_load_policy: parsedSettings.cc_load_policy ? 1 : 0,
69		- autoplay: parsedSettings.autoplay ? 1 : 0,
70		- start: parsedSettings.start,
71		- end: parsedSettings.end
72		- }
73		- };
74		- if (parsedSettings.privacy) {
75		- playerOptions.host = "https://www.youtube-nocookie.com";
76		- playerOptions.origin = window.location.hostname;
77		- }
78		- player = new YT.Player(youtubeElement, playerOptions);
79		- return player;
80		- };
81		- if (parsedSettings.lazyload) {
82		- observer = new IntersectionObserver((entries) => {
83		- if (entries[0].isIntersecting) {
84		- loadYouTubeAPI().then((apiObject) => prepareYTVideo(apiObject));
85		- observer.unobserve(element);
86		- }
87		- });
88		- observer.observe(element);
89		- } else loadYouTubeAPI().then((apiObject) => prepareYTVideo(apiObject));
90		- return () => {
91		- if (player && "function" === typeof player.destroy) {
92		- player.destroy();
93		- player = null;
94		- }
95		- if (element.contains(youtubeElement)) element.removeChild(youtubeElement);
96		- if (observer && "function" === typeof observer.disconnect) {
97		- observer.disconnect();
98		- observer = null;
99		- }
100		- };
101		- }
102		- });
	12	+var _frontendHandlers = __webpack_require__(/*! @elementor/frontend-handlers */ "@elementor/frontend-handlers");
	13	+const getYoutubeVideoIdFromUrl = url => {
	14	+ const regex = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?vi?=|(?:embed|v|vi|user|shorts)\/))([^?&"'>]+)/;
	15	+ const match = url.match(regex);
	16	+ return match ? match[1] : null;
	17	+};
	18	+const loadYouTubeAPI = () => {
	19	+ return new Promise(resolve => {
	20	+ if (window.YT && window.YT.loaded) {
	21	+ resolve(window.YT);
	22	+ return;
	23	+ }
	24	+ const YOUTUBE_IFRAME_API_URL = 'https://www.youtube.com/iframe_api';
	25	+ if (!document.querySelector(`script[src="${YOUTUBE_IFRAME_API_URL}"]`)) {
	26	+ const tag = document.createElement('script');
	27	+ tag.src = YOUTUBE_IFRAME_API_URL;
	28	+ const firstScriptTag = document.getElementsByTagName('script')[0];
	29	+ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	30	+ }
	31	+ const checkYT = () => {
	32	+ if (window.YT && window.YT.loaded) {
	33	+ resolve(window.YT);
	34	+ } else {
	35	+ setTimeout(checkYT, 350);
	36	+ }
	37	+ };
	38	+ checkYT();
	39	+ });
	40	+};
	41	+(0, _frontendHandlers.register)({
	42	+ elementType: 'e-youtube',
	43	+ id: 'e-youtube-handler',
	44	+ callback: ({
	45	+ element
	46	+ }) => {
	47	+ const youtubeElement = document.createElement('div');
	48	+ youtubeElement.style.height = '100%';
	49	+ element.appendChild(youtubeElement);
	50	+ const settingsAttr = element.getAttribute('data-settings');
	51	+ const parsedSettings = settingsAttr ? JSON.parse(settingsAttr) : {};
	52	+ const videoId = getYoutubeVideoIdFromUrl(parsedSettings.source);
	53	+ if (!videoId) {
	54	+ return;
	55	+ }
	56	+ let player;
	57	+ let observer;
	58	+ const prepareYTVideo = YT => {
	59	+ const playerOptions = {
	60	+ videoId,
	61	+ events: {
	62	+ onReady: () => {
	63	+ if (parsedSettings.mute) {
	64	+ player.mute();
	65	+ }
	66	+ if (parsedSettings.autoplay) {
	67	+ player.playVideo();
	68	+ }
	69	+ },
	70	+ onStateChange: event => {
	71	+ if (event.data === YT.PlayerState.ENDED && parsedSettings.loop) {
	72	+ player.seekTo(parsedSettings.start || 0);
	73	+ }
	74	+ }
	75	+ },
	76	+ playerVars: {
	77	+ controls: parsedSettings.controls ? 1 : 0,
	78	+ rel: parsedSettings.rel ? 0 : 1,
	79	+ cc_load_policy: parsedSettings.cc_load_policy ? 1 : 0,
	80	+ autoplay: parsedSettings.autoplay ? 1 : 0,
	81	+ start: parsedSettings.start,
	82	+ end: parsedSettings.end
	83	+ }
	84	+ };
103	85
104		-//#endregion
105		-})();
	86	+ // To handle CORS issues, when the default host is changed, the origin parameter has to be set.
	87	+ if (parsedSettings.privacy) {
	88	+ playerOptions.host = 'https://www.youtube-nocookie.com';
	89	+ playerOptions.origin = window.location.hostname;
	90	+ }
	91	+ player = new YT.Player(youtubeElement, playerOptions);
	92	+ return player;
	93	+ };
	94	+ if (parsedSettings.lazyload) {
	95	+ observer = new IntersectionObserver(entries => {
	96	+ if (entries[0].isIntersecting) {
	97	+ loadYouTubeAPI().then(apiObject => prepareYTVideo(apiObject));
	98	+ observer.unobserve(element);
	99	+ }
	100	+ });
	101	+ observer.observe(element);
	102	+ } else {
	103	+ loadYouTubeAPI().then(apiObject => prepareYTVideo(apiObject));
	104	+ }
	105	+ return () => {
	106	+ if (player && 'function' === typeof player.destroy) {
	107	+ player.destroy();
	108	+ player = null;
	109	+ }
	110	+ if (element.contains(youtubeElement)) {
	111	+ element.removeChild(youtubeElement);
	112	+ }
	113	+ if (observer && 'function' === typeof observer.disconnect) {
	114	+ observer.disconnect();
	115	+ observer = null;
	116	+ }
	117	+ };
	118	+ }
	119	+});
	120	+
	121	+/***/ }),
	122	+
	123	+/***/ "@elementor/frontend-handlers":
	124	+/*!***********************************************!*\
	125	+ !*** external "elementorV2.frontendHandlers" ***!
	126	+ \***********************************************/
	127	+/***/ ((module) => {
	128	+
	129	+module.exports = elementorV2.frontendHandlers;
	130	+
	131	+/***/ })
	132	+
	133	+},
	134	+/******/ __webpack_require__ => { // webpackRuntimeModules
	135	+/******/ var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
	136	+/******/ var __webpack_exports__ = (__webpack_exec__("../modules/atomic-widgets/elements/atomic-youtube/youtube-handler.js"));
	137	+/******/ }
	138	+]);
106	139	//# sourceMappingURL=youtube-handler.js.map