pds-dev-kit-web-test 2.4.14 → 2.4.15

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

@@ -0,0 +1,62 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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");
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-console */
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            hasError: false
+        };
+        return _this;
+    }
+    ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        console.error('Uncaught error:', error, errorInfo);
+    };
+    ErrorBoundary.getDerivedStateFromError = function () {
+        return { hasError: true };
+    };
+    ErrorBoundary.prototype.reset = function () {
+        this.setState({
+            hasError: false
+        });
+    };
+    ErrorBoundary.prototype.render = function () {
+        var hasError = this.state.hasError;
+        if (hasError) {
+            return (0, jsx_runtime_1.jsx)(ErrorWrapper, { children: "Error" });
+        }
+        var children = this.props.children;
+        return children;
+    };
+    return ErrorBoundary;
+}(react_1.Component));
+var ErrorWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"])));
+exports.default = ErrorBoundary;
+var templateObject_1;

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

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

@@ -0,0 +1,123 @@
+"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 pdsOriginal_1 = require("../pdsOriginal");
+var YouTubeIframe_1 = require("../YouTubeIframe");
+var sectionContext_1 = require("./sectionContext");
+function Section(_a) {
+    var _b;
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: __assign({}, props) }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ isIframeSection: ((_b = props.manifest) === null || _b === void 0 ? void 0 : _b.schema) === 'EXP_IFRAME' }, { children: [(0, jsx_runtime_1.jsx)(Background, {}), children] })) })));
+}
+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() {
+    var context = (0, react_1.useContext)(sectionContext_1.sectionContext);
+    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 _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)
+            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 (backgroundMediaType !== 'YOUTUBE')
+            return;
+        setYoutubeSize(getResponsiveYoutubeSize());
+    }, [getResponsiveYoutubeSize, backgroundMediaSrc]);
+    (0, react_1.useEffect)(function () {
+        if (backgroundMediaType !== '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();
+        };
+    }, []);
+    var backgroundMedia = (0, react_1.useMemo)(function () {
+        switch (backgroundMediaType) {
+            case 'IMAGE':
+                return ((0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
+            // case 'VIDEO':
+            //   // NOTE VIDEO타입 배경은 최초 scope에서 제외
+            //   return <></>;
+            case 'YOUTUBE':
+                return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: (0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { id: id, src: backgroundMediaSrc }) })));
+            default:
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+        }
+    }, [youtubeSize, id, backgroundMediaType, backgroundMediaSrc]);
+    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 })), (0, jsx_runtime_1.jsx)(S_BackgroundOverlay, { color: backgroundOverlayColorInHex })] }));
+}
+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;
+    return color;
+});
+var S_BackgroundOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -1;\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+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 "".concat(height, "px");
+}, function (_a) {
+    var width = _a.width;
+    return "".concat(width, "px");
+});
+exports.default = Section;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,73 @@
+"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 _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 data = jsonProperties.data;
+    var CB_STYLE_PROP_BGOVERLAY = data.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = data.CB_STYLE_PROP_BGMEDIA;
+    var _c = (0, util_1.parseJsonProperties)(data, isMobile ? 'MOBILE' : 'DESKTOP'), style = _c.style, overlayStyle = _c.overlayStyle, effect = _c.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({}, overlayStyle) })), (0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ className: "CustomSection", ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { 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 })) }))] }));
+}
+function getIsOverlay(isMobile, specs) {
+    if (!specs) {
+        return false;
+    }
+    if (isMobile) {
+        return specs['CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE'] !== 'NONE';
+    }
+    return specs.CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE !== 'NONE';
+}
+function getIsBgMedia(isMobile, specs) {
+    if (!specs) {
+        return false;
+    }
+    if (isMobile) {
+        return specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'] !== 'NONE';
+    }
+    return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
+}
+function getMediaType(isMobile, specs) {
+    if (!specs) {
+        return 'NONE';
+    }
+    if (isMobile) {
+        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 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,7 +1,7 @@
 import { MutableRefObject } from 'react';
 import { CSSProperties } from 'styled-components';
-import type { Device } from '@sub/DynamicLayout/sections/CustomSection/util/types';
-import type { CB_STYLE_PROP_BGMEDIA_SPECS } from '@sub/DynamicLayout/types';
+import type { Device } from '../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_STYLE_PROP_BGMEDIA_SPECS } from '../../../../DynamicLayout/types';
 type Props = {
     specs: CB_STYLE_PROP_BGMEDIA_SPECS;
     playerId: number;

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

@@ -0,0 +1,132 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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");
+var react_1 = require("react");
+var utils_1 = require("../../../../DynamicLayout/utils");
+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, 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_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 youTubeIframeKey = (0, react_1.useMemo)(function () {
+        return "".concat(utils_1.YouTubeLinkParser.getId(String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC)), "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME);
+    }, [
+        CB_STYLE_PROP_BGMEDIA_SPEC_YSRC,
+        CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY,
+        CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME,
+        CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME
+    ]);
+    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)(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), normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: { visibility: 'hidden', width: '100%', height: '100%' } }) }))) }));
+        case 'YOUTUBE':
+            return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: youtubeSize.height > 0 && youtubeSize.width > 0 && ((0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), id: playerId, 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), customHeight: youtubeSize.height, customWidth: youtubeSize.width }, youTubeIframeKey)) })));
+        case 'NONE':
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+}
+exports.CustomSectionBackgroundMedia = CustomSectionBackgroundMedia;
+var S_Image = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  & img {\n    ", ";\n  }\n"], ["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  & img {\n    ", ";\n  }\n"])), function (_a) {
+    var src = _a.src;
+    return "url(".concat(src, ")");
+}, function (_a) {
+    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 ? 'center' : normalStyle.backgroundPosition }));
+}, 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 "".concat(height, "px");
+}, function (_a) {
+    var width = _a.width;
+    return "".concat(width, "px");
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+Object.defineProperty(exports, "sectionContext", { enumerable: true, get: function () { return sectionContext_1.sectionContext; } });

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sectionContext = void 0;
+var react_1 = require("react");
+exports.sectionContext = (0, react_1.createContext)(null);

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

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

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

@@ -0,0 +1,38 @@
+"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;
+        var baseKey = device === 'DESKTOP' ? cur : "".concat(cur, ":MOBILE");
+        var value = (0, isNullOrUndefined_1.default)(specs[baseKey]) ? specs[cur] : specs[baseKey];
+        return __assign(__assign({}, acc), (_a = {}, _a[cur] = value, _a));
+    }, {});
+}
+exports.default = UseCustomSectionBackgroundMediaData;

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

@@ -0,0 +1,52 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var sections_1 = require("../../sections");
+function SectionMatcher(_a) {
+    var props = __rest(_a, []);
+    if (props.type === 'CUSTOM') {
+        return (0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, props));
+    }
+    var schema = props.manifest.schema;
+    switch (schema) {
+        case 'BASE_INTRO':
+            return (0, jsx_runtime_1.jsx)(sections_1.IntroSection, __assign({}, props));
+        case 'BASE_CONTENTS':
+            return (0, jsx_runtime_1.jsx)(sections_1.ContentsSection, __assign({}, props));
+        case 'BASE_CONTENTS_CAROUSEL':
+            return (0, jsx_runtime_1.jsx)(sections_1.ContentsCarouselSection, __assign({}, props));
+        case 'BASE_FOOTER':
+            return (0, jsx_runtime_1.jsx)(sections_1.FooterSection, __assign({}, props));
+        case 'BASE_INFO_BOX':
+            return (0, jsx_runtime_1.jsx)(sections_1.InfoBoxSection, __assign({}, props));
+        case 'EXP_IFRAME':
+            return (0, jsx_runtime_1.jsx)(sections_1.FullscreenIframeSection, __assign({}, props));
+        case 'PRG_MEMBERSHIP_DISPLAY':
+            return (0, jsx_runtime_1.jsx)(sections_1.NormalTypeMembershipSection, __assign({}, props));
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "ERROR: Schema NOT FOUND" });
+    }
+}
+exports.default = SectionMatcher;

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