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/index.js CHANGED
@@ -429,6 +429,39 @@ const Pagebuilder = {
429
429
  })
430
430
  };
431
431
 
432
+ function useEditor() {
433
+ return useContext(EditorContext);
434
+ }
435
+
436
+ function useDataSource() {
437
+ return useContext(DataSourceContext);
438
+ }
439
+
440
+ const feRealSessionIdKey = 'feRealSessionIdKey';
441
+ const generateFeSessionId = () => {
442
+ const uid = getUid(); // 32位长度
443
+ const timestamp = Date.now(); // 13位长度
444
+ const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
445
+ return result;
446
+ };
447
+ // 生成或者获取sessionID
448
+ const storeAndLoadFeSessionId = () => {
449
+ let result = getFeSessionId();
450
+ if (!result) {
451
+ result = generateFeSessionId();
452
+ window.localStorage.setItem(feRealSessionIdKey, result);
453
+ }
454
+ return result;
455
+ };
456
+ const refreshFeSessionId = () => {
457
+ const result = generateFeSessionId();
458
+ window.localStorage.setItem(feRealSessionIdKey, result);
459
+ };
460
+ // 获取 sessionID
461
+ const getFeSessionId = () => {
462
+ return window.localStorage.getItem(feRealSessionIdKey);
463
+ };
464
+
432
465
  /*
433
466
  * @Author: binruan@chatlabs.com
434
467
  * @Date: 2024-03-20 10:27:31
@@ -480,39 +513,6 @@ const setUserConsentResult = () => {
480
513
  window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
481
514
  };
482
515
 
483
- function useEditor() {
484
- return useContext(EditorContext);
485
- }
486
-
487
- function useDataSource() {
488
- return useContext(DataSourceContext);
489
- }
490
-
491
- const feRealSessionIdKey = 'feRealSessionIdKey';
492
- const generateFeSessionId = () => {
493
- const uid = getUid(); // 32位长度
494
- const timestamp = Date.now(); // 13位长度
495
- const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
496
- return result;
497
- };
498
- // 生成或者获取sessionID
499
- const storeAndLoadFeSessionId = () => {
500
- let result = getFeSessionId();
501
- if (!result) {
502
- result = generateFeSessionId();
503
- window.localStorage.setItem(feRealSessionIdKey, result);
504
- }
505
- return result;
506
- };
507
- const refreshFeSessionId = () => {
508
- const result = generateFeSessionId();
509
- window.localStorage.setItem(feRealSessionIdKey, result);
510
- };
511
- // 获取 sessionID
512
- const getFeSessionId = () => {
513
- return window.localStorage.getItem(feRealSessionIdKey);
514
- };
515
-
516
516
  /*
517
517
  * @Author: binruan@chatlabs.com
518
518
  * @Date: 2024-03-20 10:27:31
@@ -725,8 +725,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
725
725
  // Beacon API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。
726
726
  if (options.type === 'beacon' && navigator.sendBeacon) {
727
727
  return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
728
- JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
729
- ], { type: 'application/json;charset=UTF-8' }));
728
+ JSON.stringify({
729
+ body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
730
+ })
731
+ ], {
732
+ type: 'application/json;charset=UTF-8'
733
+ }));
730
734
  }
731
735
  return window
732
736
  .fetch(`${url}/api/${path}`, {
@@ -757,16 +761,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
757
761
  }, [bffDataSource]);
758
762
  // 获取推荐视频数据
759
763
  const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
760
- var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
761
- 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 }));
764
+ var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
765
+ 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 }));
762
766
  if (channel) {
763
767
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
764
768
  }
765
769
  else if (utmVal) {
766
- const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
770
+ const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
771
+ var _a, _b;
767
772
  const key = val.split('=')[0];
768
- return key;
769
- })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
773
+ 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);
774
+ })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
770
775
  if (val)
771
776
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
772
777
  }
@@ -780,19 +785,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
780
785
  let list = [];
781
786
  let result = null;
782
787
  const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
783
- var _t, _u, _v, _w, _x, _y;
788
+ var _v, _w, _x, _y, _z, _0;
784
789
  query.pageNum = pageNum;
785
790
  result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
786
791
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
787
792
  return undefined;
788
793
  }
789
794
  setLoading(false);
790
- 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 : []);
795
+ 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 : []);
791
796
  if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
792
797
  setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
793
798
  setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
794
799
  }
795
- 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));
800
+ 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));
796
801
  if (isNotNullList) {
797
802
  pageNum = pageNum + 1;
798
803
  yield recurveRecList(query);
@@ -800,13 +805,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
800
805
  });
801
806
  yield recurveRecList(query);
802
807
  if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
803
- 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 });
808
+ 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 });
804
809
  return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
805
810
  }
806
811
  if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
807
- 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 });
812
+ 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 });
808
813
  }
809
- const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
814
+ const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
810
815
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
811
816
  return undefined;
812
817
  }
@@ -814,8 +819,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
814
819
  setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
815
820
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
816
821
  let list = [];
817
- 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 : []);
818
- 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));
822
+ 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 : []);
823
+ 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));
819
824
  if (!isNotNullList) {
820
825
  setIsNoMoreData(true);
821
826
  }
@@ -824,12 +829,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
824
829
  return result === null || result === void 0 ? void 0 : result.data;
825
830
  }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
826
831
  const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
827
- var _z, _0, _1, _2;
832
+ var _1, _2, _3, _4;
828
833
  if (rtcList.length <= 0) {
829
834
  return;
830
835
  }
831
836
  const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
832
- 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 })));
837
+ 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 })));
833
838
  setRtcList(rtcList.concat(getFilterRecList(data)));
834
839
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
835
840
  return data;
@@ -886,7 +891,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
886
891
  console.log('userInfo:', userInfo);
887
892
  console.log('eventInfo:', ef);
888
893
  console.log('========= 结束 =========');
889
- 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}`, {
894
+ 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)}` : ''}`, {
890
895
  method: 'POST',
891
896
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
892
897
  type: 'beacon'
@@ -902,20 +907,33 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
902
907
  bffDataSource
903
908
  ]);
904
909
  const bffFbReport = useCallback(({ eventName, product }) => {
905
- var _a, _b, _c, _d, _e, _f;
910
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
911
+ if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
912
+ window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view', {
913
+ page_location: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
914
+ page_title: document === null || document === void 0 ? void 0 : document.title
915
+ });
916
+ }
917
+ if (eventName && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
918
+ window === null || window === void 0 ? void 0 : window.fbq('track', eventName, {
919
+ page_path: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.pathname,
920
+ page_location: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
921
+ page_title: document === null || document === void 0 ? void 0 : document.title
922
+ });
923
+ }
906
924
  if (!enableReportEvent ||
907
925
  !enabledMetaConversionApi ||
908
926
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
909
- !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
927
+ !((_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _d === void 0 ? void 0 : _d[eventName])) {
910
928
  return;
911
929
  }
912
- const jsonParams = cloneDeep((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]);
930
+ const jsonParams = cloneDeep((_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _e === void 0 ? void 0 : _e[eventName]);
913
931
  const urlParams = new URLSearchParams(window.location.search);
914
932
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
915
933
  const fix_par = {
916
- event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
934
+ event_source_url: (_f = window === null || window === void 0 ? void 0 : window.location) === null || _f === void 0 ? void 0 : _f.href,
917
935
  external_id: fakeUserId,
918
- 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 : '',
936
+ 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 : '',
919
937
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
920
938
  fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
921
939
  time: Math.floor(Date.now() / 1000)
@@ -966,7 +984,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
966
984
  }
967
985
  };
968
986
  getEventParams(jsonParams);
969
- 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}`, {
987
+ const params = {};
988
+ const queryString = location.search.slice(1);
989
+ (_j = splitUrlParams(queryString)) === null || _j === void 0 ? void 0 : _j.map((val) => {
990
+ const key = val.split('=')[0];
991
+ const value = val.split('=')[1];
992
+ params[key] = value;
993
+ });
994
+ const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
995
+ 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)}` : ''}`, {
970
996
  method: 'POST',
971
997
  body: jsonParams,
972
998
  type: 'beacon'
@@ -994,18 +1020,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
994
1020
  }), [bffFetch]);
995
1021
  // 获取 Tag
996
1022
  const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
997
- var _3, _4, _5, _6, _7, _8, _9, _10;
998
- 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);
1023
+ var _5, _6, _7, _8, _9, _10, _11, _12;
1024
+ 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);
999
1025
  if (!utmVal || !isShowTag)
1000
1026
  return;
1001
1027
  try {
1002
- const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
1028
+ const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
1003
1029
  var _a, _b;
1004
1030
  const key = val.split('=')[0];
1005
1031
  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);
1006
- })) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
1032
+ })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
1007
1033
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
1008
- 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 : []);
1034
+ 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 : []);
1009
1035
  }
1010
1036
  catch (e) {
1011
1037
  console.log('e', e);
@@ -1065,10 +1091,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1065
1091
  });
1066
1092
  }, [bffEventReport]);
1067
1093
  const getAccount = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
1068
- var _11, _12;
1094
+ var _13, _14;
1069
1095
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
1070
- setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
1071
- return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
1096
+ setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
1097
+ return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
1072
1098
  }), [bffFetch]);
1073
1099
  const accountSonsent = useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
1074
1100
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
@@ -1463,7 +1489,7 @@ const EditorCore = forwardRef(({ children, resolver, isSsr, schema, enableDataSo
1463
1489
  React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
1464
1490
  });
1465
1491
 
1466
- var index$3 = /*#__PURE__*/Object.freeze({
1492
+ var index$2 = /*#__PURE__*/Object.freeze({
1467
1493
  __proto__: null,
1468
1494
  EditorCore: EditorCore
1469
1495
  });
@@ -10083,15 +10109,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
10083
10109
  wordBreak: 'break-word'
10084
10110
  }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
10085
10111
  React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
10086
- text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
10087
- textDecoration: 'underline',
10088
- cursor: 'pointer',
10089
- outline: 'none',
10090
- border: 'none',
10091
- boxSizing: 'content-box',
10092
- padding: 0,
10093
- background: 'transparent'
10094
- }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
10112
+ 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: {
10095
10113
  __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
10096
10114
  } }))));
10097
10115
  };
@@ -12449,7 +12467,7 @@ const EventProvider = (_a) => {
12449
12467
  const handleClick = throttle((e) => {
12450
12468
  var _a, _b, _c, _d, _e, _f;
12451
12469
  e.preventDefault();
12452
- 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);
12470
+ 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;
12453
12471
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
12454
12472
  eventSubject: 'clickCta',
12455
12473
  eventDescription: 'User clicked the CTA'
@@ -12476,7 +12494,7 @@ const EventProvider = (_a) => {
12476
12494
  setElement(null);
12477
12495
  }
12478
12496
  }, [element, popup]);
12479
- 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));
12497
+ 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));
12480
12498
  };
12481
12499
  var EventProvider$1 = memo(EventProvider);
12482
12500
 
@@ -13072,7 +13090,6 @@ const MultiCommodityDiro$1 = (_a) => {
13072
13090
  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"]);
13073
13091
  const { sxpParameter } = useSxpDataSource();
13074
13092
  const [products] = 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]);
13075
- console.log(recData, '222');
13076
13093
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
13077
13094
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
13078
13095
  return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -13279,7 +13296,6 @@ const MultiCommodityDiroNew$1 = (_a) => {
13279
13296
  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"]);
13280
13297
  const { sxpParameter } = useSxpDataSource();
13281
13298
  const [products] = 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]);
13282
- console.log(recData, '333');
13283
13299
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
13284
13300
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
13285
13301
  return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -17555,15 +17571,15 @@ var _materials_ = /*#__PURE__*/Object.freeze({
17555
17571
  Swipe: Swipe
17556
17572
  });
17557
17573
 
17558
- const defaultUnLikeIconPath$2 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
17559
- const defaultLikeIconPath$2 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
17574
+ const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
17575
+ const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
17560
17576
  const LikeButton = (_a) => {
17561
17577
  var _b;
17562
17578
  var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
17563
17579
  const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
17564
17580
  const [state, setState] = useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
17565
- const likeIcon = useIconLink(defaultLikeIconPath$2);
17566
- const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
17581
+ const likeIcon = useIconLink(defaultLikeIconPath$1);
17582
+ const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
17567
17583
  const handleClick = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
17568
17584
  var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
17569
17585
  if (state) {
@@ -17654,7 +17670,7 @@ const mountVideoPlayerAtNode = (() => {
17654
17670
  };
17655
17671
  })();
17656
17672
 
17657
- const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
17673
+ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
17658
17674
  const [isPauseVideo, setIsPauseVideo] = useState(false);
17659
17675
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
17660
17676
  const videoStartTime = useRef(0);
@@ -17999,7 +18015,7 @@ const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPost
17999
18015
  renderLoading,
18000
18016
  isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
18001
18017
  };
18002
- var VideoWidget$5 = memo(VideoWidget$4);
18018
+ var VideoWidget$3 = memo(VideoWidget$2);
18003
18019
 
18004
18020
  const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
18005
18021
  const [isTrue, setIsTure] = useState(defaultValue);
@@ -18088,7 +18104,7 @@ const Picture = (props) => {
18088
18104
  }, onLoad: onShowFirstImage }))));
18089
18105
  };
18090
18106
 
18091
- const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
18107
+ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
18092
18108
  var _a, _b;
18093
18109
  const { isActive } = useSwiperSlide();
18094
18110
  const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -18182,7 +18198,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
18182
18198
  React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
18183
18199
  }))));
18184
18200
  };
18185
- var PictureGroup$5 = memo(PictureGroup$4);
18201
+ var PictureGroup$3 = memo(PictureGroup$2);
18186
18202
 
18187
18203
  /*
18188
18204
  * @Author: binruan@chatlabs.com
@@ -18298,7 +18314,7 @@ function withBindDataSource(Component) {
18298
18314
  * @Author: binruan@chatlabs.com
18299
18315
  * @Date: 2023-12-26 16:11:34
18300
18316
  * @LastEditors: binruan@chatlabs.com
18301
- * @LastEditTime: 2025-03-28 14:46:08
18317
+ * @LastEditTime: 2024-10-31 10:30:55
18302
18318
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
18303
18319
  *
18304
18320
  */
@@ -18308,10 +18324,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
18308
18324
  return null;
18309
18325
  const renderComp = useMemo(() => {
18310
18326
  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;
18311
- // 如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
18327
+ //如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
18312
18328
  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)))
18313
18329
  return;
18314
- // 默认不渲染category为cta类型的组件,该类型的组件只用于某一处
18330
+ //默认不渲染category为cta类型的组件,该类型的组件只用于某一处
18315
18331
  if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
18316
18332
  return;
18317
18333
  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)) ||
@@ -18328,10 +18344,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
18328
18344
  const Component = withBindDataSource(t);
18329
18345
  const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
18330
18346
  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';
18331
- const style = cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
18347
+ let style = cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
18332
18348
  if (style.hasOwnProperty('backdropFilter')) {
18333
- const sbf = style.backdropFilter;
18334
- style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
18349
+ let sbf = style['backdropFilter'];
18350
+ style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
18335
18351
  }
18336
18352
  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 })));
18337
18353
  }
@@ -18692,10 +18708,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18692
18708
  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)));
18693
18709
  }
18694
18710
  if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
18695
- 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 }));
18711
+ 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 }));
18696
18712
  }
18697
18713
  if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
18698
- 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 }));
18714
+ 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 }));
18699
18715
  }
18700
18716
  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) {
18701
18717
  return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
@@ -19063,9 +19079,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
19063
19079
  React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
19064
19080
  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 } })))))));
19065
19081
  };
19066
- var index$2 = memo(SxpPageRender);
19082
+ var SxpPageRender$1 = memo(SxpPageRender);
19067
19083
 
19068
- const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
19084
+ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
19069
19085
  return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
19070
19086
  clickable: true,
19071
19087
  bulletActiveClass: 'swipe-item-active-bullet',
@@ -19075,9 +19091,9 @@ const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index
19075
19091
  React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
19076
19092
  })));
19077
19093
  };
19078
- var PictureGroup$3 = memo(PictureGroup$2);
19094
+ var PictureGroup$1 = memo(PictureGroup);
19079
19095
 
19080
- const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
19096
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
19081
19097
  const [isPauseVideo, setIsPauseVideo] = useState(false);
19082
19098
  const videoRef = useRef(null);
19083
19099
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
@@ -19307,14 +19323,14 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
19307
19323
  renderPoster,
19308
19324
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
19309
19325
  };
19310
- var VideoWidget$3 = memo(VideoWidget$2);
19326
+ var VideoWidget$1 = memo(VideoWidget);
19311
19327
 
19312
- const RESOLVER$2 = {};
19328
+ const RESOLVER$1 = {};
19313
19329
  Object.values(_materials_).forEach((v) => {
19314
- RESOLVER$2[v.extend.type] = v;
19330
+ RESOLVER$1[v.extend.type] = v;
19315
19331
  });
19316
- const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19317
- const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19332
+ const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19333
+ const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19318
19334
  const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
19319
19335
  const height = useMemo(() => {
19320
19336
  let minusHeight = 0;
@@ -19329,16 +19345,16 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19329
19345
  const renderContent = (rec, index) => {
19330
19346
  var _a, _b, _c, _d;
19331
19347
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
19332
- 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 }));
19348
+ 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 }));
19333
19349
  }
19334
19350
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
19335
- 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 }));
19351
+ 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 }));
19336
19352
  }
19337
19353
  if (rec.product) {
19338
19354
  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) {
19339
19355
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
19340
19356
  var _a, _b, _c, _d, _e, _f, _g, _h;
19341
- const t = RESOLVER$2[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
19357
+ const t = RESOLVER$1[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
19342
19358
  const Component = withBindDataSource(t);
19343
19359
  const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
19344
19360
  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) || {},
@@ -19360,7 +19376,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19360
19376
  const CTA = (rec, index) => {
19361
19377
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
19362
19378
  return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
19363
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$2 })));
19379
+ React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
19364
19380
  }
19365
19381
  return null;
19366
19382
  };
@@ -19378,8 +19394,8 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19378
19394
  }
19379
19395
  return null;
19380
19396
  };
19381
- const likeIcon = useIconLink(defaultLikeIconPath$1, appDomain);
19382
- const unlikeIcon = useIconLink(defaultUnLikeIconPath$1, appDomain);
19397
+ const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
19398
+ const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
19383
19399
  const renderLikeButton = (rec, index) => {
19384
19400
  var _a, _b, _c, _d;
19385
19401
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
@@ -19429,673 +19445,11 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19429
19445
  };
19430
19446
  var index$1 = memo(DiyPortalPreview);
19431
19447
 
19432
- const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
19433
- const { isActive } = useSwiperSlide();
19434
- const [isload, setIsLoad] = useState(false);
19435
- useEffect(() => {
19436
- if (isActive && isload && loopPlay) {
19437
- setTimeout(() => {
19438
- var _a, _b, _c, _d;
19439
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
19440
- (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
19441
- }
19442
- else {
19443
- 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;
19444
- (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
19445
- }
19446
- }, 3000);
19447
- }
19448
- }, [isActive, isload, data, index, swiperRef, loopPlay]);
19449
- const loadFinishImage = () => {
19450
- setIsLoad(true);
19451
- };
19452
- return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
19453
- clickable: true,
19454
- bulletActiveClass: 'swipe-item-active-bullet',
19455
- bulletElement: 'button'
19456
- }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
19457
- return (React.createElement(SwiperSlide, { key: url },
19458
- React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: loadFinishImage })));
19459
- })));
19460
- };
19461
- var PictureGroup$1 = memo(PictureGroup);
19462
-
19463
- const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
19464
- const { isActive } = useSwiperSlide();
19465
- const [isPauseVideo, setIsPauseVideo] = useState(false);
19466
- const videoRef = useRef(null);
19467
- const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
19468
- useRef(0);
19469
- const [isLoadFinish, setIsLoadFinish] = useState(false);
19470
- useState(true);
19471
- useRef(null);
19472
- useState('');
19473
- const videoId = `pb-cache-video-${index}`;
19474
- const hlsRef = useRef(null);
19475
- const loopPlayRef = useRef(loopPlay);
19476
- useEffect(() => {
19477
- loopPlayRef.current = loopPlay;
19478
- }, [loopPlay]);
19479
- useImperativeHandle(ref, () => {
19480
- return {
19481
- play() {
19482
- var _a;
19483
- if (!videoRef.current)
19484
- return;
19485
- handleTimeUpload();
19486
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19487
- setIsPauseVideo(false);
19488
- },
19489
- pause() {
19490
- var _a;
19491
- if (!videoRef.current)
19492
- return;
19493
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19494
- setIsPauseVideo(true);
19495
- },
19496
- setLoopPlay(v) {
19497
- loopPlayRef.current = v;
19498
- },
19499
- isPlaying() {
19500
- var _a;
19501
- return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
19502
- }
19503
- };
19504
- });
19505
- useEffect(() => {
19506
- if (!videoRef.current)
19507
- return;
19508
- videoRef.current.muted = muted;
19509
- }, [muted]);
19510
- const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
19511
- const handleLoadedMetadata = useCallback(() => {
19512
- var _a;
19513
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19514
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19515
- setIsLoadFinish(true);
19516
- }, []);
19517
- const handleClickVideo = useCallback((type) => () => {
19518
- var _a, _b, _c, _d, _e, _f;
19519
- if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
19520
- return;
19521
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
19522
- switch (type) {
19523
- case 'start':
19524
- if (!isPause)
19525
- return;
19526
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
19527
- setIsPauseVideo(false);
19528
- break;
19529
- case 'pause':
19530
- if (isPause)
19531
- return;
19532
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
19533
- setIsPauseVideo(true);
19534
- break;
19535
- default:
19536
- if (isPause) {
19537
- 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)) {
19538
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19539
- }
19540
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
19541
- }
19542
- else {
19543
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
19544
- }
19545
- setIsPauseVideo(!isPause);
19546
- break;
19547
- }
19548
- }, [isLoadFinish]);
19549
- const blur = useMemo(() => {
19550
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
19551
- }, [videoPostConfig]);
19552
- const handleTimeUpload = () => {
19553
- if (!videoRef.current)
19554
- return;
19555
- setTimeout(() => {
19556
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
19557
- 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)) {
19558
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
19559
- if (!loopPlayRef.current)
19560
- return;
19561
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
19562
- (_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);
19563
- }
19564
- else {
19565
- 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;
19566
- (_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);
19567
- }
19568
- }
19569
- });
19570
- };
19571
- const handlePause = () => {
19572
- setIsPauseVideo(true);
19573
- onPause === null || onPause === void 0 ? void 0 : onPause();
19574
- };
19575
- const handlePlay = () => {
19576
- var _a;
19577
- 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);
19578
- onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
19579
- };
19580
- useEffect(() => {
19581
- var _a, _b, _c, _d;
19582
- if (!isActive)
19583
- return;
19584
- const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
19585
- if (!videoSrc)
19586
- return;
19587
- setIsPauseVideo(false);
19588
- const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
19589
- if (!videoPlayerWrapperNode)
19590
- return;
19591
- videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
19592
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
19593
- return;
19594
- const Hls = window === null || window === void 0 ? void 0 : window.Hls;
19595
- let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
19596
- if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
19597
- hls = new Hls();
19598
- hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
19599
- hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
19600
- hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
19601
- var _a;
19602
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19603
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19604
- });
19605
- }
19606
- else {
19607
- videoRef.current.src = videoSrc;
19608
- }
19609
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
19610
- // videoRef.current?.addEventListener('playing', handlePlaying);
19611
- // videoRef.current?.addEventListener('loadeddata', handLoadeddata);
19612
- (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
19613
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
19614
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
19615
- return () => {
19616
- var _a, _b, _c, _d, _e;
19617
- if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
19618
- (_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
19619
- setIsLoadFinish(false);
19620
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
19621
- // videoRef.current?.removeEventListener('playing', handlePlaying);
19622
- // videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
19623
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
19624
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
19625
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
19626
- };
19627
- }, [isActive]);
19628
- const renderPoster = useMemo(() => {
19629
- if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
19630
- return null;
19631
- }
19632
- 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' }));
19633
- }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
19634
- useMemo(() => {
19635
- return blur
19636
- ? {
19637
- filter: 'blur(10px)',
19638
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
19639
- }
19640
- : {};
19641
- }, [blur]);
19642
- if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
19643
- return null;
19644
- }
19645
- // const renderLoading = useMemo(() => {
19646
- // if (!waiting || !isLoadFinish) return;
19647
- // return (
19648
- // <img
19649
- // style={{
19650
- // position: 'absolute',
19651
- // top: '50%',
19652
- // left: 0,
19653
- // right: 0,
19654
- // transform: 'translateY(-100%)',
19655
- // margin: 'auto',
19656
- // width: '50px',
19657
- // height: '50px',
19658
- // objectFit: 'contain'
19659
- // }}
19660
- // src={loading_gif}
19661
- // alt='placeholder image'
19662
- // />
19663
- // );
19664
- // }, [waiting, isLoadFinish]);
19665
- return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
19666
- position: 'relative',
19667
- width: '100%',
19668
- height,
19669
- overflow: 'hidden'
19670
- }, onClick: handleClickVideo() },
19671
- React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
19672
- renderPoster,
19673
- isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
19674
- });
19675
- var VideoWidget$1 = memo(VideoWidget);
19676
-
19677
- /*
19678
- * @Author: binruan@chatlabs.com
19679
- * @Date: 2025-03-25 13:54:27
19680
- * @LastEditors: binruan@chatlabs.com
19681
- * @LastEditTime: 2025-04-02 13:53:15
19682
- * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
19683
- *
19684
- */
19685
- const recData = {
19686
- position: 0,
19687
- isCollected: false,
19688
- product: null,
19689
- video: {
19690
- appId: null,
19691
- itemId: 'VIDEOSsRgI1695278974368',
19692
- title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
19693
- enTitle: null,
19694
- icon: null,
19695
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
19696
- link: null,
19697
- linkTitle: null,
19698
- linkType: null,
19699
- menuCategoryId: null,
19700
- remark: null,
19701
- tags: [
19702
- 'Gift-Giving',
19703
- 'Daily Wear',
19704
- 'Business Formal',
19705
- 'Sports/Casual',
19706
- 'Anniversary Gifts',
19707
- 'Wedding/Engagement',
19708
- 'Formal Dinner/Party'
19709
- ],
19710
- traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19711
- value: 385,
19712
- weight: null,
19713
- bindCta: null,
19714
- bindProduct: null,
19715
- bindProducts: [
19716
- {
19717
- appId: 'wx448578f8851f3dce',
19718
- itemId: 'test02178888',
19719
- title: 'christian dior小包包 新CDN',
19720
- enTitle: null,
19721
- icon: null,
19722
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
19723
- link: '/pages/details/index?spu_id=1702262707659534338',
19724
- linkTitle: '',
19725
- linkType: 'MP',
19726
- menuCategoryId: null,
19727
- remark: null,
19728
- tags: [],
19729
- traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19730
- value: null,
19731
- weight: null,
19732
- bindCta: {
19733
- appId: 'wx448578f8851f3dce',
19734
- itemId: 'CTA3KofE1716186622249',
19735
- title: 'SHOP NOW 立即购买',
19736
- enTitle: 'BUY NOW立即购买,选择你所喜爱的;',
19737
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
19738
- cover: null,
19739
- link: '/pages/details/index?spu_id=1702262707659534338',
19740
- linkTitle: '',
19741
- linkType: 'MP',
19742
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
19743
- remark: null,
19744
- tags: [
19745
- "Woman's Perfumes",
19746
- 'Plates & Bowls',
19747
- 'Glasses',
19748
- 'Multicolor',
19749
- 'Carafes',
19750
- 'Tea & Coffee',
19751
- 'Green',
19752
- 'Grey',
19753
- 'Cutlery'
19754
- ],
19755
- traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19756
- value: null,
19757
- weight: null
19758
- },
19759
- collection: 'Ricco',
19760
- currency: 'INR-₹',
19761
- homePage: [
19762
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
19763
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
19764
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
19765
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
19766
- ],
19767
- info: 'test',
19768
- price: 53200,
19769
- shippingInfo: null,
19770
- taxInfo: null
19771
- },
19772
- {
19773
- appId: null,
19774
- itemId: '113J631A0684_C520',
19775
- title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
19776
- enTitle: null,
19777
- icon: null,
19778
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
19779
- link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
19780
- linkTitle: null,
19781
- linkType: 'WEB',
19782
- menuCategoryId: null,
19783
- remark: null,
19784
- tags: [],
19785
- traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19786
- value: null,
19787
- weight: null,
19788
- bindCta: {
19789
- appId: null,
19790
- itemId: 'CTAAfaKf1730796437032',
19791
- title: 'test',
19792
- enTitle: 'test',
19793
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
19794
- cover: null,
19795
- link: null,
19796
- linkTitle: null,
19797
- linkType: null,
19798
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
19799
- remark: '',
19800
- tags: [],
19801
- traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19802
- value: null,
19803
- weight: null
19804
- },
19805
- collection: 'Jacquard de coton éponge bleu',
19806
- currency: 'EUR-€',
19807
- homePage: [
19808
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
19809
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
19810
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
19811
- ],
19812
- 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",
19813
- price: 1800,
19814
- shippingInfo: null,
19815
- taxInfo: null
19816
- },
19817
- {
19818
- appId: null,
19819
- itemId: 'S5573CRIW_M928',
19820
- title: 'Mini Dior Book Tote',
19821
- enTitle: null,
19822
- icon: null,
19823
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
19824
- link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
19825
- linkTitle: null,
19826
- linkType: 'WEB',
19827
- menuCategoryId: null,
19828
- remark: null,
19829
- tags: ['ダイヤモンド'],
19830
- traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19831
- value: null,
19832
- weight: null,
19833
- bindCta: null,
19834
- collection: null,
19835
- currency: 'GBP-£',
19836
- homePage: [
19837
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
19838
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
19839
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
19840
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
19841
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
19842
- ],
19843
- 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.",
19844
- price: 1950,
19845
- shippingInfo: null,
19846
- taxInfo: null
19847
- }
19848
- ],
19849
- url: null,
19850
- blockCta: 1,
19851
- blockProduct: 1,
19852
- hashTags: [
19853
- 'Sports/Casual',
19854
- 'Formal Dinner/Party',
19855
- 'Business Formal',
19856
- 'Wedding/Engagement',
19857
- 'Gift-Giving',
19858
- 'Daily Wear',
19859
- 'Anniversary Gifts'
19860
- ]
19861
- }
19862
- };
19863
- const RESOLVER$1 = {};
19864
- Object.values(_materials_).forEach((v) => {
19865
- RESOLVER$1[v.extend.type] = v;
19866
- });
19867
- const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19868
- const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19869
- const DiyStoryPreview = 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) => {
19870
- const videoWidgetRef = useRef(null);
19871
- const swiperRef = useRef(null);
19872
- const [curIndex, setCurIndex] = useState(0);
19873
- useMemo(() => {
19874
- let minusHeight = 0;
19875
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
19876
- minusHeight += 45;
19877
- }
19878
- if (tagList.length > 0) {
19879
- minusHeight += 45;
19880
- }
19881
- return containerHeight - minusHeight;
19882
- }, [globalConfig, containerHeight, tagList]);
19883
- useImperativeHandle(ref, () => {
19884
- return {
19885
- play() {
19886
- var _a;
19887
- (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
19888
- },
19889
- pause() {
19890
- var _a;
19891
- (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19892
- },
19893
- slideTo(n) {
19894
- var _a, _b;
19895
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
19896
- return;
19897
- (_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);
19898
- },
19899
- isPlaying() {
19900
- var _a, _b;
19901
- 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;
19902
- }
19903
- };
19904
- });
19905
- // 判断是否是视频
19906
- const isVideoUrl = (url) => {
19907
- if (url && url !== '' && typeof url === 'string') {
19908
- const imageExtensions = ['.mp4', '.m3u8'];
19909
- const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
19910
- return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
19911
- }
19912
- else {
19913
- return false;
19914
- }
19915
- };
19916
- const renderContent = (rec, index) => {
19917
- const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
19918
- if (isVideo) {
19919
- 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 })));
19920
- }
19921
- else {
19922
- 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 }));
19923
- }
19924
- };
19925
- useMemo(() => {
19926
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
19927
- return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
19928
- React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
19929
- }
19930
- return null;
19931
- }, [globalConfig]);
19932
- const renderBottom = (rec, index) => {
19933
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
19934
- if (rec === null || rec === void 0 ? void 0 : rec.video) {
19935
- let cta = null;
19936
- 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) {
19937
- cta = '多商品CTA';
19938
- }
19939
- else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
19940
- cta = '商品CTA';
19941
- }
19942
- else {
19943
- 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;
19944
- }
19945
- const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
19946
- return (React.createElement(React.Fragment, null,
19947
- ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
19948
- background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
19949
- height: '130px',
19950
- position: 'absolute',
19951
- bottom: 0,
19952
- width: '100%',
19953
- willChange: 'transform',
19954
- zIndex: 2,
19955
- pointerEvents
19956
- } })),
19957
- React.createElement("div", { style: {
19958
- marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
19959
- zIndex: 999,
19960
- position: 'absolute',
19961
- bottom: 0,
19962
- left: 0,
19963
- right: 0,
19964
- paddingTop: '20px'
19965
- } },
19966
- (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
19967
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
19968
- React.createElement("div", null,
19969
- React.createElement(ExpandableText$1
19970
- // className='clc-sxp-bottom-text'
19971
- , {
19972
- // className='clc-sxp-bottom-text'
19973
- 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' }) }),
19974
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
19975
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
19976
- }
19977
- return null;
19978
- };
19979
- const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
19980
- const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
19981
- const renderLikeButton = (rec, index) => {
19982
- var _a, _b, _c, _d;
19983
- if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
19984
- return null;
19985
- let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
19986
- if (top < 40) {
19987
- top += 40;
19988
- }
19989
- if (rec === null || rec === void 0 ? void 0 : rec.video) {
19990
- 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,
19991
- // className={style['clc-sxp-like-button']}
19992
- style: {
19993
- top,
19994
- right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
19995
- position: 'absolute',
19996
- zIndex: 999,
19997
- backgroundColor: 'transparent',
19998
- width: '50px',
19999
- height: '50px',
20000
- outline: 'none',
20001
- border: 'none',
20002
- boxSizing: 'content-box',
20003
- padding: 0,
20004
- transform: 'translate3d(0px, 0px, 0px)'
20005
- } }));
20006
- }
20007
- return null;
20008
- };
20009
- const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
20010
- const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
20011
- const renderToggleButton = (visible) => {
20012
- var _a, _b, _c, _d;
20013
- if (!visible)
20014
- return null;
20015
- let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
20016
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
20017
- top += 45;
20018
- }
20019
- 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: {
20020
- position: 'absolute',
20021
- visibility: 'visible',
20022
- zIndex: 999,
20023
- transform: 'translate3d(0px,0px,0px)',
20024
- [(_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,
20025
- [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
20026
- backgroundColor: 'transparent',
20027
- width: '50px',
20028
- height: '50px',
20029
- outline: 'none',
20030
- border: 'none',
20031
- boxSizing: 'content-box',
20032
- padding: 0
20033
- }, 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;
20034
- };
20035
- const renderView = (item, index) => {
20036
- var _a, _b, _c, _d;
20037
- const rec = cloneDeep(recData);
20038
- rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
20039
- rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
20040
- return (React.createElement("div", { style: { position: 'relative' } },
20041
- React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
20042
- renderBottom(rec, index),
20043
- renderLikeButton(rec, index),
20044
- renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
20045
- React.createElement(ToggleButton$1, { style: {
20046
- position: 'absolute',
20047
- right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
20048
- 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',
20049
- bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
20050
- zIndex: 999
20051
- }, 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 }),
20052
- renderContent(item, index))));
20053
- };
20054
- useEffect(() => {
20055
- var _a, _b;
20056
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
20057
- return;
20058
- (_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);
20059
- }, [activeIndex]);
20060
- const handleSessionExpire = useCallback(debounce(() => {
20061
- var _a;
20062
- (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
20063
- }, 1000), []);
20064
- useEffect(() => {
20065
- if (disabledListener)
20066
- return;
20067
- const events = ['touchstart', 'touchcancel'];
20068
- events.forEach((event) => {
20069
- window.addEventListener(event, handleSessionExpire);
20070
- });
20071
- return () => {
20072
- events.forEach((event) => {
20073
- window.removeEventListener(event, handleSessionExpire);
20074
- });
20075
- };
20076
- }, [handleSessionExpire, disabledListener]);
20077
- return (React.createElement("div", { id: 'sxp-render',
20078
- // className={style['clc-sxp-container']}
20079
- style: { height: containerHeight, position: 'relative', pointerEvents } },
20080
- React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
20081
- swiperRef.current.swiper.allowTouchMove = false;
20082
- setTimeout(() => {
20083
- swiperRef.current.swiper.allowTouchMove = true;
20084
- }, 500);
20085
- }, onActiveIndexChange: (swiper) => {
20086
- setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
20087
- onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
20088
- }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
20089
- return renderView(rec, index);
20090
- }))));
20091
- });
20092
- var DiyStoryPreview$1 = memo(DiyStoryPreview);
20093
-
20094
19448
  /*
20095
19449
  * @Author: binruan@chatlabs.com
20096
19450
  * @Date: 2023-10-31 10:56:01
20097
19451
  * @LastEditors: binruan@chatlabs.com
20098
- * @LastEditTime: 2025-03-28 17:15:47
19452
+ * @LastEditTime: 2024-10-23 15:07:29
20099
19453
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
20100
19454
  *
20101
19455
  */
@@ -20187,9 +19541,17 @@ const Popup = () => {
20187
19541
 
20188
19542
  /*
20189
19543
  * @Author: binruan@chatlabs.com
20190
- * @Date: 2024-03-20 10:27:31
19544
+ * @Date: 2024-01-15 19:03:09
19545
+ * @LastEditors: binruan@chatlabs.com
19546
+ * @LastEditTime: 2025-02-24 15:47:44
19547
+ * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
19548
+ *
19549
+ */
19550
+ /*
19551
+ * @Author: binruan@chatlabs.com
19552
+ * @Date: 2023-11-24 15:58:00
20191
19553
  * @LastEditors: binruan@chatlabs.com
20192
- * @LastEditTime: 2025-03-28 16:55:21
19554
+ * @LastEditTime: 2023-12-26 10:24:42
20193
19555
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
20194
19556
  *
20195
19557
  */
@@ -20197,20 +19559,20 @@ const RESOLVER = {};
20197
19559
  Object.values(_materials_).forEach((v) => {
20198
19560
  RESOLVER[v.extend.type] = v;
20199
19561
  });
20200
- const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
20201
- var _a, _b, _c, _d, _e, _f, _g, _h;
19562
+ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
19563
+ var _a, _b, _c, _d, _e, _f;
20202
19564
  const utmVal = useMemo(() => {
20203
19565
  var _a;
20204
19566
  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('?', '') : '';
20205
19567
  return searchParams;
20206
19568
  }, []);
20207
- const [_schema, setSchema] = useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
19569
+ const [_schema, setSchema] = useState(data === null || data === void 0 ? void 0 : data.data);
20208
19570
  const [channel, setChannel] = useState();
20209
19571
  return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
20210
- 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 }) => {
20211
- var _a, _b;
19572
+ 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 }) => {
19573
+ var _a;
20212
19574
  return (React.createElement(React.Fragment, null,
20213
- 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 })),
19575
+ 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 })),
20214
19576
  React.createElement(Popup, null)));
20215
19577
  } })));
20216
19578
  };
@@ -20220,9 +19582,9 @@ var index = memo(SxpPageCore);
20220
19582
  * @Author : haocanweng@chatlabs.cn
20221
19583
  * @Date : 2023-08-21 16:31:58
20222
19584
  * @LastEditors: binruan@chatlabs.com
20223
- * @LastEditTime: 2025-03-25 14:31:53
19585
+ * @LastEditTime: 2024-06-25 11:37:48
20224
19586
  * @FilePath: \pb-sxp-ui\src\index.ts
20225
19587
  */
20226
19588
 
20227
- export { index$1 as DiyPortalPreview, DiyStoryPreview$1 as DiyStoryPreview, EditorDataProvider, Modal$1 as Modal, SxpDataSourceProvider$1 as SxpDataSourceProvider, index as SxpPageCore, index$2 as SxpPageRender, index$3 as core, Pagebuilder as default, _materials_ as materials, useEditorDataProvider };
19589
+ export { index$1 as DiyPortalPreview, EditorDataProvider, Modal$1 as Modal, SxpDataSourceProvider$1 as SxpDataSourceProvider, index as SxpPageCore, SxpPageRender$1 as SxpPageRender, index$2 as core, Pagebuilder as default, _materials_ as materials, useEditorDataProvider };
20228
19590
  //# sourceMappingURL=index.js.map