pds-dev-kit-web-test 2.5.364 → 2.5.365

package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.js

@@ -21,7 +21,7 @@ var compositionQueryContext_1 = require("../compositionQueryContext");
 var Composition_1 = __importDefault(require("./Composition"));
 function createCompositions(_a) {
     var valueType = _a.valueType, queryPath = _a.queryPath, queryData = _a.queryData, compositions = _a.compositions;
-    var isQueryDataConnected = valueType === 'DATA' || valueType === 'DELEGATEDDATA';
+    var isQueryDataConnected = valueType === 'DATA';
     // 직접 입력 유형인 경우
     if (!isQueryDataConnected) {
         return compositions

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,9 +48,10 @@ 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;
+    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;
     var _c = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _c[0], setYoutubeSize = _c[1];
     var youTubeIframeKey = (0, react_1.useMemo)(function () {
         return "".concat(utils_1.YouTubeLinkParser.getId(String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC)), "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME);
@@ -104,6 +108,8 @@ function CustomSectionBackgroundMedia(_a) {
             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 'VIDEO':
+            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, {});

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/components/Section/util/parseSectionBackgroundMediaData.js

@@ -25,7 +25,8 @@ var AVAILABLE_SPECS = [
     'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION',
     'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR',
     'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT',
-    'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME'
+    'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR'
 ];
 function UseCustomSectionBackgroundMediaData(specs, device) {
     return AVAILABLE_SPECS.reduce(function (acc, cur) {

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

@@ -355,6 +355,8 @@ exports.sampleMockComposition1 = {
                 'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE:HOVER': null
             },
             CB_STYLE_PROP_BGMEDIA: {
+                CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE: 'VALUE',
+                CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR: 'https://example.com/video.mp4',
                 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE:HOVER': null,
                 CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY: true,
                 'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE': null,
@@ -691,6 +693,8 @@ exports.sampleMockComposition2 = {
                 'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE:HOVER': null
             },
             CB_STYLE_PROP_BGMEDIA: {
+                CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE: 'VALUE',
+                CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR: 'https://example.com/video.mp4',
                 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE:HOVER': null,
                 CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY: true,
                 'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE': null,

package/dist/src/sub/DynamicLayout/mock_contentsCarousel.d.ts

@@ -1 +1,2 @@
-export declare const SAMPLE_CONTENTSCAROUSEL_CB: any;
+import type { CB_CONTENTSCAROUSEL } from './sections/CustomSection/types';
+export declare const SAMPLE_CONTENTSCAROUSEL_CB: CB_CONTENTSCAROUSEL;