pds-dev-kit-web-test 0.0.22 → 0.0.23

package/package.json

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

package/release-note.md

@@ -1,13 +1,8 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.22]
+## [v0.0.23]
 
 ### sub
 * DynamicLayout 수정
-    * 폴더구조 변경
-        * DynamicLayout - sections - [SectionName] - [TemplateName] - desktop/mobile
-    * 타입 정리
-        * API와 부합하지 않는 부분 수정
-    * 스토리북 정리
-        * SamplePage를 mock data로 하여 섹션별로 확인 할 수 있도록 리팩토링
-    * deprecated
-        * isPreview → mode = ‘NORMAL' | ‘PREVIEW'
+  * YouTubeIframe player에 에러 핸들링 추가
+    * iframe을 제거한 후 다시 생성하도록 조치
+    * 모니터링을 위해 콘솔에 에러 이벤트 출력

package/dist/src/sub/DynamicLayout/components/mobile/common/YouTubeIframe.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    id: string;
-    src: string;
-};
-declare function YouTubeIframe({ id, src }: Props): JSX.Element;
-export default YouTubeIframe;

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

@@ -1,120 +0,0 @@
-"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 __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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-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 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 () {
-        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,
-                    iv_load_policy: 3,
-                    listType: 'playlist',
-                    playlist: TouTubeLinkParser_1.default.getId(src),
-                    loop: 1
-                },
-                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 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: inherit;\n  margin: auto;\n  width: inherit;\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: inherit;\n    width: inherit;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"], ["\n  height: inherit;\n  margin: auto;\n  width: inherit;\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: inherit;\n    width: inherit;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"])));
-exports.default = YouTubeIframe;
-var templateObject_1, templateObject_2;