pds-dev-kit-web-test 0.3.10 → 0.3.11
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.
|
@@ -694,9 +694,9 @@ exports.sampleCustomsection1 = {
|
|
|
694
694
|
},
|
|
695
695
|
CB_PLACEMENT_PROP_PLACEMENT: {
|
|
696
696
|
CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 8,
|
|
697
|
-
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE':
|
|
697
|
+
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
|
|
698
698
|
CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 12,
|
|
699
|
-
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE':
|
|
699
|
+
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 8,
|
|
700
700
|
CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 1,
|
|
701
701
|
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 2,
|
|
702
702
|
CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 1,
|
|
@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
19
19
|
};
|
|
20
20
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
21
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
22
|
+
/* eslint-disable no-console */
|
|
22
23
|
var react_1 = require("react");
|
|
23
24
|
var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
|
|
24
25
|
var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
|
|
@@ -50,23 +51,41 @@ function Youtube(props) {
|
|
|
50
51
|
: CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
|
|
51
52
|
var hasEffect = !isNoneEffectType;
|
|
52
53
|
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
54
|
+
var iframeRef = (0, react_1.useRef)(null);
|
|
53
55
|
var autoplayRef = (0, react_1.useRef)(null);
|
|
54
56
|
var autoplayEntry = (0, hooks_1.useIntersectionObserver)(autoplayRef, {
|
|
55
57
|
freezeOnceVisible: youtubeAutoplayMode === 'VIEWPORT-FREEZE' ? true : false
|
|
56
58
|
});
|
|
57
59
|
var shouldAutoPlay = function () {
|
|
60
|
+
var _a, _b;
|
|
58
61
|
if (youtubeAutoplayMode === 'ALWAYS') {
|
|
59
62
|
return true;
|
|
60
63
|
}
|
|
61
64
|
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');
|
|
62
71
|
return true;
|
|
63
72
|
}
|
|
64
73
|
if (youtubeAutoplayMode === 'VIEWPORT-FREEZE' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
|
|
65
74
|
return true;
|
|
66
75
|
}
|
|
76
|
+
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
|
+
return true;
|
|
85
|
+
}
|
|
67
86
|
return false;
|
|
68
87
|
};
|
|
69
|
-
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, { title: id, src: shouldAutoPlay() ? getAutoplaySrc(youtubeSrc) : youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
|
|
88
|
+
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) : youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
|
|
70
89
|
}
|
|
71
90
|
function getBGColorStyles(props, device) {
|
|
72
91
|
var availableSpecCodes = [
|
|
@@ -97,6 +116,7 @@ function getAutoplaySrc(youtubeSrc) {
|
|
|
97
116
|
url.searchParams.set('mute', '1');
|
|
98
117
|
url.searchParams.set('loop', '1');
|
|
99
118
|
url.searchParams.set('playlist', "".concat(id));
|
|
119
|
+
url.searchParams.set('enablejsapi', '1');
|
|
100
120
|
return url.href;
|
|
101
121
|
}
|
|
102
122
|
return 'Invalid YouTube URL';
|
package/package.json
CHANGED
package/release-note.md
CHANGED