pds-dev-kit-web 2.2.40 → 2.2.41

package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts

@@ -699,15 +699,14 @@ export declare const sampleCustomsection1: {
                     CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: boolean;
                 };
                 CB_CONTENT_PROP_YOUTUBE: {
-                    CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME: number;
-                    CB_CONTENT_PROP_YOUTUBE_SPEC_MPLAY: boolean;
-                    CB_CONTENT_PROP_YOUTUBE_SPEC_REPLAY: boolean;
+                    CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY: boolean;
+                    CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY: boolean;
                     CB_CONTENT_PROP_YOUTUBE_SPEC_SRC: string;
                     CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: number;
                 };
                 CB_EFFECT_PROP_ENTANIM: {
                     CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: string;
-                    'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': string;
+                    'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': null;
                     CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: number;
                     'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null;
                     CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: number;

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

@@ -659,15 +659,14 @@ exports.sampleCustomsection1 = {
                         CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true
                     },
                     CB_CONTENT_PROP_YOUTUBE: {
-                        CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME: 10,
-                        CB_CONTENT_PROP_YOUTUBE_SPEC_MPLAY: true,
-                        CB_CONTENT_PROP_YOUTUBE_SPEC_REPLAY: true,
+                        CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY: false,
+                        CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY: false,
                         CB_CONTENT_PROP_YOUTUBE_SPEC_SRC: 'https://www.youtube.com/watch?v=ryYFcl57bVo',
                         CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: 0
                     },
                     CB_EFFECT_PROP_ENTANIM: {
-                        CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'SLIDEINLEFT',
-                        'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': 'HEARTBEAT',
+                        CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'NONE',
+                        'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': null,
                         CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 1,
                         'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null,
                         CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 1,
@@ -693,16 +692,16 @@ exports.sampleCustomsection1 = {
                         'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null
                     },
                     CB_PLACEMENT_PROP_PLACEMENT: {
-                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 2,
-                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 1,
-                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 4,
-                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 3,
+                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 8,
+                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
+                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 12,
+                        '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,
                         'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 2,
-                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 2,
-                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 2
+                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 20,
+                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 20
                     },
                     CB_STYLE_PROP_BGCOLOR: {
                         CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE: 90,
@@ -1147,7 +1146,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.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { CB_YOUTUBE_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_YOUTUBE_PROPERTIES_TYPE;
+export type YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'ALWAYS' | 'VIEWPORT-FREEZE' | 'VIEWPORT';
 declare function Youtube(props: Props): JSX.Element;
 export default Youtube;

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

@@ -29,10 +29,11 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
+var YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'VIEWPORT';
 function Youtube(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
-    var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id;
+    var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE, device, YOUTUBE_AUTOPLAY_TRIGGER_POINT), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id, cbAutoplayMode = _b.cbAutoplayMode;
     var isEditMode = mode === 'EDIT';
     var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
     var _d = (0, util_1.parseProperties)(props, device), propsStyle = _d.style, propsHoverStyle = _d.hoverStyle, layoutStyle = _d.layout, effect = _d.effect;
@@ -49,7 +50,34 @@ 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 } : {};
-    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({ 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: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
+    var iframeRef = (0, react_1.useRef)(null);
+    var autoplayRef = (0, react_1.useRef)(null);
+    var autoplayEntry = (0, hooks_1.useIntersectionObserver)(autoplayRef, {
+        freezeOnceVisible: YOUTUBE_AUTOPLAY_TRIGGER_POINT === 'VIEWPORT-FREEZE' ? true : false
+    });
+    var onLoadIframe = function () {
+        var _a;
+        if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
+            return;
+        }
+        if (cbAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
+            iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
+        }
+    };
+    // NOTE: Effect for AUTO-PLAY
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
+            return;
+        }
+        if (cbAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
+            iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
+        }
+        if (cbAutoplayMode === 'VIEWPORT' && !(autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
+            iframeRef.current.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
+        }
+    }, [autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting, cbAutoplayMode]);
+    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: youtubeSrc, onLoad: onLoadIframe, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/parseYoutubeContentProp.d.ts

@@ -1,7 +1,15 @@
 import type { CB_CONTENT_PROP_YOUTUBE_TYPE } from './types';
-declare function parseYoutubeContentProp(props: CB_CONTENT_PROP_YOUTUBE_TYPE): {
+import type { YOUTUBE_AUTOPLAY_TRIGGER_POINT } from './Youtube';
+import type { Device } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+declare function parseYoutubeContentProp(props: CB_CONTENT_PROP_YOUTUBE_TYPE, device: Device, autoplayTriggerPoint: YOUTUBE_AUTOPLAY_TRIGGER_POINT): {
     id: string;
     youtubeSrc: string;
     thumbnailSrc: string;
+    cbAutoplayMode?: undefined;
+} | {
+    id: string;
+    youtubeSrc: string;
+    thumbnailSrc: string;
+    cbAutoplayMode: string;
 };
 export default parseYoutubeContentProp;

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

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function parseYoutubeContentProp(props) {
+function parseYoutubeContentProp(props, device, autoplayTriggerPoint) {
     var id = getYoutubeId(props.CB_CONTENT_PROP_YOUTUBE_SPEC_SRC);
     var start = props.CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME;
-    var end = props.CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME;
+    var shouldAutoPlay = device === 'DESKTOP'
+        ? props.CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY
+        : props.CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY;
+    var cbAutoplayMode = shouldAutoPlay ? autoplayTriggerPoint : 'NONE';
     if (!id) {
         return {
             id: 'no-id',
@@ -13,8 +16,9 @@ function parseYoutubeContentProp(props) {
     }
     return {
         id: id,
-        youtubeSrc: getEmbedUrl(id, start, end),
-        thumbnailSrc: getThumbnailUrl(id)
+        youtubeSrc: getEmbedUrl(id, { start: start, shouldAutoPlay: shouldAutoPlay, autoplayMode: autoplayTriggerPoint }),
+        thumbnailSrc: getThumbnailUrl(id),
+        cbAutoplayMode: cbAutoplayMode
     };
 }
 function getYoutubeId(src) {
@@ -27,7 +31,28 @@ function getYoutubeId(src) {
 function getThumbnailUrl(id) {
     return "https://img.youtube.com/vi/".concat(id, "/0.jpg");
 }
-function getEmbedUrl(id, start, end) {
-    return "https://www.youtube.com/embed/".concat(id, "?start=").concat(start, "&end=").concat(end);
+function getEmbedUrl(id, _a) {
+    var start = _a.start, autoplayMode = _a.autoplayMode, shouldAutoPlay = _a.shouldAutoPlay;
+    try {
+        var url = new URL("https://www.youtube.com/embed/".concat(id));
+        url.searchParams.set('start', "".concat(start));
+        if (!shouldAutoPlay) {
+            return url.href;
+        }
+        // NOTE: AUTOPLAY PARAMS
+        if (autoplayMode === 'ALWAYS') {
+            url.searchParams.set('autoplay', '1');
+        }
+        if (autoplayMode === 'VIEWPORT') {
+            url.searchParams.set('enablejsapi', '1');
+        }
+        url.searchParams.set('mute', '1');
+        url.searchParams.set('loop', '1');
+        url.searchParams.set('playlist', "".concat(id));
+        return url.href;
+    }
+    catch (error) {
+        return "https://www.youtube.com/embed/".concat(id, "?start=").concat(start);
+    }
 }
 exports.default = parseYoutubeContentProp;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/types.d.ts

@@ -1,10 +1,9 @@
 import type { ENUM_STRING, NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 export type CB_CONTENT_PROP_YOUTUBE_TYPE = {
-    CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME: number;
-    CB_CONTENT_PROP_YOUTUBE_SPEC_MPLAY: boolean;
-    CB_CONTENT_PROP_YOUTUBE_SPEC_REPLAY: boolean;
     CB_CONTENT_PROP_YOUTUBE_SPEC_SRC: string;
     CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: number;
+    CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY: boolean;
+    CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY: boolean;
 };
 export type CB_STYLE_PROP_BGCOLOR_ENUM_GRADIENT = 'LINEAR' | 'RADIAL';
 export type CB_STYLE_PROP_BGCOLOR_ENUM_TYPE = 'NONE' | 'SOLID' | 'GRADIENT';

package/package.json

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

package/release-note.md

@@ -1,8 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.40]
+## [v2.2.41]
 ## urgent|https://design.storybook.publ.biz/
 
-### Component
-    * TextField
-        * overrideIBtn1IconColorKey prop 추가
-        * overrideIBtn2IconColorKey prop 추가
+### sub
+    * DynamicLayout
+        * CB-YOUTUBE AUTOPLAY 추가