pds-dev-kit-web-test 0.3.13 → 0.3.15

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_BTN_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_BTN_PROPERTIES_TYPE } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_BTN_PROPERTIES_TYPE;
 declare function Button(props: Props): JSX.Element;
 export default Button;

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

@@ -28,12 +28,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var useGoogleFonts_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks/useGoogleFonts");
-var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var useGoogleFonts_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts");
+var newUtils_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");

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

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");

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

@@ -43,7 +43,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");

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

@@ -1,4 +1,4 @@
-import type { ENUM_STRING, STRING_PLAIN } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, STRING_PLAIN } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export type ImagePropsKeys = keyof CB_IMAGE_STYLE_PROPS;
 export type CB_IMAGE_STYLE_PROPS = {
     CB_STYLE_PROP_IMAGE_SPEC_FIT: STRING_PLAIN;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_RICHTEXT_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_RICHTEXT_PROPERTIES_TYPE } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_RICHTEXT_PROPERTIES_TYPE;
 declare function RichText(props: Props): JSX.Element;
 export default RichText;

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

@@ -21,11 +21,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var RichText_1 = require("../../../../../../../DynamicLayout/components/ComponentBlocks/RichText");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var RichText_1 = require("@sub/DynamicLayout/components/ComponentBlocks/RichText");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");

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

@@ -1,5 +1,5 @@
 import type { BGColorPropsKeys, CB_STYLE_PROP_BGCOLOR_SPECS } from '../Youtube/types';
-import type { ENUM_STRING, NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export type CB_STYLE_PROP_BGOVERLAY_ENUM_GRADIENT = 'LINEAR' | 'RADIAL';
 export type CB_STYLE_PROP_BGOVERLAY_ENUM_TYPE = 'NONE' | 'SOLID' | 'GRADIENT';
 export type CB_STYLE_PROP_BGOVERLAY_SPECS_BASE = {

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

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
 var hooks_1 = require("../../../../hooks");
 var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
 var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));

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

@@ -1,4 +1,4 @@
-import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export type TextPropsKeys = keyof CB_STYLE_PROP_TEXT_SPECS;
 export type CB_STYLE_PROP_TEXT_SPECS_BASE = {
     CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: ENUM_STRING;

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

@@ -13,8 +13,8 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var ComponentBlocks_1 = require("../../../../../../../DynamicLayout/components/ComponentBlocks");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var ComponentBlocks_1 = require("@sub/DynamicLayout/components/ComponentBlocks");
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");

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

@@ -1,4 +1,4 @@
-import type { DefaultBrightTheme } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { DefaultBrightTheme } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export type TwitterPropsKeys = keyof CB_TWITTER_STYLE_PROPS;
 export type CB_TWITTER_STYLE_PROPS = {
     CB_STYLE_PROP_TWITTER_SPEC_THEME: DefaultBrightTheme;

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';
+import type { CB_YOUTUBE_PROPERTIES_TYPE } from '@sub/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

@@ -19,22 +19,21 @@ 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");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
-var utils_1 = require("../../../../../../../DynamicLayout/utils");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 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, youtubeAutoplayMode = _a.youtubeAutoplayMode;
+    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;
@@ -54,48 +53,31 @@ function Youtube(props) {
     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
+        freezeOnceVisible: YOUTUBE_AUTOPLAY_TRIGGER_POINT === 'VIEWPORT-FREEZE' ? true : false
     });
-    var shouldAutoPlay = function () {
-        if (youtubeAutoplayMode === 'ALWAYS') {
-            return true;
-        }
-        if (youtubeAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
-            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)) {
-            return true;
-        }
-        return false;
-    };
     var onLoadIframe = function () {
         var _a;
         if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
             return;
         }
-        if (youtubeAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
-            console.log('play video');
+        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 (youtubeAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
+        if (cbAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
             iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
         }
-        if (youtubeAutoplayMode === 'VIEWPORT' && !(autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
-            console.log('pause video');
+        if (cbAutoplayMode === 'VIEWPORT' && !(autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
             iframeRef.current.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
-            return;
         }
-    }, [autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting, youtubeAutoplayMode]);
-    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" })) })) }))] }));
+    }, [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 = [
@@ -117,27 +99,5 @@ 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, 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);
-            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));
-            return url.href;
-        }
-        return 'Invalid YouTube URL';
-    }
-    catch (error) {
-        return 'Invalid URL';
-    }
-}
 exports.default = Youtube;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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 '@sub/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';
+import type { ENUM_STRING, NUMBER_INTEGER } from '@sub/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/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_BoxWithShadow.d.ts

@@ -1,5 +1,5 @@
 import type { StylesProps } from '../types';
-import type { Device, NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { Device, NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export declare const S_CB_BoxWithShadow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StylesProps & {
     cbStylePropsShadowSpecs: {
         CB_STYLE_PROP_SHADOW_SPEC_OPACITY: NUMBER_INTEGER;

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

@@ -42,7 +42,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.S_CB_BoxWithShadow = void 0;
-var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
+var isNullOrUndefined_1 = __importDefault(require("@sub/DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
 var styled_components_1 = __importStar(require("styled-components"));
 exports.S_CB_BoxWithShadow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:before {\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n    border-top-left-radius: ", "px;\n    border-top-right-radius: ", "px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    left: 0;\n    opacity: ", ";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover {\n    ", ";\n\n    &:before {\n      border-bottom-left-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n      border-top-left-radius: ", "px;\n      border-top-right-radius: ", "px;\n      box-shadow: ", ";\n      content: '';\n      height: 100%;\n      left: 0;\n      opacity: ", ";\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      width: 100%;\n    }\n  }\n"], ["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:before {\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n    border-top-left-radius: ", "px;\n    border-top-right-radius: ", "px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    left: 0;\n    opacity: ", ";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover {\n    ", ";\n\n    &:before {\n      border-bottom-left-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n      border-top-left-radius: ", "px;\n      border-top-right-radius: ", "px;\n      box-shadow: ", ";\n      content: '';\n      height: 100%;\n      left: 0;\n      opacity: ", ";\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      width: 100%;\n    }\n  }\n"])), function (_a) {
     var normalStyle = _a.normalStyle;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
 // NOTE: link기능은 탄력적일 필요가 없음.
 function useCLINK(props) {
     var src = props.src, openNewTab = props.openNewTab, type = props.type, internalSrc = props.internalSrc;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/useGoogleFonts.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var callGoogleFontCSSAndApply_1 = __importDefault(require("../../../../../GoogleFontkit/utils/callGoogleFontCSSAndApply"));
+var callGoogleFontCSSAndApply_1 = __importDefault(require("@sub/GoogleFontkit/utils/callGoogleFontCSSAndApply"));
 function useGoogleFonts(_a) {
     var fonts = _a.fonts;
     (0, react_1.useEffect)(function () {

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/index.d.ts

@@ -0,0 +1 @@
+export { default as useGroupDrag } from './useGroupDrag';

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGroupDrag = void 0;
+var useGroupDrag_1 = require("./useGroupDrag");
+Object.defineProperty(exports, "useGroupDrag", { enumerable: true, get: function () { return __importDefault(useGroupDrag_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/useGroupDrag.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { LayoutItemWithGroupType } from './utils';
+import type { LayoutsType } from '../../CustomSection';
+import type { Device } from '../../util/types';
+import type { Layout } from 'publ-echo/dist/lib';
+type Props = {
+    device: Device;
+    setLayouts: React.Dispatch<React.SetStateAction<LayoutsType>>;
+};
+declare function useGroupDrag({ device, setLayouts }: Props): {
+    isShiftOn: boolean;
+    setGroupCB: (selectedId: number | 'group', newId: number) => void;
+    breakGroupCB: () => void;
+    getGroupCB: (layout: Layout) => LayoutItemWithGroupType | null;
+};
+export default useGroupDrag;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/useGroupDrag.js

@@ -0,0 +1,76 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var utils_1 = require("./utils");
+function useGroupDrag(_a) {
+    var device = _a.device, setLayouts = _a.setLayouts;
+    var _b = (0, react_1.useState)(false), isShiftOn = _b[0], setIsShiftOn = _b[1];
+    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    (0, react_1.useEffect)(function () {
+        function onKeyDown(e) {
+            if (e.key === 'Shift') {
+                setIsShiftOn(true);
+            }
+        }
+        function onKeyUp() {
+            setIsShiftOn(false);
+        }
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('keyup', onKeyUp);
+        return function () {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('keyup', onKeyUp);
+        };
+    }, []);
+    function setGroupCB(selectedId, newId) {
+        setLayouts(function (prev) {
+            var currentLayout = prev[layoutByDevice];
+            var firstIdx = currentLayout.findIndex(function (item) { return Number(item.i) === selectedId; });
+            var firstElem = currentLayout.splice(firstIdx, 1)[0];
+            var secondIdx = currentLayout.findIndex(function (item) { return Number(item.i) === newId; });
+            var secondElem = currentLayout.splice(secondIdx, 1)[0];
+            // if (currentLayout) {
+            //   firstElem.childrenIds = currentLayout.childrenIds;
+            //   firstElem.groupLayouts = currentLayout.groupLayouts;
+            // }
+            var group = (0, utils_1.getGroupData)(firstElem, secondElem);
+            currentLayout.push(group);
+            return __assign({}, prev);
+        });
+    }
+    function breakGroupCB() {
+        setLayouts(function (prev) {
+            var _a, _b;
+            var currentLayout = prev[layoutByDevice];
+            var groupIdx = currentLayout.findIndex(function (item) { return item.i === 'group'; });
+            if (groupIdx < 0) {
+                return prev;
+            }
+            var groupItem = currentLayout.splice(groupIdx, 1)[0];
+            var groupItems = (_b = (_a = groupItem === null || groupItem === void 0 ? void 0 : groupItem.groupLayouts) === null || _a === void 0 ? void 0 : _a.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _b !== void 0 ? _b : [];
+            currentLayout.push.apply(currentLayout, groupItems);
+            return __assign({}, prev);
+        });
+    }
+    function getGroupCB(layout) {
+        var groupIdx = layout.findIndex(function (item) { return item.i === 'group'; });
+        if (groupIdx < 0) {
+            return null;
+        }
+        var groupItem = layout[groupIdx];
+        return groupItem;
+    }
+    return { isShiftOn: isShiftOn, setGroupCB: setGroupCB, breakGroupCB: breakGroupCB, getGroupCB: getGroupCB };
+}
+exports.default = useGroupDrag;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/utils.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentBlock } from '../../types';
+import type { LayoutItem } from 'publ-echo/dist/lib';
+export interface LayoutItemWithGroupType extends LayoutItem {
+    childrenIds: string[];
+}
+export declare function getGroupData(elem1: LayoutItemWithGroupType, elem2: LayoutItemWithGroupType): LayoutItemWithGroupType;
+export declare function splitComponentBlocksByGroup(componentBlocks: ComponentBlock[], groupIds: string[]): {
+    inGroup: ComponentBlock[];
+    notInGroup: ComponentBlock[];
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/utils.js

@@ -0,0 +1,86 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitComponentBlocksByGroup = exports.getGroupData = void 0;
+function getGroupData(elem1, elem2) {
+    var minX = Math.min(elem1.x, elem2.x);
+    var minY = Math.min(elem1.y, elem2.y);
+    var elem1W = elem1.x - minX + elem1.w;
+    var elem2W = elem2.x - minX + elem2.w;
+    var elem1H = elem1.y - minY + elem1.h;
+    var elem2H = elem2.y - minY + elem2.h;
+    var maxW = Math.max(elem1W, elem2W);
+    var maxH = Math.max(elem1H, elem2H);
+    var elem1InnerData = {
+        i: elem1.i,
+        x: elem1.x - minX,
+        y: elem1.y - minY,
+        w: elem1.w,
+        h: elem1.h
+    };
+    var elem2InnerData = {
+        i: elem2.i,
+        x: elem2.x - minX,
+        y: elem2.y - minY,
+        w: elem2.w,
+        h: elem2.h
+    };
+    var groupLayouts = elem1.groupLayouts
+        ? getAdaptedGroupLayouts(elem1.groupLayouts, elem2InnerData, elem1, minX, minY)
+        : [elem1InnerData, elem2InnerData];
+    var childrenIds = elem1.groupLayouts ? __spreadArray(__spreadArray([], elem1.childrenIds, true), [elem2.i], false) : [elem1.i, elem2.i];
+    return {
+        i: 'group',
+        x: minX,
+        y: minY,
+        w: maxW,
+        h: maxH,
+        groupLayouts: groupLayouts,
+        childrenIds: childrenIds
+    };
+}
+exports.getGroupData = getGroupData;
+function getAdaptedGroupLayouts(originals, comming, ogWrapper, minX, minY) {
+    var ogs = originals.map(function (og) {
+        var xNagativeGap = Math.max(0, ogWrapper.x - minX);
+        var yNagativeGap = Math.max(0, ogWrapper.y - minY);
+        return __assign(__assign({}, og), { x: og.x + xNagativeGap, y: og.y + yNagativeGap });
+    });
+    return __spreadArray(__spreadArray([], ogs, true), [comming], false);
+}
+function splitComponentBlocksByGroup(componentBlocks, groupIds) {
+    var inGroup = [];
+    var notInGroup = [];
+    componentBlocks.forEach(function (cb) {
+        if (groupIds.includes(cb.id.toString())) {
+            inGroup.push(cb);
+        }
+        else {
+            notInGroup.push(cb);
+        }
+    });
+    return {
+        inGroup: inGroup,
+        notInGroup: notInGroup
+    };
+}
+exports.splitComponentBlocksByGroup = splitComponentBlocksByGroup;

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts

@@ -9,6 +9,14 @@ type GeneralCustomSectionType = {
     queryableDefinitionPreset: string;
     dynamicLayoutSectionId: number;
 };
+export type GroupCustomSectionType = {
+    id: 'group';
+    type: 'GROUP';
+    availablePlugins: Array<string>;
+    queryableTapSrc: string;
+    queryableDefinitionPreset: string;
+    dynamicLayoutSectionId: number;
+};
 export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE;
 export type CB_TEXT_TYPE = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_TEXT;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseJsonProperties.d.ts

@@ -1,3 +1,3 @@
 import type { Device, JsonPropertiesParserResult } from './types';
-import type { ISectionJsonProperties } from '../../../../DynamicLayout/types';
+import type { ISectionJsonProperties } from '@sub/DynamicLayout/types';
 export default function parseJsonProperties(properties: ISectionJsonProperties | undefined, device: Device): JsonPropertiesParserResult;