pds-dev-kit-web-test 2.2.99 → 2.2.244

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ComponentBlock } from './types';
+import type { Device } from './util/types';
+type Props = {
+    cb: ComponentBlock;
+    index: number;
+    device: Device;
+    rowHeight: number;
+    zIndex: number;
+};
+declare function FlexGridItem({ cb, index, device, rowHeight, zIndex }: Props): JSX.Element;
+export default FlexGridItem;

package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridItem.js

@@ -0,0 +1,71 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
+var gap = 10;
+function FlexGridItem(_a) {
+    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
+    var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
+    return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ "data-cb-id": cb.id, style: {
+            zIndex: zIndex,
+            gridArea: gridArea
+            // maxHeight: cb.componentBlockCode !== CB_ALL_CODES.CB_TEXT ? defaultHeight : undefined
+        } }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index }) })));
+}
+var GridItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  word-break: break-word;\n"], ["\n  height: auto;\n  word-break: break-word;\n"])));
+function getMaxHeight(props, device, rowHeight) {
+    if (device === 'DESKTOP') {
+        var CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
+        var height_1 = CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS * rowHeight +
+            (CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS - 1) * gap;
+        return height_1;
+    }
+    var rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
+    var height = rowsMobile * rowHeight + (rowsMobile - 1) * gap;
+    return height;
+}
+function clamp(num, min, max) {
+    return Math.max(Math.min(num, max), min);
+}
+function getGridAreaFromCB(props, device) {
+    var CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX, CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY, cols = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS, rows = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
+    if (device === 'DESKTOP') {
+        var colStart_1 = clamp(CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX + 1, 1, Math.max(1, 25 - cols));
+        var rowStart_1 = clamp(CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY + 1, 1, Infinity);
+        var rowEnd_1 = clamp(rows + rowStart_1, rowStart_1 + 1, Infinity);
+        var colEnd_1 = clamp(colStart_1 + cols, colStart_1 + 1, 25);
+        return "".concat(rowStart_1, " / ").concat(colStart_1, " / ").concat(rowEnd_1, " / ").concat(colEnd_1);
+    }
+    var startXMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE'];
+    var startYMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'];
+    var colsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'];
+    var rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
+    var colStart = clamp(startXMobile + 1, 1, Math.max(1, 9 - colsMobile));
+    var rowStart = clamp(startYMobile + 1, 1, Infinity);
+    var rowEnd = clamp(rowsMobile + rowStart, rowStart + 1, Infinity);
+    var colEnd = clamp(colStart + colsMobile, colStart + 1, 9);
+    return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
+}
+exports.default = FlexGridItem;
+var templateObject_1;

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

@@ -5,7 +5,7 @@ type Props = {
     cbProps: ComponentBlock;
     device: Device;
     index: number;
-    id: number;
+    rowHeight: number;
 };
-export default function ComponentBlockMatcher({ cbProps, device, index, id }: Props): JSX.Element;
+export default function ComponentBlockMatcher({ cbProps, device, index }: Props): JSX.Element;
 export {};

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

@@ -19,22 +19,24 @@ require("react");
 var newUtils_1 = require("../../newUtils");
 var types_1 = require("../../types");
 var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
+var ContentsCarousel_1 = __importDefault(require("./componentBlocks/ContentsCarousel/ContentsCarousel"));
 var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
 var RichText_1 = require("./componentBlocks/RichText");
-var Text_1 = require("./componentBlocks/Text");
+var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
 var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
+var VideoPlayer_1 = require("./componentBlocks/VideoPlayer");
 var Youtube_1 = require("./componentBlocks/Youtube");
 function ComponentBlockMatcher(_a) {
-    var cbProps = _a.cbProps, device = _a.device, index = _a.index, id = _a.id;
+    var cbProps = _a.cbProps, device = _a.device, index = _a.index;
     var componentBlockCode = cbProps.componentBlockCode, data = cbProps.jsonProperties.data;
     var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(data) : data;
     switch (componentBlockCode) {
         case types_1.CB_ALL_CODES.CB_BTN:
             return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_TEXT:
-            return (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({}, propsWithValue, { index: index, id: id }));
+            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_RICHTEXT:
             return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_DIVIDER:
@@ -47,6 +49,12 @@ function ComponentBlockMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_EMBED:
             return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_VIDEOPLAYER:
+            return (0, jsx_runtime_1.jsx)(VideoPlayer_1.VideoPlayer, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_CONTENTS_CAROUSEL: {
+            var compositions = cbProps.compositions;
+            return ((0, jsx_runtime_1.jsx)(ContentsCarousel_1.default, __assign({}, propsWithValue, { compositions: compositions, index: index })));
+        }
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }

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

@@ -40,18 +40,18 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Button(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var index = props.index, CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var _c = (0, useCLINK_1.default)({
         src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
     }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
-    var _d = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
-    var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
+    var _d = getBTNStyles(props.CB_STYLE_PROP_TEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
+    var _e = getBTNColorStyles(CB_STYLE_PROP_COLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
     var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, _g = _f.layout, paddingLeft = _g.paddingLeft, paddingRight = _g.paddingRight, paddingTop = _g.paddingTop, paddingBottom = _g.paddingBottom, layoutStyle = __rest(_g, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _f.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
-    var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromBtnCB)(props.CB_STYLE_PROP_BTNTEXT, device === 'MOBILE');
+    var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromTextSpecCode)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.useGoogleFonts)({ fonts: googleFonts });
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
@@ -67,37 +67,59 @@ function Button(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
+    var textValue = function () {
+        if (device === 'MOBILE' &&
+            mode !== 'EDIT' &&
+            props.CB_CONTENT_PROP_VISIBILITY.CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB === false) {
+            return '';
+        }
+        if (device === 'DESKTOP' &&
+            mode !== 'EDIT' &&
+            props.CB_CONTENT_PROP_VISIBILITY.CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP === false) {
+            return '';
+        }
+        if (device === 'MOBILE') {
+            var value = props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE;
+            if (value === null || value === undefined) {
+                return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
+            }
+            return value;
+        }
+        return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
+    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
                     paddingLeft: paddingLeft,
                     paddingRight: paddingRight,
                     paddingBottom: paddingBottom,
                     paddingTop: paddingTop
-                } }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
+                } }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ onMouseLeave: function (e) {
+                        e.currentTarget.classList.remove('hovered');
+                    }, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: textValue() })) }))] }));
 }
 function getBTNStyles(props, device) {
     var availableSpecCodes = [
-        'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE',
-        'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT',
-        'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE',
-        'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT',
-        'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING',
-        'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR',
-        'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL',
-        'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL'
+        'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE',
+        'CB_STYLE_PROP_TEXT_SPEC_WEIGHT',
+        'CB_STYLE_PROP_TEXT_SPEC_SIZE',
+        'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT',
+        'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING',
+        'CB_STYLE_PROP_TEXT_SPEC_COLOR',
+        'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL',
+        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL'
     ];
-    return (0, newUtils_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'BTNTEXT' });
+    return (0, newUtils_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
 }
 function getBTNColorStyles(props, device) {
     var availableSpecCodes = [
-        'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE',
-        'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR',
-        'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR',
-        'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC',
-        'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT',
-        'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR',
-        'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC',
-        'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE'
+        'CB_STYLE_PROP_COLOR_SPEC_ANGLE',
+        'CB_STYLE_PROP_COLOR_SPEC_COLOR',
+        'CB_STYLE_PROP_COLOR_SPEC_ENDCOLOR',
+        'CB_STYLE_PROP_COLOR_SPEC_ENDLOC',
+        'CB_STYLE_PROP_COLOR_SPEC_GRADIENT',
+        'CB_STYLE_PROP_COLOR_SPEC_STARTCOLOR',
+        'CB_STYLE_PROP_COLOR_SPEC_STARTLOC',
+        'CB_STYLE_PROP_COLOR_SPEC_TYPE'
     ];
-    return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BTNCOLOR', device: device });
+    return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'COLOR', device: device });
 }
 exports.default = Button;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CB_CONTENTS_CAROUSEL } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
+import type { CB_BTN_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+type Props = CB_BTN_PROPERTIES_TYPE & IndexForIntersection & {
+    compositions: CB_CONTENTS_CAROUSEL['compositions'];
+};
+declare function ContentsCarousel(props: Props): JSX.Element;
+export default ContentsCarousel;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var CompositionRenderer_1 = __importDefault(require("../../../../../../../DynamicLayout/CompositionRenderer/CompositionRenderer"));
+function ContentsCarousel(props) {
+    var compositions = props.compositions;
+    return (0, jsx_runtime_1.jsx)(CompositionRenderer_1.default, { compositions: compositions });
+}
+exports.default = ContentsCarousel;

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

@@ -43,6 +43,6 @@ function Embed(props) {
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var iframeDenied = constant_1.EMBED_DENIED_HOSTS.includes(window.location.hostname);
-    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: iframeDenied ? ((0, jsx_runtime_1.jsx)(IframeDenied_1.default, {})) : ((0, jsx_runtime_1.jsx)(EmbedIframe_1.default, { embedCode: CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE, style: layout })) })) })));
+    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { position: 'relative' }), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: iframeDenied ? ((0, jsx_runtime_1.jsx)(IframeDenied_1.default, {})) : ((0, jsx_runtime_1.jsx)(EmbedIframe_1.default, { embedCode: CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE, style: layout })) })) })));
 }
 exports.default = Embed;

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

@@ -31,7 +31,7 @@ var EmbedIframe = function (_a) {
     }, [embedHtml]);
     return ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: "cb-embed", allow: "accelerometer; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; clipboard-write;", sandbox: "allow-forms allow-modals allow-same-origin allow-popups allow-presentation allow-scripts allow-downloads allow-pointer-lock" }));
 };
-var S_Iframe = styled_components_1.default.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  display: block;\n  height: 100%;\n  width: 100%;\n"], ["\n  border: none;\n  display: block;\n  height: 100%;\n  width: 100%;\n"])));
+var S_Iframe = styled_components_1.default.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  display: block;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n"], ["\n  border: none;\n  display: block;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n"])));
 function getHtmlCode(code, style) {
     var styleString = Object.entries(style).reduce(function (styleStr, _a) {
         var prop = _a[0], value = _a[1];

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

@@ -16,6 +16,6 @@ function IframeDenied() {
     var t = (0, react_i18next_1.useTranslation)().t;
     return ((0, jsx_runtime_1.jsx)(S_Denied, { children: (0, jsx_runtime_1.jsx)(components_1.D_TextLabel, { text: t('str_key_user_scene_x00001pages_notconnectdomain_embedcb_hide_info'), styleTheme: "caption1Regular", colorTheme: "sysTextSecondary", textAlign: "center" }) }));
 }
-var S_Denied = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: #dddddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"], ["\n  align-items: center;\n  background-color: #dddddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"])));
+var S_Denied = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: #ddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"], ["\n  align-items: center;\n  background-color: #ddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"])));
 exports.default = IframeDenied;
 var templateObject_1;

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

@@ -74,7 +74,7 @@ function Image(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }) })) })) })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
 }
 function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {
@@ -115,7 +115,7 @@ function parseImageCBStyle(style, hoverStyle, mode) {
     };
     return { boxStyle: boxStyle, imgStyle: imgStyle };
 }
-var S_ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+var S_ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  max-height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  max-height: 100%;\n  width: 100%;\n"])));
 var S_Image = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
     var src = _a.src;
     return "url(".concat(src, ")");

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

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import type { CB_TEXT_PROPERTIES_TYPE, IndexForIntersection } from '../../../../util/types';
-type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection & {
-    id: number;
-};
+type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection;
 declare function Text(props: Props): JSX.Element;
 export default Text;

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

@@ -15,14 +15,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-console */
 /* eslint-disable react/destructuring-assignment */
-// eslint-disable-next-line import/no-extraneous-dependencies
-var lodash_1 = require("lodash");
 var react_1 = require("react");
-var react_measure_1 = __importDefault(require("react-measure"));
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var customSectionContext_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/customSectionContext");
 var hooks_1 = require("../../../../hooks");
 var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
 var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
@@ -44,7 +39,7 @@ function Text(props) {
     var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
     var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
-    var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextCB)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
+    var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextSpecCode)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.default)({ fonts: googleFonts });
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
@@ -60,45 +55,35 @@ function Text(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    var _f = (0, customSectionContext_1.useCustomSectionContext)(), setLayouts = _f.setLayouts, rowHeight = _f.rowHeight, sectionActionHandler = _f.sectionActionHandler;
-    var debouncedSectionActionHandler = (0, react_1.useCallback)((0, lodash_1.debounce)(function (payload) {
-        console.log('called');
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/AUTO_RESIZED_TO_FIT_CONTENT',
-                payload: payload
-            });
-    }, 1000), [sectionActionHandler]);
-    var handleResize = function (contentRect) {
-        var breakpoint = device === 'DESKTOP' ? 'lg' : 'sm';
-        if (!contentRect.bounds) {
-            return;
+    var textValue = function () {
+        if (device === 'MOBILE' &&
+            mode !== 'EDIT' &&
+            props.CB_CONTENT_PROP_VISIBILITY.CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB === false) {
+            return '';
         }
-        var height = contentRect.bounds.height;
-        var id = props.id;
-        setLayouts(function (prev) {
-            var copy = JSON.parse(JSON.stringify(prev));
-            var targetIndex = copy[breakpoint].findIndex(function (each) { return each.i === id.toString(); });
-            var newH = Math.ceil((height + 10) / (10 + rowHeight));
-            copy[breakpoint][targetIndex].h = newH;
-            copy[breakpoint][targetIndex].minH = newH;
-            debouncedSectionActionHandler({
-                layout: copy[breakpoint],
-                cb: {
-                    i: id,
-                    h: newH,
-                    w: copy[breakpoint][targetIndex].w,
-                    x: copy[breakpoint][targetIndex].x,
-                    y: copy[breakpoint][targetIndex].y
-                }
-            });
-            return copy;
-        });
+        if (device === 'DESKTOP' &&
+            mode !== 'EDIT' &&
+            props.CB_CONTENT_PROP_VISIBILITY.CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP === false) {
+            return '';
+        }
+        if (device === 'MOBILE') {
+            var value = props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE;
+            if (value === null || value === undefined) {
+                return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
+            }
+            return value;
+        }
+        return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(react_measure_1.default, __assign({ bounds: true, onResize: handleResize }, { children: function (_a) {
-                        var measureRef = _a.measureRef;
-                        return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: measureRef }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) })));
-                    } })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ style: {
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: textStyle.alignItems
+                }, ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ onMouseEnter: function (e) {
+                        e.currentTarget.classList.add('hovered');
+                    }, onMouseLeave: function (e) {
+                        e.currentTarget.classList.remove('hovered');
+                    }, className: "cb-layout-box cb-text", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: textValue() })) }))] }));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [

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

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

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

@@ -0,0 +1,173 @@
+"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 Icon_1 = require("../../../../../../../DynamicLayout/components/pdsOriginal/hybrid/Icon");
+var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
+var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var styled_components_1 = __importDefault(require("styled-components"));
+var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
+var S_HiddenCover_1 = require("../components/S_HiddenCover");
+var helper_1 = require("./helper");
+function VideoPlayer(props) {
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var CB_CONTENT_PROP_VIDEO = props.CB_CONTENT_PROP_VIDEO;
+    var index = props.index, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var isEditMode = mode === 'EDIT';
+    var _b = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _b.style, bgColorHoverStyle = _b.hoverStyle;
+    var _c = (0, util_1.parseProperties)(props, device), propsStyle = _c.style, propsHoverStyle = _c.hoverStyle, layoutStyle = _c.layout, effect = _c.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        propsStyle.visibility = 'visible';
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
+    var _d = (0, react_1.useState)(false), videoStarted = _d[0], setVideoStarted = _d[1];
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var isNoneEffectType = device === 'DESKTOP'
+        ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
+        : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
+    var hasEffect = !isNoneEffectType;
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
+    var CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR, CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME, CB_CONTENT_PROP_VIDEO_SPEC_THUMB = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_THUMB, CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY, CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY, CB_CONTENT_PROP_VIDEO_SPEC_REPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_REPLAY, CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME;
+    var shouldAutoplay = (CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY && device === 'DESKTOP') ||
+        (CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY && device === 'MOBILE');
+    var videoRef = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)(false), videoLoaded = _e[0], setVideoLoaded = _e[1];
+    var _f = (0, react_1.useState)(function () {
+        return (0, helper_1.parseTargetUrl)(CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR).encodedURL;
+    }), videoURL = _f[0], setVideoURL = _f[1];
+    var onVideoError = function () {
+        var fallbackURL = (0, helper_1.parseTargetUrl)(CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR).fallbackURL;
+        var isFallbackURL = fallbackURL === videoURL;
+        if (fallbackURL && !isFallbackURL) {
+            setVideoURL(fallbackURL);
+            return;
+        }
+    };
+    var onLoadedMetadata = function () {
+        setVideoLoaded(true);
+    };
+    var onPlay = function () {
+        var video = videoRef.current;
+        if (!video || isEditMode || videoStarted || shouldAutoplay) {
+            return;
+        }
+        if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number') {
+            video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+            setVideoStarted(true);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        var video = videoRef.current;
+        if (!video || isEditMode || !videoLoaded || !shouldAutoplay) {
+            return;
+        }
+        var handleIntersection = function (entries) {
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number') {
+                        video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+                    }
+                    video.muted = true;
+                    video.play().catch(function (err) {
+                        // eslint-disable-next-line no-console
+                        console.error('Error: CB VIDEO_PLAYER:', err);
+                    });
+                }
+                else {
+                    video.pause();
+                }
+            });
+        };
+        var observer = new IntersectionObserver(handleIntersection, {
+            threshold: 0.2
+        });
+        observer.observe(video);
+        return function () {
+            observer.disconnect();
+        };
+    }, [videoLoaded, isEditMode, shouldAutoplay]);
+    (0, react_1.useEffect)(function () {
+        setVideoURL((0, helper_1.parseTargetUrl)(CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR).encodedURL);
+    }, [CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR]);
+    var onTimeUpdate = function () {
+        var video = videoRef.current;
+        if (!video) {
+            return;
+        }
+        var currentTimeFloor = Math.floor(video.currentTime);
+        if (typeof CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME === 'number' &&
+            currentTimeFloor === CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME) {
+            if (CB_CONTENT_PROP_VIDEO_SPEC_REPLAY) {
+                video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+                return;
+            }
+            video.pause();
+            return;
+        }
+    };
+    var onEnded = function () {
+        var video = videoRef.current;
+        if (!video || !CB_CONTENT_PROP_VIDEO_SPEC_REPLAY) {
+            return;
+        }
+        video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+        video.play();
+        return;
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: [isEditMode && ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                                position: 'absolute',
+                                top: '50%',
+                                left: '50%',
+                                width: '100%',
+                                height: '100%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                transform: 'translate(-50%, -50%)'
+                            } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { iconName: "ic_video_play_circle", fillType: "fill", colorKey: "ui_cpnt_icon_sys_white", size: 48 }) }))), (0, jsx_runtime_1.jsxs)(S_Video, __assign({ muted: true, playsInline: true, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onPlay: onPlay, onEnded: onEnded, onError: onVideoError, onTimeUpdate: onTimeUpdate, onLoadedMetadata: onLoadedMetadata }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB)] })) }))] }));
+}
+function getBGColorStyles(props, device) {
+    var availableSpecCodes = [
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE'
+    ];
+    return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BGCOLOR', device: device });
+}
+var S_Video = styled_components_1.default.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  aspect-ratio: 16 / 9;\n  height: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  pointer-events: ", ";\n  width: 100%;\n"], ["\n  aspect-ratio: 16 / 9;\n  height: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  pointer-events: ", ";\n  width: 100%;\n"])), function (_a) {
+    var isEditMode = _a.isEditMode;
+    return (isEditMode ? 'none' : 'auto');
+});
+exports.default = VideoPlayer;
+var templateObject_1;

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

@@ -0,0 +1,5 @@
+export declare function parseTargetUrl(url: string): {
+    encodedURL: string;
+    fallbackURL: string | null;
+};
+export declare function convertToCdnUrl(url: string): string;