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

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

@@ -48,7 +48,6 @@ var util_1 = require("../util");
 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;
-    console.log(specs);
     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);

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

@@ -22,54 +22,37 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
 var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
+var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
-require("../components/S_CB_AnimationObserverBox");
-require("../components/S_CB_BoxWithShadow");
+var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 function VideoPlayer(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
     var CB_CONTENT_PROP_VIDEO = props.CB_CONTENT_PROP_VIDEO;
-    var isEditModeAndHidden = false;
+    var index = props.index, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var isEditMode = mode === 'EDIT';
+    var _b = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _b.style, bgColorHoverStyle = _b.hoverStyle;
+    var _c = (0, util_1.parseProperties)(props, device), propsStyle = _c.style, propsHoverStyle = _c.hoverStyle, layoutStyle = _c.layout, effect = _c.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        propsStyle.visibility = 'visible';
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var isNoneEffectType = device === 'DESKTOP'
+        ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
+        : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
+    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;
-    // useEffect(() => {
-    //   const video = videoRef.current;
-    //   if (!video) return;
-    //   // 비디오가 로드되면 시작 시간으로 이동
-    //   const handleLoadedMetadata = () => {
-    //     if (CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME) {
-    //       video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
-    //     }
-    //   };
-    //   // 재생 중 끝 시간에 도달하면 정지 또는 루프
-    //   const handleTimeUpdate = () => {
-    //     if (
-    //       CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME &&
-    //       video.currentTime >= CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME
-    //     ) {
-    //       if (CB_CONTENT_PROP_VIDEO_SPEC_REPLAY) {
-    //         // 루프: 시작 시간으로 이동 후 재생
-    //         video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME || 0;
-    //         video.play();
-    //       } else {
-    //         // 정지
-    //         video.pause();
-    //         video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME;
-    //       }
-    //     }
-    //   };
-    //   video.addEventListener('loadedmetadata', handleLoadedMetadata);
-    //   video.addEventListener('timeupdate', handleTimeUpdate);
-    //   return () => {
-    //     video.removeEventListener('loadedmetadata', handleLoadedMetadata);
-    //     video.removeEventListener('timeupdate', handleTimeUpdate);
-    //   };
-    // }, [
-    //   CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME,
-    //   CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME,
-    //   CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR,
-    //   CB_CONTENT_PROP_VIDEO_SPEC_REPLAY
-    // ]);
     var getTimeHash = function () {
         if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number' &&
             typeof CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME === 'number') {
@@ -116,8 +99,24 @@ function VideoPlayer(props) {
             observer.disconnect();
         };
     }, []);
-    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.jsxs)(S_Video, __assign({ 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)] }));
+    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) })) }))] }));
 }
-var S_Video = styled_components_1.default.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n"], ["\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n"])));
+function getBGColorStyles(props, device) {
+    var availableSpecCodes = [
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE'
+    ];
+    return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BGCOLOR', device: device });
+}
+var S_Video = styled_components_1.default.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  object-fit: cover;\n  pointer-events: ", ";\n  width: 100%;\n"], ["\n  height: 100%;\n  object-fit: cover;\n  pointer-events: ", ";\n  width: 100%;\n"])), function (_a) {
+    var isEditMode = _a.isEditMode;
+    return (isEditMode ? 'none' : 'auto');
+});
 exports.default = VideoPlayer;
 var templateObject_1;

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

@@ -4,5 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoPlayer = void 0;
+// export { default as VideoPlayer } from './VideoPlayer';
 var VideoPlayer_1 = require("./VideoPlayer");
 Object.defineProperty(exports, "VideoPlayer", { enumerable: true, get: function () { return __importDefault(VideoPlayer_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts

@@ -1,5 +1,5 @@
 import { CB_LAYOUT_PROP_KEYS } from './layoutPropParsers/types';
 import { CB_STYLE_PROP_KEYS } from './stylePropParsers/types';
-import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_LIST_PROPERTIES_TYPE, CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, CB_SLIDEBANNER_PROPERTIES_TYPE } from './types';
+import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_LIST_PROPERTIES_TYPE, CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, CB_SLIDEBANNER_PROPERTIES_TYPE, CB_VIDEOPLAYER_PROPERTIES_TYPE } from './types';
 export type specTypes = CB_LAYOUT_PROP_KEYS | CB_STYLE_PROP_KEYS;
-export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE | CB_LIST_PROPERTIES_TYPE | CB_CONTENTSCAROUSEL_PROPERTIES_TYPE | CB_SLIDEBANNER_PROPERTIES_TYPE, device: Device): ParserResult;
+export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE | CB_LIST_PROPERTIES_TYPE | CB_CONTENTSCAROUSEL_PROPERTIES_TYPE | CB_SLIDEBANNER_PROPERTIES_TYPE | CB_VIDEOPLAYER_PROPERTIES_TYPE, device: Device): ParserResult;

package/package.json

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