pds-dev-kit-web-test 0.0.17 → 0.0.18

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

@@ -50,8 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var hybrid_1 = require("../../../../../hybrid");
-var mobile_1 = require("../../../../../mobile");
+var pdsOriginal_1 = require("../../../common/components/pdsOriginal");
 var dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
 var YouTubeIframe_1 = __importDefault(require("../common/YouTubeIframe"));
 // SECTION
@@ -121,7 +120,7 @@ function Background() {
     var backgroundMedia = (0, react_1.useMemo)(function () {
         switch (backgroundMediaType) {
             case 'IMAGE':
-                return (react_1.default.createElement(hybrid_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
+                return (react_1.default.createElement(pdsOriginal_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
             // case 'VIDEO':
             // NOTE VIDEO타입 배경은 최초 scope에서 제외
             // return <></>;
@@ -154,8 +153,8 @@ var S_YoutubeContainer = styled_components_1.default.div(templateObject_5 || (te
 // TITLE
 function Title(_a) {
     var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.4 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
-    return (react_1.default.createElement(S_TitleStyleWrapper, { color: color, lineHeight: lineHeight },
-        react_1.default.createElement(mobile_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-section-element-name": "Title", color: color, lineHeight: lineHeight },
+        react_1.default.createElement(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
 var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
@@ -167,8 +166,8 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (t
 // DESCRIPTION
 function Description(_a) {
     var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
-    return (react_1.default.createElement(S_DescriptionStyleWrapper, { color: color, fontWeight: fontWeight },
-        react_1.default.createElement(mobile_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-section-element-name": "Description", color: color, fontWeight: fontWeight },
+        react_1.default.createElement(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
 var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
@@ -180,7 +179,7 @@ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7
 // IMAGE
 function Image(_a) {
     var imageViewProps = __rest(_a, []);
-    return react_1.default.createElement(hybrid_1.ImageView, __assign({}, imageViewProps, { scaleType: "cover" }));
+    return react_1.default.createElement(pdsOriginal_1.ImageView, __assign({ "x-dlayout-section-element-name": "Image" }, imageViewProps, { scaleType: "cover" }));
 }
 // BUTTON
 function Button(_a) {
@@ -195,32 +194,32 @@ function Button(_a) {
     };
     switch (buttonType) {
         case 'A':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'B':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'C':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'D':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'E':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'F':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'G':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'H':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'I':
             return (react_1.default.createElement(S_TextButtonBox, { color: textColor, state: state },
-                react_1.default.createElement(mobile_1.M_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
+                react_1.default.createElement(pdsOriginal_1.M_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
         default:
             return react_1.default.createElement("button", { type: "button" }, "wrong type");
     }

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

@@ -28,22 +28,89 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var YouTubeIframeHelper_1 = require("../../../../utils/YouTubeIframeHelper");
+var TouTubeLinkParser_1 = __importDefault(require("../../../common/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 PLAYER_ID = "PLAYER_" + id;
+    var YOUTUBE_SCRIPT_ID = "YOUTUBE_SCRIPT_" + id;
+    var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
     (0, react_1.useLayoutEffect)(function () {
-        YouTubeIframeHelper_1.YouTubeIframeHelper.getReady();
-        YouTubeIframeHelper_1.YouTubeIframeHelper.registerPlayer(PLAYER_ID, src);
-        return function () { return YouTubeIframeHelper_1.YouTubeIframeHelper.cleanUp(); };
-    }, [id, src]);
+        var _a;
+        var youtubeScript = document.createElement('script');
+        youtubeScript.id = YOUTUBE_SCRIPT_ID;
+        youtubeScript.src = YOUTUBE_SCRIPT_SRC;
+        var firstScript = document.getElementsByTagName('script')[0];
+        (_a = firstScript.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(youtubeScript, firstScript);
+        youtubeScript.onload = function () {
+            var YT = window.YT;
+            YT.ready(function () {
+                onYouTubeIframeAPIReady();
+            });
+        };
+        return function () {
+            var youtubeScript = document.getElementById(YOUTUBE_SCRIPT_ID);
+            youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
+        };
+    }, [src]);
+    function onYouTubeIframeAPIReady() {
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var player = new window.YT.Player(PLAYER_ID, {
+                videoId: TouTubeLinkParser_1.default.getId(src),
+                playerVars: {
+                    playsinline: 1,
+                    autoplay: 1,
+                    controls: 0
+                },
+                events: {
+                    onReady: onPlayerReady,
+                    onStateChange: onPlayerStateChange
+                }
+            });
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+        }
+    }
+    function onPlayerReady(event) {
+        event.target.mute();
+        event.target.playVideo();
+    }
+    function onPlayerStateChange(event) {
+        try {
+            var ENDED = 0;
+            var PLAYING = 1;
+            var TEMP_STOP = 2;
+            var BUFFERING = 3;
+            var data = event.data;
+            if (data === PLAYING) {
+                setTimeout(function () {
+                    setIsYoutubeLoading(false);
+                }, 100);
+            }
+            if (data === BUFFERING) {
+                setIsYoutubeLoading(true);
+            }
+            if (data === ENDED || data === TEMP_STOP) {
+                setIsYoutubeLoading(true);
+                event.target.playVideo();
+            }
+        }
+        catch (err) {
+            setIsYoutubeLoading(true);
+        }
+    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
+        isYoutubeLoading && react_1.default.createElement(BlackScreen, null),
         react_1.default.createElement(S_IframeWrapper, null,
             react_1.default.createElement("div", { id: PLAYER_ID }))));
 }
-var S_IframeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  background-color: ", ";\n\n  /* NOTE \n  iframe \uAD8C\uC7A5 \uB113\uC774(width)\n  \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n  \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n  */\n  iframe {\n    border: 0;\n    height: 100%;\n    width: 415%;\n    margin-left: -157.5%;\n  }\n"], ["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  background-color: ", ";\n\n  /* NOTE \n  iframe \uAD8C\uC7A5 \uB113\uC774(width)\n  \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n  \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n  */\n  iframe {\n    border: 0;\n    height: 100%;\n    width: 415%;\n    margin-left: -157.5%;\n  }\n"])), function (_a) {
+var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_62;
 });
+var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n\n  /* NOTE \n  iframe \uAD8C\uC7A5 \uB113\uC774(width)\n  \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n  \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n  */\n  iframe {\n    border: 0;\n    height: 100%;\n    width: 415%;\n    margin-left: -157.5%;\n  }\n"], ["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n\n  /* NOTE \n  iframe \uAD8C\uC7A5 \uB113\uC774(width)\n  \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n  \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n  */\n  iframe {\n    border: 0;\n    height: 100%;\n    width: 415%;\n    margin-left: -157.5%;\n  }\n"])));
 exports.default = YouTubeIframe;
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/ContentsCarouselSection.js

@@ -30,7 +30,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function ContentsCarouselSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(components_1.Section, __assign({}, props),
+    return (react_1.default.createElement(components_1.Section, __assign({ "x-dlayout-section-type": "ContentsCarousel" }, props),
         react_1.default.createElement(TemplateMatcher, { styleTemplate: props.template })));
 }
 function TemplateMatcher(_a) {

package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/ContentsSection.js

@@ -30,7 +30,7 @@ var Section_1 = require("../../components/Section");
 var templates_1 = require("./templates");
 function ContentsSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(Section_1.Section, __assign({}, props),
+    return (react_1.default.createElement(Section_1.Section, __assign({ "x-dlayout-section-type": "Contents" }, props),
         react_1.default.createElement(TemplateMather, { styleTemplate: props.template })));
 }
 function TemplateMather(_a) {

package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/FooterSection.js

@@ -30,7 +30,7 @@ var Section_1 = __importDefault(require("../../components/Section/Section"));
 var templates_1 = require("./templates");
 function FooterSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(Section_1.default, __assign({}, props),
+    return (react_1.default.createElement(Section_1.default, __assign({ "x-dlayout-section-type": "Footer" }, props),
         react_1.default.createElement(TemplateMather, { styleTemplate: props.template })));
 }
 function TemplateMather(_a) {

package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/InfoBoxSection.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ISection } from '../../../types';
-declare function ContentsSection({ ...props }: ISection): JSX.Element;
-export default ContentsSection;
+declare function InfoBoxSection({ ...props }: ISection): JSX.Element;
+export default InfoBoxSection;

package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/InfoBoxSection.js

@@ -28,9 +28,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var Section_1 = require("../../components/Section");
 var templates_1 = require("./templates");
-function ContentsSection(_a) {
+function InfoBoxSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(Section_1.Section, __assign({}, props),
+    return (react_1.default.createElement(Section_1.Section, __assign({ "x-dlayout-section-type": "InfoBox" }, props),
         react_1.default.createElement(TemplateMather, { styleTemplate: props.template })));
 }
 function TemplateMather(_a) {
@@ -42,4 +42,4 @@ function TemplateMather(_a) {
             return react_1.default.createElement("div", null, "wrong template type");
     }
 }
-exports.default = ContentsSection;
+exports.default = InfoBoxSection;

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/IntroSection.js

@@ -30,7 +30,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function IntroSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(components_1.Section, __assign({}, props),
+    return (react_1.default.createElement(components_1.Section, __assign({ "x-dlayout-section-type": "Intro" }, props),
         react_1.default.createElement(TemplateMatcher, { styleTemplate: props.template })));
 }
 function TemplateMatcher(_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,12 +1,8 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.17]
+## [v0.0.18]
 
 * sub
-  * DynamicLayout 유튜브쪽 문제 해결
-  * DynamicLayout 디자인 디테일 수정
-    * mobile
-      * 캐러셀 섹션 2번 타입 아이템 본문이 보이지 않던 부분 수정
-      * 푸터 정렬이 제대로 안되는 이슈 수정
-      * 인포박스 아이템
-        * 제목과 본문사이 spacing-a -> spacing-b
-        * 아이템 사이 간격 spacing-e -> 40px
+  * DynamicLayout 수정
+    * 섹션 및 아이템 컴포넌트에 key값 부여
+    * YouTubeIframe 리팩토링했던 부분 롤백
+    * preview모드일때 HTML Reader에서 클릭이 되는 이슈 수정

package/dist/src/sub/utils/YouTubeIframeHelper.d.ts

@@ -1,14 +0,0 @@
-export declare class YouTubeIframeHelper {
-    static players: {
-        id: string;
-        src: string;
-    }[];
-    static getReady(): void;
-    static cleanUp(): void;
-    static registerPlayer(playerId: string, src: string): void;
-    private static onYouTubeIframeAPIReady;
-    private static onPlayerReady;
-    private static onPlayerStateChange;
-    private static concealPlayer;
-    private static revealPlayer;
-}

package/dist/src/sub/utils/youtubeLinkParser.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var YoutubeLinkParser = /** @class */ (function () {
-    function YoutubeLinkParser() {
-    }
-    YoutubeLinkParser.getId = function (src) {
-        var _a;
-        var embedUrl = src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/);
-        var shareUrl = src.match(/youtu.be\/(.{11})/);
-        return (_a = (embedUrl || shareUrl)) === null || _a === void 0 ? void 0 : _a.pop();
-    };
-    YoutubeLinkParser.getThumbnailUrl = function (src) {
-        return "https://img.youtube.com/vi/" + YoutubeLinkParser.getId(src) + "/0.jpg";
-    };
-    YoutubeLinkParser.getEmbedUrl = function (src) {
-        return "https://www.youtube.com/embed/" + YoutubeLinkParser.getId(src);
-    };
-    YoutubeLinkParser.getEmbedUrlWithLoop = function (src) {
-        return "https://www.youtube.com/embed/" + YoutubeLinkParser.getId(src) + "?autoplay=1&mute=1&loop=1&color=white&controls=0&modestbranding=1&playsinline=1&rel=0&playlist=" + this.getId(src);
-    };
-    return YoutubeLinkParser;
-}());
-exports.default = YoutubeLinkParser;