pds-dev-kit-web-test 0.2.12 → 0.2.14

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+import type { ISection } from '../../types';
+declare type SectionPropTypes = ISection & {
+    children?: React.ReactNode;
+} & {
+    overrideStyles?: CSSProperties;
+    isMobile?: boolean;
+};
+declare function CustomSection({ children, overrideStyles, isMobile, ...props }: SectionPropTypes): JSX.Element;
+export default CustomSection;

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

@@ -0,0 +1,48 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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));
+}
+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 isIframeSection = _a.isIframeSection;
+    return (isIframeSection ? '100%' : 'auto');
+});
+exports.default = CustomSection;
+var templateObject_1;

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

@@ -4,7 +4,6 @@ declare type SectionPropTypes = ISection & {
     children?: React.ReactNode;
 } & {
     overrideStyles?: CSSProperties;
-    isMobile?: boolean;
 };
-declare function Section({ children, overrideStyles, isMobile, ...props }: SectionPropTypes): JSX.Element;
+declare function Section({ children, overrideStyles, ...props }: SectionPropTypes): JSX.Element;
 export default Section;

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

@@ -31,31 +31,26 @@ 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 util_1 = require("../../../DynamicLayout/sections/CustomSection/util");
-var isNullOrUndefined_1 = __importDefault(require("../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var pdsOriginal_1 = require("../pdsOriginal");
 var YouTubeIframe_1 = require("../YouTubeIframe");
-var CustomSectionBackgroundMedia_1 = require("./components/CustomSectionBackgroundMedia");
 var sectionContext_1 = require("./sectionContext");
 function Section(_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: 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)(Background, { isHover: isHover, isMobile: isMobile }, void 0), children] }), void 0) }), void 0));
+    var children = _a.children, overrideStyles = _a.overrideStyles, props = __rest(_a, ["children", "overrideStyles"]);
+    var _c = (0, react_1.useState)(false), isHover = _c[0], setIsHover = _c[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)(Background, {}, 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 isIframeSection = _a.isIframeSection;
     return (isIframeSection ? '100%' : 'auto');
 });
-function Background(_a) {
-    var isHover = _a.isHover, _b = _a.isMobile, isMobile = _b === void 0 ? false : _b;
+function Background() {
     var context = (0, react_1.useContext)(sectionContext_1.sectionContext);
-    var id = context.id, jsonProperties = context.jsonProperties;
-    var _c = context.styles, backgroundMediaSrc = _c.backgroundMediaSrc, backgroundColorInHex = _c.backgroundColorInHex, backgroundOverlayColorInHex = _c.backgroundOverlayColorInHex, backgroundMediaType = _c.backgroundMediaType;
+    var id = context.id;
+    var _a = context.styles, backgroundMediaSrc = _a.backgroundMediaSrc, backgroundColorInHex = _a.backgroundColorInHex, backgroundOverlayColorInHex = _a.backgroundOverlayColorInHex, backgroundMediaType = _a.backgroundMediaType;
     var backgroundRef = (0, react_1.useRef)(null);
-    var backgroundOverlayRef = (0, react_1.useRef)(null);
-    var _d = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _d[0], setYoutubeSize = _d[1];
+    var _b = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _b[0], setYoutubeSize = _b[1];
     var getResponsiveYoutubeSize = (0, react_1.useCallback)(function () {
         var backgroundWrapper = backgroundRef.current;
         if (!backgroundWrapper)
@@ -71,7 +66,6 @@ function Background(_a) {
             : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height };
         return youtubeSize;
     }, [backgroundRef.current]);
-    var _e = (0, util_1.parseJsonProperties)(jsonProperties, isMobile ? 'MOBILE' : 'DESKTOP'), style = _e.style, hoverStyle = _e.hoverStyle, overlayStyle = _e.overlayStyle, overlayHoverStyle = _e.overlayHoverStyle, layout = _e.layout, effect = _e.effect;
     (0, react_1.useEffect)(function () {
         if (backgroundMediaType !== 'YOUTUBE')
             return;
@@ -96,24 +90,6 @@ function Background(_a) {
             observer.disconnect();
         };
     }, []);
-    (0, react_1.useEffect)(function () {
-        var sectionElement = backgroundRef.current;
-        var sectionOverlayElement = backgroundOverlayRef.current;
-        if (sectionElement && style && hoverStyle) {
-            if ('background' in style && 'background' in hoverStyle) {
-                sectionElement.style.background = isHover
-                    ? hoverStyle.background
-                    : style.background;
-            }
-        }
-        if (sectionOverlayElement && overlayStyle && overlayHoverStyle) {
-            if ('background' in overlayStyle && 'background' in overlayHoverStyle) {
-                sectionOverlayElement.style.background = isHover
-                    ? overlayHoverStyle.background
-                    : overlayStyle.background;
-            }
-        }
-    }, [isHover, style, hoverStyle, overlayStyle, overlayHoverStyle]);
     var backgroundMedia = (0, react_1.useMemo)(function () {
         switch (backgroundMediaType) {
             case 'IMAGE':
@@ -127,55 +103,7 @@ function Background(_a) {
                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
         }
     }, [youtubeSize, id, backgroundMediaType, backgroundMediaSrc]);
-    var _f = jsonProperties || {}, CB_STYLE_PROP_BGOVERLAY = _f.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = _f.CB_STYLE_PROP_BGMEDIA;
-    var isOverlay = (0, react_1.useMemo)(function () {
-        if (!CB_STYLE_PROP_BGOVERLAY) {
-            return false;
-        }
-        if (isMobile) {
-            return isHover
-                ? CB_STYLE_PROP_BGOVERLAY['CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE:HOVER'] !== 'NONE'
-                : CB_STYLE_PROP_BGOVERLAY['CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE'] !== 'NONE';
-        }
-        return isHover
-            ? CB_STYLE_PROP_BGOVERLAY['CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:HOVER'] !== 'NONE'
-            : CB_STYLE_PROP_BGOVERLAY.CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE !== 'NONE';
-    }, [isMobile, isHover, CB_STYLE_PROP_BGOVERLAY]);
-    var isBgMedia = (0, react_1.useMemo)(function () {
-        if (!CB_STYLE_PROP_BGMEDIA) {
-            return false;
-        }
-        if (isMobile) {
-            return isHover
-                ? CB_STYLE_PROP_BGMEDIA['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE:HOVER'] !== 'NONE'
-                : CB_STYLE_PROP_BGMEDIA['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'] !== 'NONE';
-        }
-        return isHover
-            ? CB_STYLE_PROP_BGMEDIA['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER'] !== 'NONE'
-            : CB_STYLE_PROP_BGMEDIA.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
-    }, [isMobile, isHover, CB_STYLE_PROP_BGOVERLAY]);
-    var mediaType = (0, react_1.useMemo)(function () {
-        if (!CB_STYLE_PROP_BGMEDIA) {
-            return 'NONE';
-        }
-        if (isMobile) {
-            if (isHover) {
-                return (0, isNullOrUndefined_1.default)(CB_STYLE_PROP_BGMEDIA['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE:HOVER'])
-                    ? CB_STYLE_PROP_BGMEDIA['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER']
-                    : CB_STYLE_PROP_BGMEDIA['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE:HOVER'];
-            }
-            return (0, isNullOrUndefined_1.default)(CB_STYLE_PROP_BGMEDIA['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'])
-                ? CB_STYLE_PROP_BGMEDIA.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE
-                : CB_STYLE_PROP_BGMEDIA['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'];
-        }
-        return isHover
-            ? CB_STYLE_PROP_BGMEDIA['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER']
-            : CB_STYLE_PROP_BGMEDIA.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
-    }, [isMobile, isHover, CB_STYLE_PROP_BGOVERLAY]);
-    if (!jsonProperties) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_BackgroundWrapper, __assign({ ref: backgroundRef, color: backgroundColorInHex }, { children: backgroundMediaSrc && backgroundMedia }), void 0), (0, jsx_runtime_1.jsx)(S_BackgroundOverlay, { color: backgroundOverlayColorInHex }, void 0)] }, void 0));
-    }
-    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' }, void 0)) }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_BackgroundWrapper, __assign({ ref: backgroundRef, color: backgroundColorInHex }, { children: backgroundMediaSrc && backgroundMedia }), void 0), (0, jsx_runtime_1.jsx)(S_BackgroundOverlay, { color: backgroundOverlayColorInHex }, void 0)] }, void 0));
 }
 var S_BackgroundWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\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  background-color: ", ";\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"])), function (_a) {
     var color = _a.color;
@@ -192,7 +120,5 @@ var S_YoutubeContainer = styled_components_1.default.div(templateObject_4 || (te
     var width = _a.width;
     return width + "px";
 });
-var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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_6 || (templateObject_6 = __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"])));
 exports.default = Section;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

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

@@ -0,0 +1,108 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var util_1 = require("../../../../DynamicLayout/sections/CustomSection/util");
+var isNullOrUndefined_1 = __importDefault(require("../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
+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 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));
+}
+function getIsOverlay(isMobile, isHover, 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 isHover
+        ? specs['CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:HOVER'] !== 'NONE'
+        : specs.CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE !== 'NONE';
+}
+function getIsBgMedia(isMobile, isHover, 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 isHover
+        ? specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER'] !== 'NONE'
+        : specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
+}
+function getMediaType(isMobile, isHover, 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;
+}
+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"])));
+exports.default = CustomSectionBackground;
+var templateObject_1, templateObject_2;

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

@@ -1,9 +1,12 @@
 /// <reference types="react" />
+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;
+    device: Device;
 };
-export declare function CustomSectionBackgroundMedia({ specs, playerId, mediaType }: Props): JSX.Element;
+export declare function CustomSectionBackgroundMedia({ specs, playerId, mediaType, isHover, device }: Props): JSX.Element;
 export {};

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

@@ -21,38 +21,60 @@ 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 */
-var react_1 = require("react");
+require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var pdsOriginal_1 = require("../../pdsOriginal");
 var YouTubeIframe_1 = require("../../YouTubeIframe");
+var util_1 = require("../util");
 function CustomSectionBackgroundMedia(_a) {
-    var specs = _a.specs, playerId = _a.playerId, mediaType = _a.mediaType;
-    var CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME = specs.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT = specs.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = specs.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY = specs.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL = specs.CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL, CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME = specs.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, CB_STYLE_PROP_BGMEDIA_SPEC_YSRC = specs.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC;
-    var scaleType = (0, react_1.useMemo)(function () {
-        switch (CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT) {
-            case 'FILL':
-                return 'fill';
-            case 'CONTAIN':
-                return 'contain';
-            case 'COVER':
-                return 'cover';
-            case 'NONE':
-                return 'none';
-            default:
-                return undefined;
-        }
-    }, [CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT]);
+    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);
     switch (mediaType) {
         case 'IMAGE':
-            return ((0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ isOverflowScroll: CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL, scaleType: scaleType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR, width: "responsive", height: "responsive", scaleType: scaleType, shapeType: "rectangle" }, void 0) }), void 0));
+            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));
         case 'YOUTUBE':
-            return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, { children: (0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { id: playerId, src: CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, endSeconds: CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME }, void 0) }, void 0));
+            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));
         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');

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

@@ -1,2 +1,3 @@
+export { default as CustomSection } from './CustomSection';
 export { default as Section } from './Section';
 export { sectionContext } from './sectionContext';

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

@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sectionContext = exports.Section = void 0;
+exports.sectionContext = exports.Section = exports.CustomSection = void 0;
+var CustomSection_1 = require("./CustomSection");
+Object.defineProperty(exports, "CustomSection", { enumerable: true, get: function () { return __importDefault(CustomSection_1).default; } });
 var Section_1 = require("./Section");
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(Section_1).default; } });
 var sectionContext_1 = require("./sectionContext");

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

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

package/dist/src/sub/DynamicLayout/components/Section/util/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.parseSectionBackgroundMediaData = void 0;
+var parseSectionBackgroundMediaData_1 = require("./parseSectionBackgroundMediaData");
+Object.defineProperty(exports, "parseSectionBackgroundMediaData", { enumerable: true, get: function () { return __importDefault(parseSectionBackgroundMediaData_1).default; } });

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

@@ -0,0 +1,9 @@
+import type { Device } from '../../../../DynamicLayout/sections/CustomSection/util/types';
+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 {};

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

@@ -0,0 +1,47 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var isNullOrUndefined_1 = __importDefault(require("../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
+var AVAILABLE_SPECS = [
+    'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME'
+];
+function UseCustomSectionBackgroundMediaData(specs, device) {
+    return AVAILABLE_SPECS.reduce(function (acc, cur) {
+        var _a, _b;
+        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: {}
+    });
+}
+exports.default = UseCustomSectionBackgroundMediaData;

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

@@ -1,2 +1,2 @@
 export * from './pdsOriginal';
-export { Section } from './Section';
+export { Section, CustomSection } from './Section';

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

@@ -10,7 +10,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Section = void 0;
+exports.CustomSection = exports.Section = void 0;
 __exportStar(require("./pdsOriginal"), exports);
 var Section_1 = require("./Section");
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Section_1.Section; } });
+Object.defineProperty(exports, "CustomSection", { enumerable: true, get: function () { return Section_1.CustomSection; } });