pb-sxp-ui 1.16.24-alpha.2 → 1.16.25

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 (33) hide show
  1. package/dist/index.cjs +193 -138
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +193 -138
  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 +193 -138
  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/DiyPortalPreview/VideoWidget.js +10 -8
  14. package/es/core/components/SxpPageRender/LikeButton/index.js +18 -16
  15. package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
  16. package/es/core/components/SxpPageRender/PictureGroup/index.js +39 -13
  17. package/es/core/components/SxpPageRender/VideoWidget/index.js +32 -45
  18. package/es/core/components/SxpPageRender/WaterFall/index.js +4 -3
  19. package/es/core/components/SxpPageRender/index.js +53 -37
  20. package/es/core/context/SxpDataSourceProvider.d.ts +5 -12
  21. package/es/core/context/SxpDataSourceProvider.js +32 -10
  22. package/es/core/hooks/useEventReport.js +6 -5
  23. package/lib/core/components/DiyPortalPreview/VideoWidget.js +10 -8
  24. package/lib/core/components/SxpPageRender/LikeButton/index.js +18 -16
  25. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
  26. package/lib/core/components/SxpPageRender/PictureGroup/index.js +38 -12
  27. package/lib/core/components/SxpPageRender/VideoWidget/index.js +32 -45
  28. package/lib/core/components/SxpPageRender/WaterFall/index.js +4 -3
  29. package/lib/core/components/SxpPageRender/index.js +53 -37
  30. package/lib/core/context/SxpDataSourceProvider.d.ts +5 -12
  31. package/lib/core/context/SxpDataSourceProvider.js +32 -10
  32. package/lib/core/hooks/useEventReport.js +6 -5
  33. package/package.json +1 -1
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -42,6 +42,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
42
42
  const skipLinkRef = useRef(false);
43
43
  const [pageNum, setPageNum] = useState(2);
44
44
  const videoWidgetRef = useRef(null);
45
+ const pictureGroupRef = useRef(null);
45
46
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5 } = useSxpDataSource();
46
47
  const { backMainFeed, productView, jumpToWeb } = useEventReport();
47
48
  const isShowFingerTip = useMemo(() => {
@@ -89,7 +90,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
89
90
  (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
90
91
  }, [data, ctaType, swiperRef]);
91
92
  const handleSessionCompleted = useCallback((fk) => {
92
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
93
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
93
94
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
94
95
  let fromKName = '';
95
96
  if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
@@ -116,12 +117,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
116
117
  eventSubject: 'sessionCompleted',
117
118
  eventDescription: 'Session completed',
118
119
  contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
119
- productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
120
+ sceneId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.scene) === null || _p === void 0 ? void 0 : _p.sceneId) !== null && _q !== void 0 ? _q : '',
121
+ productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
120
122
  position: activeIndex + '',
121
123
  fromKName: fk || fromKName,
122
124
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
123
- ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
124
- traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
125
+ ctatId: (_u = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.bindCta) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '',
126
+ traceInfo: (_y = (_w = (_v = item === null || item === void 0 ? void 0 : item.video) === null || _v === void 0 ? void 0 : _v.traceInfo) !== null && _w !== void 0 ? _w : (_x = item === null || item === void 0 ? void 0 : item.product) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : ''
125
127
  }
126
128
  });
127
129
  }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
@@ -177,8 +179,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
177
179
  refreshFeSession
178
180
  ]);
179
181
  const handleSessionExpire = useCallback(debounce(() => {
180
- var _a;
182
+ var _a, _b;
181
183
  (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
184
+ (_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
182
185
  refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
183
186
  }, 1000), [handleSessionCompleted, refreshFeSession]);
184
187
  useEffect(() => {
@@ -248,18 +251,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
248
251
  return null;
249
252
  }, [globalConfig, activeIndex, visList]);
250
253
  const renderContent = useCallback((rec, index) => {
251
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
254
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
252
255
  if (rec === 'organic menu') {
253
256
  return (React.createElement(MultiPosts, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
254
257
  }
255
- if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
258
+ if (((_h = (_g = rec.video) === null || _g === void 0 ? void 0 : _g.scene) === null || _h === void 0 ? void 0 : _h.mediaUrl) || ((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.url)) {
256
259
  return (React.createElement(VideoWidget, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef })));
257
260
  }
258
- if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
259
- return (React.createElement(PictureGroup, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
261
+ if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
262
+ return (React.createElement(PictureGroup, Object.assign({ data: data }, (activeIndex === index && { ref: pictureGroupRef }), { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, swiperRef: swiperRef })));
260
263
  }
261
- if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
262
- return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
264
+ if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _l === void 0 ? void 0 : _l.length) > 0) {
265
+ return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
263
266
  var _a, _b, _c, _d, _e, _f, _g, _h;
264
267
  const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
265
268
  const Component = withBindDataSource(t);
@@ -297,7 +300,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
297
300
  };
298
301
  }, [isShowMore]);
299
302
  const renderBottom = useCallback((rec, index) => {
300
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
303
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
301
304
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
302
305
  let cta = null;
303
306
  if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
@@ -306,24 +309,27 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
306
309
  else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
307
310
  cta = '商品CTA';
308
311
  }
312
+ else if (tempMap && ((_d = Object.keys(tempMap)) === null || _d === void 0 ? void 0 : _d.includes('服务CTA')) && ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta) === null || _f === void 0 ? void 0 : _f.itemId)) {
313
+ cta = '服务CTA';
314
+ }
309
315
  else {
310
- cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
316
+ cta = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindCta) === null || _h === void 0 ? void 0 : _h.itemId;
311
317
  }
312
318
  const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
313
319
  const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
314
320
  index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
315
- ((_f = ['MultiCommodity', 'MultiCommodityDiro', 'MultiCommodityDiroNew']) === null || _f === void 0 ? void 0 : _f.includes((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.type));
321
+ ((_j = ['MultiCommodity', 'MultiCommodityDiro', 'MultiCommodityDiroNew']) === null || _j === void 0 ? void 0 : _j.includes((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type));
316
322
  return (React.createElement(React.Fragment, null,
317
323
  isNineProduct && (React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
318
- ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
319
- React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _j !== void 0 ? _j : 40}px` } },
324
+ ((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
325
+ React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _m !== void 0 ? _m : 40}px` } },
320
326
  React.createElement(Nudge, { nudge: nudge }),
321
327
  ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) && !isNineProduct ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
322
328
  React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
323
329
  React.createElement("div", null,
324
- React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
330
+ React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.title) !== null && _p !== void 0 ? _p : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
325
331
  React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
326
- React.createElement(Hashtag, { index: activeIndex, tags: (_o = (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.hashTags) !== null && _o !== void 0 ? _o : [], itemId: (_p = rec === null || rec === void 0 ? void 0 : rec.video) === null || _p === void 0 ? void 0 : _p.itemId, itemType: ((_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
332
+ React.createElement(Hashtag, { index: activeIndex, tags: (_r = (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.hashTags) !== null && _r !== void 0 ? _r : [], itemId: (_s = rec === null || rec === void 0 ? void 0 : rec.video) === null || _s === void 0 ? void 0 : _s.itemId, itemType: ((_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
327
333
  React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
328
334
  }
329
335
  return null;
@@ -362,7 +368,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
362
368
  return null;
363
369
  }, [globalConfig, waterFallData]);
364
370
  const handleViewImageStartEnd = (item) => {
365
- var _a, _b, _c, _d, _e, _f;
371
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
366
372
  if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
367
373
  const endTime = Date.now();
368
374
  const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
@@ -371,10 +377,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
371
377
  eventSubject: 'viewImageCarouselEnd',
372
378
  eventDescription: 'User end view the image carousel',
373
379
  contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
374
- contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
380
+ sceneId: (_g = (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
381
+ contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
375
382
  imageEndTime: `${endTime}`,
376
383
  playDuration: `${duration}`,
377
- contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
384
+ contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
378
385
  position: activeIndex + '',
379
386
  contentFormat: 'image',
380
387
  traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
@@ -383,7 +390,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
383
390
  }
384
391
  };
385
392
  const handleSlideSkip = (item, position) => {
386
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
393
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
387
394
  if (isPreview || waterFallData)
388
395
  return;
389
396
  const t = new Date() - curTime.current;
@@ -409,7 +416,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
409
416
  contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
410
417
  position: position + '',
411
418
  contentId: (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.itemId) !== null && _t !== void 0 ? _t : '',
412
- traceInfo: (_x = (_v = (_u = item === null || item === void 0 ? void 0 : item.video) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : (_w = item === null || item === void 0 ? void 0 : item.product) === null || _w === void 0 ? void 0 : _w.traceInfo) !== null && _x !== void 0 ? _x : '',
419
+ sceneId: (_w = (_v = (_u = item === null || item === void 0 ? void 0 : item.video) === null || _u === void 0 ? void 0 : _u.scene) === null || _v === void 0 ? void 0 : _v.sceneId) !== null && _w !== void 0 ? _w : '',
420
+ traceInfo: (_0 = (_y = (_x = item === null || item === void 0 ? void 0 : item.video) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_z = item === null || item === void 0 ? void 0 : item.product) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : '',
413
421
  contentFormat
414
422
  }
415
423
  });
@@ -419,7 +427,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
419
427
  }
420
428
  };
421
429
  const handleScrollEvent = (swiper) => {
422
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
430
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
423
431
  const item = data[swiper.previousIndex];
424
432
  if (!item)
425
433
  return;
@@ -436,11 +444,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
436
444
  eventSubject: 'scrollDown',
437
445
  eventDescription: 'User scroll down',
438
446
  contentId: (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.itemId) !== null && _e !== void 0 ? _e : '',
439
- productId: (_g = (_f = item === null || item === void 0 ? void 0 : item.product) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
447
+ sceneId: (_h = (_g = (_f = item === null || item === void 0 ? void 0 : item.video) === null || _f === void 0 ? void 0 : _f.scene) === null || _g === void 0 ? void 0 : _g.sceneId) !== null && _h !== void 0 ? _h : '',
448
+ productId: (_k = (_j = item === null || item === void 0 ? void 0 : item.product) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
440
449
  requestId: null,
441
- traceInfo: (_l = (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.traceInfo) !== null && _j !== void 0 ? _j : (_k = item === null || item === void 0 ? void 0 : item.product) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : '',
450
+ traceInfo: (_p = (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.traceInfo) !== null && _p !== void 0 ? _p : '',
442
451
  contentFormat,
443
- position: ((_m = swiper.previousIndex) !== null && _m !== void 0 ? _m : 0) + ''
452
+ position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
444
453
  }
445
454
  });
446
455
  handleViewImageStartEnd(item);
@@ -451,12 +460,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
451
460
  eventInfo: {
452
461
  eventSubject: 'scrollUp',
453
462
  eventDescription: 'User scroll up',
454
- contentId: (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.itemId) !== null && _p !== void 0 ? _p : '',
455
- productId: (_r = (_q = item.product) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
463
+ contentId: (_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '',
464
+ sceneId: (_v = (_u = (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.scene) === null || _u === void 0 ? void 0 : _u.sceneId) !== null && _v !== void 0 ? _v : '',
465
+ productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
456
466
  requestId: null,
457
- traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : '',
467
+ traceInfo: (_1 = (_z = (_y = item === null || item === void 0 ? void 0 : item.video) === null || _y === void 0 ? void 0 : _y.traceInfo) !== null && _z !== void 0 ? _z : (_0 = item === null || item === void 0 ? void 0 : item.product) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : '',
458
468
  contentFormat,
459
- position: ((_w = swiper.previousIndex) !== null && _w !== void 0 ? _w : 0) + ''
469
+ position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
460
470
  }
461
471
  });
462
472
  handleViewImageStartEnd(item);
@@ -480,7 +490,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
480
490
  }
481
491
  }, [openHashtag, data, activeIndex]);
482
492
  const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
483
- var _a, _b, _c, _d, _e, _f, _g, _h;
493
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
484
494
  const item = data[activeIndex];
485
495
  if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
486
496
  const startTime = Date.now();
@@ -490,9 +500,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
490
500
  eventSubject: 'viewImageCarouselStart',
491
501
  eventDescription: 'User start view the image carousel',
492
502
  contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
493
- contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
503
+ sceneId: (_g = (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
504
+ contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
494
505
  imageStartTime: `${startTime}`,
495
- contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
506
+ contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
496
507
  position: activeIndex + '',
497
508
  contentFormat: 'image',
498
509
  traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
@@ -502,11 +513,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
502
513
  if (enableCapi) {
503
514
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
504
515
  eventName: 'ViewContent',
505
- product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
516
+ product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
506
517
  });
507
518
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
508
519
  eventName: 'PageView',
509
- product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
520
+ product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
510
521
  });
511
522
  }
512
523
  }
@@ -598,14 +609,19 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
598
609
  swiperRef.current.swiper.allowTouchMove = true;
599
610
  }, 500);
600
611
  }, onActiveIndexChange: (swiper) => {
612
+ var _a, _b;
601
613
  setActiveIndex(swiper.activeIndex);
602
614
  if (openHashtag)
603
615
  return;
604
616
  handleScrollEvent(swiper);
605
- if (waterFallData || isEditor || isDiyH5)
617
+ if (waterFallData || isEditor)
606
618
  return;
607
619
  if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
608
620
  if (!isLoadMore) {
621
+ if (isDiyH5) {
622
+ (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
623
+ (_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
624
+ }
609
625
  setIsLoadMore(true);
610
626
  loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
611
627
  var _a;
package/es/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -21,12 +21,8 @@ export interface ISxpDataSourceContext {
21
21
  value: string;
22
22
  }>;
23
23
  }) => Promise<boolean | undefined>;
24
- mutateUnlike?: (body: {
25
- videoItemId: string;
26
- }) => Promise<boolean>;
27
- mutateLike?: (body: {
28
- content: string;
29
- }) => Promise<boolean>;
24
+ mutateUnlike?: (body: Record<string, any>) => Promise<boolean>;
25
+ mutateLike?: (body: Record<string, any>) => Promise<boolean>;
30
26
  popupDetailData?: RecItemType;
31
27
  setPopupDetailData?: React.Dispatch<React.SetStateAction<any | null>>;
32
28
  loadVideos?: (page: number) => Promise<RecommendVideoResultType | undefined>;
@@ -93,6 +89,7 @@ export interface ISxpDataSourceContext {
93
89
  getAccount?: () => Promise<any>;
94
90
  accountSonsent?: (v: boolean) => Promise<boolean>;
95
91
  isDiyH5?: boolean;
92
+ firstRtcList?: RecItemType[];
96
93
  }
97
94
  export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
98
95
  export interface SxpDataSourceProviderProps {
@@ -106,12 +103,8 @@ export interface SxpDataSourceProviderProps {
106
103
  value: string;
107
104
  }>;
108
105
  }) => Promise<boolean | undefined>;
109
- mutateUnlike: (body: {
110
- videoItemId: string;
111
- }) => Promise<boolean>;
112
- mutateLike: (body: {
113
- content: string;
114
- }) => Promise<boolean>;
106
+ mutateUnlike: (body: Record<string, any>) => Promise<boolean>;
107
+ mutateLike: (body: Record<string, any>) => Promise<boolean>;
115
108
  pageData?: PageData;
116
109
  }) => ReactNode;
117
110
  utmVal?: string;
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -20,6 +20,7 @@ export const DEFAULT_TAG = 'FOR U';
20
20
  const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, isDiyH5, onUpdateSchema, onUpdateChannel }) => {
21
21
  var _a, _b, _c, _d, _e;
22
22
  const [rtcList, setRtcList] = useState([]);
23
+ const [firstRtcList, setFirstRtcList] = useState([]);
23
24
  const [tagList, setTagList] = useState([]);
24
25
  const [loading, setLoading] = useState(true);
25
26
  const [curReqInfo, setCurReqInfo] = useState({ rtc: '', requestId: '' });
@@ -106,7 +107,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
106
107
  return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + storeAndLoadFeUserId();
107
108
  }, [bffDataSource]);
108
109
  const bffFetch = useCallback((path, options, isBota = true) => {
109
- var _a;
110
+ var _a, _b;
110
111
  if (!bffDataSource)
111
112
  return;
112
113
  const url = bffDataSource.url;
@@ -121,8 +122,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
121
122
  const value = val.split('=')[1];
122
123
  params[key] = value;
123
124
  });
125
+ options.body = Object.assign(Object.assign({}, options.body), { productUserId: fakeUserId });
124
126
  return window
125
- .fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: options.type === 'beacon' && isBota
127
+ .fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId, 'tenant-id': (_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id'] }, bffDataSource.headers), method: options.method, body: options.type === 'beacon' && isBota
126
128
  ? JSON.stringify({
127
129
  body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
128
130
  })
@@ -378,6 +380,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
378
380
  if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
379
381
  setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
380
382
  setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
383
+ if (isDiyH5) {
384
+ setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
385
+ }
381
386
  }
382
387
  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));
383
388
  if (isNotNullList) {
@@ -417,12 +422,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
417
422
  if (rtcList.length <= 0) {
418
423
  return;
419
424
  }
425
+ if (isDiyH5 && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
426
+ setRtcList(rtcList.concat(firstRtcList));
427
+ setCacheRtcList(cacheRtcList.concat(firstRtcList));
428
+ return;
429
+ }
420
430
  const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
421
431
  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 })));
422
432
  setRtcList(rtcList.concat(getFilterRecList(data)));
423
433
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
424
434
  return data;
425
- }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
435
+ }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
426
436
  const refreshFeSession = useCallback((enableReSid, event) => {
427
437
  var _a, _b, _c, _d, _e;
428
438
  let expire = false;
@@ -450,7 +460,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
450
460
  return;
451
461
  }
452
462
  if (!userInfo) {
453
- userInfo = {};
463
+ userInfo = {
464
+ productUserId: fakeUserId
465
+ };
454
466
  }
455
467
  const sessionID = storeAndLoadFeSessionId();
456
468
  const params = {};
@@ -483,7 +495,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
483
495
  layoutVariantId,
484
496
  globalConfig,
485
497
  playbookType,
486
- bffDataSource
498
+ bffDataSource,
499
+ fakeUserId
487
500
  ]);
488
501
  const getEventParamsByJson = useCallback((json, product) => {
489
502
  var _a, _b, _c;
@@ -616,13 +629,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
616
629
  }
617
630
  }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson]);
618
631
  const bffMutateLike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
632
+ body = Object.assign(Object.assign({}, body), { productUserId: fakeUserId });
619
633
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
620
634
  return res === null || res === void 0 ? void 0 : res.success;
621
- }), [bffFetch]);
635
+ }), [bffFetch, fakeUserId]);
622
636
  const bffMutateUnlike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
637
+ body = Object.assign(Object.assign({}, body), { productUserId: fakeUserId });
623
638
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/unlike', { method: 'POST', body }));
624
639
  return res === null || res === void 0 ? void 0 : res.success;
625
- }), [bffFetch]);
640
+ }), [bffFetch, fakeUserId]);
626
641
  const bffSubmitForm = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
627
642
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/customform', { method: 'POST', body }));
628
643
  return res === null || res === void 0 ? void 0 : res.success;
@@ -646,7 +661,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
646
661
  }
647
662
  }), [bffFetch, utmVal]);
648
663
  const ctaEvent = useCallback((eventInfo, rec, product, position) => {
649
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
664
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
650
665
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
651
666
  const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
652
667
  let fromKName = '';
@@ -664,7 +679,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
664
679
  }
665
680
  const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = rec === null || rec === void 0 ? void 0 : rec.product) === null || _q === void 0 ? void 0 : _q.tags;
666
681
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
667
- eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '', contentFormat })
682
+ eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', sceneId: (_x = (_w = (_v = rec === null || rec === void 0 ? void 0 : rec.video) === null || _v === void 0 ? void 0 : _v.scene) === null || _w === void 0 ? void 0 : _w.sceneId) !== null && _x !== void 0 ? _x : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_13 = (_10 = (_5 = (_1 = (_y = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _y !== void 0 ? _y : (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindCta) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : (_4 = (_3 = (_2 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.bindCta) === null || _4 === void 0 ? void 0 : _4.traceInfo) !== null && _5 !== void 0 ? _5 : (_9 = (_8 = (_7 = (_6 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _6 === void 0 ? void 0 : _6.bindProducts) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '', fromKName, fromKPage: (_14 = location === null || location === void 0 ? void 0 : location.href) !== null && _14 !== void 0 ? _14 : '', contentFormat })
668
683
  });
669
684
  }, [bffEventReport, isFromHashtag]);
670
685
  const h5EnterLink = useCallback(() => {
@@ -766,6 +781,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
766
781
  }
767
782
  setRtcList(list);
768
783
  setCacheRtcList(list);
784
+ if (isDiyH5) {
785
+ setFirstRtcList(list);
786
+ }
769
787
  bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
770
788
  if (channel) {
771
789
  const item = list === null || list === void 0 ? void 0 : list[0];
@@ -800,6 +818,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
800
818
  }
801
819
  setRtcList(list);
802
820
  setCacheRtcList(list);
821
+ if (isDiyH5) {
822
+ setFirstRtcList(list);
823
+ }
803
824
  }
804
825
  })
805
826
  .finally(() => {
@@ -863,7 +884,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
863
884
  refreshFeSession,
864
885
  getAccount,
865
886
  accountSonsent,
866
- isDiyH5
887
+ isDiyH5,
888
+ firstRtcList
867
889
  } }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (_e = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.props))) : (render({
868
890
  rtcList,
869
891
  mutateLike: bffMutateLike,
package/es/core/hooks/useEventReport.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { useCallback } from 'react';
2
- import { useSxpDataSource } from './useSxpDataSource';
3
2
  import { DEFAULT_TAG } from '../context/SxpDataSourceProvider';
3
+ import { useSxpDataSource } from './useSxpDataSource';
4
4
  export function useEventReport() {
5
5
  const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
6
6
  const jumpToWeb = useCallback((e, data, product, cta, position, traceInfo) => {
7
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
7
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
8
8
  const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
9
9
  if (i !== -1) {
10
10
  return;
@@ -37,11 +37,11 @@ export function useEventReport() {
37
37
  contentFormat = 'image';
38
38
  }
39
39
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
40
- eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', ctatId: (_0 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _0 !== void 0 ? _0 : '', traceInfo: (_13 = (_10 = (_8 = (_4 = (_1 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _1 !== void 0 ? _1 : (_3 = (_2 = data === null || data === void 0 ? void 0 : data.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProducts) === null || _6 === void 0 ? void 0 : _6[0]) === null || _7 === void 0 ? void 0 : _7.traceInfo) !== null && _8 !== void 0 ? _8 : (_9 = data === null || data === void 0 ? void 0 : data.product) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = data === null || data === void 0 ? void 0 : data.video) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '' }, (contentFormat && { contentFormat }))
40
+ eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', sceneId: (_2 = (_1 = (_0 = data === null || data === void 0 ? void 0 : data.video) === null || _0 === void 0 ? void 0 : _0.scene) === null || _1 === void 0 ? void 0 : _1.sceneId) !== null && _2 !== void 0 ? _2 : '', ctatId: (_3 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _3 !== void 0 ? _3 : '', traceInfo: (_16 = (_13 = (_11 = (_7 = (_4 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _4 !== void 0 ? _4 : (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProduct) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_10 = (_9 = (_8 = data === null || data === void 0 ? void 0 : data.video) === null || _8 === void 0 ? void 0 : _8.bindProducts) === null || _9 === void 0 ? void 0 : _9[0]) === null || _10 === void 0 ? void 0 : _10.traceInfo) !== null && _11 !== void 0 ? _11 : (_12 = data === null || data === void 0 ? void 0 : data.product) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : (_15 = (_14 = data === null || data === void 0 ? void 0 : data.video) === null || _14 === void 0 ? void 0 : _14.bindCta) === null || _15 === void 0 ? void 0 : _15.traceInfo) !== null && _16 !== void 0 ? _16 : '' }, (contentFormat && { contentFormat }))
41
41
  });
42
42
  }, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
43
43
  const productView = useCallback((data, product, cta, viewTime, position) => {
44
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
44
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
45
45
  let fromKName = '';
46
46
  if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
47
47
  fromKName = 'pdpPage';
@@ -60,8 +60,9 @@ export function useEventReport() {
60
60
  contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
61
61
  position: position + '',
62
62
  contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
63
+ sceneId: (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
63
64
  ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
64
- traceInfo: (_p = (_m = (_h = (_e = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _e !== void 0 ? _e : (_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct) === null || _g === void 0 ? void 0 : _g.traceInfo) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : (_o = data === null || data === void 0 ? void 0 : data.product) === null || _o === void 0 ? void 0 : _o.traceInfo) !== null && _p !== void 0 ? _p : '',
65
+ traceInfo: (_s = (_q = (_l = (_h = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _h !== void 0 ? _h : (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProduct) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : (_p = (_o = (_m = data === null || data === void 0 ? void 0 : data.video) === null || _m === void 0 ? void 0 : _m.bindProducts) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : (_r = data === null || data === void 0 ? void 0 : data.product) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : '',
65
66
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
66
67
  eventSubject: 'productView',
67
68
  eventDescription: 'User browsed the product'
package/lib/core/components/DiyPortalPreview/VideoWidget.js CHANGED
@@ -25,7 +25,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
25
25
  }, []);
26
26
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
27
27
  const handlePlaying = (0, react_1.useCallback)(() => {
28
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
28
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
29
29
  setIsPauseVideo(false);
30
30
  const item = data[index];
31
31
  if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
@@ -38,14 +38,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
38
38
  eventSubject: 'playVideo',
39
39
  eventDescription: 'User played the video',
40
40
  contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
41
- contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
41
+ sceneId: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.scene) === null || _k === void 0 ? void 0 : _k.sceneId) !== null && _l !== void 0 ? _l : '',
42
+ contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
42
43
  playType,
43
44
  startTime: videoCurrentTime,
44
45
  videoDuration,
45
- contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
46
+ contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
46
47
  position: index + '',
47
48
  contentFormat: 'video',
48
- traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
49
+ traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
49
50
  }
50
51
  });
51
52
  setIsFirstPlay(false);
@@ -84,7 +85,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
84
85
  }
85
86
  }, [isLoadFinish]);
86
87
  const onPause = (0, react_1.useCallback)(() => {
87
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
88
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
88
89
  const item = data[index];
89
90
  const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
90
91
  const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
@@ -95,14 +96,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
95
96
  eventSubject: 'playOverVideo',
96
97
  eventDescription: 'User finished playing the video',
97
98
  contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
98
- contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
99
+ sceneId: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.scene) === null || _k === void 0 ? void 0 : _k.sceneId) !== null && _l !== void 0 ? _l : '',
100
+ contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
99
101
  endTime: videoCurrentTime,
100
102
  videoDuration,
101
103
  playDuration,
102
- contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
104
+ contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
103
105
  position: index + '',
104
106
  contentFormat: 'video',
105
- traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
107
+ traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
106
108
  }
107
109
  });
108
110
  }