pds-dev-kit-web-test 2.5.359 → 2.5.361

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

@@ -37,6 +37,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 });
 exports.CustomSectionBackgroundMedia = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -45,6 +48,7 @@ var utils_1 = require("../../../../DynamicLayout/utils");
 var styled_components_1 = __importStar(require("styled-components"));
 var YouTubeIframe_1 = require("../../YouTubeIframe");
 var util_1 = require("../util");
+var VideoBGMedia_1 = __importDefault(require("./VideoBGMedia"));
 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, CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR;
@@ -99,38 +103,36 @@ function CustomSectionBackgroundMedia(_a) {
     if ('background' in componentStyle) {
         delete componentStyle.background;
     }
-    console.log('media type', mediaType);
     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%' } }) }))) }));
         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, { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), id: playerId, 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 }, youTubeIframeKey)) })));
-        case 'NONE':
         case 'VIDEO':
-            return ((0, jsx_runtime_1.jsx)(S_Video, __assign({ autoPlay: true, loop: true, muted: true, playsInline: true }, { children: (0, jsx_runtime_1.jsx)("source", { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR), type: "video/mp4" }) }), String(CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR)));
+            return ((0, jsx_runtime_1.jsx)(VideoBGMedia_1.default, { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR), startTime: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endTime: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME), loop: !!CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY }));
+        case 'NONE':
         default:
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
 }
 exports.CustomSectionBackgroundMedia = CustomSectionBackgroundMedia;
-var S_Video = styled_components_1.default.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  left: 0;\n  object-fit: cover;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: -9999;\n"], ["\n  height: 100%;\n  left: 0;\n  object-fit: cover;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: -9999;\n"])));
-var S_Image = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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 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(".concat(src, ")");
 }, function (_a) {
     var normalStyle = _a.normalStyle;
     var isContain = normalStyle.backgroundSize === 'contain';
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { backgroundPosition: isContain ? 'center' : normalStyle.backgroundPosition }));
+    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_3 || (templateObject_3 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
+    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_5 || (templateObject_5 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n"])), function (_a) {
+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 "".concat(height, "px");
 }, function (_a) {
     var width = _a.width;
     return "".concat(width, "px");
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare function VideoBGMedia({ src, startTime, endTime, loop }: {
+    src: string;
+    startTime?: number;
+    endTime?: number;
+    loop?: boolean;
+}): JSX.Element;
+export default VideoBGMedia;

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

@@ -0,0 +1,61 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+function VideoBGMedia(_a) {
+    var src = _a.src, startTime = _a.startTime, endTime = _a.endTime, loop = _a.loop;
+    var videoRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var video = videoRef.current;
+        if (!video)
+            return;
+        // 시작 시간으로 이동
+        var handleLoadedMetadata = function () {
+            if (typeof startTime === 'number') {
+                video.currentTime = startTime;
+                video.play();
+            }
+        };
+        // 구간 반복
+        var handleTimeUpdate = function () {
+            if (typeof startTime === 'number' && typeof endTime === 'number') {
+                if (video.currentTime < startTime) {
+                    video.currentTime = startTime;
+                }
+                if (video.currentTime >= endTime) {
+                    video.currentTime = startTime;
+                    video.play();
+                }
+            }
+        };
+        video.addEventListener('loadedmetadata', handleLoadedMetadata);
+        video.addEventListener('timeupdate', handleTimeUpdate);
+        return function () {
+            video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+            video.removeEventListener('timeupdate', handleTimeUpdate);
+        };
+    }, [startTime, loop, endTime]);
+    return ((0, jsx_runtime_1.jsx)(S_Video, __assign({ ref: videoRef, autoPlay: true, muted: true, playsInline: true }, { children: (0, jsx_runtime_1.jsx)("source", { src: src, type: "video/mp4" }) }), src));
+}
+var S_Video = styled_components_1.default.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  left: 0;\n  object-fit: cover;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: -9999;\n"], ["\n  height: 100%;\n  left: 0;\n  object-fit: cover;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: -9999;\n"])));
+exports.default = VideoBGMedia;
+var templateObject_1;

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

@@ -4360,7 +4360,7 @@ exports.MOCK_SECTIONS = [
                     CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY: true,
                     'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE': null,
                     'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:HOVER': null,
-                    CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: 600,
+                    CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: 10,
                     CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: 'COVER',
                     'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER': null,
                     'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE': null,

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js

@@ -53,16 +53,6 @@ function VideoPlayer(props) {
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA, CB_CONTENT_PROP_VIDEO_SPEC_MPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_MPLAY, CB_CONTENT_PROP_VIDEO_SPEC_REPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_REPLAY, CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR, CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME, CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME, CB_CONTENT_PROP_VIDEO_SPEC_THUMB = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_THUMB, CB_CONTENT_PROP_VIDEO_SPEC_TYPE = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_TYPE, CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE;
-    var getTimeHash = function () {
-        if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number' &&
-            typeof CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME === 'number') {
-            return "#t=".concat(CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME, ",").concat(CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME);
-        }
-        if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number') {
-            return "#t=".concat(CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME);
-        }
-        return '';
-    };
     var getVideoSrc = function () {
         if (CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE === 'DATA') {
             if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
@@ -74,32 +64,42 @@ function VideoPlayer(props) {
         return CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR;
     };
     var videoRef = (0, react_1.useRef)(null);
-    var containerRef = (0, react_1.useRef)(null);
-    // viewport 진입 시 자동재생
     (0, react_1.useEffect)(function () {
         var video = videoRef.current;
-        // const container = containerRef.current;
         if (!video)
             return;
-        var handleIntersection = function (entries) {
-            entries.forEach(function (entry) {
-                if (entry.isIntersecting) {
-                    video.play().catch(console.error);
+        // 시작 시간으로 이동
+        var handleLoadedMetadata = function () {
+            if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number') {
+                video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+                video.play();
+            }
+        };
+        // 구간 반복
+        var handleTimeUpdate = function () {
+            if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number' &&
+                typeof CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME === 'number') {
+                if (video.currentTime < CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME) {
+                    video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
                 }
-                else {
-                    video.pause();
+                if (video.currentTime >= CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME) {
+                    video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+                    video.play();
                 }
-            });
+            }
         };
-        var observer = new IntersectionObserver(handleIntersection, {
-            threshold: 0.3 // 30% 이상 보이면 재생
-        });
-        observer.observe(video);
+        video.addEventListener('loadedmetadata', handleLoadedMetadata);
+        video.addEventListener('timeupdate', handleTimeUpdate);
         return function () {
-            observer.disconnect();
+            video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+            video.removeEventListener('timeupdate', handleTimeUpdate);
         };
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsxs)(S_Video, __assign({ isEditMode: isEditMode, ref: videoRef, controls: true, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, preload: "auto", loop: true, muted: true }, { children: [(0, jsx_runtime_1.jsx)("source", { src: getVideoSrc() + getTimeHash(), type: "video/mp4" }), "Your browser does not support the video tag."] }), CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR) })) }))] }));
+    }, [
+        CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME,
+        CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME,
+        CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsxs)(S_Video, __assign({ isEditMode: isEditMode, ref: videoRef, controls: !isEditMode, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, preload: "auto", loop: false, muted: true }, { children: [(0, jsx_runtime_1.jsx)("source", { src: getVideoSrc(), type: "video/mp4" }), "Your browser does not support the video tag."] }), CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR) })) }))] }));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [

package/package.json

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