pb-sxp-ui 1.15.13-alpha.3 → 1.15.13-alpha.5

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 (29) hide show
  1. package/dist/index.cjs +203 -112
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +203 -112
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +203 -112
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +10 -2
  14. package/es/core/components/DiyStoryPreview/VideoWidget.js +68 -24
  15. package/es/core/components/DiyStoryPreview/index.d.ts +20 -1
  16. package/es/core/components/DiyStoryPreview/index.js +51 -20
  17. package/es/core/components/SxpPageCore/index.js +5 -5
  18. package/es/core/context/EditorContext.js +1 -1
  19. package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
  20. package/es/core/context/SxpDataSourceProvider.js +21 -22
  21. package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +10 -2
  22. package/lib/core/components/DiyStoryPreview/VideoWidget.js +67 -23
  23. package/lib/core/components/DiyStoryPreview/index.d.ts +20 -1
  24. package/lib/core/components/DiyStoryPreview/index.js +49 -18
  25. package/lib/core/components/SxpPageCore/index.js +5 -5
  26. package/lib/core/context/EditorContext.js +1 -1
  27. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
  28. package/lib/core/context/SxpDataSourceProvider.js +21 -22
  29. package/package.json +1 -1
package/lib/core/components/DiyStoryPreview/VideoWidget.js CHANGED
@@ -5,8 +5,9 @@ const react_1 = tslib_1.__importStar(require("react"));
5
5
  const react_2 = require("swiper/react");
6
6
  const useIconLink_1 = require("../SxpPageRender/useIconLink");
7
7
  const VideoPlayer_1 = require("../SxpPageRender/VideoWidget/VideoPlayer");
8
+ const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
8
9
  const hooks_1 = require("../../../core/hooks");
9
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
10
+ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
10
11
  const { isActive } = (0, react_2.useSwiperSlide)();
11
12
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
12
13
  const videoRef = (0, react_1.useRef)(null);
@@ -18,6 +19,38 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
18
19
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
19
20
  const videoId = `pb-cache-video-${index}`;
20
21
  const hlsRef = (0, react_1.useRef)(null);
22
+ const loopPlayRef = (0, react_1.useRef)(loopPlay);
23
+ (0, react_1.useEffect)(() => {
24
+ loopPlayRef.current = loopPlay;
25
+ }, [loopPlay]);
26
+ (0, react_1.useImperativeHandle)(ref, () => {
27
+ return {
28
+ play() {
29
+ var _a;
30
+ if (!videoRef.current)
31
+ return;
32
+ handleTimeUpload();
33
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
34
+ setIsPauseVideo(false);
35
+ },
36
+ pause() {
37
+ var _a;
38
+ if (!videoRef.current)
39
+ return;
40
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
41
+ setIsPauseVideo(true);
42
+ },
43
+ setLoopPlay(v) {
44
+ if (!videoRef.current)
45
+ return;
46
+ loopPlayRef.current = v;
47
+ },
48
+ isPlaying() {
49
+ var _a;
50
+ return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
51
+ }
52
+ };
53
+ });
21
54
  (0, react_1.useEffect)(() => {
22
55
  if (!videoRef.current)
23
56
  return;
@@ -47,8 +80,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
47
80
  setIsLoadFinish(true);
48
81
  }, []);
49
82
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
50
- var _a, _b, _c, _d, _e;
51
- if (!isLoadFinish)
83
+ var _a, _b, _c, _d, _e, _f;
84
+ if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
52
85
  return;
53
86
  const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
54
87
  switch (type) {
@@ -66,10 +99,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
66
99
  break;
67
100
  default:
68
101
  if (isPause) {
69
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
102
+ if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (rec === null || rec === void 0 ? void 0 : rec.endTime)) {
103
+ videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
104
+ }
105
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
70
106
  }
71
107
  else {
72
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
108
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
73
109
  }
74
110
  setIsPauseVideo(!isPause);
75
111
  break;
@@ -107,27 +143,34 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
107
143
  setFirstFrameSrc(canvas.toDataURL());
108
144
  }, []);
109
145
  const handleTimeUpload = (0, react_1.useCallback)(() => {
110
- var _a, _b, _c;
146
+ var _a;
111
147
  if (!videoRef.current)
112
148
  return;
113
- if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
114
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
115
- }
149
+ const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
150
+ handleUpdateTimeline === null || handleUpdateTimeline === void 0 ? void 0 : handleUpdateTimeline(index, localTime);
151
+ setTimeout(() => {
152
+ var _a, _b;
153
+ if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
154
+ slideSwiper();
155
+ }
156
+ });
116
157
  }, []);
117
- const handlePause = () => {
118
- var _a, _b, _c, _d, _e, _f;
119
- if (!videoRef.current || !isActive)
120
- return;
121
- if (!loopPlay)
158
+ const slideSwiper = () => {
159
+ var _a, _b, _c, _d, _e, _f, _g;
160
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
161
+ if (!loopPlayRef.current)
122
162
  return;
123
163
  if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
124
- (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
164
+ (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
125
165
  }
126
166
  else {
127
- const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
128
- (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
167
+ const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
168
+ (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
129
169
  }
130
170
  };
171
+ const handlePause = () => {
172
+ setIsPauseVideo(true);
173
+ };
131
174
  (0, react_1.useEffect)(() => {
132
175
  var _a, _b, _c;
133
176
  if (!isActive)
@@ -169,7 +212,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
169
212
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
170
213
  (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
171
214
  };
172
- }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
215
+ }, [isActive]);
173
216
  const renderPoster = (0, react_1.useMemo)(() => {
174
217
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
175
218
  return null;
@@ -191,9 +234,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
191
234
  position: 'relative',
192
235
  width: '100%',
193
236
  height,
194
- overflow: 'hidden',
195
- pointerEvents: 'none'
196
- } },
197
- react_1.default.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })));
198
- };
237
+ overflow: 'hidden'
238
+ }, onClick: handleClickVideo() },
239
+ react_1.default.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
240
+ renderPoster,
241
+ isPauseVideo && react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
242
+ });
199
243
  exports.default = (0, react_1.memo)(VideoWidget);
package/lib/core/components/DiyStoryPreview/index.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface IScene {
15
15
  startTime: number;
16
16
  traceInfo: string;
17
17
  bindProducts?: any[];
18
+ title?: string;
18
19
  }
19
20
  export type ScenesType = IScene[];
20
21
  export type DiyStoryPreviewType = ISxpPageRenderProps & {
@@ -24,6 +25,24 @@ export type DiyStoryPreviewType = ISxpPageRenderProps & {
24
25
  onActiveChange?: (v: number) => void;
25
26
  loopPlay?: boolean;
26
27
  pointerEvents?: any;
28
+ onUpdateTimeLine: (index: number, curTime: number) => void;
29
+ disabledListener?: boolean;
27
30
  };
28
- declare const _default: React.NamedExoticComponent<DiyStoryPreviewType>;
31
+ export interface IDiyStoryPreviewRef {
32
+ play: () => void;
33
+ pause: () => void;
34
+ slideTo: (n: number) => void;
35
+ isPlaying: () => boolean;
36
+ setLoopPlay: (v: boolean) => void;
37
+ }
38
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISxpPageRenderProps & {
39
+ appDomain?: string | undefined;
40
+ scenes?: ScenesType | undefined;
41
+ activeIndex?: number | undefined;
42
+ onActiveChange?: ((v: number) => void) | undefined;
43
+ loopPlay?: boolean | undefined;
44
+ pointerEvents?: any;
45
+ onUpdateTimeLine: (index: number, curTime: number) => void;
46
+ disabledListener?: boolean | undefined;
47
+ } & React.RefAttributes<IDiyStoryPreviewRef>>>;
29
48
  export default _default;
package/lib/core/components/DiyStoryPreview/index.js CHANGED
@@ -197,9 +197,10 @@ Object.values(_materials_).forEach((v) => {
197
197
  });
198
198
  const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
199
199
  const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
200
- const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none' }) => {
201
- const [loopPlaySwiper, setLooPlaySwiper] = (0, react_1.useState)(loopPlay);
200
+ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener }, ref) => {
201
+ const videoWidgetRef = (0, react_1.useRef)(null);
202
202
  const swiperRef = (0, react_1.useRef)(null);
203
+ const [curIndex, setCurIndex] = (0, react_1.useState)(0);
203
204
  const height = (0, react_1.useMemo)(() => {
204
205
  let minusHeight = 0;
205
206
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -210,6 +211,32 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
210
211
  }
211
212
  return containerHeight - minusHeight;
212
213
  }, [globalConfig, containerHeight, tagList]);
214
+ (0, react_1.useImperativeHandle)(ref, () => {
215
+ return {
216
+ play() {
217
+ var _a;
218
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
219
+ },
220
+ pause() {
221
+ var _a;
222
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
223
+ },
224
+ slideTo(n) {
225
+ var _a, _b;
226
+ if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
227
+ return;
228
+ (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(n);
229
+ },
230
+ isPlaying() {
231
+ var _a, _b;
232
+ return (_b = (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.isPlaying()) !== null && _b !== void 0 ? _b : false;
233
+ },
234
+ setLoopPlay(v) {
235
+ var _a;
236
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(v);
237
+ }
238
+ };
239
+ });
213
240
  const isVideoUrl = (url) => {
214
241
  if (url && url !== '' && typeof url === 'string') {
215
242
  const imageExtensions = ['.mp4', '.m3u8'];
@@ -223,10 +250,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
223
250
  const renderContent = (rec, index) => {
224
251
  const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
225
252
  if (isVideo) {
226
- return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
253
+ return (react_1.default.createElement(VideoWidget_1.default, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlay, handleUpdateTimeline: onUpdateTimeLine })));
227
254
  }
228
255
  else {
229
- return (react_1.default.createElement(PictureGroup_1.default, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
256
+ return (react_1.default.createElement(PictureGroup_1.default, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef }));
230
257
  }
231
258
  };
232
259
  const renderLogo = (0, react_1.useMemo)(() => {
@@ -236,14 +263,6 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
236
263
  }
237
264
  return null;
238
265
  }, [globalConfig]);
239
- const CTA = (rec, index) => {
240
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
241
- console.log(globalConfig, rec, '111');
242
- return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
243
- react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })));
244
- }
245
- return null;
246
- };
247
266
  const renderBottom = (rec, index) => {
248
267
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
249
268
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
@@ -345,6 +364,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
345
364
  var _a, _b, _c, _d;
346
365
  const rec = (0, lodash_1.cloneDeep)(recData);
347
366
  rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
367
+ rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
348
368
  return (react_1.default.createElement("div", { style: { position: 'relative' } },
349
369
  react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
350
370
  renderBottom(rec, index),
@@ -365,23 +385,34 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
365
385
  return;
366
386
  (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(activeIndex);
367
387
  }, [activeIndex]);
388
+ const handleSessionExpire = (0, react_1.useCallback)((0, lodash_1.debounce)(() => {
389
+ var _a;
390
+ (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
391
+ }, 1000), []);
368
392
  (0, react_1.useEffect)(() => {
369
- var _a, _b;
370
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
393
+ if (disabledListener)
371
394
  return;
372
- (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
373
- }, [loopPlay]);
395
+ const events = ['touchstart', 'touchcancel'];
396
+ events.forEach((event) => {
397
+ window.addEventListener(event, handleSessionExpire);
398
+ });
399
+ return () => {
400
+ events.forEach((event) => {
401
+ window.removeEventListener(event, handleSessionExpire);
402
+ });
403
+ };
404
+ }, [handleSessionExpire, disabledListener]);
374
405
  return (react_1.default.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
375
406
  react_1.default.createElement(react_2.Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
376
- setLooPlaySwiper(false);
377
407
  swiperRef.current.swiper.allowTouchMove = false;
378
408
  setTimeout(() => {
379
409
  swiperRef.current.swiper.allowTouchMove = true;
380
410
  }, 500);
381
411
  }, onActiveIndexChange: (swiper) => {
412
+ setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
382
413
  onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
383
414
  }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
384
415
  return renderView(rec, index);
385
416
  }))));
386
- };
417
+ });
387
418
  exports.default = (0, react_1.memo)(DiyStoryPreview);
package/lib/core/components/SxpPageCore/index.js CHANGED
@@ -12,19 +12,19 @@ Object.values(_materials_).forEach((v) => {
12
12
  RESOLVER[v.extend.type] = v;
13
13
  });
14
14
  const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
15
- var _a, _b, _c, _d, _e, _f;
15
+ var _a, _b, _c, _d, _e, _f, _g, _h;
16
16
  const utmVal = (0, react_1.useMemo)(() => {
17
17
  var _a;
18
18
  const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
19
19
  return searchParams;
20
20
  }, []);
21
- const [_schema, setSchema] = (0, react_1.useState)(data === null || data === void 0 ? void 0 : data.data);
21
+ const [_schema, setSchema] = (0, react_1.useState)((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
22
22
  const [channel, setChannel] = (0, react_1.useState)();
23
23
  return (react_1.default.createElement(core_1.EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
24
- react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
25
- var _a;
24
+ react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_c = (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.personalized_recommend) !== null && _c !== void 0 ? _c : maxSize, defaultSize: (_e = (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.default_recommend) !== null && _e !== void 0 ? _e : defaultSize, hashTagSize: (_g = (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.hash_tag_size) !== null && _g !== void 0 ? _g : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: Object.assign(Object.assign({}, data), { data: (_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.data }), dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
25
+ var _a, _b;
26
26
  return (react_1.default.createElement(react_1.default.Fragment, null,
27
- react_1.default.createElement(DiyStoryPreview_1.default, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents })),
27
+ react_1.default.createElement(DiyStoryPreview_1.default, Object.assign({ defaultData: Object.assign(Object.assign({}, data), { data: (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data }) }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents, loopPlay: true })),
28
28
  react_1.default.createElement(Popup_1.default, null)));
29
29
  } })));
30
30
  };
package/lib/core/context/EditorContext.js CHANGED
@@ -4,9 +4,9 @@ exports.EditorCore = exports.EditorContext = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importStar(require("react"));
6
6
  const lodash_1 = require("lodash");
7
+ const localStore_1 = require("../utils/localStore");
7
8
  const DataSourceProvider_1 = tslib_1.__importDefault(require("./DataSourceProvider"));
8
9
  const tool_1 = require("../../core/utils/tool");
9
- const localStore_1 = require("../utils/localStore");
10
10
  const item = {
11
11
  id: (0, tool_1.uuid)(6, 10),
12
12
  item: {
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -131,7 +131,7 @@ export interface SxpDataSourceProviderProps {
131
131
  isEditor?: boolean;
132
132
  utmParameter?: PageData['utm_parameter'];
133
133
  channelQueryList?: any[];
134
- data?: PageData;
134
+ data?: any;
135
135
  dataList?: PageData[];
136
136
  onUpdateSchema?: (d: PageData['data']) => void;
137
137
  onUpdateChannel?: (d: string) => void;
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -147,16 +147,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
147
147
  .catch((err) => Promise.reject(err));
148
148
  }, [bffDataSource]);
149
149
  const getRecommendVideos = (0, react_1.useCallback)((query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
150
- var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
151
- query = Object.assign({ maxSize: (_f = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _f !== void 0 ? _f : maxSize, defaultSize: (_g = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _g !== void 0 ? _g : defaultSize, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag, pageNum: query === null || query === void 0 ? void 0 : query.pageNum, contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter, productFilter: query === null || query === void 0 ? void 0 : query.productFilter }, (chatlabsId && { chatlabsId }));
150
+ var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
151
+ query = Object.assign({ maxSize: 50, defaultSize: 50, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag, pageNum: query === null || query === void 0 ? void 0 : query.pageNum, contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter, productFilter: query === null || query === void 0 ? void 0 : query.productFilter }, (chatlabsId && { chatlabsId }));
152
152
  if (channel) {
153
153
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
154
154
  }
155
155
  else if (utmVal) {
156
- const val = (_k = (_j = (_h = (0, tool_1.splitUrlParams)(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
156
+ const val = (_h = (_g = (_f = (0, tool_1.splitUrlParams)(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
157
157
  const key = val.split('=')[0];
158
158
  return key;
159
- })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
159
+ })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
160
160
  if (val)
161
161
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
162
162
  }
@@ -170,19 +170,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
170
170
  let list = [];
171
171
  let result = null;
172
172
  const recurveRecList = (query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
173
- var _v, _w, _x, _y, _z, _0;
173
+ var _t, _u, _v, _w, _x, _y;
174
174
  query.pageNum = pageNum;
175
175
  result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
176
176
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
177
177
  return undefined;
178
178
  }
179
179
  setLoading(false);
180
- list = list.concat((_y = (_x = (_w = (_v = result === null || result === void 0 ? void 0 : result.data) === null || _v === void 0 ? void 0 : _v.recList) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.call(_w, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _y !== void 0 ? _y : []);
180
+ list = list.concat((_w = (_v = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
181
181
  if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
182
182
  setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
183
183
  setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
184
184
  }
185
- const isNotNullList = (_0 = (_z = result === null || result === void 0 ? void 0 : result.data) === null || _z === void 0 ? void 0 : _z.recList) === null || _0 === void 0 ? void 0 : _0.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
185
+ const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
186
186
  if (isNotNullList) {
187
187
  pageNum = pageNum + 1;
188
188
  yield recurveRecList(query);
@@ -190,11 +190,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
190
190
  });
191
191
  yield recurveRecList(query);
192
192
  if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
193
- setCurReqInfo({ rtc: (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.rtc, requestId: (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.requestId });
193
+ setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
194
194
  return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
195
195
  }
196
196
  if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
197
- query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_o = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _o !== void 0 ? _o : 1 });
197
+ query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 1 });
198
198
  }
199
199
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
200
200
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
@@ -204,8 +204,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
204
204
  setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
205
205
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
206
206
  let list = [];
207
- list = list.concat((_s = (_r = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.filter) === null || _r === void 0 ? void 0 : _r.call(_q, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _s !== void 0 ? _s : []);
208
- const isNotNullList = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
207
+ list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
208
+ const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
209
209
  if (!isNotNullList) {
210
210
  setIsNoMoreData(true);
211
211
  }
@@ -214,12 +214,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
214
214
  return result === null || result === void 0 ? void 0 : result.data;
215
215
  }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
216
216
  const loadVideos = (0, react_1.useCallback)((pageNum) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
217
- var _1, _2, _3, _4;
217
+ var _z, _0, _1, _2;
218
218
  if (rtcList.length <= 0) {
219
219
  return;
220
220
  }
221
221
  const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
222
- const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _1 === void 0 ? void 0 : _1.itemId) && { productFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _2 === void 0 ? void 0 : _2.itemId] })), (((_3 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _3 === void 0 ? void 0 : _3.itemId) && { contentFilter: [(_4 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _4 === void 0 ? void 0 : _4.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
222
+ const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: [(_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId] })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
223
223
  setRtcList(rtcList.concat(getFilterRecList(data)));
224
224
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
225
225
  return data;
@@ -378,18 +378,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
378
378
  return res === null || res === void 0 ? void 0 : res.success;
379
379
  }), [bffFetch]);
380
380
  const bffGetTagList = (0, react_1.useCallback)((data) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
381
- var _5, _6, _7, _8, _9, _10, _11, _12;
382
- const isShowTag = !!((_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.data) === null || _5 === void 0 ? void 0 : _5.sxpPageConf) === null || _6 === void 0 ? void 0 : _6.globalConfig) === null || _7 === void 0 ? void 0 : _7.isShowTag);
381
+ var _3, _4, _5, _6, _7, _8, _9, _10;
382
+ const isShowTag = !!((_5 = (_4 = (_3 = data === null || data === void 0 ? void 0 : data.data) === null || _3 === void 0 ? void 0 : _3.sxpPageConf) === null || _4 === void 0 ? void 0 : _4.globalConfig) === null || _5 === void 0 ? void 0 : _5.isShowTag);
383
383
  if (!utmVal || !isShowTag)
384
384
  return;
385
385
  try {
386
- const val = (_10 = (_9 = (_8 = (0, tool_1.splitUrlParams)(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
386
+ const val = (_8 = (_7 = (_6 = (0, tool_1.splitUrlParams)(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
387
387
  var _a, _b;
388
388
  const key = val.split('=')[0];
389
389
  return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
390
- })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
390
+ })) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
391
391
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
392
- setTagList((_12 = (_11 = result === null || result === void 0 ? void 0 : result.data) === null || _11 === void 0 ? void 0 : _11.tags) !== null && _12 !== void 0 ? _12 : []);
392
+ setTagList((_10 = (_9 = result === null || result === void 0 ? void 0 : result.data) === null || _9 === void 0 ? void 0 : _9.tags) !== null && _10 !== void 0 ? _10 : []);
393
393
  }
394
394
  catch (e) {
395
395
  console.log('e', e);
@@ -449,10 +449,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
449
449
  });
450
450
  }, [bffEventReport]);
451
451
  const getAccount = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
452
- var _13, _14;
452
+ var _11, _12;
453
453
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
454
- setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
455
- return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
454
+ setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
455
+ return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
456
456
  }), [bffFetch]);
457
457
  const accountSonsent = (0, react_1.useCallback)((consentResult) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
458
458
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
@@ -467,7 +467,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
467
467
  if (!isShowConsent)
468
468
  h5EnterLink();
469
469
  }, [isShowConsent]);
470
- console.log(data, '111');
471
470
  (0, react_1.useEffect)(() => {
472
471
  if (isShowConsent || isPreview)
473
472
  return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.15.13-alpha.3",
3
+ "version": "1.15.13-alpha.5",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",