pds-dev-kit-web 2.1.13 → 2.1.15

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

@@ -0,0 +1,119 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSectionBackgroundMedia = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var YouTubeIframe_1 = require("../../YouTubeIframe");
+var util_1 = require("../util");
+function CustomSectionBackgroundMedia(_a) {
+    var specs = _a.specs, playerId = _a.playerId, mediaType = _a.mediaType, 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 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%' } }, void 0) }), void 0)) }, void 0));
+        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, { id: playerId, src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME), customHeight: youtubeSize.height, customWidth: youtubeSize.width }, void 0)) }), void 0));
+        case 'NONE':
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+}
+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(" + 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 height + "px";
+}, function (_a) {
+    var width = _a.width;
+    return width + "px";
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseSectionBackgroundMediaData = void 0;
+var parseSectionBackgroundMediaData_1 = require("./parseSectionBackgroundMediaData");
+Object.defineProperty(exports, "parseSectionBackgroundMediaData", { enumerable: true, get: function () { return __importDefault(parseSectionBackgroundMediaData_1).default; } });

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

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

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 : 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

@@ -26,6 +26,9 @@ 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), void 0);
+    }
     var schema = props.manifest.schema;
     switch (schema) {
         case 'BASE_INTRO':
@@ -43,7 +46,7 @@ function SectionMatcher(_a) {
         case 'PRG_MEMBERSHIP_DISPLAY':
             return (0, jsx_runtime_1.jsx)(sections_1.NormalTypeMembershipSection, __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/YouTubeIframe/YouTubeIframe.d.ts

@@ -2,6 +2,11 @@
 declare type Props = {
     id: number;
     src: string;
+    loopMode?: 'use' | 'none';
+    startSeconds?: number;
+    endSeconds?: number;
+    customHeight?: number;
+    customWidth?: number;
 };
-declare function YouTubeIframe({ id, src }: Props): JSX.Element;
+declare function YouTubeIframe({ id, src, loopMode, startSeconds, endSeconds, customHeight, customWidth }: Props): JSX.Element;
 export default YouTubeIframe;

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

@@ -13,16 +13,23 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hooks_1 = require("../../hooks");
 var TouTubeLinkParser_1 = __importDefault(require("../../utils/TouTubeLinkParser"));
 function YouTubeIframe(_a) {
-    var id = _a.id, src = _a.src;
-    var _b = (0, react_1.useState)(true), isYoutubeLoading = _b[0], setIsYoutubeLoading = _b[1];
-    var _c = (0, react_1.useState)(null), error = _c[0], setError = _c[1];
+    var id = _a.id, src = _a.src, _b = _a.loopMode, loopMode = _b === void 0 ? 'use' : _b, _c = _a.startSeconds, startSeconds = _c === void 0 ? 0 : _c, _d = _a.endSeconds, endSeconds = _d === void 0 ? 0 : _d, customHeight = _a.customHeight, customWidth = _a.customWidth;
+    var _e = (0, react_1.useState)(true), isYoutubeLoading = _e[0], setIsYoutubeLoading = _e[1];
+    var _f = (0, react_1.useState)(null), error = _f[0], setError = _f[1];
+    var _g = (0, react_1.useState)(null), timeoutId = _g[0], setTimeoutId = _g[1];
     var playerRef = (0, react_1.useRef)();
     var videoId = TouTubeLinkParser_1.default.getId(src);
     var prevVideoId = (0, hooks_1.usePrevious)(videoId);
     var PLAYER_ID = "PLAYER_" + id;
     var YOUTUBE_SCRIPT_ID = "YOUTUBE_SCRIPT_" + id;
     var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
+    var section = {
+        start: startSeconds,
+        end: endSeconds
+    };
+    var isLoop = loopMode === 'use';
     var onPlayerReady = (0, react_1.useCallback)(function (event) {
+        event.target.seekTo(section.start);
         event.target.mute();
         event.target.playVideo();
     }, []);
@@ -44,13 +51,21 @@ function YouTubeIframe(_a) {
                 case ENDED:
                 case PAUSED:
                     setIsYoutubeLoading(true);
-                    event.target.playVideo();
+                    isLoop && event.target.seekTo(section.start);
                     break;
                 case PLAYING:
                     setError(null);
                     setTimeout(function () {
                         setIsYoutubeLoading(false);
                     }, 100);
+                    if (isLoop && stateCode === PLAYING && section.end > section.start) {
+                        var duration = section.end - section.start;
+                        var restartVideoSection = function () {
+                            event.target.seekTo(section.start);
+                        };
+                        var id_1 = setTimeout(restartVideoSection, duration * 1000);
+                        setTimeoutId(id_1);
+                    }
                     break;
             }
         }
@@ -58,6 +73,14 @@ function YouTubeIframe(_a) {
             setIsYoutubeLoading(true);
         }
     }, []);
+    (0, react_1.useEffect)(function () {
+        if (!timeoutId) {
+            return;
+        }
+        return function () {
+            timeoutId && clearTimeout(timeoutId);
+        };
+    }, [timeoutId]);
     var onPlayerError = (0, react_1.useCallback)(function (event) {
         var _a;
         // eslint-disable-next-line no-console
@@ -79,17 +102,22 @@ function YouTubeIframe(_a) {
             return;
         }
         try {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            // api 참고
+            // https://developers.google.com/youtube/player_parameters?hl=ko
             var player = new window.YT.Player(PLAYER_ID, {
                 videoId: videoId,
+                height: customHeight || 720,
+                width: customWidth || 1920,
                 playerVars: {
+                    cc_load_policy: 0,
                     playsinline: 1,
                     autoplay: 1,
                     controls: 0,
                     iv_load_policy: 3,
                     listType: 'playlist',
+                    disablekb: 1,
                     playlist: videoId,
-                    loop: 1
+                    start: startSeconds
                 },
                 events: {
                     onReady: onPlayerReady,
@@ -155,7 +183,7 @@ function YouTubeIframe(_a) {
                         iv_load_policy: 3,
                         listType: 'playlist',
                         playlist: videoId,
-                        loop: 1
+                        loop: isLoop ? 1 : 0
                     }
                 });
             }

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

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

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

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

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

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