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

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 +129 -829
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +128 -827
  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 +129 -829
  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 +41 -28
  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 +41 -28
  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 -25
  43. package/es/core/components/DiyStoryPreview/VideoWidget.js +0 -240
  44. package/es/core/components/DiyStoryPreview/index.d.ts +0 -48
  45. package/es/core/components/DiyStoryPreview/index.js +0 -415
  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 -25
  49. package/lib/core/components/DiyStoryPreview/VideoWidget.js +0 -243
  50. package/lib/core/components/DiyStoryPreview/index.d.ts +0 -48
  51. package/lib/core/components/DiyStoryPreview/index.js +0 -418
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,7 +907,7 @@ 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;
906
911
  if (!enableReportEvent ||
907
912
  !enabledMetaConversionApi ||
908
913
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
@@ -966,7 +971,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
966
971
  }
967
972
  };
968
973
  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}`, {
974
+ const params = {};
975
+ const queryString = location.search.slice(1);
976
+ (_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
977
+ const key = val.split('=')[0];
978
+ const value = val.split('=')[1];
979
+ params[key] = value;
980
+ });
981
+ const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
982
+ return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_g = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _g === void 0 ? void 0 : _g['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
970
983
  method: 'POST',
971
984
  body: jsonParams,
972
985
  type: 'beacon'
@@ -994,18 +1007,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
994
1007
  }), [bffFetch]);
995
1008
  // 获取 Tag
996
1009
  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);
1010
+ var _5, _6, _7, _8, _9, _10, _11, _12;
1011
+ 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
1012
  if (!utmVal || !isShowTag)
1000
1013
  return;
1001
1014
  try {
1002
- const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
1015
+ const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
1003
1016
  var _a, _b;
1004
1017
  const key = val.split('=')[0];
1005
1018
  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 : '';
1019
+ })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
1007
1020
  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 : []);
1021
+ 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
1022
  }
1010
1023
  catch (e) {
1011
1024
  console.log('e', e);
@@ -1065,10 +1078,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1065
1078
  });
1066
1079
  }, [bffEventReport]);
1067
1080
  const getAccount = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
1068
- var _11, _12;
1081
+ var _13, _14;
1069
1082
  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';
1083
+ setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
1084
+ return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
1072
1085
  }), [bffFetch]);
1073
1086
  const accountSonsent = useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
1074
1087
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
@@ -1463,7 +1476,7 @@ const EditorCore = forwardRef(({ children, resolver, isSsr, schema, enableDataSo
1463
1476
  React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
1464
1477
  });
1465
1478
 
1466
- var index$3 = /*#__PURE__*/Object.freeze({
1479
+ var index$2 = /*#__PURE__*/Object.freeze({
1467
1480
  __proto__: null,
1468
1481
  EditorCore: EditorCore
1469
1482
  });
@@ -10083,15 +10096,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
10083
10096
  wordBreak: 'break-word'
10084
10097
  }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
10085
10098
  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: {
10099
+ 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
10100
  __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
10096
10101
  } }))));
10097
10102
  };
@@ -12449,7 +12454,7 @@ const EventProvider = (_a) => {
12449
12454
  const handleClick = throttle((e) => {
12450
12455
  var _a, _b, _c, _d, _e, _f;
12451
12456
  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);
12457
+ 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
12458
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
12454
12459
  eventSubject: 'clickCta',
12455
12460
  eventDescription: 'User clicked the CTA'
@@ -12476,7 +12481,7 @@ const EventProvider = (_a) => {
12476
12481
  setElement(null);
12477
12482
  }
12478
12483
  }, [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));
12484
+ 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
12485
  };
12481
12486
  var EventProvider$1 = memo(EventProvider);
12482
12487
 
@@ -13072,7 +13077,6 @@ const MultiCommodityDiro$1 = (_a) => {
13072
13077
  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
13078
  const { sxpParameter } = useSxpDataSource();
13074
13079
  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
13080
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
13077
13081
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
13078
13082
  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 +13283,6 @@ const MultiCommodityDiroNew$1 = (_a) => {
13279
13283
  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
13284
  const { sxpParameter } = useSxpDataSource();
13281
13285
  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
13286
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
13284
13287
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
13285
13288
  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 +17558,15 @@ var _materials_ = /*#__PURE__*/Object.freeze({
17555
17558
  Swipe: Swipe
17556
17559
  });
17557
17560
 
17558
- const defaultUnLikeIconPath$2 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
17559
- const defaultLikeIconPath$2 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
17561
+ const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
17562
+ const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
17560
17563
  const LikeButton = (_a) => {
17561
17564
  var _b;
17562
17565
  var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
17563
17566
  const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
17564
17567
  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);
17568
+ const likeIcon = useIconLink(defaultLikeIconPath$1);
17569
+ const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
17567
17570
  const handleClick = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
17568
17571
  var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
17569
17572
  if (state) {
@@ -17654,7 +17657,7 @@ const mountVideoPlayerAtNode = (() => {
17654
17657
  };
17655
17658
  })();
17656
17659
 
17657
- const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
17660
+ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
17658
17661
  const [isPauseVideo, setIsPauseVideo] = useState(false);
17659
17662
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
17660
17663
  const videoStartTime = useRef(0);
@@ -17999,7 +18002,7 @@ const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPost
17999
18002
  renderLoading,
18000
18003
  isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
18001
18004
  };
18002
- var VideoWidget$5 = memo(VideoWidget$4);
18005
+ var VideoWidget$3 = memo(VideoWidget$2);
18003
18006
 
18004
18007
  const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
18005
18008
  const [isTrue, setIsTure] = useState(defaultValue);
@@ -18088,7 +18091,7 @@ const Picture = (props) => {
18088
18091
  }, onLoad: onShowFirstImage }))));
18089
18092
  };
18090
18093
 
18091
- const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
18094
+ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
18092
18095
  var _a, _b;
18093
18096
  const { isActive } = useSwiperSlide();
18094
18097
  const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -18182,7 +18185,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
18182
18185
  React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
18183
18186
  }))));
18184
18187
  };
18185
- var PictureGroup$5 = memo(PictureGroup$4);
18188
+ var PictureGroup$3 = memo(PictureGroup$2);
18186
18189
 
18187
18190
  /*
18188
18191
  * @Author: binruan@chatlabs.com
@@ -18298,7 +18301,7 @@ function withBindDataSource(Component) {
18298
18301
  * @Author: binruan@chatlabs.com
18299
18302
  * @Date: 2023-12-26 16:11:34
18300
18303
  * @LastEditors: binruan@chatlabs.com
18301
- * @LastEditTime: 2025-03-28 14:46:08
18304
+ * @LastEditTime: 2024-10-31 10:30:55
18302
18305
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
18303
18306
  *
18304
18307
  */
@@ -18308,10 +18311,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
18308
18311
  return null;
18309
18312
  const renderComp = useMemo(() => {
18310
18313
  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类型组件,用于在页面某处只显示某一组件
18314
+ //如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
18312
18315
  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
18316
  return;
18314
- // 默认不渲染category为cta类型的组件,该类型的组件只用于某一处
18317
+ //默认不渲染category为cta类型的组件,该类型的组件只用于某一处
18315
18318
  if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
18316
18319
  return;
18317
18320
  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 +18331,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
18328
18331
  const Component = withBindDataSource(t);
18329
18332
  const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
18330
18333
  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);
18334
+ let style = cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
18332
18335
  if (style.hasOwnProperty('backdropFilter')) {
18333
- const sbf = style.backdropFilter;
18334
- style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
18336
+ let sbf = style['backdropFilter'];
18337
+ style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
18335
18338
  }
18336
18339
  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
18340
  }
@@ -18692,10 +18695,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18692
18695
  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
18696
  }
18694
18697
  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 }));
18698
+ 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
18699
  }
18697
18700
  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 }));
18701
+ 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
18702
  }
18700
18703
  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
18704
  return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
@@ -19063,9 +19066,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
19063
19066
  React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
19064
19067
  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
19068
  };
19066
- var index$2 = memo(SxpPageRender);
19069
+ var SxpPageRender$1 = memo(SxpPageRender);
19067
19070
 
19068
- const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
19071
+ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
19069
19072
  return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
19070
19073
  clickable: true,
19071
19074
  bulletActiveClass: 'swipe-item-active-bullet',
@@ -19075,9 +19078,9 @@ const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index
19075
19078
  React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
19076
19079
  })));
19077
19080
  };
19078
- var PictureGroup$3 = memo(PictureGroup$2);
19081
+ var PictureGroup$1 = memo(PictureGroup);
19079
19082
 
19080
- const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
19083
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
19081
19084
  const [isPauseVideo, setIsPauseVideo] = useState(false);
19082
19085
  const videoRef = useRef(null);
19083
19086
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
@@ -19307,14 +19310,14 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
19307
19310
  renderPoster,
19308
19311
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
19309
19312
  };
19310
- var VideoWidget$3 = memo(VideoWidget$2);
19313
+ var VideoWidget$1 = memo(VideoWidget);
19311
19314
 
19312
- const RESOLVER$2 = {};
19315
+ const RESOLVER$1 = {};
19313
19316
  Object.values(_materials_).forEach((v) => {
19314
- RESOLVER$2[v.extend.type] = v;
19317
+ RESOLVER$1[v.extend.type] = v;
19315
19318
  });
19316
- const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19317
- const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19319
+ const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19320
+ const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19318
19321
  const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
19319
19322
  const height = useMemo(() => {
19320
19323
  let minusHeight = 0;
@@ -19329,16 +19332,16 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19329
19332
  const renderContent = (rec, index) => {
19330
19333
  var _a, _b, _c, _d;
19331
19334
  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 }));
19335
+ 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
19336
  }
19334
19337
  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 }));
19338
+ 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
19339
  }
19337
19340
  if (rec.product) {
19338
19341
  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
19342
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
19340
19343
  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];
19344
+ const t = RESOLVER$1[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
19342
19345
  const Component = withBindDataSource(t);
19343
19346
  const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
19344
19347
  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 +19363,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19360
19363
  const CTA = (rec, index) => {
19361
19364
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
19362
19365
  return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
19363
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$2 })));
19366
+ React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
19364
19367
  }
19365
19368
  return null;
19366
19369
  };
@@ -19378,8 +19381,8 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19378
19381
  }
19379
19382
  return null;
19380
19383
  };
19381
- const likeIcon = useIconLink(defaultLikeIconPath$1, appDomain);
19382
- const unlikeIcon = useIconLink(defaultUnLikeIconPath$1, appDomain);
19384
+ const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
19385
+ const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
19383
19386
  const renderLikeButton = (rec, index) => {
19384
19387
  var _a, _b, _c, _d;
19385
19388
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
@@ -19429,721 +19432,11 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19429
19432
  };
19430
19433
  var index$1 = memo(DiyPortalPreview);
19431
19434
 
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, handleUpdateTimeline, loopPlay }, ref) => {
19464
- const { isActive } = useSwiperSlide();
19465
- const [isPauseVideo, setIsPauseVideo] = useState(false);
19466
- const videoRef = useRef(null);
19467
- const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
19468
- const videoStartTime = useRef(0);
19469
- const [isLoadFinish, setIsLoadFinish] = useState(false);
19470
- const [isFirstPlay, setIsFirstPlay] = useState(true);
19471
- const canvasRef = useRef(null);
19472
- const [firstFrameSrc, setFirstFrameSrc] = 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
- if (!videoRef.current)
19498
- return;
19499
- loopPlayRef.current = v;
19500
- },
19501
- isPlaying() {
19502
- var _a;
19503
- return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
19504
- }
19505
- };
19506
- });
19507
- useEffect(() => {
19508
- if (!videoRef.current)
19509
- return;
19510
- videoRef.current.muted = muted;
19511
- }, [muted]);
19512
- useCallback(() => {
19513
- var _a;
19514
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19515
- }, []);
19516
- const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
19517
- useCallback(() => {
19518
- var _a, _b, _c, _d, _e, _f;
19519
- setIsPauseVideo(false);
19520
- const item = data[index];
19521
- if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
19522
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
19523
- ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
19524
- ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
19525
- setIsFirstPlay(false);
19526
- }
19527
- }, [bffEventReport, data, index, isFirstPlay]);
19528
- const handleLoadedMetadata = useCallback(() => {
19529
- var _a;
19530
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19531
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19532
- setIsLoadFinish(true);
19533
- }, []);
19534
- const handleClickVideo = useCallback((type) => () => {
19535
- var _a, _b, _c, _d, _e, _f;
19536
- if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
19537
- return;
19538
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
19539
- switch (type) {
19540
- case 'start':
19541
- if (!isPause)
19542
- return;
19543
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
19544
- setIsPauseVideo(false);
19545
- break;
19546
- case 'pause':
19547
- if (isPause)
19548
- return;
19549
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
19550
- setIsPauseVideo(true);
19551
- break;
19552
- default:
19553
- if (isPause) {
19554
- 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)) {
19555
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19556
- }
19557
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
19558
- }
19559
- else {
19560
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
19561
- }
19562
- setIsPauseVideo(!isPause);
19563
- break;
19564
- }
19565
- }, [isLoadFinish]);
19566
- useCallback(() => {
19567
- var _a, _b, _c, _d, _e, _f;
19568
- data[index];
19569
- ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
19570
- ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
19571
- if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
19572
- (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
19573
- }
19574
- }, [data, index, bffEventReport]);
19575
- const blur = useMemo(() => {
19576
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
19577
- }, [videoPostConfig]);
19578
- useMemo(() => {
19579
- var _a;
19580
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
19581
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
19582
- : 'translateY(-50%)';
19583
- }, [videoPostConfig]);
19584
- useCallback(() => {
19585
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
19586
- return;
19587
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
19588
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
19589
- const ctx = canvas.getContext('2d');
19590
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
19591
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
19592
- canvas.height = targetHeight;
19593
- canvas.width = targetWidth;
19594
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
19595
- setFirstFrameSrc(canvas.toDataURL());
19596
- }, []);
19597
- const handleTimeUpload = useCallback(() => {
19598
- var _a;
19599
- if (!videoRef.current)
19600
- return;
19601
- 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);
19602
- handleUpdateTimeline === null || handleUpdateTimeline === void 0 ? void 0 : handleUpdateTimeline(index, localTime);
19603
- setTimeout(() => {
19604
- var _a, _b;
19605
- 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)) {
19606
- slideSwiper();
19607
- }
19608
- });
19609
- }, []);
19610
- const slideSwiper = () => {
19611
- var _a, _b, _c, _d, _e, _f, _g;
19612
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19613
- if (!loopPlayRef.current)
19614
- return;
19615
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
19616
- (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
19617
- }
19618
- else {
19619
- const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
19620
- (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
19621
- }
19622
- };
19623
- const handlePause = () => {
19624
- setIsPauseVideo(true);
19625
- };
19626
- useEffect(() => {
19627
- var _a, _b, _c;
19628
- if (!isActive)
19629
- return;
19630
- const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
19631
- if (!videoSrc)
19632
- return;
19633
- setIsPauseVideo(false);
19634
- const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
19635
- if (!videoPlayerWrapperNode)
19636
- return;
19637
- videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
19638
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
19639
- return;
19640
- const Hls = window === null || window === void 0 ? void 0 : window.Hls;
19641
- let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
19642
- if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
19643
- hls = new Hls();
19644
- hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
19645
- hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
19646
- hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
19647
- var _a;
19648
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19649
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19650
- });
19651
- }
19652
- else {
19653
- videoRef.current.src = videoSrc;
19654
- }
19655
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
19656
- // videoRef.current?.addEventListener('playing', handlePlaying);
19657
- // videoRef.current?.addEventListener('loadeddata', handLoadeddata);
19658
- (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
19659
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('timeupdate', handleTimeUpload);
19660
- return () => {
19661
- var _a, _b, _c, _d;
19662
- if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
19663
- (_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
19664
- setIsLoadFinish(false);
19665
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
19666
- // videoRef.current?.removeEventListener('playing', handlePlaying);
19667
- // videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
19668
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
19669
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
19670
- };
19671
- }, [isActive]);
19672
- const renderPoster = useMemo(() => {
19673
- if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
19674
- return null;
19675
- }
19676
- 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' }));
19677
- }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
19678
- useMemo(() => {
19679
- return blur
19680
- ? {
19681
- filter: 'blur(10px)',
19682
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
19683
- }
19684
- : {};
19685
- }, [blur]);
19686
- if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
19687
- return null;
19688
- }
19689
- // const renderLoading = useMemo(() => {
19690
- // if (!waiting || !isLoadFinish) return;
19691
- // return (
19692
- // <img
19693
- // style={{
19694
- // position: 'absolute',
19695
- // top: '50%',
19696
- // left: 0,
19697
- // right: 0,
19698
- // transform: 'translateY(-100%)',
19699
- // margin: 'auto',
19700
- // width: '50px',
19701
- // height: '50px',
19702
- // objectFit: 'contain'
19703
- // }}
19704
- // src={loading_gif}
19705
- // alt='placeholder image'
19706
- // />
19707
- // );
19708
- // }, [waiting, isLoadFinish]);
19709
- return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
19710
- position: 'relative',
19711
- width: '100%',
19712
- height,
19713
- overflow: 'hidden'
19714
- }, onClick: handleClickVideo() },
19715
- React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
19716
- renderPoster,
19717
- isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
19718
- });
19719
- var VideoWidget$1 = memo(VideoWidget);
19720
-
19721
- /*
19722
- * @Author: binruan@chatlabs.com
19723
- * @Date: 2025-03-25 13:54:27
19724
- * @LastEditors: binruan@chatlabs.com
19725
- * @LastEditTime: 2025-03-31 14:29:21
19726
- * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
19727
- *
19728
- */
19729
- const recData = {
19730
- position: 0,
19731
- isCollected: false,
19732
- product: null,
19733
- video: {
19734
- appId: null,
19735
- itemId: 'VIDEOSsRgI1695278974368',
19736
- title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
19737
- enTitle: null,
19738
- icon: null,
19739
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
19740
- link: null,
19741
- linkTitle: null,
19742
- linkType: null,
19743
- menuCategoryId: null,
19744
- remark: null,
19745
- tags: [
19746
- 'Gift-Giving',
19747
- 'Daily Wear',
19748
- 'Business Formal',
19749
- 'Sports/Casual',
19750
- 'Anniversary Gifts',
19751
- 'Wedding/Engagement',
19752
- 'Formal Dinner/Party'
19753
- ],
19754
- traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19755
- value: 385,
19756
- weight: null,
19757
- bindCta: null,
19758
- bindProduct: null,
19759
- bindProducts: [
19760
- {
19761
- appId: 'wx448578f8851f3dce',
19762
- itemId: 'test02178888',
19763
- title: 'christian dior小包包 新CDN',
19764
- enTitle: null,
19765
- icon: null,
19766
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
19767
- link: '/pages/details/index?spu_id=1702262707659534338',
19768
- linkTitle: '',
19769
- linkType: 'MP',
19770
- menuCategoryId: null,
19771
- remark: null,
19772
- tags: [],
19773
- traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19774
- value: null,
19775
- weight: null,
19776
- bindCta: {
19777
- appId: 'wx448578f8851f3dce',
19778
- itemId: 'CTA3KofE1716186622249',
19779
- title: 'SHOP NOW 立即购买',
19780
- enTitle: 'BUY NOW立即购买,选择你所喜爱的;',
19781
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
19782
- cover: null,
19783
- link: '/pages/details/index?spu_id=1702262707659534338',
19784
- linkTitle: '',
19785
- linkType: 'MP',
19786
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
19787
- remark: null,
19788
- tags: [
19789
- "Woman's Perfumes",
19790
- 'Plates & Bowls',
19791
- 'Glasses',
19792
- 'Multicolor',
19793
- 'Carafes',
19794
- 'Tea & Coffee',
19795
- 'Green',
19796
- 'Grey',
19797
- 'Cutlery'
19798
- ],
19799
- traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19800
- value: null,
19801
- weight: null
19802
- },
19803
- collection: 'Ricco',
19804
- currency: 'INR-₹',
19805
- homePage: [
19806
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
19807
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
19808
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
19809
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
19810
- ],
19811
- info: 'test',
19812
- price: 53200,
19813
- shippingInfo: null,
19814
- taxInfo: null
19815
- },
19816
- {
19817
- appId: null,
19818
- itemId: '113J631A0684_C520',
19819
- title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
19820
- enTitle: null,
19821
- icon: null,
19822
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
19823
- link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
19824
- linkTitle: null,
19825
- linkType: 'WEB',
19826
- menuCategoryId: null,
19827
- remark: null,
19828
- tags: [],
19829
- traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19830
- value: null,
19831
- weight: null,
19832
- bindCta: {
19833
- appId: null,
19834
- itemId: 'CTAAfaKf1730796437032',
19835
- title: 'test',
19836
- enTitle: 'test',
19837
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
19838
- cover: null,
19839
- link: null,
19840
- linkTitle: null,
19841
- linkType: null,
19842
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
19843
- remark: '',
19844
- tags: [],
19845
- traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19846
- value: null,
19847
- weight: null
19848
- },
19849
- collection: 'Jacquard de coton éponge bleu',
19850
- currency: 'EUR-€',
19851
- homePage: [
19852
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
19853
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
19854
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
19855
- ],
19856
- 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",
19857
- price: 1800,
19858
- shippingInfo: null,
19859
- taxInfo: null
19860
- },
19861
- {
19862
- appId: null,
19863
- itemId: 'S5573CRIW_M928',
19864
- title: 'Mini Dior Book Tote',
19865
- enTitle: null,
19866
- icon: null,
19867
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
19868
- link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
19869
- linkTitle: null,
19870
- linkType: 'WEB',
19871
- menuCategoryId: null,
19872
- remark: null,
19873
- tags: ['ダイヤモンド'],
19874
- traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19875
- value: null,
19876
- weight: null,
19877
- bindCta: null,
19878
- collection: null,
19879
- currency: 'GBP-£',
19880
- homePage: [
19881
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
19882
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
19883
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
19884
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
19885
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
19886
- ],
19887
- 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.",
19888
- price: 1950,
19889
- shippingInfo: null,
19890
- taxInfo: null
19891
- }
19892
- ],
19893
- url: null,
19894
- blockCta: 1,
19895
- blockProduct: 1,
19896
- hashTags: [
19897
- 'Sports/Casual',
19898
- 'Formal Dinner/Party',
19899
- 'Business Formal',
19900
- 'Wedding/Engagement',
19901
- 'Gift-Giving',
19902
- 'Daily Wear',
19903
- 'Anniversary Gifts'
19904
- ]
19905
- }
19906
- };
19907
- const RESOLVER$1 = {};
19908
- Object.values(_materials_).forEach((v) => {
19909
- RESOLVER$1[v.extend.type] = v;
19910
- });
19911
- const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19912
- const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19913
- 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 }, ref) => {
19914
- const videoWidgetRef = useRef(null);
19915
- const swiperRef = useRef(null);
19916
- const [curIndex, setCurIndex] = useState(0);
19917
- useMemo(() => {
19918
- let minusHeight = 0;
19919
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
19920
- minusHeight += 45;
19921
- }
19922
- if (tagList.length > 0) {
19923
- minusHeight += 45;
19924
- }
19925
- return containerHeight - minusHeight;
19926
- }, [globalConfig, containerHeight, tagList]);
19927
- useImperativeHandle(ref, () => {
19928
- return {
19929
- play() {
19930
- var _a;
19931
- (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
19932
- },
19933
- pause() {
19934
- var _a;
19935
- (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19936
- },
19937
- slideTo(n) {
19938
- var _a, _b;
19939
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
19940
- return;
19941
- (_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);
19942
- },
19943
- isPlaying() {
19944
- var _a, _b;
19945
- 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;
19946
- },
19947
- setLoopPlay(v) {
19948
- var _a;
19949
- (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(v);
19950
- }
19951
- };
19952
- });
19953
- // 判断是否是视频
19954
- const isVideoUrl = (url) => {
19955
- if (url && url !== '' && typeof url === 'string') {
19956
- const imageExtensions = ['.mp4', '.m3u8'];
19957
- const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
19958
- return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
19959
- }
19960
- else {
19961
- return false;
19962
- }
19963
- };
19964
- const renderContent = (rec, index) => {
19965
- const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
19966
- if (isVideo) {
19967
- 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, handleUpdateTimeline: onUpdateTimeLine })));
19968
- }
19969
- else {
19970
- 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 }));
19971
- }
19972
- };
19973
- useMemo(() => {
19974
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
19975
- return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
19976
- React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
19977
- }
19978
- return null;
19979
- }, [globalConfig]);
19980
- const renderBottom = (rec, index) => {
19981
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
19982
- if (rec === null || rec === void 0 ? void 0 : rec.video) {
19983
- let cta = null;
19984
- 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) {
19985
- cta = '多商品CTA';
19986
- }
19987
- else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
19988
- cta = '商品CTA';
19989
- }
19990
- else {
19991
- 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;
19992
- }
19993
- const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
19994
- return (React.createElement(React.Fragment, null,
19995
- ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
19996
- background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
19997
- height: '130px',
19998
- position: 'absolute',
19999
- bottom: 0,
20000
- width: '100%',
20001
- willChange: 'transform',
20002
- zIndex: 2,
20003
- pointerEvents
20004
- } })),
20005
- React.createElement("div", { style: {
20006
- marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
20007
- zIndex: 999,
20008
- position: 'absolute',
20009
- bottom: 0,
20010
- left: 0,
20011
- right: 0,
20012
- paddingTop: '20px'
20013
- } },
20014
- (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
20015
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
20016
- React.createElement("div", null,
20017
- React.createElement(ExpandableText$1
20018
- // className='clc-sxp-bottom-text'
20019
- , {
20020
- // className='clc-sxp-bottom-text'
20021
- 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' }) }),
20022
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
20023
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
20024
- }
20025
- return null;
20026
- };
20027
- const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
20028
- const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
20029
- const renderLikeButton = (rec, index) => {
20030
- var _a, _b, _c, _d;
20031
- if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
20032
- return;
20033
- let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
20034
- if (top < 40) {
20035
- top += 40;
20036
- }
20037
- if (rec === null || rec === void 0 ? void 0 : rec.video) {
20038
- 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,
20039
- // className={style['clc-sxp-like-button']}
20040
- style: {
20041
- top,
20042
- right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
20043
- position: 'absolute',
20044
- zIndex: 999,
20045
- backgroundColor: 'transparent',
20046
- width: '50px',
20047
- height: '50px',
20048
- outline: 'none',
20049
- border: 'none',
20050
- boxSizing: 'content-box',
20051
- padding: 0,
20052
- transform: 'translate3d(0px, 0px, 0px)'
20053
- } }));
20054
- }
20055
- return null;
20056
- };
20057
- const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
20058
- const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
20059
- const renderToggleButton = (visible) => {
20060
- var _a, _b, _c, _d;
20061
- if (!visible)
20062
- return;
20063
- let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
20064
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
20065
- top += 45;
20066
- }
20067
- 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: {
20068
- position: 'absolute',
20069
- visibility: 'visible',
20070
- zIndex: 999,
20071
- transform: 'translate3d(0px,0px,0px)',
20072
- [(_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,
20073
- [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
20074
- backgroundColor: 'transparent',
20075
- width: '50px',
20076
- height: '50px',
20077
- outline: 'none',
20078
- border: 'none',
20079
- boxSizing: 'content-box',
20080
- padding: 0
20081
- }, 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 })));
20082
- };
20083
- const renderView = (item, index) => {
20084
- var _a, _b, _c, _d;
20085
- const rec = cloneDeep(recData);
20086
- rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
20087
- rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
20088
- return (React.createElement("div", { style: { position: 'relative' } },
20089
- React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
20090
- renderBottom(rec, index),
20091
- renderLikeButton(rec, index),
20092
- renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
20093
- React.createElement(ToggleButton$1, { style: {
20094
- position: 'absolute',
20095
- right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
20096
- 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',
20097
- bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
20098
- zIndex: 999
20099
- }, 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 }),
20100
- renderContent(item, index))));
20101
- };
20102
- useEffect(() => {
20103
- var _a, _b;
20104
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
20105
- return;
20106
- (_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);
20107
- }, [activeIndex]);
20108
- const handleSessionExpire = useCallback(debounce(() => {
20109
- var _a;
20110
- (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
20111
- }, 1000), []);
20112
- useEffect(() => {
20113
- if (disabledListener)
20114
- return;
20115
- const events = ['touchstart', 'touchcancel'];
20116
- events.forEach((event) => {
20117
- window.addEventListener(event, handleSessionExpire);
20118
- });
20119
- return () => {
20120
- events.forEach((event) => {
20121
- window.removeEventListener(event, handleSessionExpire);
20122
- });
20123
- };
20124
- }, [handleSessionExpire, disabledListener]);
20125
- return (React.createElement("div", { id: 'sxp-render',
20126
- // className={style['clc-sxp-container']}
20127
- style: { height: containerHeight, position: 'relative', pointerEvents } },
20128
- React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
20129
- swiperRef.current.swiper.allowTouchMove = false;
20130
- setTimeout(() => {
20131
- swiperRef.current.swiper.allowTouchMove = true;
20132
- }, 500);
20133
- }, onActiveIndexChange: (swiper) => {
20134
- setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
20135
- onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
20136
- }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
20137
- return renderView(rec, index);
20138
- }))));
20139
- });
20140
- var DiyStoryPreview$1 = memo(DiyStoryPreview);
20141
-
20142
19435
  /*
20143
19436
  * @Author: binruan@chatlabs.com
20144
19437
  * @Date: 2023-10-31 10:56:01
20145
19438
  * @LastEditors: binruan@chatlabs.com
20146
- * @LastEditTime: 2025-03-28 17:15:47
19439
+ * @LastEditTime: 2024-10-23 15:07:29
20147
19440
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
20148
19441
  *
20149
19442
  */
@@ -20235,9 +19528,17 @@ const Popup = () => {
20235
19528
 
20236
19529
  /*
20237
19530
  * @Author: binruan@chatlabs.com
20238
- * @Date: 2024-03-20 10:27:31
19531
+ * @Date: 2024-01-15 19:03:09
19532
+ * @LastEditors: binruan@chatlabs.com
19533
+ * @LastEditTime: 2025-02-24 15:47:44
19534
+ * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
19535
+ *
19536
+ */
19537
+ /*
19538
+ * @Author: binruan@chatlabs.com
19539
+ * @Date: 2023-11-24 15:58:00
20239
19540
  * @LastEditors: binruan@chatlabs.com
20240
- * @LastEditTime: 2025-03-28 16:55:21
19541
+ * @LastEditTime: 2023-12-26 10:24:42
20241
19542
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
20242
19543
  *
20243
19544
  */
@@ -20245,20 +19546,20 @@ const RESOLVER = {};
20245
19546
  Object.values(_materials_).forEach((v) => {
20246
19547
  RESOLVER[v.extend.type] = v;
20247
19548
  });
20248
- const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
20249
- var _a, _b, _c, _d, _e, _f, _g, _h;
19549
+ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
19550
+ var _a, _b, _c, _d, _e, _f;
20250
19551
  const utmVal = useMemo(() => {
20251
19552
  var _a;
20252
19553
  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('?', '') : '';
20253
19554
  return searchParams;
20254
19555
  }, []);
20255
- const [_schema, setSchema] = useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
19556
+ const [_schema, setSchema] = useState(data === null || data === void 0 ? void 0 : data.data);
20256
19557
  const [channel, setChannel] = useState();
20257
19558
  return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
20258
- 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 }) => {
20259
- var _a, _b;
19559
+ 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 }) => {
19560
+ var _a;
20260
19561
  return (React.createElement(React.Fragment, null,
20261
- 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 })),
19562
+ 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 })),
20262
19563
  React.createElement(Popup, null)));
20263
19564
  } })));
20264
19565
  };
@@ -20268,9 +19569,9 @@ var index = memo(SxpPageCore);
20268
19569
  * @Author : haocanweng@chatlabs.cn
20269
19570
  * @Date : 2023-08-21 16:31:58
20270
19571
  * @LastEditors: binruan@chatlabs.com
20271
- * @LastEditTime: 2025-03-25 14:31:53
19572
+ * @LastEditTime: 2024-06-25 11:37:48
20272
19573
  * @FilePath: \pb-sxp-ui\src\index.ts
20273
19574
  */
20274
19575
 
20275
- 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 };
19576
+ 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 };
20276
19577
  //# sourceMappingURL=index.js.map