pds-dev-kit-web 2.1.14 → 2.1.15

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;