pds-dev-kit-web-test 0.2.22 → 0.2.23

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

@@ -90,7 +90,7 @@ function CustomSectionBackgroundMedia(_a) {
         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: (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) }, void 0) }), void 0));
+            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);

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

@@ -5,6 +5,8 @@ declare type Props = {
     loopMode?: 'use' | 'none';
     startSeconds?: number;
     endSeconds?: number;
+    customHeight?: number;
+    customWidth?: number;
 };
-declare function YouTubeIframe({ id, src, loopMode, startSeconds, endSeconds }: 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,17 +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, _b = _a.loopMode, loopMode = _b === void 0 ? 'use' : _b, _c = _a.startSeconds, startSeconds = _c === void 0 ? 0 : _c, endSeconds = _a.endSeconds;
-    var _d = (0, react_1.useState)(true), isYoutubeLoading = _d[0], setIsYoutubeLoading = _d[1];
-    var _e = (0, react_1.useState)(null), error = _e[0], setError = _e[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();
     }, []);
@@ -45,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;
             }
         }
@@ -59,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
@@ -82,32 +104,21 @@ function YouTubeIframe(_a) {
         try {
             // api 참고
             // https://developers.google.com/youtube/player_parameters?hl=ko
-            var playerVars = endSeconds
-                ? {
+            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: isLoop ? 1 : 0,
-                    start: startSeconds,
-                    end: endSeconds,
-                    cc_load_policy: 0
-                }
-                : {
-                    autoplay: 1,
-                    controls: 0,
-                    iv_load_policy: 3,
-                    listType: 'playlist',
-                    playlist: videoId,
-                    loop: isLoop ? 1 : 0,
-                    start: startSeconds,
-                    cc_load_policy: 0
-                };
-            var player = new window.YT.Player(PLAYER_ID, {
-                videoId: videoId,
-                playerVars: playerVars,
+                    start: startSeconds
+                },
                 events: {
                     onReady: onPlayerReady,
                     onStateChange: onPlayerStateChange,

package/dist/src/sub/DynamicLayout/mock_customSection.js

@@ -243,7 +243,8 @@ exports.customSectionMock1 = {
                 CB_CONTENT_PROP_CLINK: {
                     CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'EXTERNAL',
                     CB_CONTENT_PROP_CLINK_SPEC_SRC: 'http://www.naver.com',
-                    CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true
+                    CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
+                    CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: 'true'
                 },
                 CB_CONTENT_PROP_VISIBILITY: {
                     CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
@@ -342,6 +343,7 @@ exports.customSectionMock1 = {
                 },
                 CB_CONTENT_PROP_CLINK: {
                     CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
+                    CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: 'true',
                     CB_CONTENT_PROP_CLINK_SPEC_SRC: 'https://publ.co',
                     CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'EXTERNAL'
                 },
@@ -616,6 +618,7 @@ exports.customSectionMock1 = {
                 },
                 CB_CONTENT_PROP_CLINK: {
                     CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
+                    CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: 'true',
                     CB_CONTENT_PROP_CLINK_SPEC_SRC: 'https://publ.co',
                     CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'EXTERNAL'
                 },