pds-dev-kit-web 2.1.21 → 2.1.22

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 +10 -1
  2. package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js +23 -11
  3. package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts +368 -7
  4. package/dist/src/sub/DynamicLayout/pagesPreviewMock.js +350 -5
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +2 -1
  6. package/dist/src/sub/DynamicLayout/types.d.ts +1 -0
  7. package/package.json +1 -1
  8. package/release-note.md +7 -4
package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js CHANGED
@@ -37,6 +37,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
37
37
  exports.CustomSectionBackgroundMedia = void 0;
38
38
  var jsx_runtime_1 = require("react/jsx-runtime");
39
39
  var react_1 = require("react");
40
+ var utils_1 = require("../../../../DynamicLayout/utils");
40
41
  var styled_components_1 = __importStar(require("styled-components"));
41
42
  var YouTubeIframe_1 = require("../../YouTubeIframe");
42
43
  var util_1 = require("../util");
@@ -44,6 +45,14 @@ function CustomSectionBackgroundMedia(_a) {
44
45
  var specs = _a.specs, playerId = _a.playerId, mediaType = _a.mediaType, componentStyle = _a.componentStyle, device = _a.device, backgroundRef = _a.backgroundRef;
45
46
  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;
46
47
  var _c = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _c[0], setYoutubeSize = _c[1];
48
+ var youTubeIframeKey = (0, react_1.useMemo)(function () {
49
+ return utils_1.YouTubeLinkParser.getId(String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC)) + "-" + CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY + "-" + CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME + "-" + CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME;
50
+ }, [
51
+ CB_STYLE_PROP_BGMEDIA_SPEC_YSRC,
52
+ CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY,
53
+ CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME,
54
+ CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME
55
+ ]);
47
56
  var getResponsiveYoutubeSize = (0, react_1.useCallback)(function () {
48
57
  var backgroundWrapper = backgroundRef.current;
49
58
  if (!backgroundWrapper)
@@ -90,7 +99,7 @@ function CustomSectionBackgroundMedia(_a) {
90
99
  case 'IMAGE':
91
100
  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%' } }, void 0) }), void 0)) }, void 0));
92
101
  case 'YOUTUBE':
93
- 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, { id: playerId, src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), 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 }, void 0)) }), void 0));
102
+ 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)) }), void 0));
94
103
  case 'NONE':
95
104
  default:
96
105
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js CHANGED
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
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
+ };
6
17
  var __importDefault = (this && this.__importDefault) || function (mod) {
7
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
19
  };
@@ -104,21 +115,22 @@ function YouTubeIframe(_a) {
104
115
  try {
105
116
  // api 참고
106
117
  // https://developers.google.com/youtube/player_parameters?hl=ko
118
+ var playerVars = {
119
+ cc_load_policy: 0,
120
+ playsinline: 1,
121
+ autoplay: 1,
122
+ controls: 0,
123
+ iv_load_policy: 3,
124
+ listType: 'playlist',
125
+ disablekb: 1,
126
+ playlist: videoId,
127
+ start: startSeconds
128
+ };
107
129
  var player = new window.YT.Player(PLAYER_ID, {
108
130
  videoId: videoId,
109
131
  height: customHeight || 720,
110
132
  width: customWidth || 1920,
111
- playerVars: {
112
- cc_load_policy: 0,
113
- playsinline: 1,
114
- autoplay: 1,
115
- controls: 0,
116
- iv_load_policy: 3,
117
- listType: 'playlist',
118
- disablekb: 1,
119
- playlist: videoId,
120
- start: startSeconds
121
- },
133
+ playerVars: endSeconds ? __assign(__assign({}, playerVars), { end: endSeconds }) : playerVars,
122
134
  events: {
123
135
  onReady: onPlayerReady,
124
136
  onStateChange: onPlayerStateChange,
package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export declare const pages0803PreviewSections: {
2
2
  administrativeTitle: string;
3
3
  appearanceTemplate: string;
4
- componentBlocks: {
4
+ componentBlocks: ({
5
5
  availablePlugins: never[];
6
6
  componentBlockCode: string;
7
7
  componentBlockType: string;
@@ -110,6 +110,13 @@ export declare const pages0803PreviewSections: {
110
110
  'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE': null;
111
111
  'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE:HOVER': null;
112
112
  };
113
+ CB_LAYOUT_PROP_ARRANGE?: undefined;
114
+ CB_STYLE_PROP_BORDER?: undefined;
115
+ CB_STYLE_PROP_BTNCOLOR?: undefined;
116
+ CB_STYLE_PROP_BTNTEXT?: undefined;
117
+ CB_STYLE_PROP_SHADOW?: undefined;
118
+ CB_CONTENT_PROP_IMAGE?: undefined;
119
+ CB_STYLE_PROP_IMAGE?: undefined;
113
120
  };
114
121
  minVersion: string;
115
122
  version: string;
@@ -117,7 +124,366 @@ export declare const pages0803PreviewSections: {
117
124
  queryableDefinitionPreset: string;
118
125
  queryableTapSrc: string;
119
126
  updatedAt: string;
120
- }[];
127
+ } | {
128
+ availablePlugins: never[];
129
+ componentBlockCode: string;
130
+ componentBlockType: string;
131
+ dynamicLayoutSectionId: number;
132
+ id: number;
133
+ insertedAt: string;
134
+ jsonProperties: {
135
+ currentVersion: string;
136
+ data: {
137
+ CB_CONTENT_PROP_CLINK: {
138
+ CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: boolean;
139
+ CB_CONTENT_PROP_CLINK_SPEC_SRC: string;
140
+ CB_CONTENT_PROP_CLINK_SPEC_TYPE: string;
141
+ CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC?: undefined;
142
+ };
143
+ CB_CONTENT_PROP_HOVER: {
144
+ CB_CONTENT_PROP_HOVER_SPEC_MUSE: boolean;
145
+ };
146
+ CB_CONTENT_PROP_TEXT: {
147
+ CB_CONTENT_PROP_TEXT_SPEC_TEXT: string;
148
+ };
149
+ CB_CONTENT_PROP_VISIBILITY: {
150
+ CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: boolean;
151
+ CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: boolean;
152
+ };
153
+ CB_EFFECT_PROP_ENTANIM: {
154
+ CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: string;
155
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': string;
156
+ CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: number;
157
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': number;
158
+ CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: number;
159
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': number;
160
+ CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: string;
161
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': string;
162
+ };
163
+ CB_LAYOUT_PROP_ARRANGE: {
164
+ CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: string;
165
+ 'CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL:MOBILE': string;
166
+ CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: null;
167
+ 'CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL:MOBILE': null;
168
+ };
169
+ CB_LAYOUT_PROP_PADDING: {
170
+ CB_LAYOUT_PROP_PADDING_SPEC_FIX: boolean;
171
+ 'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': null;
172
+ CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
173
+ bottom: number;
174
+ left: number;
175
+ right: number;
176
+ top: number;
177
+ };
178
+ 'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null;
179
+ };
180
+ CB_PLACEMENT_PROP_PLACEMENT: {
181
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: number;
182
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': number;
183
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: number;
184
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': number;
185
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: number;
186
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': number;
187
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: number;
188
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': number;
189
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: number;
190
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': number;
191
+ };
192
+ CB_STYLE_PROP_BORDER: {
193
+ CB_STYLE_PROP_BORDER_SPEC_COLOR: string;
194
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER': string;
195
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE': null;
196
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER': null;
197
+ CB_STYLE_PROP_BORDER_SPEC_RADIUS: {
198
+ bl: number;
199
+ br: number;
200
+ tl: number;
201
+ tr: number;
202
+ };
203
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:HOVER': {
204
+ bl: number;
205
+ br: number;
206
+ tl: number;
207
+ tr: number;
208
+ };
209
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE': null;
210
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE:HOVER': null;
211
+ CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX: boolean;
212
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:HOVER': boolean;
213
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE': null;
214
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE:HOVER': null;
215
+ CB_STYLE_PROP_BORDER_SPEC_STYLE: string;
216
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:HOVER': string;
217
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE': null;
218
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE:HOVER': null;
219
+ CB_STYLE_PROP_BORDER_SPEC_WIDTH: number;
220
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:HOVER': number;
221
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE': null;
222
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE:HOVER': null;
223
+ };
224
+ CB_STYLE_PROP_BTNCOLOR: {
225
+ CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE: number;
226
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:HOVER': number;
227
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:MOBILE': null;
228
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:MOBILE:HOVER': null;
229
+ CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR: string;
230
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:HOVER': string;
231
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:MOBILE': null;
232
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:MOBILE:HOVER': null;
233
+ CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR: string;
234
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:HOVER': string;
235
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:MOBILE': null;
236
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:MOBILE:HOVER': null;
237
+ CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC: number;
238
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:HOVER': number;
239
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:MOBILE': null;
240
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:MOBILE:HOVER': null;
241
+ CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT: string;
242
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:HOVER': string;
243
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:MOBILE': null;
244
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:MOBILE:HOVER': null;
245
+ CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR: string;
246
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:HOVER': string;
247
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:MOBILE': null;
248
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:MOBILE:HOVER': null;
249
+ CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC: number;
250
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:HOVER': number;
251
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:MOBILE': null;
252
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:MOBILE:HOVER': null;
253
+ CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE: string;
254
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:HOVER': string;
255
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:MOBILE': null;
256
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:MOBILE:HOVER': null;
257
+ };
258
+ CB_STYLE_PROP_BTNTEXT: {
259
+ CB_STYLE_PROP_BTNTEXT_SPEC_COLOR: string;
260
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:HOVER': string;
261
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:MOBILE': null;
262
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:MOBILE:HOVER': null;
263
+ CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING: number;
264
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:HOVER': number;
265
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:MOBILE': null;
266
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:MOBILE:HOVER': null;
267
+ CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT: number;
268
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:HOVER': number;
269
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:MOBILE': null;
270
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': null;
271
+ CB_STYLE_PROP_BTNTEXT_SPEC_SIZE: number;
272
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:HOVER': number;
273
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE': null;
274
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE:HOVER': null;
275
+ CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE: string;
276
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:HOVER': string;
277
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE': null;
278
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE:HOVER': null;
279
+ CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT: number;
280
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:HOVER': number;
281
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:MOBILE': null;
282
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:MOBILE:HOVER': null;
283
+ };
284
+ CB_STYLE_PROP_OPACITY: {
285
+ CB_STYLE_PROP_OPACITY_SPEC_OPACITY: number;
286
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': number;
287
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null;
288
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null;
289
+ };
290
+ CB_STYLE_PROP_SHADOW: {
291
+ CB_STYLE_PROP_SHADOW_SPEC_BLUR: number;
292
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': number;
293
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': null;
294
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': null;
295
+ CB_STYLE_PROP_SHADOW_SPEC_COLOR: string;
296
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': string;
297
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE': null;
298
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE:HOVER': null;
299
+ CB_STYLE_PROP_SHADOW_SPEC_OPACITY: number;
300
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': number;
301
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': null;
302
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': null;
303
+ CB_STYLE_PROP_SHADOW_SPEC_SPREAD: number;
304
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:HOVER': number;
305
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE': null;
306
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE:HOVER': null;
307
+ CB_STYLE_PROP_SHADOW_SPEC_TYPE: string;
308
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:HOVER': string;
309
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE': null;
310
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE:HOVER': null;
311
+ CB_STYLE_PROP_SHADOW_SPEC_X: number;
312
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:HOVER': number;
313
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE': null;
314
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE:HOVER': null;
315
+ CB_STYLE_PROP_SHADOW_SPEC_Y: number;
316
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:HOVER': number;
317
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null;
318
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null;
319
+ };
320
+ CB_EFFECT_PROP_HOVERANIM?: undefined;
321
+ CB_STYLE_PROP_TEXT?: undefined;
322
+ CB_CONTENT_PROP_IMAGE?: undefined;
323
+ CB_STYLE_PROP_IMAGE?: undefined;
324
+ };
325
+ minVersion: string;
326
+ version: string;
327
+ };
328
+ queryableDefinitionPreset: string;
329
+ queryableTapSrc: string;
330
+ updatedAt: string;
331
+ } | {
332
+ availablePlugins: never[];
333
+ componentBlockCode: string;
334
+ componentBlockType: string;
335
+ dynamicLayoutSectionId: number;
336
+ id: number;
337
+ insertedAt: string;
338
+ jsonProperties: {
339
+ currentVersion: string;
340
+ data: {
341
+ CB_CONTENT_PROP_CLINK: {
342
+ CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: boolean;
343
+ CB_CONTENT_PROP_CLINK_SPEC_SRC: string;
344
+ CB_CONTENT_PROP_CLINK_SPEC_TYPE: string;
345
+ CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC?: undefined;
346
+ };
347
+ CB_CONTENT_PROP_HOVER: {
348
+ CB_CONTENT_PROP_HOVER_SPEC_MUSE: boolean;
349
+ };
350
+ CB_CONTENT_PROP_IMAGE: {
351
+ CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR: string;
352
+ };
353
+ CB_CONTENT_PROP_VISIBILITY: {
354
+ CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: boolean;
355
+ CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: boolean;
356
+ };
357
+ CB_PLACEMENT_PROP_PLACEMENT: {
358
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: number;
359
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': number;
360
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: number;
361
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': number;
362
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: number;
363
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': number;
364
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: number;
365
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': number;
366
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: number;
367
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': number;
368
+ };
369
+ CB_STYLE_PROP_BORDER: {
370
+ CB_STYLE_PROP_BORDER_SPEC_COLOR: string;
371
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER': string;
372
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE': null;
373
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER': null;
374
+ CB_STYLE_PROP_BORDER_SPEC_RADIUS: {
375
+ bl: number;
376
+ br: number;
377
+ tl: number;
378
+ tr: number;
379
+ };
380
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:HOVER': {
381
+ bl: number;
382
+ br: number;
383
+ tl: number;
384
+ tr: number;
385
+ };
386
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE': null;
387
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE:HOVER': null;
388
+ CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX: boolean;
389
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:HOVER': boolean;
390
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE': null;
391
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE:HOVER': null;
392
+ CB_STYLE_PROP_BORDER_SPEC_STYLE: string;
393
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:HOVER': string;
394
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE': null;
395
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE:HOVER': null;
396
+ CB_STYLE_PROP_BORDER_SPEC_WIDTH: number;
397
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:HOVER': number;
398
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE': null;
399
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE:HOVER': null;
400
+ };
401
+ CB_STYLE_PROP_IMAGE: {
402
+ CB_STYLE_PROP_IMAGE_SPEC_FIT: string;
403
+ 'CB_STYLE_PROP_IMAGE_SPEC_FIT:HOVER': string;
404
+ 'CB_STYLE_PROP_IMAGE_SPEC_FIT:MOBILE': null;
405
+ 'CB_STYLE_PROP_IMAGE_SPEC_FIT:MOBILE:HOVER': null;
406
+ CB_STYLE_PROP_IMAGE_SPEC_POSITION: string;
407
+ 'CB_STYLE_PROP_IMAGE_SPEC_POSITION:HOVER': string;
408
+ 'CB_STYLE_PROP_IMAGE_SPEC_POSITION:MOBILE': null;
409
+ 'CB_STYLE_PROP_IMAGE_SPEC_POSITION:MOBILE:HOVER': null;
410
+ };
411
+ CB_STYLE_PROP_OPACITY: {
412
+ CB_STYLE_PROP_OPACITY_SPEC_OPACITY: number;
413
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': number;
414
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null;
415
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null;
416
+ };
417
+ CB_STYLE_PROP_SHADOW: {
418
+ CB_STYLE_PROP_SHADOW_SPEC_BLUR: number;
419
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': number;
420
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': null;
421
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': null;
422
+ CB_STYLE_PROP_SHADOW_SPEC_COLOR: string;
423
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': string;
424
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE': null;
425
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE:HOVER': null;
426
+ CB_STYLE_PROP_SHADOW_SPEC_OPACITY: number;
427
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': number;
428
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': null;
429
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': null;
430
+ CB_STYLE_PROP_SHADOW_SPEC_SPREAD: number;
431
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:HOVER': number;
432
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE': null;
433
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE:HOVER': null;
434
+ CB_STYLE_PROP_SHADOW_SPEC_TYPE: string;
435
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:HOVER': string;
436
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE': null;
437
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE:HOVER': null;
438
+ CB_STYLE_PROP_SHADOW_SPEC_X: number;
439
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:HOVER': number;
440
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE': null;
441
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE:HOVER': null;
442
+ CB_STYLE_PROP_SHADOW_SPEC_Y: number;
443
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:HOVER': number;
444
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null;
445
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null;
446
+ };
447
+ CB_LAYOUT_PROP_ARRANGE: {
448
+ CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: string;
449
+ 'CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL:MOBILE': string;
450
+ CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: null;
451
+ 'CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL:MOBILE': null;
452
+ };
453
+ CB_LAYOUT_PROP_PADDING: {
454
+ CB_LAYOUT_PROP_PADDING_SPEC_FIX: boolean;
455
+ 'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': null;
456
+ CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
457
+ bottom: number;
458
+ left: number;
459
+ right: number;
460
+ top: number;
461
+ };
462
+ 'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null;
463
+ };
464
+ CB_EFFECT_PROP_ENTANIM: {
465
+ CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: string;
466
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': string;
467
+ CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: number;
468
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': number;
469
+ CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: number;
470
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': number;
471
+ CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: string;
472
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': string;
473
+ };
474
+ CB_CONTENT_PROP_TEXT?: undefined;
475
+ CB_EFFECT_PROP_HOVERANIM?: undefined;
476
+ CB_STYLE_PROP_TEXT?: undefined;
477
+ CB_STYLE_PROP_BTNCOLOR?: undefined;
478
+ CB_STYLE_PROP_BTNTEXT?: undefined;
479
+ };
480
+ minVersion: string;
481
+ version: string;
482
+ };
483
+ queryableDefinitionPreset: string;
484
+ queryableTapSrc: string;
485
+ updatedAt: string;
486
+ })[];
121
487
  display: boolean;
122
488
  dlSelectorId: string;
123
489
  dynamicLayoutPageId: number;
@@ -288,11 +654,6 @@ export declare const pages0803PreviewSections: {
288
654
  'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE:HOVER': null;
289
655
  };
290
656
  };
291
- migrations: {
292
- '2023-08-03': {
293
- MG_TASK_0001_20230803_INIT: string;
294
- };
295
- };
296
657
  minVersion: string;
297
658
  version: string;
298
659
  };
package/dist/src/sub/DynamicLayout/pagesPreviewMock.js CHANGED
@@ -122,6 +122,356 @@ exports.pages0803PreviewSections = [
122
122
  queryableDefinitionPreset: 'N/A',
123
123
  queryableTapSrc: 'N/A',
124
124
  updatedAt: '2023-08-06T13:30:49'
125
+ },
126
+ {
127
+ availablePlugins: [],
128
+ componentBlockCode: 'CB_BTN',
129
+ componentBlockType: 'GENERAL',
130
+ dynamicLayoutSectionId: 18661,
131
+ id: 3700,
132
+ insertedAt: '2023-08-06T13:30:47',
133
+ jsonProperties: {
134
+ currentVersion: '2023-08-03',
135
+ data: {
136
+ CB_CONTENT_PROP_CLINK: {
137
+ CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
138
+ CB_CONTENT_PROP_CLINK_SPEC_SRC: 'https://publ.co',
139
+ CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'EXTERNAL'
140
+ },
141
+ CB_CONTENT_PROP_HOVER: {
142
+ CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
143
+ },
144
+ CB_CONTENT_PROP_TEXT: {
145
+ CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'Button'
146
+ },
147
+ CB_CONTENT_PROP_VISIBILITY: {
148
+ CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
149
+ CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true
150
+ },
151
+ CB_EFFECT_PROP_ENTANIM: {
152
+ CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'NONE',
153
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': 'NONE',
154
+ CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 0.7,
155
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': 0.7,
156
+ CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 0,
157
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': 0,
158
+ CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: 'EASEINOUT',
159
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': 'EASEINOUT'
160
+ },
161
+ CB_LAYOUT_PROP_ARRANGE: {
162
+ CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: 'CENTER',
163
+ 'CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL:MOBILE': 'MIDDLE',
164
+ CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: null,
165
+ 'CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL:MOBILE': null
166
+ },
167
+ CB_LAYOUT_PROP_PADDING: {
168
+ CB_LAYOUT_PROP_PADDING_SPEC_FIX: true,
169
+ 'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': null,
170
+ CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
171
+ bottom: 0,
172
+ left: 0,
173
+ right: 0,
174
+ top: 0
175
+ },
176
+ 'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null
177
+ },
178
+ CB_PLACEMENT_PROP_PLACEMENT: {
179
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 3,
180
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 3,
181
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 1,
182
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 1,
183
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 7,
184
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 7,
185
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 5,
186
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 5,
187
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 1,
188
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 1
189
+ },
190
+ CB_STYLE_PROP_BORDER: {
191
+ CB_STYLE_PROP_BORDER_SPEC_COLOR: '#333333FF',
192
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER': '#333333FF',
193
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE': null,
194
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER': null,
195
+ CB_STYLE_PROP_BORDER_SPEC_RADIUS: {
196
+ bl: 24,
197
+ br: 24,
198
+ tl: 24,
199
+ tr: 24
200
+ },
201
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:HOVER': {
202
+ bl: 24,
203
+ br: 24,
204
+ tl: 24,
205
+ tr: 24
206
+ },
207
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE': null,
208
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE:HOVER': null,
209
+ CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX: true,
210
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:HOVER': true,
211
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE': null,
212
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE:HOVER': null,
213
+ CB_STYLE_PROP_BORDER_SPEC_STYLE: 'NONE',
214
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:HOVER': 'NONE',
215
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE': null,
216
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE:HOVER': null,
217
+ CB_STYLE_PROP_BORDER_SPEC_WIDTH: 2,
218
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:HOVER': 2,
219
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE': null,
220
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE:HOVER': null
221
+ },
222
+ CB_STYLE_PROP_BTNCOLOR: {
223
+ CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE: 90,
224
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:HOVER': 90,
225
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:MOBILE': null,
226
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:MOBILE:HOVER': null,
227
+ CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR: '#455EEFFF',
228
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:HOVER': '#455EEFFF',
229
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:MOBILE': null,
230
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:MOBILE:HOVER': null,
231
+ CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR: '#27FFBFFF',
232
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:HOVER': '#27FFBFFF',
233
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:MOBILE': null,
234
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:MOBILE:HOVER': null,
235
+ CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC: 100,
236
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:HOVER': 100,
237
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:MOBILE': null,
238
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:MOBILE:HOVER': null,
239
+ CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT: 'LINEAR',
240
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:HOVER': 'LINEAR',
241
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:MOBILE': null,
242
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:MOBILE:HOVER': null,
243
+ CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR: '#455EEFFF',
244
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:HOVER': '#455EEFFF',
245
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:MOBILE': null,
246
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:MOBILE:HOVER': null,
247
+ CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC: 0,
248
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:HOVER': 0,
249
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:MOBILE': null,
250
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:MOBILE:HOVER': null,
251
+ CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE: 'SOLID',
252
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:HOVER': 'SOLID',
253
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:MOBILE': null,
254
+ 'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:MOBILE:HOVER': null
255
+ },
256
+ CB_STYLE_PROP_BTNTEXT: {
257
+ CB_STYLE_PROP_BTNTEXT_SPEC_COLOR: '#FFFFFFFF',
258
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:HOVER': '#FFFFFFFF',
259
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:MOBILE': null,
260
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:MOBILE:HOVER': null,
261
+ CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING: 0,
262
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:HOVER': 0,
263
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:MOBILE': null,
264
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:MOBILE:HOVER': null,
265
+ CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT: 130,
266
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:HOVER': 130,
267
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:MOBILE': null,
268
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': null,
269
+ CB_STYLE_PROP_BTNTEXT_SPEC_SIZE: 16,
270
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:HOVER': 16,
271
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE': null,
272
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE:HOVER': null,
273
+ CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE: 'PRETENDARD',
274
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:HOVER': 'PRETENDARD',
275
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE': null,
276
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE:HOVER': null,
277
+ CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT: 500,
278
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:HOVER': 500,
279
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:MOBILE': null,
280
+ 'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:MOBILE:HOVER': null
281
+ },
282
+ CB_STYLE_PROP_OPACITY: {
283
+ CB_STYLE_PROP_OPACITY_SPEC_OPACITY: 100,
284
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': 70,
285
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null,
286
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null
287
+ },
288
+ CB_STYLE_PROP_SHADOW: {
289
+ CB_STYLE_PROP_SHADOW_SPEC_BLUR: 24,
290
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': 24,
291
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': null,
292
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': null,
293
+ CB_STYLE_PROP_SHADOW_SPEC_COLOR: '#00000000',
294
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': '#00000000',
295
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE': null,
296
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE:HOVER': null,
297
+ CB_STYLE_PROP_SHADOW_SPEC_OPACITY: 30,
298
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': 30,
299
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': null,
300
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': null,
301
+ CB_STYLE_PROP_SHADOW_SPEC_SPREAD: 2,
302
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:HOVER': 2,
303
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE': null,
304
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE:HOVER': null,
305
+ CB_STYLE_PROP_SHADOW_SPEC_TYPE: 'NONE',
306
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:HOVER': 'OUTSET',
307
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE': null,
308
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE:HOVER': null,
309
+ CB_STYLE_PROP_SHADOW_SPEC_X: 0,
310
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:HOVER': 0,
311
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE': null,
312
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE:HOVER': null,
313
+ CB_STYLE_PROP_SHADOW_SPEC_Y: 12,
314
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:HOVER': 12,
315
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null,
316
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
317
+ }
318
+ },
319
+ minVersion: '2023-08-03',
320
+ version: '2023-08-03'
321
+ },
322
+ queryableDefinitionPreset: 'N/A',
323
+ queryableTapSrc: 'N/A',
324
+ updatedAt: '2023-08-06T13:30:49'
325
+ },
326
+ {
327
+ availablePlugins: [],
328
+ componentBlockCode: 'CB_IMG',
329
+ componentBlockType: 'GENERAL',
330
+ dynamicLayoutSectionId: 18661,
331
+ id: 3600,
332
+ insertedAt: '2023-08-06T13:30:47',
333
+ jsonProperties: {
334
+ currentVersion: '2023-08-03',
335
+ data: {
336
+ CB_CONTENT_PROP_CLINK: {
337
+ CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
338
+ CB_CONTENT_PROP_CLINK_SPEC_SRC: 'https://publ.co',
339
+ CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'EXTERNAL'
340
+ },
341
+ CB_CONTENT_PROP_HOVER: {
342
+ CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
343
+ },
344
+ CB_CONTENT_PROP_IMAGE: {
345
+ CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR: 'https://static.publ.site/pages-sample/img_cb_content_prop_image_spec_selector_01.png'
346
+ },
347
+ CB_CONTENT_PROP_VISIBILITY: {
348
+ CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
349
+ CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true
350
+ },
351
+ CB_PLACEMENT_PROP_PLACEMENT: {
352
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 8,
353
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 7,
354
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 2,
355
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 2,
356
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 5,
357
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 5,
358
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 3,
359
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 3,
360
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 1,
361
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 1
362
+ },
363
+ CB_STYLE_PROP_BORDER: {
364
+ CB_STYLE_PROP_BORDER_SPEC_COLOR: '#333333FF',
365
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER': '#333333FF',
366
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE': null,
367
+ 'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER': null,
368
+ CB_STYLE_PROP_BORDER_SPEC_RADIUS: {
369
+ bl: 0,
370
+ br: 0,
371
+ tl: 0,
372
+ tr: 0
373
+ },
374
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:HOVER': {
375
+ bl: 0,
376
+ br: 0,
377
+ tl: 0,
378
+ tr: 0
379
+ },
380
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE': null,
381
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE:HOVER': null,
382
+ CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX: true,
383
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:HOVER': true,
384
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE': null,
385
+ 'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE:HOVER': null,
386
+ CB_STYLE_PROP_BORDER_SPEC_STYLE: 'NONE',
387
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:HOVER': 'NONE',
388
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE': null,
389
+ 'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE:HOVER': null,
390
+ CB_STYLE_PROP_BORDER_SPEC_WIDTH: 2,
391
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:HOVER': 2,
392
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE': null,
393
+ 'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE:HOVER': null
394
+ },
395
+ CB_STYLE_PROP_IMAGE: {
396
+ CB_STYLE_PROP_IMAGE_SPEC_FIT: 'COVER',
397
+ 'CB_STYLE_PROP_IMAGE_SPEC_FIT:HOVER': 'COVER',
398
+ 'CB_STYLE_PROP_IMAGE_SPEC_FIT:MOBILE': null,
399
+ 'CB_STYLE_PROP_IMAGE_SPEC_FIT:MOBILE:HOVER': null,
400
+ CB_STYLE_PROP_IMAGE_SPEC_POSITION: 'CC',
401
+ 'CB_STYLE_PROP_IMAGE_SPEC_POSITION:HOVER': 'CC',
402
+ 'CB_STYLE_PROP_IMAGE_SPEC_POSITION:MOBILE': null,
403
+ 'CB_STYLE_PROP_IMAGE_SPEC_POSITION:MOBILE:HOVER': null
404
+ },
405
+ CB_STYLE_PROP_OPACITY: {
406
+ CB_STYLE_PROP_OPACITY_SPEC_OPACITY: 100,
407
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': 50,
408
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null,
409
+ 'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null
410
+ },
411
+ CB_STYLE_PROP_SHADOW: {
412
+ CB_STYLE_PROP_SHADOW_SPEC_BLUR: 24,
413
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': 24,
414
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': null,
415
+ 'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': null,
416
+ CB_STYLE_PROP_SHADOW_SPEC_COLOR: '#00000000',
417
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': '#00000000',
418
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE': null,
419
+ 'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE:HOVER': null,
420
+ CB_STYLE_PROP_SHADOW_SPEC_OPACITY: 30,
421
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': 30,
422
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': null,
423
+ 'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': null,
424
+ CB_STYLE_PROP_SHADOW_SPEC_SPREAD: 2,
425
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:HOVER': 2,
426
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE': null,
427
+ 'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE:HOVER': null,
428
+ CB_STYLE_PROP_SHADOW_SPEC_TYPE: 'NONE',
429
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:HOVER': 'OUTSET',
430
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE': null,
431
+ 'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE:HOVER': null,
432
+ CB_STYLE_PROP_SHADOW_SPEC_X: 0,
433
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:HOVER': 0,
434
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE': null,
435
+ 'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE:HOVER': null,
436
+ CB_STYLE_PROP_SHADOW_SPEC_Y: 12,
437
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:HOVER': 12,
438
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null,
439
+ 'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
440
+ },
441
+ CB_LAYOUT_PROP_ARRANGE: {
442
+ CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: 'CENTER',
443
+ 'CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL:MOBILE': 'MIDDLE',
444
+ CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: null,
445
+ 'CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL:MOBILE': null
446
+ },
447
+ CB_LAYOUT_PROP_PADDING: {
448
+ CB_LAYOUT_PROP_PADDING_SPEC_FIX: true,
449
+ 'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': null,
450
+ CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
451
+ bottom: 0,
452
+ left: 0,
453
+ right: 0,
454
+ top: 0
455
+ },
456
+ 'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null
457
+ },
458
+ CB_EFFECT_PROP_ENTANIM: {
459
+ CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'NONE',
460
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': 'NONE',
461
+ CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 0.7,
462
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': 0.7,
463
+ CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 0,
464
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': 0,
465
+ CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: 'EASEINOUT',
466
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': 'EASEINOUT'
467
+ }
468
+ },
469
+ minVersion: '2023-08-03',
470
+ version: '2023-08-03'
471
+ },
472
+ queryableDefinitionPreset: 'N/A',
473
+ queryableTapSrc: 'N/A',
474
+ updatedAt: '2023-08-06T13:30:49'
125
475
  }
126
476
  ],
127
477
  display: true,
@@ -294,11 +644,6 @@ exports.pages0803PreviewSections = [
294
644
  'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE:HOVER': null
295
645
  }
296
646
  },
297
- migrations: {
298
- '2023-08-03': {
299
- MG_TASK_0001_20230803_INIT: '2023-08-06'
300
- }
301
- },
302
647
  minVersion: '2023-08-03',
303
648
  version: '2023-08-03'
304
649
  },
package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js CHANGED
@@ -170,13 +170,14 @@ function CustomSection(props) {
170
170
  setRowHeight(cellWidth * 0.56);
171
171
  };
172
172
  var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
173
+ var breakpoints = device === 'DESKTOP' ? { lg: 100, sm: 0 } : { lg: 1200, sm: 480 };
173
174
  return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(S_gleStyles, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
174
175
  minHeight: customSectionStyles.minHeight,
175
176
  paddingTop: padding.top,
176
177
  paddingBottom: padding.bottom,
177
178
  paddingRight: padding.right,
178
179
  paddingLeft: padding.left
179
- } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: { lg: 800, sm: 480 }, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
180
+ } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
180
181
  width: customSectionStyles.width,
181
182
  minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX
182
183
  }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: (componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
package/dist/src/sub/DynamicLayout/types.d.ts CHANGED
@@ -223,6 +223,7 @@ export declare type DynamicLayoutProps = {
223
223
  onClickEditSection?: (section: ISection) => void;
224
224
  sectionActionHandler?: (action: TypeOfSectionAction) => void;
225
225
  programmedSectionComponents?: IProgrammedSectionComponents;
226
+ width?: number;
226
227
  };
227
228
  export declare type NavHandlerAction = {
228
229
  openNewTab: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.1.21",
3
+ "version": "2.1.22",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,9 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.1.21]
3
- ## urgent|https://design.storybook.publ.biz/
2
+ ## [v2.1.22]
3
+ ## daily|https://design.storybook.publ.biz/
4
4
 
5
- ### Color
6
- * 컬러 키 값 23.08.07 15시 57분 기준 싱크
5
+ ### sub
6
+ * DynamicLayout - custom section
7
+ * Desktop의 최소 너비를 너비 설정 최소 너비(200)보다 작게 설정하여 200까지는 lg를 적용시킬 수 있도록 수정
8
+ * BGMedia의 값이 Youtube 타입일 경우, spec panel에서 해당 영상의 상세 옵션(재생 주소, 루프 모드, 시작시간, 종료시간) 설정을 변경하였을 때 대상
9
+ * section이 리렌더 되지 않는 현상을 수정loopMode가 ‘none’인 경우에 대응하기 위하여 최초 플레이어 생성시에 endSeconds를 함께 넣어주는 경우를 추가