pb-sxp-ui 1.15.15-alpha.2 → 1.15.16-alpha.2

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 (51) hide show
  1. package/dist/index.cjs +146 -785
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +145 -783
  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 +146 -785
  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/SxpPageCore/index.d.ts +0 -1
  14. package/es/core/components/SxpPageCore/index.js +7 -7
  15. package/es/core/components/SxpPageRender/ExpandableText.js +2 -10
  16. package/es/core/components/SxpPageRender/RenderCard.js +4 -4
  17. package/es/core/context/EditorContext.js +1 -1
  18. package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
  19. package/es/core/context/SxpDataSourceProvider.js +58 -32
  20. package/es/index.d.ts +0 -1
  21. package/es/index.js +0 -1
  22. package/es/materials/sxp/template/MultiCommodity/index.js +1 -1
  23. package/es/materials/sxp/template/MultiCommodityDiro/index.js +1 -2
  24. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +1 -2
  25. package/es/materials/sxp/template/components/EventProvider.js +2 -2
  26. package/lib/core/components/SxpPageCore/index.d.ts +0 -1
  27. package/lib/core/components/SxpPageCore/index.js +7 -7
  28. package/lib/core/components/SxpPageRender/ExpandableText.js +2 -10
  29. package/lib/core/components/SxpPageRender/RenderCard.js +4 -4
  30. package/lib/core/context/EditorContext.js +1 -1
  31. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
  32. package/lib/core/context/SxpDataSourceProvider.js +58 -32
  33. package/lib/index.d.ts +0 -1
  34. package/lib/index.js +1 -3
  35. package/lib/materials/sxp/template/MultiCommodity/index.js +1 -1
  36. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +1 -2
  37. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +1 -2
  38. package/lib/materials/sxp/template/components/EventProvider.js +2 -2
  39. package/package.json +1 -1
  40. package/es/core/components/DiyStoryPreview/PictureGroup.d.ts +0 -16
  41. package/es/core/components/DiyStoryPreview/PictureGroup.js +0 -34
  42. package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +0 -27
  43. package/es/core/components/DiyStoryPreview/VideoWidget.js +0 -195
  44. package/es/core/components/DiyStoryPreview/index.d.ts +0 -51
  45. package/es/core/components/DiyStoryPreview/index.js +0 -411
  46. package/lib/core/components/DiyStoryPreview/PictureGroup.d.ts +0 -16
  47. package/lib/core/components/DiyStoryPreview/PictureGroup.js +0 -37
  48. package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +0 -27
  49. package/lib/core/components/DiyStoryPreview/VideoWidget.js +0 -198
  50. package/lib/core/components/DiyStoryPreview/index.d.ts +0 -51
  51. package/lib/core/components/DiyStoryPreview/index.js +0 -414
package/dist/pb-ui.js CHANGED
@@ -444,6 +444,39 @@
444
444
  })
445
445
  };
446
446
 
447
+ function useEditor() {
448
+ return React.useContext(EditorContext);
449
+ }
450
+
451
+ function useDataSource() {
452
+ return React.useContext(DataSourceContext);
453
+ }
454
+
455
+ const feRealSessionIdKey = 'feRealSessionIdKey';
456
+ const generateFeSessionId = () => {
457
+ const uid = getUid(); // 32位长度
458
+ const timestamp = Date.now(); // 13位长度
459
+ const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
460
+ return result;
461
+ };
462
+ // 生成或者获取sessionID
463
+ const storeAndLoadFeSessionId = () => {
464
+ let result = getFeSessionId();
465
+ if (!result) {
466
+ result = generateFeSessionId();
467
+ window.localStorage.setItem(feRealSessionIdKey, result);
468
+ }
469
+ return result;
470
+ };
471
+ const refreshFeSessionId = () => {
472
+ const result = generateFeSessionId();
473
+ window.localStorage.setItem(feRealSessionIdKey, result);
474
+ };
475
+ // 获取 sessionID
476
+ const getFeSessionId = () => {
477
+ return window.localStorage.getItem(feRealSessionIdKey);
478
+ };
479
+
447
480
  /*
448
481
  * @Author: binruan@chatlabs.com
449
482
  * @Date: 2024-03-20 10:27:31
@@ -495,39 +528,6 @@
495
528
  window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
496
529
  };
497
530
 
498
- function useEditor() {
499
- return React.useContext(EditorContext);
500
- }
501
-
502
- function useDataSource() {
503
- return React.useContext(DataSourceContext);
504
- }
505
-
506
- const feRealSessionIdKey = 'feRealSessionIdKey';
507
- const generateFeSessionId = () => {
508
- const uid = getUid(); // 32位长度
509
- const timestamp = Date.now(); // 13位长度
510
- const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
511
- return result;
512
- };
513
- // 生成或者获取sessionID
514
- const storeAndLoadFeSessionId = () => {
515
- let result = getFeSessionId();
516
- if (!result) {
517
- result = generateFeSessionId();
518
- window.localStorage.setItem(feRealSessionIdKey, result);
519
- }
520
- return result;
521
- };
522
- const refreshFeSessionId = () => {
523
- const result = generateFeSessionId();
524
- window.localStorage.setItem(feRealSessionIdKey, result);
525
- };
526
- // 获取 sessionID
527
- const getFeSessionId = () => {
528
- return window.localStorage.getItem(feRealSessionIdKey);
529
- };
530
-
531
531
  /*
532
532
  * @Author: binruan@chatlabs.com
533
533
  * @Date: 2024-03-20 10:27:31
@@ -740,8 +740,12 @@
740
740
  // Beacon API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。
741
741
  if (options.type === 'beacon' && navigator.sendBeacon) {
742
742
  return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
743
- JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
744
- ], { type: 'application/json;charset=UTF-8' }));
743
+ JSON.stringify({
744
+ body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
745
+ })
746
+ ], {
747
+ type: 'application/json;charset=UTF-8'
748
+ }));
745
749
  }
746
750
  return window
747
751
  .fetch(`${url}/api/${path}`, {
@@ -772,16 +776,17 @@
772
776
  }, [bffDataSource]);
773
777
  // 获取推荐视频数据
774
778
  const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
775
- var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
776
- 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 }));
779
+ var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
780
+ 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 }));
777
781
  if (channel) {
778
782
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
779
783
  }
780
784
  else if (utmVal) {
781
- const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
785
+ const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
786
+ var _a, _b;
782
787
  const key = val.split('=')[0];
783
- return key;
784
- })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
788
+ 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);
789
+ })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
785
790
  if (val)
786
791
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
787
792
  }
@@ -795,19 +800,19 @@
795
800
  let list = [];
796
801
  let result = null;
797
802
  const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
798
- var _t, _u, _v, _w, _x, _y;
803
+ var _v, _w, _x, _y, _z, _0;
799
804
  query.pageNum = pageNum;
800
805
  result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
801
806
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
802
807
  return undefined;
803
808
  }
804
809
  setLoading(false);
805
- 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 : []);
810
+ 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 : []);
806
811
  if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
807
812
  setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
808
813
  setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
809
814
  }
810
- 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));
815
+ 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));
811
816
  if (isNotNullList) {
812
817
  pageNum = pageNum + 1;
813
818
  yield recurveRecList(query);
@@ -815,13 +820,13 @@
815
820
  });
816
821
  yield recurveRecList(query);
817
822
  if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
818
- 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 });
823
+ 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 });
819
824
  return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
820
825
  }
821
826
  if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
822
- 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 });
827
+ 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 });
823
828
  }
824
- const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
829
+ const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
825
830
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
826
831
  return undefined;
827
832
  }
@@ -829,8 +834,8 @@
829
834
  setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
830
835
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
831
836
  let list = [];
832
- 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 : []);
833
- 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));
837
+ 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 : []);
838
+ 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));
834
839
  if (!isNotNullList) {
835
840
  setIsNoMoreData(true);
836
841
  }
@@ -839,12 +844,12 @@
839
844
  return result === null || result === void 0 ? void 0 : result.data;
840
845
  }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
841
846
  const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
842
- var _z, _0, _1, _2;
847
+ var _1, _2, _3, _4;
843
848
  if (rtcList.length <= 0) {
844
849
  return;
845
850
  }
846
851
  const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
847
- 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 })));
852
+ 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 })));
848
853
  setRtcList(rtcList.concat(getFilterRecList(data)));
849
854
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
850
855
  return data;
@@ -901,7 +906,7 @@
901
906
  console.log('userInfo:', userInfo);
902
907
  console.log('eventInfo:', ef);
903
908
  console.log('========= 结束 =========');
904
- return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/CLD/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}`, {
909
+ return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/cld/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
905
910
  method: 'POST',
906
911
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
907
912
  type: 'beacon'
@@ -917,20 +922,33 @@
917
922
  bffDataSource
918
923
  ]);
919
924
  const bffFbReport = React.useCallback(({ eventName, product }) => {
920
- var _a, _b, _c, _d, _e, _f;
925
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
926
+ if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
927
+ window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view', {
928
+ page_location: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
929
+ page_title: document === null || document === void 0 ? void 0 : document.title
930
+ });
931
+ }
932
+ if (eventName && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
933
+ window === null || window === void 0 ? void 0 : window.fbq('track', eventName, {
934
+ page_path: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.pathname,
935
+ page_location: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
936
+ page_title: document === null || document === void 0 ? void 0 : document.title
937
+ });
938
+ }
921
939
  if (!enableReportEvent ||
922
940
  !enabledMetaConversionApi ||
923
941
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
924
- !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
942
+ !((_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _d === void 0 ? void 0 : _d[eventName])) {
925
943
  return;
926
944
  }
927
- const jsonParams = lodash.cloneDeep((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]);
945
+ const jsonParams = lodash.cloneDeep((_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _e === void 0 ? void 0 : _e[eventName]);
928
946
  const urlParams = new URLSearchParams(window.location.search);
929
947
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
930
948
  const fix_par = {
931
- event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
949
+ event_source_url: (_f = window === null || window === void 0 ? void 0 : window.location) === null || _f === void 0 ? void 0 : _f.href,
932
950
  external_id: fakeUserId,
933
- client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
951
+ client_user_agent: (_h = (_g = window === null || window === void 0 ? void 0 : window.navigator) === null || _g === void 0 ? void 0 : _g.userAgent) !== null && _h !== void 0 ? _h : '',
934
952
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
935
953
  fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
936
954
  time: Math.floor(Date.now() / 1000)
@@ -981,7 +999,15 @@
981
999
  }
982
1000
  };
983
1001
  getEventParams(jsonParams);
984
- return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/FB/${(_f = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _f === void 0 ? void 0 : _f['x-app-id']}/${eventName}`, {
1002
+ const params = {};
1003
+ const queryString = location.search.slice(1);
1004
+ (_j = splitUrlParams(queryString)) === null || _j === void 0 ? void 0 : _j.map((val) => {
1005
+ const key = val.split('=')[0];
1006
+ const value = val.split('=')[1];
1007
+ params[key] = value;
1008
+ });
1009
+ const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
1010
+ return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_k = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _k === void 0 ? void 0 : _k['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
985
1011
  method: 'POST',
986
1012
  body: jsonParams,
987
1013
  type: 'beacon'
@@ -1009,18 +1035,18 @@
1009
1035
  }), [bffFetch]);
1010
1036
  // 获取 Tag
1011
1037
  const bffGetTagList = React.useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
1012
- var _3, _4, _5, _6, _7, _8, _9, _10;
1013
- 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);
1038
+ var _5, _6, _7, _8, _9, _10, _11, _12;
1039
+ 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);
1014
1040
  if (!utmVal || !isShowTag)
1015
1041
  return;
1016
1042
  try {
1017
- const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
1043
+ const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
1018
1044
  var _a, _b;
1019
1045
  const key = val.split('=')[0];
1020
1046
  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);
1021
- })) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
1047
+ })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
1022
1048
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
1023
- 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 : []);
1049
+ 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 : []);
1024
1050
  }
1025
1051
  catch (e) {
1026
1052
  console.log('e', e);
@@ -1080,10 +1106,10 @@
1080
1106
  });
1081
1107
  }, [bffEventReport]);
1082
1108
  const getAccount = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
1083
- var _11, _12;
1109
+ var _13, _14;
1084
1110
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
1085
- setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
1086
- return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
1111
+ setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
1112
+ return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
1087
1113
  }), [bffFetch]);
1088
1114
  const accountSonsent = React.useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
1089
1115
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
@@ -1478,7 +1504,7 @@
1478
1504
  React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
1479
1505
  });
1480
1506
 
1481
- var index$3 = /*#__PURE__*/Object.freeze({
1507
+ var index$2 = /*#__PURE__*/Object.freeze({
1482
1508
  __proto__: null,
1483
1509
  EditorCore: EditorCore
1484
1510
  });
@@ -10098,15 +10124,7 @@
10098
10124
  wordBreak: 'break-word'
10099
10125
  }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
10100
10126
  React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
10101
- text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
10102
- textDecoration: 'underline',
10103
- cursor: 'pointer',
10104
- outline: 'none',
10105
- border: 'none',
10106
- boxSizing: 'content-box',
10107
- padding: 0,
10108
- background: 'transparent'
10109
- }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
10127
+ text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
10110
10128
  __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
10111
10129
  } }))));
10112
10130
  };
@@ -12464,7 +12482,7 @@ Made in Italy` })));
12464
12482
  const handleClick = lodash.throttle((e) => {
12465
12483
  var _a, _b, _c, _d, _e, _f;
12466
12484
  e.preventDefault();
12467
- const item = multItem || ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video);
12485
+ const item = multItem ? multItem : (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
12468
12486
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
12469
12487
  eventSubject: 'clickCta',
12470
12488
  eventDescription: 'User clicked the CTA'
@@ -12491,7 +12509,7 @@ Made in Italy` })));
12491
12509
  setElement(null);
12492
12510
  }
12493
12511
  }, [element, popup]);
12494
- return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ outline: 'none', border: 'none', boxSizing: 'content-box', padding: 0, background: 'transparent', display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
12512
+ return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
12495
12513
  };
12496
12514
  var EventProvider$1 = React.memo(EventProvider);
12497
12515
 
@@ -13087,7 +13105,6 @@ Made in Italy` })));
13087
13105
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
13088
13106
  const { sxpParameter } = useSxpDataSource();
13089
13107
  const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
13090
- console.log(recData, '222');
13091
13108
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
13092
13109
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
13093
13110
  return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -13294,7 +13311,6 @@ Made in Italy` })));
13294
13311
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
13295
13312
  const { sxpParameter } = useSxpDataSource();
13296
13313
  const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
13297
- console.log(recData, '333');
13298
13314
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
13299
13315
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
13300
13316
  return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -17570,15 +17586,15 @@ Made in Italy` })));
17570
17586
  Swipe: Swipe
17571
17587
  });
17572
17588
 
17573
- const defaultUnLikeIconPath$2 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
17574
- const defaultLikeIconPath$2 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
17589
+ const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
17590
+ const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
17575
17591
  const LikeButton = (_a) => {
17576
17592
  var _b;
17577
17593
  var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
17578
17594
  const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
17579
17595
  const [state, setState] = React.useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
17580
- const likeIcon = useIconLink(defaultLikeIconPath$2);
17581
- const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
17596
+ const likeIcon = useIconLink(defaultLikeIconPath$1);
17597
+ const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
17582
17598
  const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
17583
17599
  var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
17584
17600
  if (state) {
@@ -17669,7 +17685,7 @@ Made in Italy` })));
17669
17685
  };
17670
17686
  })();
17671
17687
 
17672
- const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
17688
+ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
17673
17689
  const [isPauseVideo, setIsPauseVideo] = React.useState(false);
17674
17690
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
17675
17691
  const videoStartTime = React.useRef(0);
@@ -18014,7 +18030,7 @@ Made in Italy` })));
18014
18030
  renderLoading,
18015
18031
  isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
18016
18032
  };
18017
- var VideoWidget$5 = React.memo(VideoWidget$4);
18033
+ var VideoWidget$3 = React.memo(VideoWidget$2);
18018
18034
 
18019
18035
  const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
18020
18036
  const [isTrue, setIsTure] = React.useState(defaultValue);
@@ -18103,7 +18119,7 @@ Made in Italy` })));
18103
18119
  }, onLoad: onShowFirstImage }))));
18104
18120
  };
18105
18121
 
18106
- const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
18122
+ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
18107
18123
  var _a, _b;
18108
18124
  const { isActive } = useSwiperSlide();
18109
18125
  const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -18197,7 +18213,7 @@ Made in Italy` })));
18197
18213
  React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
18198
18214
  }))));
18199
18215
  };
18200
- var PictureGroup$5 = React.memo(PictureGroup$4);
18216
+ var PictureGroup$3 = React.memo(PictureGroup$2);
18201
18217
 
18202
18218
  /*
18203
18219
  * @Author: binruan@chatlabs.com
@@ -18313,7 +18329,7 @@ Made in Italy` })));
18313
18329
  * @Author: binruan@chatlabs.com
18314
18330
  * @Date: 2023-12-26 16:11:34
18315
18331
  * @LastEditors: binruan@chatlabs.com
18316
- * @LastEditTime: 2025-03-28 14:46:08
18332
+ * @LastEditTime: 2024-10-31 10:30:55
18317
18333
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
18318
18334
  *
18319
18335
  */
@@ -18323,10 +18339,10 @@ Made in Italy` })));
18323
18339
  return null;
18324
18340
  const renderComp = React.useMemo(() => {
18325
18341
  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;
18326
- // 如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
18342
+ //如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
18327
18343
  if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
18328
18344
  return;
18329
- // 默认不渲染category为cta类型的组件,该类型的组件只用于某一处
18345
+ //默认不渲染category为cta类型的组件,该类型的组件只用于某一处
18330
18346
  if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
18331
18347
  return;
18332
18348
  if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
@@ -18343,10 +18359,10 @@ Made in Italy` })));
18343
18359
  const Component = withBindDataSource(t);
18344
18360
  const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
18345
18361
  const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
18346
- const style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
18362
+ let style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
18347
18363
  if (style.hasOwnProperty('backdropFilter')) {
18348
- const sbf = style.backdropFilter;
18349
- style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
18364
+ let sbf = style['backdropFilter'];
18365
+ style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
18350
18366
  }
18351
18367
  return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
18352
18368
  }
@@ -18707,10 +18723,10 @@ Made in Italy` })));
18707
18723
  return (React.createElement(MultiPosts$2, 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)));
18708
18724
  }
18709
18725
  if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
18710
- return (React.createElement(VideoWidget$5, { key: isReload, 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 }));
18726
+ return (React.createElement(VideoWidget$3, { key: isReload, 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 }));
18711
18727
  }
18712
18728
  if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
18713
- return (React.createElement(PictureGroup$5, { 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 }));
18729
+ return (React.createElement(PictureGroup$3, { 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 }));
18714
18730
  }
18715
18731
  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) {
18716
18732
  return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
@@ -19078,9 +19094,9 @@ Made in Italy` })));
19078
19094
  React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
19079
19095
  openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0 } })))))));
19080
19096
  };
19081
- var index$2 = React.memo(SxpPageRender);
19097
+ var SxpPageRender$1 = React.memo(SxpPageRender);
19082
19098
 
19083
- const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
19099
+ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
19084
19100
  return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
19085
19101
  clickable: true,
19086
19102
  bulletActiveClass: 'swipe-item-active-bullet',
@@ -19090,9 +19106,9 @@ Made in Italy` })));
19090
19106
  React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
19091
19107
  })));
19092
19108
  };
19093
- var PictureGroup$3 = React.memo(PictureGroup$2);
19109
+ var PictureGroup$1 = React.memo(PictureGroup);
19094
19110
 
19095
- const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
19111
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
19096
19112
  const [isPauseVideo, setIsPauseVideo] = React.useState(false);
19097
19113
  const videoRef = React.useRef(null);
19098
19114
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
@@ -19322,14 +19338,14 @@ Made in Italy` })));
19322
19338
  renderPoster,
19323
19339
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
19324
19340
  };
19325
- var VideoWidget$3 = React.memo(VideoWidget$2);
19341
+ var VideoWidget$1 = React.memo(VideoWidget);
19326
19342
 
19327
- const RESOLVER$2 = {};
19343
+ const RESOLVER$1 = {};
19328
19344
  Object.values(_materials_).forEach((v) => {
19329
- RESOLVER$2[v.extend.type] = v;
19345
+ RESOLVER$1[v.extend.type] = v;
19330
19346
  });
19331
- const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19332
- const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19347
+ const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19348
+ const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19333
19349
  const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
19334
19350
  const height = React.useMemo(() => {
19335
19351
  let minusHeight = 0;
@@ -19344,16 +19360,16 @@ Made in Italy` })));
19344
19360
  const renderContent = (rec, index) => {
19345
19361
  var _a, _b, _c, _d;
19346
19362
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
19347
- return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
19363
+ return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
19348
19364
  }
19349
19365
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
19350
- return (React.createElement(PictureGroup$3, { 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, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
19366
+ return (React.createElement(PictureGroup$1, { 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, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
19351
19367
  }
19352
19368
  if (rec.product) {
19353
19369
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
19354
19370
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
19355
19371
  var _a, _b, _c, _d, _e, _f, _g, _h;
19356
- const t = RESOLVER$2[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
19372
+ const t = RESOLVER$1[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
19357
19373
  const Component = withBindDataSource(t);
19358
19374
  const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
19359
19375
  return (React.createElement(Component, Object.assign({ key: `${index}${idx}`, textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle), bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {},
@@ -19375,7 +19391,7 @@ Made in Italy` })));
19375
19391
  const CTA = (rec, index) => {
19376
19392
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
19377
19393
  return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
19378
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$2 })));
19394
+ React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
19379
19395
  }
19380
19396
  return null;
19381
19397
  };
@@ -19393,8 +19409,8 @@ Made in Italy` })));
19393
19409
  }
19394
19410
  return null;
19395
19411
  };
19396
- const likeIcon = useIconLink(defaultLikeIconPath$1, appDomain);
19397
- const unlikeIcon = useIconLink(defaultUnLikeIconPath$1, appDomain);
19412
+ const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
19413
+ const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
19398
19414
  const renderLikeButton = (rec, index) => {
19399
19415
  var _a, _b, _c, _d;
19400
19416
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
@@ -19444,673 +19460,11 @@ Made in Italy` })));
19444
19460
  };
19445
19461
  var index$1 = React.memo(DiyPortalPreview);
19446
19462
 
19447
- const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
19448
- const { isActive } = useSwiperSlide();
19449
- const [isload, setIsLoad] = React.useState(false);
19450
- React.useEffect(() => {
19451
- if (isActive && isload && loopPlay) {
19452
- setTimeout(() => {
19453
- var _a, _b, _c, _d;
19454
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
19455
- (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
19456
- }
19457
- else {
19458
- const i = (_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.activeIndex;
19459
- (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
19460
- }
19461
- }, 3000);
19462
- }
19463
- }, [isActive, isload, data, index, swiperRef, loopPlay]);
19464
- const loadFinishImage = () => {
19465
- setIsLoad(true);
19466
- };
19467
- return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
19468
- clickable: true,
19469
- bulletActiveClass: 'swipe-item-active-bullet',
19470
- bulletElement: 'button'
19471
- }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
19472
- return (React.createElement(SwiperSlide, { key: url },
19473
- React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: loadFinishImage })));
19474
- })));
19475
- };
19476
- var PictureGroup$1 = React.memo(PictureGroup);
19477
-
19478
- const VideoWidget = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
19479
- const { isActive } = useSwiperSlide();
19480
- const [isPauseVideo, setIsPauseVideo] = React.useState(false);
19481
- const videoRef = React.useRef(null);
19482
- const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
19483
- React.useRef(0);
19484
- const [isLoadFinish, setIsLoadFinish] = React.useState(false);
19485
- React.useState(true);
19486
- React.useRef(null);
19487
- React.useState('');
19488
- const videoId = `pb-cache-video-${index}`;
19489
- const hlsRef = React.useRef(null);
19490
- const loopPlayRef = React.useRef(loopPlay);
19491
- React.useEffect(() => {
19492
- loopPlayRef.current = loopPlay;
19493
- }, [loopPlay]);
19494
- React.useImperativeHandle(ref, () => {
19495
- return {
19496
- play() {
19497
- var _a;
19498
- if (!videoRef.current)
19499
- return;
19500
- handleTimeUpload();
19501
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19502
- setIsPauseVideo(false);
19503
- },
19504
- pause() {
19505
- var _a;
19506
- if (!videoRef.current)
19507
- return;
19508
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19509
- setIsPauseVideo(true);
19510
- },
19511
- setLoopPlay(v) {
19512
- loopPlayRef.current = v;
19513
- },
19514
- isPlaying() {
19515
- var _a;
19516
- return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
19517
- }
19518
- };
19519
- });
19520
- React.useEffect(() => {
19521
- if (!videoRef.current)
19522
- return;
19523
- videoRef.current.muted = muted;
19524
- }, [muted]);
19525
- const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
19526
- const handleLoadedMetadata = React.useCallback(() => {
19527
- var _a;
19528
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19529
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19530
- setIsLoadFinish(true);
19531
- }, []);
19532
- const handleClickVideo = React.useCallback((type) => () => {
19533
- var _a, _b, _c, _d, _e, _f;
19534
- if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
19535
- return;
19536
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
19537
- switch (type) {
19538
- case 'start':
19539
- if (!isPause)
19540
- return;
19541
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
19542
- setIsPauseVideo(false);
19543
- break;
19544
- case 'pause':
19545
- if (isPause)
19546
- return;
19547
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
19548
- setIsPauseVideo(true);
19549
- break;
19550
- default:
19551
- if (isPause) {
19552
- 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)) {
19553
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19554
- }
19555
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
19556
- }
19557
- else {
19558
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
19559
- }
19560
- setIsPauseVideo(!isPause);
19561
- break;
19562
- }
19563
- }, [isLoadFinish]);
19564
- const blur = React.useMemo(() => {
19565
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
19566
- }, [videoPostConfig]);
19567
- const handleTimeUpload = () => {
19568
- if (!videoRef.current)
19569
- return;
19570
- setTimeout(() => {
19571
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
19572
- 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)) {
19573
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
19574
- if (!loopPlayRef.current)
19575
- return;
19576
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
19577
- (_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.slideTo(0);
19578
- }
19579
- else {
19580
- const i = (_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.activeIndex;
19581
- (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
19582
- }
19583
- }
19584
- });
19585
- };
19586
- const handlePause = () => {
19587
- setIsPauseVideo(true);
19588
- onPause === null || onPause === void 0 ? void 0 : onPause();
19589
- };
19590
- const handlePlay = () => {
19591
- var _a;
19592
- 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);
19593
- onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
19594
- };
19595
- React.useEffect(() => {
19596
- var _a, _b, _c, _d;
19597
- if (!isActive)
19598
- return;
19599
- const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
19600
- if (!videoSrc)
19601
- return;
19602
- setIsPauseVideo(false);
19603
- const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
19604
- if (!videoPlayerWrapperNode)
19605
- return;
19606
- videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
19607
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
19608
- return;
19609
- const Hls = window === null || window === void 0 ? void 0 : window.Hls;
19610
- let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
19611
- if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
19612
- hls = new Hls();
19613
- hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
19614
- hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
19615
- hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
19616
- var _a;
19617
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19618
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19619
- });
19620
- }
19621
- else {
19622
- videoRef.current.src = videoSrc;
19623
- }
19624
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
19625
- // videoRef.current?.addEventListener('playing', handlePlaying);
19626
- // videoRef.current?.addEventListener('loadeddata', handLoadeddata);
19627
- (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
19628
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
19629
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
19630
- return () => {
19631
- var _a, _b, _c, _d, _e;
19632
- if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
19633
- (_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
19634
- setIsLoadFinish(false);
19635
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
19636
- // videoRef.current?.removeEventListener('playing', handlePlaying);
19637
- // videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
19638
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
19639
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
19640
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
19641
- };
19642
- }, [isActive]);
19643
- const renderPoster = React.useMemo(() => {
19644
- if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
19645
- return null;
19646
- }
19647
- return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'video poster' }));
19648
- }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
19649
- React.useMemo(() => {
19650
- return blur
19651
- ? {
19652
- filter: 'blur(10px)',
19653
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
19654
- }
19655
- : {};
19656
- }, [blur]);
19657
- if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
19658
- return null;
19659
- }
19660
- // const renderLoading = useMemo(() => {
19661
- // if (!waiting || !isLoadFinish) return;
19662
- // return (
19663
- // <img
19664
- // style={{
19665
- // position: 'absolute',
19666
- // top: '50%',
19667
- // left: 0,
19668
- // right: 0,
19669
- // transform: 'translateY(-100%)',
19670
- // margin: 'auto',
19671
- // width: '50px',
19672
- // height: '50px',
19673
- // objectFit: 'contain'
19674
- // }}
19675
- // src={loading_gif}
19676
- // alt='placeholder image'
19677
- // />
19678
- // );
19679
- // }, [waiting, isLoadFinish]);
19680
- return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
19681
- position: 'relative',
19682
- width: '100%',
19683
- height,
19684
- overflow: 'hidden'
19685
- }, onClick: handleClickVideo() },
19686
- React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
19687
- renderPoster,
19688
- isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
19689
- });
19690
- var VideoWidget$1 = React.memo(VideoWidget);
19691
-
19692
- /*
19693
- * @Author: binruan@chatlabs.com
19694
- * @Date: 2025-03-25 13:54:27
19695
- * @LastEditors: binruan@chatlabs.com
19696
- * @LastEditTime: 2025-04-02 13:53:15
19697
- * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
19698
- *
19699
- */
19700
- const recData = {
19701
- position: 0,
19702
- isCollected: false,
19703
- product: null,
19704
- video: {
19705
- appId: null,
19706
- itemId: 'VIDEOSsRgI1695278974368',
19707
- title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
19708
- enTitle: null,
19709
- icon: null,
19710
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
19711
- link: null,
19712
- linkTitle: null,
19713
- linkType: null,
19714
- menuCategoryId: null,
19715
- remark: null,
19716
- tags: [
19717
- 'Gift-Giving',
19718
- 'Daily Wear',
19719
- 'Business Formal',
19720
- 'Sports/Casual',
19721
- 'Anniversary Gifts',
19722
- 'Wedding/Engagement',
19723
- 'Formal Dinner/Party'
19724
- ],
19725
- traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19726
- value: 385,
19727
- weight: null,
19728
- bindCta: null,
19729
- bindProduct: null,
19730
- bindProducts: [
19731
- {
19732
- appId: 'wx448578f8851f3dce',
19733
- itemId: 'test02178888',
19734
- title: 'christian dior小包包 新CDN',
19735
- enTitle: null,
19736
- icon: null,
19737
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
19738
- link: '/pages/details/index?spu_id=1702262707659534338',
19739
- linkTitle: '',
19740
- linkType: 'MP',
19741
- menuCategoryId: null,
19742
- remark: null,
19743
- tags: [],
19744
- traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19745
- value: null,
19746
- weight: null,
19747
- bindCta: {
19748
- appId: 'wx448578f8851f3dce',
19749
- itemId: 'CTA3KofE1716186622249',
19750
- title: 'SHOP NOW 立即购买',
19751
- enTitle: 'BUY NOW立即购买,选择你所喜爱的;',
19752
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
19753
- cover: null,
19754
- link: '/pages/details/index?spu_id=1702262707659534338',
19755
- linkTitle: '',
19756
- linkType: 'MP',
19757
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
19758
- remark: null,
19759
- tags: [
19760
- "Woman's Perfumes",
19761
- 'Plates & Bowls',
19762
- 'Glasses',
19763
- 'Multicolor',
19764
- 'Carafes',
19765
- 'Tea & Coffee',
19766
- 'Green',
19767
- 'Grey',
19768
- 'Cutlery'
19769
- ],
19770
- traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19771
- value: null,
19772
- weight: null
19773
- },
19774
- collection: 'Ricco',
19775
- currency: 'INR-₹',
19776
- homePage: [
19777
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
19778
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
19779
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
19780
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
19781
- ],
19782
- info: 'test',
19783
- price: 53200,
19784
- shippingInfo: null,
19785
- taxInfo: null
19786
- },
19787
- {
19788
- appId: null,
19789
- itemId: '113J631A0684_C520',
19790
- title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
19791
- enTitle: null,
19792
- icon: null,
19793
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
19794
- link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
19795
- linkTitle: null,
19796
- linkType: 'WEB',
19797
- menuCategoryId: null,
19798
- remark: null,
19799
- tags: [],
19800
- traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19801
- value: null,
19802
- weight: null,
19803
- bindCta: {
19804
- appId: null,
19805
- itemId: 'CTAAfaKf1730796437032',
19806
- title: 'test',
19807
- enTitle: 'test',
19808
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
19809
- cover: null,
19810
- link: null,
19811
- linkTitle: null,
19812
- linkType: null,
19813
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
19814
- remark: '',
19815
- tags: [],
19816
- traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19817
- value: null,
19818
- weight: null
19819
- },
19820
- collection: 'Jacquard de coton éponge bleu',
19821
- currency: 'EUR-€',
19822
- homePage: [
19823
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
19824
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
19825
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
19826
- ],
19827
- info: "Le sweatshirt à capuche bleu met à l'honneur l'emblématique motif dior oblique. Confectionné en jacquard de coton éponge bleu, il présente une coupe relax très confortable. Doté de poches latérales fendues, ce sweatshirt à capuche s'associera à tous vos jeans ou pantalons de survêtement pour un look décontracté.. Sweatshirt à capuche dior oblique, coupe relax Jacquard de coton éponge bleu",
19828
- price: 1800,
19829
- shippingInfo: null,
19830
- taxInfo: null
19831
- },
19832
- {
19833
- appId: null,
19834
- itemId: 'S5573CRIW_M928',
19835
- title: 'Mini Dior Book Tote',
19836
- enTitle: null,
19837
- icon: null,
19838
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
19839
- link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
19840
- linkTitle: null,
19841
- linkType: 'WEB',
19842
- menuCategoryId: null,
19843
- remark: null,
19844
- tags: ['ダイヤモンド'],
19845
- traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19846
- value: null,
19847
- weight: null,
19848
- bindCta: null,
19849
- collection: null,
19850
- currency: 'GBP-£',
19851
- homePage: [
19852
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
19853
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
19854
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
19855
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
19856
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
19857
- ],
19858
- info: "The Dior Book Tote is a House classic and original design by Maria Grazia Chiuri, Creative Director of Christian Dior. The style is fully embroidered with the House's hallmark blue Dior Oblique motif and showcases the Christian Dior Paris signature. Exemplifying House savoir-faire, the miniature style features an adjustable and removable strap that allows it to be carried by hand, worn over the shoulder or crossbody.",
19859
- price: 1950,
19860
- shippingInfo: null,
19861
- taxInfo: null
19862
- }
19863
- ],
19864
- url: null,
19865
- blockCta: 1,
19866
- blockProduct: 1,
19867
- hashTags: [
19868
- 'Sports/Casual',
19869
- 'Formal Dinner/Party',
19870
- 'Business Formal',
19871
- 'Wedding/Engagement',
19872
- 'Gift-Giving',
19873
- 'Daily Wear',
19874
- 'Anniversary Gifts'
19875
- ]
19876
- }
19877
- };
19878
- const RESOLVER$1 = {};
19879
- Object.values(_materials_).forEach((v) => {
19880
- RESOLVER$1[v.extend.type] = v;
19881
- });
19882
- const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19883
- const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19884
- const DiyStoryPreview = React.forwardRef(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener, onPlay, onPause }, ref) => {
19885
- const videoWidgetRef = React.useRef(null);
19886
- const swiperRef = React.useRef(null);
19887
- const [curIndex, setCurIndex] = React.useState(0);
19888
- React.useMemo(() => {
19889
- let minusHeight = 0;
19890
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
19891
- minusHeight += 45;
19892
- }
19893
- if (tagList.length > 0) {
19894
- minusHeight += 45;
19895
- }
19896
- return containerHeight - minusHeight;
19897
- }, [globalConfig, containerHeight, tagList]);
19898
- React.useImperativeHandle(ref, () => {
19899
- return {
19900
- play() {
19901
- var _a;
19902
- (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
19903
- },
19904
- pause() {
19905
- var _a;
19906
- (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19907
- },
19908
- slideTo(n) {
19909
- var _a, _b;
19910
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
19911
- return;
19912
- (_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);
19913
- },
19914
- isPlaying() {
19915
- var _a, _b;
19916
- 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;
19917
- }
19918
- };
19919
- });
19920
- // 判断是否是视频
19921
- const isVideoUrl = (url) => {
19922
- if (url && url !== '' && typeof url === 'string') {
19923
- const imageExtensions = ['.mp4', '.m3u8'];
19924
- const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
19925
- return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
19926
- }
19927
- else {
19928
- return false;
19929
- }
19930
- };
19931
- const renderContent = (rec, index) => {
19932
- const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
19933
- if (isVideo) {
19934
- return (React.createElement(VideoWidget$1, 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, onUpdateTimeLine: onUpdateTimeLine, onPlay: onPlay, onPause: onPause })));
19935
- }
19936
- else {
19937
- return (React.createElement(PictureGroup$1, { 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 }));
19938
- }
19939
- };
19940
- React.useMemo(() => {
19941
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
19942
- return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
19943
- React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
19944
- }
19945
- return null;
19946
- }, [globalConfig]);
19947
- const renderBottom = (rec, index) => {
19948
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
19949
- if (rec === null || rec === void 0 ? void 0 : rec.video) {
19950
- let cta = null;
19951
- 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) {
19952
- cta = '多商品CTA';
19953
- }
19954
- else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
19955
- cta = '商品CTA';
19956
- }
19957
- else {
19958
- 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;
19959
- }
19960
- const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
19961
- return (React.createElement(React.Fragment, null,
19962
- ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
19963
- background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
19964
- height: '130px',
19965
- position: 'absolute',
19966
- bottom: 0,
19967
- width: '100%',
19968
- willChange: 'transform',
19969
- zIndex: 2,
19970
- pointerEvents
19971
- } })),
19972
- React.createElement("div", { style: {
19973
- marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
19974
- zIndex: 999,
19975
- position: 'absolute',
19976
- bottom: 0,
19977
- left: 0,
19978
- right: 0,
19979
- paddingTop: '20px'
19980
- } },
19981
- (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
19982
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
19983
- React.createElement("div", null,
19984
- React.createElement(ExpandableText$1
19985
- // className='clc-sxp-bottom-text'
19986
- , {
19987
- // className='clc-sxp-bottom-text'
19988
- isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', 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', padding: '0 20px', fontSize: '12px' }) }),
19989
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
19990
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
19991
- }
19992
- return null;
19993
- };
19994
- const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
19995
- const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
19996
- const renderLikeButton = (rec, index) => {
19997
- var _a, _b, _c, _d;
19998
- if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
19999
- return null;
20000
- let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
20001
- if (top < 40) {
20002
- top += 40;
20003
- }
20004
- if (rec === null || rec === void 0 ? void 0 : rec.video) {
20005
- return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec,
20006
- // className={style['clc-sxp-like-button']}
20007
- style: {
20008
- top,
20009
- right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
20010
- position: 'absolute',
20011
- zIndex: 999,
20012
- backgroundColor: 'transparent',
20013
- width: '50px',
20014
- height: '50px',
20015
- outline: 'none',
20016
- border: 'none',
20017
- boxSizing: 'content-box',
20018
- padding: 0,
20019
- transform: 'translate3d(0px, 0px, 0px)'
20020
- } }));
20021
- }
20022
- return null;
20023
- };
20024
- const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
20025
- const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
20026
- const renderToggleButton = (visible) => {
20027
- var _a, _b, _c, _d;
20028
- if (!visible)
20029
- return null;
20030
- let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
20031
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
20032
- top += 45;
20033
- }
20034
- return (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true ? (React.createElement(ToggleButton$1, { style: {
20035
- position: 'absolute',
20036
- visibility: 'visible',
20037
- zIndex: 999,
20038
- transform: 'translate3d(0px,0px,0px)',
20039
- [(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _c !== void 0 ? _c : 0,
20040
- [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
20041
- backgroundColor: 'transparent',
20042
- width: '50px',
20043
- height: '50px',
20044
- outline: 'none',
20045
- border: 'none',
20046
- boxSizing: 'content-box',
20047
- padding: 0
20048
- }, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon })) : null;
20049
- };
20050
- const renderView = (item, index) => {
20051
- var _a, _b, _c, _d;
20052
- const rec = lodash.cloneDeep(recData);
20053
- rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
20054
- rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
20055
- return (React.createElement("div", { style: { position: 'relative' } },
20056
- React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
20057
- renderBottom(rec, index),
20058
- renderLikeButton(rec, index),
20059
- renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
20060
- React.createElement(ToggleButton$1, { style: {
20061
- position: 'absolute',
20062
- right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
20063
- visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
20064
- bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
20065
- zIndex: 999
20066
- }, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon }),
20067
- renderContent(item, index))));
20068
- };
20069
- React.useEffect(() => {
20070
- var _a, _b;
20071
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
20072
- return;
20073
- (_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);
20074
- }, [activeIndex]);
20075
- const handleSessionExpire = React.useCallback(lodash.debounce(() => {
20076
- var _a;
20077
- (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
20078
- }, 1000), []);
20079
- React.useEffect(() => {
20080
- if (disabledListener)
20081
- return;
20082
- const events = ['touchstart', 'touchcancel'];
20083
- events.forEach((event) => {
20084
- window.addEventListener(event, handleSessionExpire);
20085
- });
20086
- return () => {
20087
- events.forEach((event) => {
20088
- window.removeEventListener(event, handleSessionExpire);
20089
- });
20090
- };
20091
- }, [handleSessionExpire, disabledListener]);
20092
- return (React.createElement("div", { id: 'sxp-render',
20093
- // className={style['clc-sxp-container']}
20094
- style: { height: containerHeight, position: 'relative', pointerEvents } },
20095
- React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
20096
- swiperRef.current.swiper.allowTouchMove = false;
20097
- setTimeout(() => {
20098
- swiperRef.current.swiper.allowTouchMove = true;
20099
- }, 500);
20100
- }, onActiveIndexChange: (swiper) => {
20101
- setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
20102
- onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
20103
- }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
20104
- return renderView(rec, index);
20105
- }))));
20106
- });
20107
- var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
20108
-
20109
19463
  /*
20110
19464
  * @Author: binruan@chatlabs.com
20111
19465
  * @Date: 2023-10-31 10:56:01
20112
19466
  * @LastEditors: binruan@chatlabs.com
20113
- * @LastEditTime: 2025-03-28 17:15:47
19467
+ * @LastEditTime: 2024-10-23 15:07:29
20114
19468
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
20115
19469
  *
20116
19470
  */
@@ -20202,9 +19556,17 @@ Made in Italy` })));
20202
19556
 
20203
19557
  /*
20204
19558
  * @Author: binruan@chatlabs.com
20205
- * @Date: 2024-03-20 10:27:31
19559
+ * @Date: 2024-01-15 19:03:09
19560
+ * @LastEditors: binruan@chatlabs.com
19561
+ * @LastEditTime: 2025-02-24 15:47:44
19562
+ * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
19563
+ *
19564
+ */
19565
+ /*
19566
+ * @Author: binruan@chatlabs.com
19567
+ * @Date: 2023-11-24 15:58:00
20206
19568
  * @LastEditors: binruan@chatlabs.com
20207
- * @LastEditTime: 2025-03-28 16:55:21
19569
+ * @LastEditTime: 2023-12-26 10:24:42
20208
19570
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
20209
19571
  *
20210
19572
  */
@@ -20212,20 +19574,20 @@ Made in Italy` })));
20212
19574
  Object.values(_materials_).forEach((v) => {
20213
19575
  RESOLVER[v.extend.type] = v;
20214
19576
  });
20215
- const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
20216
- var _a, _b, _c, _d, _e, _f, _g, _h;
19577
+ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
19578
+ var _a, _b, _c, _d, _e, _f;
20217
19579
  const utmVal = React.useMemo(() => {
20218
19580
  var _a;
20219
19581
  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('?', '') : '';
20220
19582
  return searchParams;
20221
19583
  }, []);
20222
- const [_schema, setSchema] = React.useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
19584
+ const [_schema, setSchema] = React.useState(data === null || data === void 0 ? void 0 : data.data);
20223
19585
  const [channel, setChannel] = React.useState();
20224
19586
  return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
20225
- React.createElement(SxpDataSourceProvider$1, { 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 }) => {
20226
- var _a, _b;
19587
+ React.createElement(SxpDataSourceProvider$1, { 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 }) => {
19588
+ var _a;
20227
19589
  return (React.createElement(React.Fragment, null,
20228
- React.createElement(DiyStoryPreview$1, 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 })),
19590
+ React.createElement(SxpPageRender$1, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
20229
19591
  React.createElement(Popup, null)));
20230
19592
  } })));
20231
19593
  };
@@ -20235,18 +19597,17 @@ Made in Italy` })));
20235
19597
  * @Author : haocanweng@chatlabs.cn
20236
19598
  * @Date : 2023-08-21 16:31:58
20237
19599
  * @LastEditors: binruan@chatlabs.com
20238
- * @LastEditTime: 2025-03-25 14:31:53
19600
+ * @LastEditTime: 2024-06-25 11:37:48
20239
19601
  * @FilePath: \pb-sxp-ui\src\index.ts
20240
19602
  */
20241
19603
 
20242
19604
  exports.DiyPortalPreview = index$1;
20243
- exports.DiyStoryPreview = DiyStoryPreview$1;
20244
19605
  exports.EditorDataProvider = EditorDataProvider;
20245
19606
  exports.Modal = Modal$1;
20246
19607
  exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
20247
19608
  exports.SxpPageCore = index;
20248
- exports.SxpPageRender = index$2;
20249
- exports.core = index$3;
19609
+ exports.SxpPageRender = SxpPageRender$1;
19610
+ exports.core = index$2;
20250
19611
  exports.default = Pagebuilder;
20251
19612
  exports.materials = _materials_;
20252
19613
  exports.useEditorDataProvider = useEditorDataProvider;