pds-dev-kit-web-test 2.5.363 → 2.5.365
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.
- package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js +7 -1
- package/dist/src/sub/DynamicLayout/components/Section/components/VideoBGMedia.d.ts +8 -0
- package/dist/src/sub/DynamicLayout/components/Section/components/VideoBGMedia.js +61 -0
- package/dist/src/sub/DynamicLayout/components/Section/util/parseSectionBackgroundMediaData.js +2 -1
- package/dist/src/sub/DynamicLayout/mock_composition.js +4 -0
- package/dist/src/sub/DynamicLayout/mock_contentsCarousel.js +2 -0
- package/dist/src/sub/DynamicLayout/mock_contentsList.js +2 -0
- package/dist/src/sub/DynamicLayout/mock_slideBanner.js +2 -0
- package/dist/src/sub/DynamicLayout/mock_video.d.ts +368 -0
- package/dist/src/sub/DynamicLayout/mock_video.js +371 -0
- package/dist/src/sub/DynamicLayout/mocks.d.ts +53 -644
- package/dist/src/sub/DynamicLayout/mocks.js +4268 -4239
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js +3 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.d.ts +5 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js +124 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/index.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/index.js +9 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts +11 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts +11 -4
- package/dist/src/sub/DynamicLayout/sections/CustomSection/types.js +1 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts +2 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts +11 -1
- package/dist/src/sub/DynamicLayout/types.d.ts +9 -0
- package/package.json +1 -1
@@ -28,6 +28,7 @@ var RichText_1 = require("./componentBlocks/RichText");
|
|
28
28
|
var SlideBanner_1 = require("./componentBlocks/SlideBanner");
|
29
29
|
var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
|
30
30
|
var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
|
31
|
+
var VideoPlayer_1 = require("./componentBlocks/VideoPlayer");
|
31
32
|
var Youtube_1 = require("./componentBlocks/Youtube");
|
32
33
|
function ComponentBlockMatcher(_a) {
|
33
34
|
var cbProps = _a.cbProps, device = _a.device, index = _a.index;
|
@@ -50,6 +51,8 @@ function ComponentBlockMatcher(_a) {
|
|
50
51
|
return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
|
51
52
|
case types_1.CB_ALL_CODES.CB_EMBED:
|
52
53
|
return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
|
54
|
+
case types_1.CB_ALL_CODES.CB_VIDEOPLAYER:
|
55
|
+
return (0, jsx_runtime_1.jsx)(VideoPlayer_1.VideoPlayer, __assign({}, propsWithValue, { index: index }));
|
53
56
|
case types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL: {
|
54
57
|
var compositions = cbProps.compositions;
|
55
58
|
return ((0, jsx_runtime_1.jsx)(ContentsCarousel_1.ContentsCarousel, __assign({}, propsWithValue, { compositions: compositions, index: index })));
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import type { CB_VIDEOPLAYER_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
|
3
|
+
type Props = CB_VIDEOPLAYER_PROPERTIES_TYPE & IndexForIntersection;
|
4
|
+
declare function VideoPlayer(props: Props): JSX.Element;
|
5
|
+
export default VideoPlayer;
|
@@ -0,0 +1,124 @@
|
|
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
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
23
|
+
var react_1 = require("react");
|
24
|
+
var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
|
25
|
+
var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
|
26
|
+
var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
|
27
|
+
var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
|
28
|
+
var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
|
29
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
30
|
+
var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
|
31
|
+
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
32
|
+
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
33
|
+
function VideoPlayer(props) {
|
34
|
+
var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
35
|
+
var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
|
36
|
+
var CB_CONTENT_PROP_VIDEO = props.CB_CONTENT_PROP_VIDEO;
|
37
|
+
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;
|
38
|
+
var isEditMode = mode === 'EDIT';
|
39
|
+
var _b = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _b.style, bgColorHoverStyle = _b.hoverStyle;
|
40
|
+
var _c = (0, util_1.parseProperties)(props, device), propsStyle = _c.style, propsHoverStyle = _c.hoverStyle, layoutStyle = _c.layout, effect = _c.effect;
|
41
|
+
var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
|
42
|
+
if (mode === 'EDIT') {
|
43
|
+
propsStyle.visibility = 'visible';
|
44
|
+
}
|
45
|
+
var cbRef = (0, react_1.useRef)(null);
|
46
|
+
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
|
47
|
+
index
|
48
|
+
]);
|
49
|
+
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
50
|
+
var effectCssProperties = isVisible ? effect : {};
|
51
|
+
var isNoneEffectType = device === 'DESKTOP'
|
52
|
+
? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
|
53
|
+
: CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
|
54
|
+
var hasEffect = !isNoneEffectType;
|
55
|
+
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
56
|
+
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;
|
57
|
+
var getVideoSrc = function () {
|
58
|
+
if (CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE === 'DATA') {
|
59
|
+
if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
|
60
|
+
return "ERROR: QueryData NOT FOUND";
|
61
|
+
}
|
62
|
+
var src = queryContext.queryData[CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA];
|
63
|
+
return src;
|
64
|
+
}
|
65
|
+
return CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR;
|
66
|
+
};
|
67
|
+
var videoRef = (0, react_1.useRef)(null);
|
68
|
+
(0, react_1.useEffect)(function () {
|
69
|
+
var video = videoRef.current;
|
70
|
+
if (!video)
|
71
|
+
return;
|
72
|
+
// 시작 시간으로 이동
|
73
|
+
var handleLoadedMetadata = function () {
|
74
|
+
if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number' && mode !== 'EDIT') {
|
75
|
+
// NOTE: autoplay일 때만.
|
76
|
+
video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
|
77
|
+
video.play();
|
78
|
+
}
|
79
|
+
};
|
80
|
+
// 구간 반복
|
81
|
+
var handleTimeUpdate = function () {
|
82
|
+
if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number' &&
|
83
|
+
typeof CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME === 'number') {
|
84
|
+
if (video.currentTime < CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME) {
|
85
|
+
video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
|
86
|
+
}
|
87
|
+
if (video.currentTime >= CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME) {
|
88
|
+
video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
|
89
|
+
video.play();
|
90
|
+
}
|
91
|
+
}
|
92
|
+
};
|
93
|
+
video.addEventListener('loadedmetadata', handleLoadedMetadata);
|
94
|
+
video.addEventListener('timeupdate', handleTimeUpdate);
|
95
|
+
return function () {
|
96
|
+
video.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
97
|
+
video.removeEventListener('timeupdate', handleTimeUpdate);
|
98
|
+
};
|
99
|
+
}, [
|
100
|
+
CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME,
|
101
|
+
CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME,
|
102
|
+
CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR
|
103
|
+
]);
|
104
|
+
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) })) }))] }));
|
105
|
+
}
|
106
|
+
function getBGColorStyles(props, device) {
|
107
|
+
var availableSpecCodes = [
|
108
|
+
'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE',
|
109
|
+
'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR',
|
110
|
+
'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR',
|
111
|
+
'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC',
|
112
|
+
'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT',
|
113
|
+
'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR',
|
114
|
+
'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC',
|
115
|
+
'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE'
|
116
|
+
];
|
117
|
+
return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BGCOLOR', device: device });
|
118
|
+
}
|
119
|
+
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) {
|
120
|
+
var isEditMode = _a.isEditMode;
|
121
|
+
return (isEditMode ? 'none' : 'auto');
|
122
|
+
});
|
123
|
+
exports.default = VideoPlayer;
|
124
|
+
var templateObject_1;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as VideoPlayer } from './VideoPlayer';
|
@@ -0,0 +1,9 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
exports.VideoPlayer = void 0;
|
7
|
+
// export { default as VideoPlayer } from './VideoPlayer';
|
8
|
+
var VideoPlayer_1 = require("./VideoPlayer");
|
9
|
+
Object.defineProperty(exports, "VideoPlayer", { enumerable: true, get: function () { return __importDefault(VideoPlayer_1).default; } });
|
@@ -29,6 +29,17 @@ export type CB_CONTENT_PROP_TWITTER = {
|
|
29
29
|
export type CB_CONTENT_PROP_CODEBLOCK = {
|
30
30
|
CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: STRING_PLAIN;
|
31
31
|
};
|
32
|
+
export type CB_CONTENT_PROP_VIDEO = {
|
33
|
+
CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA: STRING_PLAIN;
|
34
|
+
CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME: number;
|
35
|
+
CB_CONTENT_PROP_VIDEO_SPEC_MPLAY: boolean;
|
36
|
+
CB_CONTENT_PROP_VIDEO_SPEC_REPLAY: boolean;
|
37
|
+
CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: string;
|
38
|
+
CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME: number;
|
39
|
+
CB_CONTENT_PROP_VIDEO_SPEC_THUMB: string;
|
40
|
+
CB_CONTENT_PROP_VIDEO_SPEC_TYPE: 'FILE' | 'URL';
|
41
|
+
CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE: VALUE_TYPE;
|
42
|
+
};
|
32
43
|
export type CB_CONTENT_PROP_CONTENTSCAROUSEL = {
|
33
44
|
CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE: VALUE_TYPE;
|
34
45
|
CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA: STRING_PLAIN;
|
@@ -1,7 +1,7 @@
|
|
1
|
-
import type { CB_BTN_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_LIST_PROPERTIES_TYPE, CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, CB_SLIDEBANNER_PROPERTIES_TYPE } from './util/types';
|
1
|
+
import type { CB_BTN_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_LIST_PROPERTIES_TYPE, CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, CB_SLIDEBANNER_PROPERTIES_TYPE, CB_VIDEOPLAYER_PROPERTIES_TYPE } from './util/types';
|
2
2
|
import type { IComposition } from '../../../DynamicLayout/types';
|
3
3
|
export type CB_TYPES = 'GENERAL';
|
4
|
-
export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER | CB_IFRAME | CB_GROUP | CB_LIST | CB_CONTENTSCAROUSEL | CB_SLIDEBANNER;
|
4
|
+
export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER | CB_IFRAME | CB_GROUP | CB_LIST | CB_CONTENTSCAROUSEL | CB_SLIDEBANNER | CB_VIDEOPLAYER;
|
5
5
|
type GeneralCustomSectionType = {
|
6
6
|
id: number;
|
7
7
|
type: 'GENERAL';
|
@@ -19,7 +19,7 @@ export type GroupCustomSectionType = {
|
|
19
19
|
queryableDefinitionPreset: string;
|
20
20
|
dynamicLayoutSectionId: number;
|
21
21
|
};
|
22
|
-
export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE | CB_LIST_PROPERTIES_TYPE | CB_CONTENTSCAROUSEL_PROPERTIES_TYPE | CB_SLIDEBANNER_PROPERTIES_TYPE;
|
22
|
+
export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE | CB_LIST_PROPERTIES_TYPE | CB_CONTENTSCAROUSEL_PROPERTIES_TYPE | CB_SLIDEBANNER_PROPERTIES_TYPE | CB_VIDEOPLAYER_PROPERTIES_TYPE;
|
23
23
|
export type CB_TEXT_TYPE = GeneralCustomSectionType & {
|
24
24
|
componentBlockCode: CB_ALL_CODES.CB_TEXT;
|
25
25
|
jsonProperties: {
|
@@ -56,6 +56,12 @@ export type CB_YOUTUBE = GeneralCustomSectionType & {
|
|
56
56
|
data: CB_YOUTUBE_PROPERTIES_TYPE;
|
57
57
|
};
|
58
58
|
};
|
59
|
+
export type CB_VIDEOPLAYER = GeneralCustomSectionType & {
|
60
|
+
componentBlockCode: CB_ALL_CODES.CB_VIDEOPLAYER;
|
61
|
+
jsonProperties: {
|
62
|
+
data: CB_YOUTUBE_PROPERTIES_TYPE;
|
63
|
+
};
|
64
|
+
};
|
59
65
|
export type CB_TWITTER = GeneralCustomSectionType & {
|
60
66
|
componentBlockCode: CB_ALL_CODES.CB_TWITTER;
|
61
67
|
jsonProperties: {
|
@@ -107,6 +113,7 @@ export declare enum CB_ALL_CODES {
|
|
107
113
|
CB_GROUP = "CB_GROUP",
|
108
114
|
CB_LIST = "CB_LIST",
|
109
115
|
CB_CONTENTSCAROUSEL = "CB_CONTENTSCAROUSEL",
|
110
|
-
CB_SLIDEBANNER = "CB_SLIDEBANNER"
|
116
|
+
CB_SLIDEBANNER = "CB_SLIDEBANNER",
|
117
|
+
CB_VIDEOPLAYER = "CB_VIDEOPLAYER"
|
111
118
|
}
|
112
119
|
export {};
|
@@ -15,4 +15,5 @@ var CB_ALL_CODES;
|
|
15
15
|
CB_ALL_CODES["CB_LIST"] = "CB_LIST";
|
16
16
|
CB_ALL_CODES["CB_CONTENTSCAROUSEL"] = "CB_CONTENTSCAROUSEL";
|
17
17
|
CB_ALL_CODES["CB_SLIDEBANNER"] = "CB_SLIDEBANNER";
|
18
|
+
CB_ALL_CODES["CB_VIDEOPLAYER"] = "CB_VIDEOPLAYER";
|
18
19
|
})(CB_ALL_CODES = exports.CB_ALL_CODES || (exports.CB_ALL_CODES = {}));
|
@@ -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;
|
@@ -2,7 +2,7 @@ import type { CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS } from '../components/Compone
|
|
2
2
|
import type { CB_STYLE_PROP_CONTENTSLIST_SPECS } from '../components/ComponentBlock/componentBlocks/ContentsList/types';
|
3
3
|
import type { CB_STYLE_PROP_SLIDEBANNER_SPECS } from '../components/ComponentBlock/componentBlocks/SlideBanner/types';
|
4
4
|
import type { CB_TWITTER_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Twitter/types';
|
5
|
-
import type { CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER, CB_STYLE_PROP_COLOR_SPECS, CB_STYLE_PROP_TEXT_SPECS, CB_CONTENT_PROP_CONTENTSLIST } from '../components/ComponentBlock/componentBlocks/types';
|
5
|
+
import type { CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER, CB_STYLE_PROP_COLOR_SPECS, CB_STYLE_PROP_TEXT_SPECS, CB_CONTENT_PROP_CONTENTSLIST, CB_CONTENT_PROP_VIDEO } from '../components/ComponentBlock/componentBlocks/types';
|
6
6
|
import type { CB_CONTENT_PROP_YOUTUBE_TYPE, CB_STYLE_PROP_BGCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Youtube/types';
|
7
7
|
import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './contentPropParsers/parseContentVisibility';
|
8
8
|
import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './effectPropParsers/parseEffectPropEntAnim';
|
@@ -168,6 +168,16 @@ export type CB_LIST_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
|
|
168
168
|
CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
|
169
169
|
CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
|
170
170
|
};
|
171
|
+
export type CB_VIDEOPLAYER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
|
172
|
+
CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
|
173
|
+
CB_CONTENT_PROP_VIDEO: CB_CONTENT_PROP_VIDEO;
|
174
|
+
CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
|
175
|
+
CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
|
176
|
+
CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
|
177
|
+
CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
|
178
|
+
CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
|
179
|
+
CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
|
180
|
+
};
|
171
181
|
export type StyleType = {
|
172
182
|
style: CSSProperties;
|
173
183
|
};
|
@@ -5,6 +5,7 @@ import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './sections/CustomSection/util
|
|
5
5
|
import type { CB_LAYOUT_PROP_PADDING_SPECS } from './sections/CustomSection/util/layoutPropParsers/parseLayoutPropPadding';
|
6
6
|
import type { CB_STYLE_PROP_BGCOLOR_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgColor';
|
7
7
|
import type { CB_STYLE_PROP_BGOVERLAY_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay';
|
8
|
+
import type { VALUE_TYPE } from './sections/CustomSection/util/types';
|
8
9
|
import type { Block, ZOrder } from 'publ-echo/dist/lib/GridLayoutEditor/group';
|
9
10
|
import type { Ref } from 'react';
|
10
11
|
export { TypeOfSectionAction };
|
@@ -347,6 +348,8 @@ export type CB_STYLE_PROP_BGMEDIA_SPECS_BASE = {
|
|
347
348
|
CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR: string;
|
348
349
|
CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: string;
|
349
350
|
CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: number;
|
351
|
+
CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR: string;
|
352
|
+
CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE: VALUE_TYPE;
|
350
353
|
};
|
351
354
|
export type CB_STYLE_PROP_BGMEDIA_SPECS = CB_STYLE_PROP_BGMEDIA_SPECS_BASE & {
|
352
355
|
'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:HOVER': number | null | undefined;
|
@@ -377,6 +380,12 @@ export type CB_STYLE_PROP_BGMEDIA_SPECS = CB_STYLE_PROP_BGMEDIA_SPECS_BASE & {
|
|
377
380
|
'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:HOVER': string | null | undefined;
|
378
381
|
'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE': string | null | undefined;
|
379
382
|
'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE:HOVER': string | null | undefined;
|
383
|
+
'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR:HOVER'?: string | null;
|
384
|
+
'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR:MOBILE'?: string | null;
|
385
|
+
'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR:MOBILE:HOVER'?: string | null;
|
386
|
+
'CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE:HOVER'?: VALUE_TYPE | null;
|
387
|
+
'CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE:MOBILE'?: VALUE_TYPE | null;
|
388
|
+
'CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE:MOBILE:HOVER'?: VALUE_TYPE | null;
|
380
389
|
};
|
381
390
|
export interface IComposition {
|
382
391
|
id: number;
|