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

		@@ -1,139 +1,106 @@
1	1	"use strict";
2		-(self["webpackChunkelementorFrontend"] = self["webpackChunkelementorFrontend"] || []).push([["youtube-handler"],{
3	2
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__) => {
	3	+(function() {
9	4
	5	+//#region \0rolldown/runtime.js
	6	+ var __defProp = Object.defineProperty;
	7	+ var __name = (target, value) => __defProp(target, "name", {
	8	+ value,
	9	+ configurable: true
	10	+ });
10	11
	12	+//#endregion
11	13
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		- };
	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	+ });
85	103
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		-]);
	104	+//#endregion
	105	+})();
139	106	//# sourceMappingURL=youtube-handler.js.map