pds-dev-kit-web-test 0.3.10 → 0.3.12

package/dist/src/sub/DynamicLayout/pagesPreviewMock.js

@@ -694,9 +694,9 @@ exports.sampleCustomsection1 = {
                     },
                     CB_PLACEMENT_PROP_PLACEMENT: {
                         CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 8,
-                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 1,
+                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
                         CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 12,
-                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 3,
+                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 8,
                         CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 1,
                         'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 2,
                         CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 1,
@@ -1147,7 +1147,7 @@ exports.sampleCustomsection1 = {
         availableTemplates: [],
         schema: 'GENERAL'
     },
-    order: 1,
+    order: 5,
     program: '',
     programData: {},
     properties: {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js

@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-console */
 var react_1 = require("react");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
@@ -50,23 +51,41 @@ function Youtube(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
+    var iframeRef = (0, react_1.useRef)(null);
     var autoplayRef = (0, react_1.useRef)(null);
     var autoplayEntry = (0, hooks_1.useIntersectionObserver)(autoplayRef, {
         freezeOnceVisible: youtubeAutoplayMode === 'VIEWPORT-FREEZE' ? true : false
     });
     var shouldAutoPlay = function () {
+        var _a, _b;
         if (youtubeAutoplayMode === 'ALWAYS') {
             return true;
         }
         if (youtubeAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
+            if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
+                console.log('ERROR: no CONTENT WINDOW');
+                return true;
+            }
+            iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
+            console.log('VIEWPORT & intersecting');
             return true;
         }
         if (youtubeAutoplayMode === 'VIEWPORT-FREEZE' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
             return true;
         }
+        if (youtubeAutoplayMode === 'VIEWPORT' && !(autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
+            console.log('viewport and NOT intersecting');
+            if (!((_b = iframeRef.current) === null || _b === void 0 ? void 0 : _b.contentWindow)) {
+                console.log('no window, return true');
+                return true;
+            }
+            iframeRef.current.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
+            console.log('send pause');
+            return true;
+        }
         return false;
     };
-    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" })) })) }))] }));
+    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, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [
@@ -88,12 +107,17 @@ var S_YoutubeButton = styled_components_1.default.div(templateObject_4 || (templ
 function YoutubeButton() {
     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" })] })) }));
 }
-function getAutoplaySrc(youtubeSrc) {
+function getAutoplaySrc(youtubeSrc, youtubeAutoplayMode) {
     try {
         var url = new URL(youtubeSrc);
         if (url.hostname.includes('youtube.com') || url.hostname.includes('youtu.be')) {
             var id = utils_1.YouTubeLinkParser.getId(youtubeSrc);
-            url.searchParams.set('autoplay', '1');
+            if (youtubeAutoplayMode === 'VIEWPORT') {
+                url.searchParams.set('enablejsapi', '1');
+            }
+            else {
+                url.searchParams.set('autoplay', '1');
+            }
             url.searchParams.set('mute', '1');
             url.searchParams.set('loop', '1');
             url.searchParams.set('playlist', "".concat(id));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,6 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.10]
+## [v0.3.12]
 ## 기준 pds-dev-kit-web 버전 @2.2.34
 ### sub
     * DynamicLayout
-        * youtube CB autoplay mode 3가지 개발
+        * fix - VIEWPORT진입 전에도 재생되는 이슈