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

package/dist/src/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
-var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
-var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
+var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    UIColor: UIColor_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default
+    PaletteColor_light: PaletteColor_light_json_1.default,
+    SemanticColor: SemanticColor_json_1.default,
+    UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -841,4 +841,5 @@ export interface UITheme {
     ui_110: string;
     ui_contentscontainer03_background: string;
     ui_contents_dimmed: string;
+    ui_cpnt_list_chatbubble_base_transparent: string;
 }

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export type ChatBubbleProps = {
-    colorTheme?: 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
+    colorTheme?: 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black' | 'transparent';
     tailType?: 'none' | 'left_top' | 'right_top';
     children?: React.ReactNode;
 };

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.js

@@ -44,7 +44,8 @@ var backgroundColorTheme = {
     grey: 'ui_cpnt_list_chatbubble_base_grey',
     brand_primary: 'ui_cpnt_list_chatbubble_base_brand_primary',
     translucent_white: 'ui_cpnt_list_chatbubble_base_translucent_white',
-    translucent_black: 'ui_cpnt_list_chatbubble_base_translucent_black'
+    translucent_black: 'ui_cpnt_list_chatbubble_base_translucent_black',
+    transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubble(_a) {
     var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'grey' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType, PDSValueOption } from '../../../common';
-type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
+type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black' | 'transparent';
 export type ChatBubbleListItemProps = {
     titleText?: PDSTextType;
     imageSrc?: string;

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js

@@ -64,7 +64,8 @@ var profileImageBorderColorTheme = {
     grey: 'ui_avatar_border',
     brand_primary: 'ui_avatar_border_brandprimary',
     translucent_white: 'ui_avatar_border_translucent_white',
-    translucent_black: 'ui_avatar_border_translucent_black'
+    translucent_black: 'ui_avatar_border_translucent_black',
+    transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubbleListItem(_a) {
     var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;

package/dist/src/desktop/components/ChatList/Body.js

@@ -79,7 +79,8 @@ var Body = react_1.default.forwardRef(function (_a, ref) {
     };
     var handleScroll = function (e) {
         var _a = e.currentTarget, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-        if (scrollTop + clientHeight === scrollHeight) {
+        var BUTTON_SHOW_UP_HEIGHT = 64;
+        if (Math.ceil(scrollTop) + clientHeight + BUTTON_SHOW_UP_HEIGHT > scrollHeight) {
             setIsButtonShow(false);
             return;
         }

package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export type ChatBubbleProps = {
-    colorTheme?: 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
+    colorTheme?: 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black' | 'transparent';
     tailType?: 'none' | 'left_top' | 'right_top';
     children?: React.ReactNode;
 };

package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.js

@@ -44,7 +44,8 @@ var backgroundColorTheme = {
     grey: 'ui_cpnt_list_chatbubble_base_grey',
     brand_primary: 'ui_cpnt_list_chatbubble_base_brand_primary',
     translucent_white: 'ui_cpnt_list_chatbubble_base_translucent_white',
-    translucent_black: 'ui_cpnt_list_chatbubble_base_translucent_black'
+    translucent_black: 'ui_cpnt_list_chatbubble_base_translucent_black',
+    transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubble(_a) {
     var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'grey' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;

package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType, PDSValueOption } from '../../../common';
-type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
+type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black' | 'transparent';
 export type ChatBubbleListItemProps = {
     titleText?: PDSTextType;
     imageSrc?: string;

package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js

@@ -64,7 +64,8 @@ var profileImageBorderColorTheme = {
     grey: 'ui_avatar_border',
     brand_primary: 'ui_avatar_border_brandprimary',
     translucent_white: 'ui_avatar_border_translucent_white',
-    translucent_black: 'ui_avatar_border_translucent_black'
+    translucent_black: 'ui_avatar_border_translucent_black',
+    transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubbleListItem(_a) {
     var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;

package/dist/src/mobile/components/ChatList/Body.js

@@ -79,7 +79,7 @@ var Body = react_1.default.forwardRef(function (_a, ref) {
     };
     var handleScroll = function (e) {
         var _a = e.currentTarget, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-        var BUTTON_SHOW_UP_HEIGHT = 100;
+        var BUTTON_SHOW_UP_HEIGHT = 64;
         if (Math.ceil(scrollTop) + clientHeight + BUTTON_SHOW_UP_HEIGHT > scrollHeight) {
             setIsButtonShow(false);
             return;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, youtubeAutoplayMode }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

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

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, youtubeAutoplayMode = _a.youtubeAutoplayMode;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
@@ -36,8 +36,7 @@ function DynamicLayout(_a) {
             navigationHandler: navigationHandler,
             sectionActionHandler: sectionActionHandler,
             editingSectionId: editingSectionId,
-            programmedSectionComponents: programmedSectionComponents,
-            youtubeAutoplayMode: youtubeAutoplayMode
+            programmedSectionComponents: programmedSectionComponents
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }

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

@@ -4,6 +4,5 @@ exports.dynamicLayoutContext = void 0;
 var react_1 = require("react");
 exports.dynamicLayoutContext = (0, react_1.createContext)({
     device: 'DESKTOP',
-    mode: 'NORMAL',
-    youtubeAutoplayMode: undefined
+    mode: 'NORMAL'
 });

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

@@ -699,9 +699,8 @@ 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;
                 };

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

@@ -659,9 +659,8 @@ 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
                     },

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

@@ -25,16 +25,16 @@ 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 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,38 +54,32 @@ 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 () {
-        var _a, _b;
-        if (youtubeAutoplayMode === 'ALWAYS') {
-            return true;
+    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)) {
-            if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
-                console.log('ERROR: no CONTENT WINDOW');
-                return true;
-            }
+        if (cbAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
             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;
+    };
+    // 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 (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;
-            }
+        if (cbAutoplayMode === 'VIEWPORT' && !(autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
             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, { ref: iframeRef, title: id, src: shouldAutoPlay() ? getAutoplaySrc(youtubeSrc, youtubeAutoplayMode) : youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
+    }, [autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting, cbAutoplayMode]);
+    console.log(youtubeSrc);
+    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 = [
@@ -107,27 +101,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 '../../../../../../../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/dist/src/sub/DynamicLayout/types.d.ts

@@ -224,7 +224,6 @@ export type DynamicLayoutProps = {
     sectionActionHandler?: (action: TypeOfSectionAction) => void;
     programmedSectionComponents?: IProgrammedSectionComponents;
     width?: number;
-    youtubeAutoplayMode?: 'ALWAYS' | 'VIEWPORT-FREEZE' | 'VIEWPORT';
 };
 export type NavHandlerAction = {
     openNewTab: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "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.12]
+## [v0.3.14]
 ## 기준 pds-dev-kit-web 버전 @2.2.34
 ### sub
     * DynamicLayout
-        * fix - VIEWPORT진입 전에도 재생되는 이슈
+      * youtube cb autoplay관련 poc코드 Spec code로 변경