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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js +11 -10
  2. package/dist/src/sub/DynamicLayout/components/Section/components/VideoBGMedia.d.ts +8 -0
  3. package/dist/src/sub/DynamicLayout/components/Section/components/VideoBGMedia.js +61 -0
  4. package/dist/src/sub/DynamicLayout/mocks.js +1 -1
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js +68 -69
  6. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/index.js +1 -0
  7. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts +2 -2
  8. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js CHANGED
@@ -37,6 +37,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
37
37
  __setModuleDefault(result, mod);
38
38
  return result;
39
39
  };
40
+ var __importDefault = (this && this.__importDefault) || function (mod) {
41
+ return (mod && mod.__esModule) ? mod : { "default": mod };
42
+ };
40
43
  Object.defineProperty(exports, "__esModule", { value: true });
41
44
  exports.CustomSectionBackgroundMedia = void 0;
42
45
  var jsx_runtime_1 = require("react/jsx-runtime");
@@ -45,10 +48,10 @@ var utils_1 = require("../../../../DynamicLayout/utils");
45
48
  var styled_components_1 = __importStar(require("styled-components"));
46
49
  var YouTubeIframe_1 = require("../../YouTubeIframe");
47
50
  var util_1 = require("../util");
51
+ var VideoBGMedia_1 = __importDefault(require("./VideoBGMedia"));
48
52
  function CustomSectionBackgroundMedia(_a) {
49
53
  var specs = _a.specs, playerId = _a.playerId, mediaType = _a.mediaType, componentStyle = _a.componentStyle, device = _a.device, backgroundRef = _a.backgroundRef;
50
54
  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;
51
- console.log(specs);
52
55
  var _c = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _c[0], setYoutubeSize = _c[1];
53
56
  var youTubeIframeKey = (0, react_1.useMemo)(function () {
54
57
  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);
@@ -100,38 +103,36 @@ function CustomSectionBackgroundMedia(_a) {
100
103
  if ('background' in componentStyle) {
101
104
  delete componentStyle.background;
102
105
  }
103
- console.log('media type', mediaType);
104
106
  switch (mediaType) {
105
107
  case 'IMAGE':
106
108
  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%' } }) }))) }));
107
109
  case 'YOUTUBE':
108
110
  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)) })));
109
- case 'NONE':
110
111
  case 'VIDEO':
111
- 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)));
112
+ 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 }));
113
+ case 'NONE':
112
114
  default:
113
115
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
114
116
  }
115
117
  }
116
118
  exports.CustomSectionBackgroundMedia = CustomSectionBackgroundMedia;
117
- 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"])));
118
- 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) {
119
+ 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) {
119
120
  var src = _a.src;
120
121
  return "url(".concat(src, ")");
121
122
  }, function (_a) {
122
123
  var normalStyle = _a.normalStyle;
123
124
  var isContain = normalStyle.backgroundSize === 'contain';
124
- return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { backgroundPosition: isContain ? 'center' : normalStyle.backgroundPosition }));
125
+ return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { backgroundPosition: isContain ? 'center' : normalStyle.backgroundPosition }));
125
126
  }, function (_a) {
126
127
  var normalStyle = _a.normalStyle;
127
128
  var isContain = normalStyle.backgroundSize === 'contain';
128
- return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
129
+ return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
129
130
  });
130
- 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) {
131
+ 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) {
131
132
  var height = _a.height;
132
133
  return "".concat(height, "px");
133
134
  }, function (_a) {
134
135
  var width = _a.width;
135
136
  return "".concat(width, "px");
136
137
  });
137
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
138
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/src/sub/DynamicLayout/components/Section/components/VideoBGMedia.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ declare function VideoBGMedia({ src, startTime, endTime, loop }: {
3
+ src: string;
4
+ startTime?: number;
5
+ endTime?: number;
6
+ loop?: boolean;
7
+ }): JSX.Element;
8
+ export default VideoBGMedia;
package/dist/src/sub/DynamicLayout/components/Section/components/VideoBGMedia.js ADDED
@@ -0,0 +1,61 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
17
+ var __importDefault = (this && this.__importDefault) || function (mod) {
18
+ return (mod && mod.__esModule) ? mod : { "default": mod };
19
+ };
20
+ Object.defineProperty(exports, "__esModule", { value: true });
21
+ var jsx_runtime_1 = require("react/jsx-runtime");
22
+ var react_1 = require("react");
23
+ var styled_components_1 = __importDefault(require("styled-components"));
24
+ function VideoBGMedia(_a) {
25
+ var src = _a.src, startTime = _a.startTime, endTime = _a.endTime, loop = _a.loop;
26
+ var videoRef = (0, react_1.useRef)(null);
27
+ (0, react_1.useEffect)(function () {
28
+ var video = videoRef.current;
29
+ if (!video)
30
+ return;
31
+ // 시작 시간으로 이동
32
+ var handleLoadedMetadata = function () {
33
+ if (typeof startTime === 'number') {
34
+ video.currentTime = startTime;
35
+ video.play();
36
+ }
37
+ };
38
+ // 구간 반복
39
+ var handleTimeUpdate = function () {
40
+ if (typeof startTime === 'number' && typeof endTime === 'number') {
41
+ if (video.currentTime < startTime) {
42
+ video.currentTime = startTime;
43
+ }
44
+ if (video.currentTime >= endTime) {
45
+ video.currentTime = startTime;
46
+ video.play();
47
+ }
48
+ }
49
+ };
50
+ video.addEventListener('loadedmetadata', handleLoadedMetadata);
51
+ video.addEventListener('timeupdate', handleTimeUpdate);
52
+ return function () {
53
+ video.removeEventListener('loadedmetadata', handleLoadedMetadata);
54
+ video.removeEventListener('timeupdate', handleTimeUpdate);
55
+ };
56
+ }, [startTime, loop, endTime]);
57
+ 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));
58
+ }
59
+ 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"])));
60
+ exports.default = VideoBGMedia;
61
+ var templateObject_1;
package/dist/src/sub/DynamicLayout/mocks.js CHANGED
@@ -4360,7 +4360,7 @@ exports.MOCK_SECTIONS = [
4360
4360
  CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY: true,
4361
4361
  'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE': null,
4362
4362
  'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:HOVER': null,
4363
- CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: 600,
4363
+ CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: 10,
4364
4364
  CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: 'COVER',
4365
4365
  'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER': null,
4366
4366
  'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE': null,
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js CHANGED
@@ -22,64 +22,37 @@ var jsx_runtime_1 = require("react/jsx-runtime");
22
22
  var react_1 = require("react");
23
23
  var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
24
24
  var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
25
+ var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
26
+ var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
27
+ var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
25
28
  var styled_components_1 = __importDefault(require("styled-components"));
26
- require("../components/S_CB_AnimationObserverBox");
27
- require("../components/S_CB_BoxWithShadow");
29
+ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
30
+ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
28
31
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
29
32
  function VideoPlayer(props) {
30
33
  var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
31
34
  var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
32
35
  var CB_CONTENT_PROP_VIDEO = props.CB_CONTENT_PROP_VIDEO;
33
- var isEditModeAndHidden = false;
36
+ 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;
37
+ var isEditMode = mode === 'EDIT';
38
+ var _b = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _b.style, bgColorHoverStyle = _b.hoverStyle;
39
+ var _c = (0, util_1.parseProperties)(props, device), propsStyle = _c.style, propsHoverStyle = _c.hoverStyle, layoutStyle = _c.layout, effect = _c.effect;
40
+ var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
41
+ if (mode === 'EDIT') {
42
+ propsStyle.visibility = 'visible';
43
+ }
44
+ var cbRef = (0, react_1.useRef)(null);
45
+ var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
46
+ index
47
+ ]);
48
+ var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
49
+ var effectCssProperties = isVisible ? effect : {};
50
+ var isNoneEffectType = device === 'DESKTOP'
51
+ ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
52
+ : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
53
+ var hasEffect = !isNoneEffectType;
54
+ var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
34
55
  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;
35
- // useEffect(() => {
36
- // const video = videoRef.current;
37
- // if (!video) return;
38
- // // 비디오가 로드되면 시작 시간으로 이동
39
- // const handleLoadedMetadata = () => {
40
- // if (CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME) {
41
- // video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
42
- // }
43
- // };
44
- // // 재생 중 끝 시간에 도달하면 정지 또는 루프
45
- // const handleTimeUpdate = () => {
46
- // if (
47
- // CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME &&
48
- // video.currentTime >= CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME
49
- // ) {
50
- // if (CB_CONTENT_PROP_VIDEO_SPEC_REPLAY) {
51
- // // 루프: 시작 시간으로 이동 후 재생
52
- // video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME || 0;
53
- // video.play();
54
- // } else {
55
- // // 정지
56
- // video.pause();
57
- // video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME;
58
- // }
59
- // }
60
- // };
61
- // video.addEventListener('loadedmetadata', handleLoadedMetadata);
62
- // video.addEventListener('timeupdate', handleTimeUpdate);
63
- // return () => {
64
- // video.removeEventListener('loadedmetadata', handleLoadedMetadata);
65
- // video.removeEventListener('timeupdate', handleTimeUpdate);
66
- // };
67
- // }, [
68
- // CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME,
69
- // CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME,
70
- // CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR,
71
- // CB_CONTENT_PROP_VIDEO_SPEC_REPLAY
72
- // ]);
73
- var getTimeHash = function () {
74
- if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number' &&
75
- typeof CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME === 'number') {
76
- return "#t=".concat(CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME, ",").concat(CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME);
77
- }
78
- if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number') {
79
- return "#t=".concat(CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME);
80
- }
81
- return '';
82
- };
83
56
  var getVideoSrc = function () {
84
57
  if (CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE === 'DATA') {
85
58
  if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
@@ -91,33 +64,59 @@ function VideoPlayer(props) {
91
64
  return CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR;
92
65
  };
93
66
  var videoRef = (0, react_1.useRef)(null);
94
- var containerRef = (0, react_1.useRef)(null);
95
- // viewport 진입 시 자동재생
96
67
  (0, react_1.useEffect)(function () {
97
68
  var video = videoRef.current;
98
- // const container = containerRef.current;
99
69
  if (!video)
100
70
  return;
101
- var handleIntersection = function (entries) {
102
- entries.forEach(function (entry) {
103
- if (entry.isIntersecting) {
104
- video.play().catch(console.error);
71
+ // 시작 시간으로 이동
72
+ var handleLoadedMetadata = function () {
73
+ if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number') {
74
+ video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
75
+ video.play();
76
+ }
77
+ };
78
+ // 구간 반복
79
+ var handleTimeUpdate = function () {
80
+ if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number' &&
81
+ typeof CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME === 'number') {
82
+ if (video.currentTime < CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME) {
83
+ video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
105
84
  }
106
- else {
107
- video.pause();
85
+ if (video.currentTime >= CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME) {
86
+ video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
87
+ video.play();
108
88
  }
109
- });
89
+ }
110
90
  };
111
- var observer = new IntersectionObserver(handleIntersection, {
112
- threshold: 0.3 // 30% 이상 보이면 재생
113
- });
114
- observer.observe(video);
91
+ video.addEventListener('loadedmetadata', handleLoadedMetadata);
92
+ video.addEventListener('timeupdate', handleTimeUpdate);
115
93
  return function () {
116
- observer.disconnect();
94
+ video.removeEventListener('loadedmetadata', handleLoadedMetadata);
95
+ video.removeEventListener('timeupdate', handleTimeUpdate);
117
96
  };
118
- }, []);
119
- 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)] }));
97
+ }, [
98
+ CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME,
99
+ CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME,
100
+ CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR
101
+ ]);
102
+ 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) })) }))] }));
103
+ }
104
+ function getBGColorStyles(props, device) {
105
+ var availableSpecCodes = [
106
+ 'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE',
107
+ 'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR',
108
+ 'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR',
109
+ 'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC',
110
+ 'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT',
111
+ 'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR',
112
+ 'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC',
113
+ 'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE'
114
+ ];
115
+ return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BGCOLOR', device: device });
120
116
  }
121
- 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"])));
117
+ 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) {
118
+ var isEditMode = _a.isEditMode;
119
+ return (isEditMode ? 'none' : 'auto');
120
+ });
122
121
  exports.default = VideoPlayer;
123
122
  var templateObject_1;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/index.js CHANGED
@@ -4,5 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.VideoPlayer = void 0;
7
+ // export { default as VideoPlayer } from './VideoPlayer';
7
8
  var VideoPlayer_1 = require("./VideoPlayer");
8
9
  Object.defineProperty(exports, "VideoPlayer", { enumerable: true, get: function () { return __importDefault(VideoPlayer_1).default; } });
package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CB_LAYOUT_PROP_KEYS } from './layoutPropParsers/types';
2
2
  import { CB_STYLE_PROP_KEYS } from './stylePropParsers/types';
3
- 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';
3
+ 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';
4
4
  export type specTypes = CB_LAYOUT_PROP_KEYS | CB_STYLE_PROP_KEYS;
5
- 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;
5
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.5.358",
3
+ "version": "2.5.361",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",