pds-dev-kit-web-test 0.2.15 → 0.2.17

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

@@ -35,6 +35,7 @@ function DynamicLayout(_a) {
             isPreview: isPreview,
             navigationHandler: navigationHandler,
             sectionActionHandler: sectionActionHandler,
+            editingSectionId: editingSectionId,
             programmedSectionComponents: programmedSectionComponents
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection }, void 0)), 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); })))] }), void 0));

package/dist/src/sub/DynamicLayout/components/Section/CustomSection.d.ts

@@ -1,4 +1,5 @@
-import { CSSProperties } from 'react';
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
 import type { ISection } from '../../types';
 declare type SectionPropTypes = ISection & {
     children?: React.ReactNode;

package/dist/src/sub/DynamicLayout/components/Section/CustomSection.js

@@ -30,17 +30,15 @@ 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 styled_components_1 = __importDefault(require("styled-components"));
 var CustomSectionBackground_1 = __importDefault(require("./components/CustomSectionBackground"));
 var sectionContext_1 = require("./sectionContext");
 function CustomSection(_a) {
     var _b;
     var children = _a.children, overrideStyles = _a.overrideStyles, _c = _a.isMobile, isMobile = _c === void 0 ? false : _c, props = __rest(_a, ["children", "overrideStyles", "isMobile"]);
-    var _d = (0, react_1.useState)(false), isHover = _d[0], setIsHover = _d[1];
-    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: __assign({}, props) }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ style: overrideStyles, isIframeSection: ((_b = props.manifest) === null || _b === void 0 ? void 0 : _b.schema) === 'EXP_IFRAME', onMouseEnter: function () { return setIsHover(true); }, onMouseMove: function () { return !isHover && setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } }, { children: [(0, jsx_runtime_1.jsx)(CustomSectionBackground_1.default, { isHover: isHover, isMobile: isMobile }, void 0), children] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: __assign({}, props) }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ style: overrideStyles, isIframeSection: ((_b = props.manifest) === null || _b === void 0 ? void 0 : _b.schema) === 'EXP_IFRAME' }, { children: [(0, jsx_runtime_1.jsx)(CustomSectionBackground_1.default, { isMobile: isMobile }, void 0), children] }), void 0) }), void 0));
 }
-var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: ", ";\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"], ["\n  box-sizing: border-box;\n  height: ", ";\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"])), function (_a) {
+var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"])), function (_a) {
     var isIframeSection = _a.isIframeSection;
     return (isIframeSection ? '100%' : 'auto');
 });

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackground.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-declare function CustomSectionBackground({ isHover, isMobile }: {
-    isHover: boolean;
+declare function CustomSectionBackground({ isMobile }: {
     isMobile?: boolean;
 }): JSX.Element;
 export default CustomSectionBackground;

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackground.js

@@ -26,81 +26,45 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var sectionContext_1 = require("../sectionContext");
 var CustomSectionBackgroundMedia_1 = require("./CustomSectionBackgroundMedia");
 function CustomSectionBackground(_a) {
-    var isHover = _a.isHover, _b = _a.isMobile, isMobile = _b === void 0 ? false : _b;
+    var _b = _a.isMobile, isMobile = _b === void 0 ? false : _b;
     var context = (0, react_1.useContext)(sectionContext_1.sectionContext);
     var id = context.id, jsonProperties = context.jsonProperties;
     var backgroundRef = (0, react_1.useRef)(null);
-    var backgroundOverlayRef = (0, react_1.useRef)(null);
     var _c = jsonProperties || {}, CB_STYLE_PROP_BGOVERLAY = _c.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = _c.CB_STYLE_PROP_BGMEDIA;
-    var _d = (0, util_1.parseJsonProperties)(jsonProperties, isMobile ? 'MOBILE' : 'DESKTOP'), style = _d.style, hoverStyle = _d.hoverStyle, overlayStyle = _d.overlayStyle, overlayHoverStyle = _d.overlayHoverStyle, layout = _d.layout, effect = _d.effect;
-    var isOverlay = getIsOverlay(isMobile, isHover, CB_STYLE_PROP_BGOVERLAY);
-    var isBgMedia = getIsBgMedia(isMobile, isHover, CB_STYLE_PROP_BGMEDIA);
-    var mediaType = getMediaType(isMobile, isHover, CB_STYLE_PROP_BGMEDIA);
-    (0, react_1.useEffect)(function () {
-        var sectionElement = backgroundRef.current;
-        var sectionOverlayElement = backgroundOverlayRef.current;
-        if (sectionElement) {
-            if (isHover && style && 'background' in style) {
-                sectionElement.style.background = style.background;
-            }
-            if (!isHover && hoverStyle && 'background' in hoverStyle) {
-                sectionElement.style.background = hoverStyle.background;
-            }
-        }
-        if (sectionOverlayElement) {
-            if (isHover && overlayHoverStyle && 'background' in overlayHoverStyle) {
-                sectionOverlayElement.style.background = overlayHoverStyle.background;
-            }
-            if (!isHover && overlayStyle && 'background' in overlayStyle) {
-                sectionOverlayElement.style.background = overlayStyle.background;
-            }
-        }
-    }, [isHover, style, hoverStyle, overlayStyle, overlayHoverStyle]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isOverlay && CB_STYLE_PROP_BGOVERLAY && ((0, jsx_runtime_1.jsx)(S_CustomBackgroundOverlay, { className: "Overlay", ref: backgroundOverlayRef }, void 0)), (0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ className: "CustomSection", ref: backgroundRef, style: __assign(__assign(__assign(__assign({}, layout), effect), style), { visibility: isHover ? hoverStyle.visibility : style.visibility }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, playerId: id, mediaType: mediaType || 'NONE', isHover: isHover, device: isMobile ? 'MOBILE' : 'DESKTOP' }, void 0)) }), void 0)] }, void 0));
+    var _d = (0, util_1.parseJsonProperties)(jsonProperties, isMobile ? 'MOBILE' : 'DESKTOP'), style = _d.style, overlayStyle = _d.overlayStyle, effect = _d.effect;
+    var isOverlay = getIsOverlay(isMobile, CB_STYLE_PROP_BGOVERLAY);
+    var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
+    var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isOverlay && CB_STYLE_PROP_BGOVERLAY && ((0, jsx_runtime_1.jsx)(S_CustomBackgroundOverlay, { className: "Overlay", style: __assign(__assign({}, overlayStyle), { pointerEvents: 'none' }) }, void 0)), (0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ className: "CustomSection", ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background, overflow: mediaType === 'IMAGE' ? 'scroll' : 'hidden' }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: id, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef }, void 0)) }), void 0)] }, void 0));
 }
-function getIsOverlay(isMobile, isHover, specs) {
+function getIsOverlay(isMobile, specs) {
     if (!specs) {
         return false;
     }
     if (isMobile) {
-        return isHover
-            ? specs['CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE:HOVER'] !== 'NONE'
-            : specs['CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE'] !== 'NONE';
+        return specs['CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE'] !== 'NONE';
     }
-    return isHover
-        ? specs['CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:HOVER'] !== 'NONE'
-        : specs.CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE !== 'NONE';
+    return specs.CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE !== 'NONE';
 }
-function getIsBgMedia(isMobile, isHover, specs) {
+function getIsBgMedia(isMobile, specs) {
     if (!specs) {
         return false;
     }
     if (isMobile) {
-        return isHover
-            ? specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE:HOVER'] !== 'NONE'
-            : specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'] !== 'NONE';
+        return specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'] !== 'NONE';
     }
-    return isHover
-        ? specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER'] !== 'NONE'
-        : specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
+    return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
 }
-function getMediaType(isMobile, isHover, specs) {
+function getMediaType(isMobile, specs) {
     if (!specs) {
         return 'NONE';
     }
     if (isMobile) {
-        if (isHover) {
-            return (0, isNullOrUndefined_1.default)(specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE:HOVER'])
-                ? specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER']
-                : specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE:HOVER'];
-        }
         return (0, isNullOrUndefined_1.default)(specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'])
             ? specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE
             : specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'];
     }
-    return isHover
-        ? specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER']
-        : specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
+    return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
 }
 var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"], ["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"])));
 var S_CustomBackgroundOverlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -1;\n"], ["\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -1;\n"])));

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.d.ts

@@ -1,12 +1,14 @@
-/// <reference types="react" />
+import { MutableRefObject } from 'react';
+import { CSSProperties } from 'styled-components';
 import type { Device } from '../../../../DynamicLayout/sections/CustomSection/util/types';
 import type { CB_STYLE_PROP_BGMEDIA_SPECS } from '../../../../DynamicLayout/types';
 declare type Props = {
     specs: CB_STYLE_PROP_BGMEDIA_SPECS;
     playerId: number;
     mediaType: string;
-    isHover: boolean;
+    componentStyle: CSSProperties;
     device: Device;
+    backgroundRef: MutableRefObject<HTMLDivElement | null>;
 };
-export declare function CustomSectionBackgroundMedia({ specs, playerId, mediaType, isHover, device }: Props): JSX.Element;
+export declare function CustomSectionBackgroundMedia({ specs, playerId, mediaType, componentStyle, device, backgroundRef }: Props): JSX.Element;
 export {};

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js

@@ -14,78 +14,108 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomSectionBackgroundMedia = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-unused-vars */
-require("react");
-var styled_components_1 = __importDefault(require("styled-components"));
-var pdsOriginal_1 = require("../../pdsOriginal");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
 var YouTubeIframe_1 = require("../../YouTubeIframe");
 var util_1 = require("../util");
 function CustomSectionBackgroundMedia(_a) {
-    var specs = _a.specs, playerId = _a.playerId, mediaType = _a.mediaType, isHover = _a.isHover, device = _a.device;
-    var _b = (0, util_1.parseSectionBackgroundMediaData)(specs, device), normal = _b.normal, hover = _b.hover;
-    var scaleType = getScaleType(isHover
-        ? hover.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT
-        : normal.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT);
+    var specs = _a.specs, playerId = _a.playerId, mediaType = _a.mediaType, componentStyle = _a.componentStyle, device = _a.device, backgroundRef = _a.backgroundRef;
+    var _b = (0, util_1.parseSectionBackgroundMediaData)(specs, device), CB_STYLE_PROP_BGMEDIA_SPEC_YSRC = _b.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY = _b.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME, CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL = _b.CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR;
+    var _c = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _c[0], setYoutubeSize = _c[1];
+    var getResponsiveYoutubeSize = (0, react_1.useCallback)(function () {
+        var backgroundWrapper = backgroundRef.current;
+        if (!backgroundWrapper)
+            return { width: 0, height: 0 };
+        var backgroundSize = {
+            width: backgroundWrapper.getBoundingClientRect().width,
+            height: backgroundWrapper.getBoundingClientRect().height
+        };
+        var isHorizontal = backgroundSize.width / backgroundSize.height > 1;
+        var isOverRatio = backgroundSize.width / backgroundSize.height > 16 / 9;
+        var youtubeSize = isHorizontal && isOverRatio
+            ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
+            : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height };
+        return youtubeSize;
+    }, [backgroundRef.current]);
+    (0, react_1.useEffect)(function () {
+        if (mediaType !== 'YOUTUBE')
+            return;
+        setYoutubeSize(getResponsiveYoutubeSize());
+    }, [getResponsiveYoutubeSize, CB_STYLE_PROP_BGMEDIA_SPEC_YSRC]);
+    (0, react_1.useEffect)(function () {
+        if (mediaType !== 'YOUTUBE')
+            return;
+        function onResize() {
+            setYoutubeSize(getResponsiveYoutubeSize());
+        }
+        var element = backgroundRef.current;
+        if (!element)
+            return;
+        var observer = new ResizeObserver(function (entries) {
+            entries.forEach(function () {
+                onResize();
+            });
+        });
+        observer.observe(element);
+        return function () {
+            observer.disconnect();
+        };
+    }, [device, specs, playerId, mediaType]);
+    if ('background' in componentStyle) {
+        delete componentStyle.background;
+    }
     switch (mediaType) {
         case 'IMAGE':
-            return ((0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ isOverflowScroll: isHover
-                    ? hover.CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL
-                    : normal.CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL, scaleType: isHover
-                    ? hover.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT
-                    : normal.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: isHover
-                        ? hover.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR
-                        : normal.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR, width: "responsive", height: "responsive", scaleType: scaleType, shapeType: "rectangle" }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR && ((0, jsx_runtime_1.jsx)(S_Image, __assign({ src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: {
+                        overflow: CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL ? 'auto' : 'hidden'
+                    }, normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0)) }, void 0));
         case 'YOUTUBE':
-            return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, { children: (0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { id: playerId, src: isHover
-                        ? hover.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC
-                        : normal.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, loopMode: isHover
-                        ? hover.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY
-                            ? 'use'
-                            : 'none'
-                        : normal.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY
-                            ? 'use'
-                            : 'none', startSeconds: isHover
-                        ? hover.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME
-                        : normal.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, endSeconds: isHover
-                        ? hover.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME
-                        : normal.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME }, void 0) }, void 0));
+            return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: (0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { id: playerId, src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME) }, void 0) }), void 0));
         case 'NONE':
         default:
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
 }
 exports.CustomSectionBackgroundMedia = CustomSectionBackgroundMedia;
-function getScaleType(scaleSpec) {
-    switch (scaleSpec) {
-        case 'FILL':
-            return 'fill';
-        case 'CONTAIN':
-            return 'contain';
-        case 'COVER':
-            return 'cover';
-        case 'NONE':
-            return 'none';
-        default:
-            return 'none';
-    }
-}
-var S_ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: ", ";\n\n  ", ";\n"], ["\n  overflow: ", ";\n\n  ", ";\n"])), function (_a) {
-    var isOverflowScroll = _a.isOverflowScroll;
-    return (isOverflowScroll ? 'scroll' : 'hidden');
+var S_Image = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-image: ", ";\n  background-repeat: no-repeat;\n\n  ", ";\n\n  & img {\n    ", ";\n  }\n"], ["\n  background-image: ", ";\n  background-repeat: no-repeat;\n\n  ", ";\n\n  & img {\n    ", ";\n  }\n"])), function (_a) {
+    var src = _a.src;
+    return "url(" + src + ")";
 }, function (_a) {
-    var scaleType = _a.scaleType;
-    switch (scaleType) {
-        case 'cover':
-            return "height: 100%;\n    width: 100%;";
-        default:
-            return "height: auto;\n    width: auto";
-    }
+    var normalStyle = _a.normalStyle;
+    var isContain = normalStyle.backgroundSize === 'contain';
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { backgroundPosition: isContain ? 'unset' : normalStyle.backgroundPosition, height: isContain ? 'auto' : '100%', width: isContain ? 'auto' : '100%' }));
+}, function (_a) {
+    var normalStyle = _a.normalStyle;
+    var isContain = normalStyle.backgroundSize === 'contain';
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
+});
+var S_YoutubeContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n"])), function (_a) {
+    var height = _a.height;
+    return height + "px";
+}, function (_a) {
+    var width = _a.width;
+    return width + "px";
 });
-var S_YoutubeContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/components/Section/util/parseSectionBackgroundMediaData.d.ts

@@ -2,8 +2,5 @@ import type { Device } from '../../../../DynamicLayout/sections/CustomSection/ut
 import type { CB_STYLE_PROP_BGMEDIA_SPECS } from '../../../../DynamicLayout/types';
 declare type SpecKeys = keyof Omit<CB_STYLE_PROP_BGMEDIA_SPECS, 'CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY'>;
 declare type ValueSetType = Partial<Record<SpecKeys, string | number | boolean | undefined>>;
-export default function UseCustomSectionBackgroundMediaData(specs: CB_STYLE_PROP_BGMEDIA_SPECS, device: Device): {
-    normal: ValueSetType;
-    hover: ValueSetType;
-};
+export default function UseCustomSectionBackgroundMediaData(specs: CB_STYLE_PROP_BGMEDIA_SPECS, device: Device): ValueSetType;
 export {};

package/dist/src/sub/DynamicLayout/components/Section/util/parseSectionBackgroundMediaData.js

@@ -29,19 +29,10 @@ var AVAILABLE_SPECS = [
 ];
 function UseCustomSectionBackgroundMediaData(specs, device) {
     return AVAILABLE_SPECS.reduce(function (acc, cur) {
-        var _a, _b;
+        var _a;
         var baseKey = device === 'DESKTOP' ? cur : cur + ":MOBILE";
         var value = (0, isNullOrUndefined_1.default)(specs[baseKey]) ? specs[cur] : specs[baseKey];
-        var hoverValue = (0, isNullOrUndefined_1.default)(specs[baseKey + ":HOVER"])
-            ? specs[cur + ":HOVER"]
-            : specs[baseKey + ":HOVER"];
-        return {
-            normal: __assign(__assign({}, acc.normal), (_a = {}, _a[cur] = value, _a)),
-            hover: __assign(__assign({}, acc.hover), (_b = {}, _b[cur] = hoverValue, _b))
-        };
-    }, {
-        normal: {},
-        hover: {}
-    });
+        return __assign(__assign({}, acc), (_a = {}, _a[cur] = value, _a));
+    }, {});
 }
 exports.default = UseCustomSectionBackgroundMediaData;

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

@@ -92,7 +92,8 @@ function YouTubeIframe(_a) {
                     playlist: videoId,
                     loop: isLoop ? 1 : 0,
                     start: startSeconds,
-                    end: endSeconds
+                    end: endSeconds,
+                    cc_load_policy: 0
                 }
                 : {
                     autoplay: 1,
@@ -101,7 +102,8 @@ function YouTubeIframe(_a) {
                     listType: 'playlist',
                     playlist: videoId,
                     loop: isLoop ? 1 : 0,
-                    start: startSeconds
+                    start: startSeconds,
+                    cc_load_policy: 0
                 };
             var player = new window.YT.Player(PLAYER_ID, {
                 videoId: videoId,

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

@@ -273,7 +273,15 @@ exports.customSectionMock1 = {
                     CB_STYLE_PROP_TEXT_SPEC_COLOR: '#fffc00eb',
                     'CB_STYLE_PROP_TEXT_SPEC_COLOR:HOVER': '#ff2727',
                     'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE': undefined,
-                    'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER': undefined
+                    'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER': undefined,
+                    CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL: 'LEFT',
+                    'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:HOVER': 'CENTER',
+                    'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE': undefined,
+                    'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE:HOVER': undefined,
+                    CB_STYLE_PROP_TEXT_SPEC_VERTICAL: 'TOP',
+                    'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:HOVER': 'CENTER',
+                    'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE': undefined,
+                    'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE:HOVER': undefined
                 },
                 CB_STYLE_PROP_OPACITY: {
                     CB_STYLE_PROP_OPACITY_SPEC_OPACITY: 1,
@@ -343,27 +351,35 @@ exports.customSectionMock1 = {
                 },
                 CB_STYLE_PROP_BTNTEXT: {
                     CB_STYLE_PROP_BTNTEXT_SPEC_COLOR: '#FFFFFFFF',
-                    'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:HOVER': '#ff2727',
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:HOVER': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:MOBILE': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:MOBILE:HOVER': undefined,
+                    CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL: 'RIGHT',
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL:HOVER': undefined,
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL:MOBILE': undefined,
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL:MOBILE:HOVER': undefined,
                     CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING: 0,
-                    'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:HOVER': 0,
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:HOVER': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:MOBILE': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:MOBILE:HOVER': undefined,
                     CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT: 130,
-                    'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:HOVER': 130,
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:HOVER': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:MOBILE': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': undefined,
                     CB_STYLE_PROP_BTNTEXT_SPEC_SIZE: 16,
-                    'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:HOVER': 16,
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:HOVER': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE:HOVER': undefined,
                     CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE: 'PRETENDARD',
-                    'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:HOVER': 'PRETENDARD',
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:HOVER': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE:HOVER': undefined,
+                    CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL: 'TOP',
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL:HOVER': undefined,
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL:MOBILE': undefined,
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL:MOBILE:HOVER': undefined,
                     CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT: 500,
-                    'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:HOVER': 500,
+                    'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:HOVER': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:MOBILE': undefined,
                     'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:MOBILE:HOVER': undefined
                 },