pds-dev-kit-web-test 0.3.11 → 0.3.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -57,35 +57,45 @@ function Youtube(props) {
|
|
|
57
57
|
freezeOnceVisible: youtubeAutoplayMode === 'VIEWPORT-FREEZE' ? true : false
|
|
58
58
|
});
|
|
59
59
|
var shouldAutoPlay = function () {
|
|
60
|
-
var _a, _b;
|
|
61
60
|
if (youtubeAutoplayMode === 'ALWAYS') {
|
|
62
61
|
return true;
|
|
63
62
|
}
|
|
64
63
|
if (youtubeAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
|
|
65
|
-
if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
|
|
66
|
-
console.log('ERROR: no CONTENT WINDOW');
|
|
67
|
-
return true;
|
|
68
|
-
}
|
|
69
|
-
iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
|
|
70
|
-
console.log('VIEWPORT & intersecting');
|
|
71
64
|
return true;
|
|
72
65
|
}
|
|
73
66
|
if (youtubeAutoplayMode === 'VIEWPORT-FREEZE' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
|
|
74
67
|
return true;
|
|
75
68
|
}
|
|
76
69
|
if (youtubeAutoplayMode === 'VIEWPORT' && !(autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
|
|
77
|
-
console.log('viewport and NOT intersecting');
|
|
78
|
-
if (!((_b = iframeRef.current) === null || _b === void 0 ? void 0 : _b.contentWindow)) {
|
|
79
|
-
console.log('no window, return true');
|
|
80
|
-
return true;
|
|
81
|
-
}
|
|
82
|
-
iframeRef.current.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
|
|
83
|
-
console.log('send pause');
|
|
84
70
|
return true;
|
|
85
71
|
}
|
|
86
72
|
return false;
|
|
87
73
|
};
|
|
88
|
-
|
|
74
|
+
var onLoadIframe = function () {
|
|
75
|
+
var _a;
|
|
76
|
+
if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
if (youtubeAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
|
|
80
|
+
console.log('play video');
|
|
81
|
+
iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
(0, react_1.useEffect)(function () {
|
|
85
|
+
var _a;
|
|
86
|
+
if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
if (youtubeAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
|
|
90
|
+
iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
|
|
91
|
+
}
|
|
92
|
+
if (youtubeAutoplayMode === 'VIEWPORT' && !(autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
|
|
93
|
+
console.log('pause video');
|
|
94
|
+
iframeRef.current.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
}, [autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting, youtubeAutoplayMode]);
|
|
98
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ ref: autoplayRef, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: id, src: shouldAutoPlay() ? getAutoplaySrc(youtubeSrc, youtubeAutoplayMode) : youtubeSrc, onLoad: onLoadIframe, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
|
|
89
99
|
}
|
|
90
100
|
function getBGColorStyles(props, device) {
|
|
91
101
|
var availableSpecCodes = [
|
|
@@ -107,16 +117,20 @@ var S_YoutubeButton = styled_components_1.default.div(templateObject_4 || (templ
|
|
|
107
117
|
function YoutubeButton() {
|
|
108
118
|
return ((0, jsx_runtime_1.jsx)(S_YoutubeButton, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ height: "100%", version: "1.1", viewBox: "0 0 68 48", width: "100%" }, { children: [(0, jsx_runtime_1.jsx)("path", { className: "ytp-large-play-button-bg", d: "M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z", fill: "#f00" }), (0, jsx_runtime_1.jsx)("path", { d: "M 45,24 27,14 27,34", fill: "#fff" })] })) }));
|
|
109
119
|
}
|
|
110
|
-
function getAutoplaySrc(youtubeSrc) {
|
|
120
|
+
function getAutoplaySrc(youtubeSrc, youtubeAutoplayMode) {
|
|
111
121
|
try {
|
|
112
122
|
var url = new URL(youtubeSrc);
|
|
113
123
|
if (url.hostname.includes('youtube.com') || url.hostname.includes('youtu.be')) {
|
|
114
124
|
var id = utils_1.YouTubeLinkParser.getId(youtubeSrc);
|
|
115
|
-
|
|
125
|
+
if (youtubeAutoplayMode === 'VIEWPORT') {
|
|
126
|
+
url.searchParams.set('enablejsapi', '1');
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
url.searchParams.set('autoplay', '1');
|
|
130
|
+
}
|
|
116
131
|
url.searchParams.set('mute', '1');
|
|
117
132
|
url.searchParams.set('loop', '1');
|
|
118
133
|
url.searchParams.set('playlist', "".concat(id));
|
|
119
|
-
url.searchParams.set('enablejsapi', '1');
|
|
120
134
|
return url.href;
|
|
121
135
|
}
|
|
122
136
|
return 'Invalid YouTube URL';
|
package/package.json
CHANGED
package/release-note.md
CHANGED