pds-dev-kit-web-test 0.2.1 → 0.2.3

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

@@ -1,6 +1,9 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 import type { ISection } from '../../types';
-declare function Section({ children, ...props }: ISection & {
+declare type SectionPropTypes = ISection & {
     children?: React.ReactNode;
-}): JSX.Element;
+} & {
+    overrideStyles?: CSSProperties;
+};
+declare function Section({ children, overrideStyles, ...props }: SectionPropTypes): JSX.Element;
 export default Section;

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

@@ -31,24 +31,30 @@ 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 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 children = _a.children, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: props }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ isIframeSection: props.manifest.schema === 'EXP_IFRAME' }, { children: [(0, jsx_runtime_1.jsx)(Background, {}, void 0), children] }), void 0) }), void 0));
+    var _b;
+    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: 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 }, 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() {
+function Background(_a) {
+    var isHover = _a.isHover;
     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 id = context.id, jsonProperties = context.jsonProperties;
+    var _b = context.styles, backgroundMediaSrc = _b.backgroundMediaSrc, backgroundColorInHex = _b.backgroundColorInHex, backgroundOverlayColorInHex = _b.backgroundOverlayColorInHex, backgroundMediaType = _b.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 backgroundOverlayRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _c[0], setYoutubeSize = _c[1];
     var getResponsiveYoutubeSize = (0, react_1.useCallback)(function () {
         var backgroundWrapper = backgroundRef.current;
         if (!backgroundWrapper)
@@ -88,6 +94,24 @@ function Background() {
             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]);
     var backgroundMedia = (0, react_1.useMemo)(function () {
         switch (backgroundMediaType) {
             case 'IMAGE':
@@ -101,7 +125,13 @@ function Background() {
                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
         }
     }, [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 }), void 0), (0, jsx_runtime_1.jsx)(S_BackgroundOverlay, { color: backgroundOverlayColorInHex }, void 0)] }, void 0));
+    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));
+    }
+    var _d = (0, util_1.parseJsonProperties)(jsonProperties, 'DESKTOP'), style = _d.style, hoverStyle = _d.hoverStyle, overlayStyle = _d.overlayStyle, overlayHoverStyle = _d.overlayHoverStyle, layout = _d.layout, effect = _d.effect;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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: jsonProperties.CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: jsonProperties.CB_STYLE_PROP_BGMEDIA, playerId: id, mediaType: isHover
+                        ? jsonProperties.CB_STYLE_PROP_BGMEDIA.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE
+                        : jsonProperties.CB_STYLE_PROP_BGMEDIA['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER'] }, void 0)) }), void 0), (0, jsx_runtime_1.jsx)(S_CustomBackgroundOverlay, { className: "Overlay", ref: backgroundOverlayRef }, 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;
@@ -118,5 +148,7 @@ 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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { CB_STYLE_PROP_BGMEDIA_SPECS } from '../../../../DynamicLayout/types';
+declare type Props = {
+    specs: CB_STYLE_PROP_BGMEDIA_SPECS;
+    playerId: number;
+    mediaType: string;
+};
+export declare function CustomSectionBackgroundMedia({ specs, playerId, mediaType }: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,68 @@
+"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 });
+exports.CustomSectionBackgroundMedia = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-unused-vars */
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var pdsOriginal_1 = require("../../pdsOriginal");
+var YouTubeIframe_1 = require("../../YouTubeIframe");
+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_IMAGEPOSITION = specs.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = specs.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR, CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY = specs.CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY, 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]);
+    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));
+        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 }, void 0) }, void 0));
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+}
+exports.CustomSectionBackgroundMedia = CustomSectionBackgroundMedia;
+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');
+}, function (_a) {
+    var scaleType = _a.scaleType;
+    switch (scaleType) {
+        case 'cover':
+            return "height: 100%;\n        width: 100%;";
+        default:
+            return "height: auto;\n        width: auto";
+    }
+});
+var S_YoutubeContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+var templateObject_1, templateObject_2;

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

@@ -23,10 +23,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var CustomSection_1 = require("../../../DynamicLayout/sections/CustomSection");
 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), void 0);
+    }
     var schema = props.manifest.schema;
     switch (schema) {
         case 'BASE_INTRO':
@@ -43,10 +45,8 @@ function SectionMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(sections_1.FullscreenIframeSection, __assign({}, props), void 0);
         case 'PRG_MEMBERSHIP_DISPLAY':
             return (0, jsx_runtime_1.jsx)(sections_1.NormalTypeMembershipSection, __assign({}, props), void 0);
-        case 'CUSTOM_SECTION':
-            return (0, jsx_runtime_1.jsx)(CustomSection_1.CustomSection, __assign({}, props), void 0);
         default:
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "ERROR: Schema NOT FOUND" }, void 0);
     }
 }
 exports.default = SectionMatcher;

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

@@ -1,3 +1,2 @@
 export * from './pdsOriginal';
 export { Section } from './Section';
-export { default as Box } from './Box';

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

@@ -9,13 +9,8 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 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);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Box = exports.Section = void 0;
+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; } });
-var Box_1 = require("./Box");
-Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return __importDefault(Box_1).default; } });

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

@@ -0,0 +1,2 @@
+import type { ISection } from './types';
+export declare const customSectionMock1: ISection;