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

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 +135 -824
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +134 -822
  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 +135 -824
  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 +47 -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 +47 -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 -27
  43. package/es/core/components/DiyStoryPreview/VideoWidget.js +0 -239
  44. package/es/core/components/DiyStoryPreview/index.d.ts +0 -51
  45. package/es/core/components/DiyStoryPreview/index.js +0 -411
  46. package/lib/core/components/DiyStoryPreview/PictureGroup.d.ts +0 -16
  47. package/lib/core/components/DiyStoryPreview/PictureGroup.js +0 -37
  48. package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +0 -27
  49. package/lib/core/components/DiyStoryPreview/VideoWidget.js +0 -242
  50. package/lib/core/components/DiyStoryPreview/index.d.ts +0 -51
  51. package/lib/core/components/DiyStoryPreview/index.js +0 -414
package/dist/index.cjs CHANGED
@@ -451,6 +451,39 @@ const Pagebuilder = {
451
451
  })
452
452
  };
453
453
 
454
+ function useEditor() {
455
+ return React.useContext(EditorContext);
456
+ }
457
+
458
+ function useDataSource() {
459
+ return React.useContext(DataSourceContext);
460
+ }
461
+
462
+ const feRealSessionIdKey = 'feRealSessionIdKey';
463
+ const generateFeSessionId = () => {
464
+ const uid = getUid(); // 32位长度
465
+ const timestamp = Date.now(); // 13位长度
466
+ const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
467
+ return result;
468
+ };
469
+ // 生成或者获取sessionID
470
+ const storeAndLoadFeSessionId = () => {
471
+ let result = getFeSessionId();
472
+ if (!result) {
473
+ result = generateFeSessionId();
474
+ window.localStorage.setItem(feRealSessionIdKey, result);
475
+ }
476
+ return result;
477
+ };
478
+ const refreshFeSessionId = () => {
479
+ const result = generateFeSessionId();
480
+ window.localStorage.setItem(feRealSessionIdKey, result);
481
+ };
482
+ // 获取 sessionID
483
+ const getFeSessionId = () => {
484
+ return window.localStorage.getItem(feRealSessionIdKey);
485
+ };
486
+
454
487
  /*
455
488
  * @Author: binruan@chatlabs.com
456
489
  * @Date: 2024-03-20 10:27:31
@@ -502,39 +535,6 @@ const setUserConsentResult = () => {
502
535
  window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
503
536
  };
504
537
 
505
- function useEditor() {
506
- return React.useContext(EditorContext);
507
- }
508
-
509
- function useDataSource() {
510
- return React.useContext(DataSourceContext);
511
- }
512
-
513
- const feRealSessionIdKey = 'feRealSessionIdKey';
514
- const generateFeSessionId = () => {
515
- const uid = getUid(); // 32位长度
516
- const timestamp = Date.now(); // 13位长度
517
- const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
518
- return result;
519
- };
520
- // 生成或者获取sessionID
521
- const storeAndLoadFeSessionId = () => {
522
- let result = getFeSessionId();
523
- if (!result) {
524
- result = generateFeSessionId();
525
- window.localStorage.setItem(feRealSessionIdKey, result);
526
- }
527
- return result;
528
- };
529
- const refreshFeSessionId = () => {
530
- const result = generateFeSessionId();
531
- window.localStorage.setItem(feRealSessionIdKey, result);
532
- };
533
- // 获取 sessionID
534
- const getFeSessionId = () => {
535
- return window.localStorage.getItem(feRealSessionIdKey);
536
- };
537
-
538
538
  /*
539
539
  * @Author: binruan@chatlabs.com
540
540
  * @Date: 2024-03-20 10:27:31
@@ -747,8 +747,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
747
747
  // Beacon API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。
748
748
  if (options.type === 'beacon' && navigator.sendBeacon) {
749
749
  return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
750
- JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
751
- ], { type: 'application/json;charset=UTF-8' }));
750
+ JSON.stringify({
751
+ body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
752
+ })
753
+ ], {
754
+ type: 'application/json;charset=UTF-8'
755
+ }));
752
756
  }
753
757
  return window
754
758
  .fetch(`${url}/api/${path}`, {
@@ -779,16 +783,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
779
783
  }, [bffDataSource]);
780
784
  // 获取推荐视频数据
781
785
  const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
782
- var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
783
- 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 }));
786
+ var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
787
+ 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 }));
784
788
  if (channel) {
785
789
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
786
790
  }
787
791
  else if (utmVal) {
788
- const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
792
+ const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
793
+ var _a, _b;
789
794
  const key = val.split('=')[0];
790
- return key;
791
- })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
795
+ 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);
796
+ })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
792
797
  if (val)
793
798
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
794
799
  }
@@ -802,19 +807,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
802
807
  let list = [];
803
808
  let result = null;
804
809
  const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
805
- var _t, _u, _v, _w, _x, _y;
810
+ var _v, _w, _x, _y, _z, _0;
806
811
  query.pageNum = pageNum;
807
812
  result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
808
813
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
809
814
  return undefined;
810
815
  }
811
816
  setLoading(false);
812
- 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 : []);
817
+ 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 : []);
813
818
  if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
814
819
  setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
815
820
  setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
816
821
  }
817
- 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));
822
+ 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));
818
823
  if (isNotNullList) {
819
824
  pageNum = pageNum + 1;
820
825
  yield recurveRecList(query);
@@ -822,13 +827,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
822
827
  });
823
828
  yield recurveRecList(query);
824
829
  if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
825
- 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 });
830
+ 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 });
826
831
  return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
827
832
  }
828
833
  if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
829
- 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 });
834
+ 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 });
830
835
  }
831
- const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
836
+ const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
832
837
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
833
838
  return undefined;
834
839
  }
@@ -836,8 +841,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
836
841
  setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
837
842
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
838
843
  let list = [];
839
- 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 : []);
840
- 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));
844
+ 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 : []);
845
+ 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));
841
846
  if (!isNotNullList) {
842
847
  setIsNoMoreData(true);
843
848
  }
@@ -846,12 +851,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
846
851
  return result === null || result === void 0 ? void 0 : result.data;
847
852
  }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
848
853
  const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
849
- var _z, _0, _1, _2;
854
+ var _1, _2, _3, _4;
850
855
  if (rtcList.length <= 0) {
851
856
  return;
852
857
  }
853
858
  const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
854
- 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 })));
859
+ 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 })));
855
860
  setRtcList(rtcList.concat(getFilterRecList(data)));
856
861
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
857
862
  return data;
@@ -908,7 +913,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
908
913
  console.log('userInfo:', userInfo);
909
914
  console.log('eventInfo:', ef);
910
915
  console.log('========= 结束 =========');
911
- 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}`, {
916
+ 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)}` : ''}`, {
912
917
  method: 'POST',
913
918
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
914
919
  type: 'beacon'
@@ -924,7 +929,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
924
929
  bffDataSource
925
930
  ]);
926
931
  const bffFbReport = React.useCallback(({ eventName, product }) => {
927
- var _a, _b, _c, _d, _e, _f;
932
+ var _a, _b, _c, _d, _e, _f, _g;
933
+ if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
934
+ window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view', {
935
+ page_location: window.location.href,
936
+ page_title: document.title
937
+ });
938
+ }
928
939
  if (!enableReportEvent ||
929
940
  !enabledMetaConversionApi ||
930
941
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
@@ -988,7 +999,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
988
999
  }
989
1000
  };
990
1001
  getEventParams(jsonParams);
991
- return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/FB/${(_f = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _f === void 0 ? void 0 : _f['x-app-id']}/${eventName}`, {
1002
+ const params = {};
1003
+ const queryString = location.search.slice(1);
1004
+ (_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
1005
+ const key = val.split('=')[0];
1006
+ const value = val.split('=')[1];
1007
+ params[key] = value;
1008
+ });
1009
+ const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
1010
+ return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_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)}` : ''}`, {
992
1011
  method: 'POST',
993
1012
  body: jsonParams,
994
1013
  type: 'beacon'
@@ -1016,18 +1035,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1016
1035
  }), [bffFetch]);
1017
1036
  // 获取 Tag
1018
1037
  const bffGetTagList = React.useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
1019
- var _3, _4, _5, _6, _7, _8, _9, _10;
1020
- const isShowTag = !!((_5 = (_4 = (_3 = data === null || data === void 0 ? void 0 : data.data) === null || _3 === void 0 ? void 0 : _3.sxpPageConf) === null || _4 === void 0 ? void 0 : _4.globalConfig) === null || _5 === void 0 ? void 0 : _5.isShowTag);
1038
+ var _5, _6, _7, _8, _9, _10, _11, _12;
1039
+ const isShowTag = !!((_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.data) === null || _5 === void 0 ? void 0 : _5.sxpPageConf) === null || _6 === void 0 ? void 0 : _6.globalConfig) === null || _7 === void 0 ? void 0 : _7.isShowTag);
1021
1040
  if (!utmVal || !isShowTag)
1022
1041
  return;
1023
1042
  try {
1024
- const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
1043
+ const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
1025
1044
  var _a, _b;
1026
1045
  const key = val.split('=')[0];
1027
1046
  return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
1028
- })) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
1047
+ })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
1029
1048
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
1030
- setTagList((_10 = (_9 = result === null || result === void 0 ? void 0 : result.data) === null || _9 === void 0 ? void 0 : _9.tags) !== null && _10 !== void 0 ? _10 : []);
1049
+ setTagList((_12 = (_11 = result === null || result === void 0 ? void 0 : result.data) === null || _11 === void 0 ? void 0 : _11.tags) !== null && _12 !== void 0 ? _12 : []);
1031
1050
  }
1032
1051
  catch (e) {
1033
1052
  console.log('e', e);
@@ -1087,10 +1106,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1087
1106
  });
1088
1107
  }, [bffEventReport]);
1089
1108
  const getAccount = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
1090
- var _11, _12;
1109
+ var _13, _14;
1091
1110
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
1092
- setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
1093
- return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
1111
+ setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
1112
+ return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
1094
1113
  }), [bffFetch]);
1095
1114
  const accountSonsent = React.useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
1096
1115
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
@@ -1485,7 +1504,7 @@ const EditorCore = React.forwardRef(({ children, resolver, isSsr, schema, enable
1485
1504
  React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
1486
1505
  });
1487
1506
 
1488
- var index$3 = /*#__PURE__*/Object.freeze({
1507
+ var index$2 = /*#__PURE__*/Object.freeze({
1489
1508
  __proto__: null,
1490
1509
  EditorCore: EditorCore
1491
1510
  });
@@ -10105,15 +10124,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
10105
10124
  wordBreak: 'break-word'
10106
10125
  }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
10107
10126
  React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
10108
- text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
10109
- textDecoration: 'underline',
10110
- cursor: 'pointer',
10111
- outline: 'none',
10112
- border: 'none',
10113
- boxSizing: 'content-box',
10114
- padding: 0,
10115
- background: 'transparent'
10116
- }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
10127
+ text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
10117
10128
  __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
10118
10129
  } }))));
10119
10130
  };
@@ -12471,7 +12482,7 @@ const EventProvider = (_a) => {
12471
12482
  const handleClick = lodash.throttle((e) => {
12472
12483
  var _a, _b, _c, _d, _e, _f;
12473
12484
  e.preventDefault();
12474
- const item = multItem || ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video);
12485
+ const item = multItem ? multItem : (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
12475
12486
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
12476
12487
  eventSubject: 'clickCta',
12477
12488
  eventDescription: 'User clicked the CTA'
@@ -12498,7 +12509,7 @@ const EventProvider = (_a) => {
12498
12509
  setElement(null);
12499
12510
  }
12500
12511
  }, [element, popup]);
12501
- return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ outline: 'none', border: 'none', boxSizing: 'content-box', padding: 0, background: 'transparent', display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
12512
+ return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
12502
12513
  };
12503
12514
  var EventProvider$1 = React.memo(EventProvider);
12504
12515
 
@@ -13094,7 +13105,6 @@ const MultiCommodityDiro$1 = (_a) => {
13094
13105
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
13095
13106
  const { sxpParameter } = useSxpDataSource();
13096
13107
  const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
13097
- console.log(recData, '222');
13098
13108
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
13099
13109
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
13100
13110
  return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -13301,7 +13311,6 @@ const MultiCommodityDiroNew$1 = (_a) => {
13301
13311
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
13302
13312
  const { sxpParameter } = useSxpDataSource();
13303
13313
  const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
13304
- console.log(recData, '333');
13305
13314
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
13306
13315
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
13307
13316
  return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -17577,15 +17586,15 @@ var _materials_ = /*#__PURE__*/Object.freeze({
17577
17586
  Swipe: Swipe
17578
17587
  });
17579
17588
 
17580
- const defaultUnLikeIconPath$2 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
17581
- const defaultLikeIconPath$2 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
17589
+ const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
17590
+ const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
17582
17591
  const LikeButton = (_a) => {
17583
17592
  var _b;
17584
17593
  var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
17585
17594
  const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
17586
17595
  const [state, setState] = React.useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
17587
- const likeIcon = useIconLink(defaultLikeIconPath$2);
17588
- const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
17596
+ const likeIcon = useIconLink(defaultLikeIconPath$1);
17597
+ const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
17589
17598
  const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
17590
17599
  var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
17591
17600
  if (state) {
@@ -17676,7 +17685,7 @@ const mountVideoPlayerAtNode = (() => {
17676
17685
  };
17677
17686
  })();
17678
17687
 
17679
- const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
17688
+ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
17680
17689
  const [isPauseVideo, setIsPauseVideo] = React.useState(false);
17681
17690
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
17682
17691
  const videoStartTime = React.useRef(0);
@@ -18021,7 +18030,7 @@ const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPost
18021
18030
  renderLoading,
18022
18031
  isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
18023
18032
  };
18024
- var VideoWidget$5 = React.memo(VideoWidget$4);
18033
+ var VideoWidget$3 = React.memo(VideoWidget$2);
18025
18034
 
18026
18035
  const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
18027
18036
  const [isTrue, setIsTure] = React.useState(defaultValue);
@@ -18110,7 +18119,7 @@ const Picture = (props) => {
18110
18119
  }, onLoad: onShowFirstImage }))));
18111
18120
  };
18112
18121
 
18113
- const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
18122
+ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
18114
18123
  var _a, _b;
18115
18124
  const { isActive } = useSwiperSlide();
18116
18125
  const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -18204,7 +18213,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
18204
18213
  React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
18205
18214
  }))));
18206
18215
  };
18207
- var PictureGroup$5 = React.memo(PictureGroup$4);
18216
+ var PictureGroup$3 = React.memo(PictureGroup$2);
18208
18217
 
18209
18218
  /*
18210
18219
  * @Author: binruan@chatlabs.com
@@ -18320,7 +18329,7 @@ function withBindDataSource(Component) {
18320
18329
  * @Author: binruan@chatlabs.com
18321
18330
  * @Date: 2023-12-26 16:11:34
18322
18331
  * @LastEditors: binruan@chatlabs.com
18323
- * @LastEditTime: 2025-03-28 14:46:08
18332
+ * @LastEditTime: 2024-10-31 10:30:55
18324
18333
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
18325
18334
  *
18326
18335
  */
@@ -18330,10 +18339,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
18330
18339
  return null;
18331
18340
  const renderComp = React.useMemo(() => {
18332
18341
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
18333
- // 如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
18342
+ //如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
18334
18343
  if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
18335
18344
  return;
18336
- // 默认不渲染category为cta类型的组件,该类型的组件只用于某一处
18345
+ //默认不渲染category为cta类型的组件,该类型的组件只用于某一处
18337
18346
  if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
18338
18347
  return;
18339
18348
  if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
@@ -18350,10 +18359,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
18350
18359
  const Component = withBindDataSource(t);
18351
18360
  const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
18352
18361
  const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
18353
- const style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
18362
+ let style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
18354
18363
  if (style.hasOwnProperty('backdropFilter')) {
18355
- const sbf = style.backdropFilter;
18356
- style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
18364
+ let sbf = style['backdropFilter'];
18365
+ style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
18357
18366
  }
18358
18367
  return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
18359
18368
  }
@@ -18714,10 +18723,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18714
18723
  return (React.createElement(MultiPosts$2, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
18715
18724
  }
18716
18725
  if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
18717
- return (React.createElement(VideoWidget$5, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
18726
+ return (React.createElement(VideoWidget$3, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
18718
18727
  }
18719
18728
  if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
18720
- return (React.createElement(PictureGroup$5, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
18729
+ return (React.createElement(PictureGroup$3, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
18721
18730
  }
18722
18731
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
18723
18732
  return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
@@ -19085,9 +19094,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
19085
19094
  React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
19086
19095
  openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0 } })))))));
19087
19096
  };
19088
- var index$2 = React.memo(SxpPageRender);
19097
+ var SxpPageRender$1 = React.memo(SxpPageRender);
19089
19098
 
19090
- const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
19099
+ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
19091
19100
  return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
19092
19101
  clickable: true,
19093
19102
  bulletActiveClass: 'swipe-item-active-bullet',
@@ -19097,9 +19106,9 @@ const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index
19097
19106
  React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
19098
19107
  })));
19099
19108
  };
19100
- var PictureGroup$3 = React.memo(PictureGroup$2);
19109
+ var PictureGroup$1 = React.memo(PictureGroup);
19101
19110
 
19102
- const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
19111
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
19103
19112
  const [isPauseVideo, setIsPauseVideo] = React.useState(false);
19104
19113
  const videoRef = React.useRef(null);
19105
19114
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
@@ -19329,14 +19338,14 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
19329
19338
  renderPoster,
19330
19339
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
19331
19340
  };
19332
- var VideoWidget$3 = React.memo(VideoWidget$2);
19341
+ var VideoWidget$1 = React.memo(VideoWidget);
19333
19342
 
19334
- const RESOLVER$2 = {};
19343
+ const RESOLVER$1 = {};
19335
19344
  Object.values(_materials_).forEach((v) => {
19336
- RESOLVER$2[v.extend.type] = v;
19345
+ RESOLVER$1[v.extend.type] = v;
19337
19346
  });
19338
- const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19339
- const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19347
+ const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19348
+ const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19340
19349
  const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
19341
19350
  const height = React.useMemo(() => {
19342
19351
  let minusHeight = 0;
@@ -19351,16 +19360,16 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19351
19360
  const renderContent = (rec, index) => {
19352
19361
  var _a, _b, _c, _d;
19353
19362
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
19354
- return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
19363
+ return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
19355
19364
  }
19356
19365
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
19357
- return (React.createElement(PictureGroup$3, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
19366
+ return (React.createElement(PictureGroup$1, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
19358
19367
  }
19359
19368
  if (rec.product) {
19360
19369
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
19361
19370
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
19362
19371
  var _a, _b, _c, _d, _e, _f, _g, _h;
19363
- const t = RESOLVER$2[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
19372
+ const t = RESOLVER$1[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
19364
19373
  const Component = withBindDataSource(t);
19365
19374
  const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
19366
19375
  return (React.createElement(Component, Object.assign({ key: `${index}${idx}`, textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle), bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {},
@@ -19382,7 +19391,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19382
19391
  const CTA = (rec, index) => {
19383
19392
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
19384
19393
  return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
19385
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$2 })));
19394
+ React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
19386
19395
  }
19387
19396
  return null;
19388
19397
  };
@@ -19400,8 +19409,8 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19400
19409
  }
19401
19410
  return null;
19402
19411
  };
19403
- const likeIcon = useIconLink(defaultLikeIconPath$1, appDomain);
19404
- const unlikeIcon = useIconLink(defaultUnLikeIconPath$1, appDomain);
19412
+ const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
19413
+ const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
19405
19414
  const renderLikeButton = (rec, index) => {
19406
19415
  var _a, _b, _c, _d;
19407
19416
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
@@ -19451,716 +19460,11 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
19451
19460
  };
19452
19461
  var index$1 = React.memo(DiyPortalPreview);
19453
19462
 
19454
- const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
19455
- const { isActive } = useSwiperSlide();
19456
- const [isload, setIsLoad] = React.useState(false);
19457
- React.useEffect(() => {
19458
- if (isActive && isload && loopPlay) {
19459
- setTimeout(() => {
19460
- var _a, _b, _c, _d;
19461
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
19462
- (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
19463
- }
19464
- else {
19465
- 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;
19466
- (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
19467
- }
19468
- }, 3000);
19469
- }
19470
- }, [isActive, isload, data, index, swiperRef, loopPlay]);
19471
- const loadFinishImage = () => {
19472
- setIsLoad(true);
19473
- };
19474
- return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
19475
- clickable: true,
19476
- bulletActiveClass: 'swipe-item-active-bullet',
19477
- bulletElement: 'button'
19478
- }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
19479
- return (React.createElement(SwiperSlide, { key: url },
19480
- React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: loadFinishImage })));
19481
- })));
19482
- };
19483
- var PictureGroup$1 = React.memo(PictureGroup);
19484
-
19485
- const VideoWidget = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
19486
- const { isActive } = useSwiperSlide();
19487
- const [isPauseVideo, setIsPauseVideo] = React.useState(false);
19488
- const videoRef = React.useRef(null);
19489
- const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
19490
- const videoStartTime = React.useRef(0);
19491
- const [isLoadFinish, setIsLoadFinish] = React.useState(false);
19492
- const [isFirstPlay, setIsFirstPlay] = React.useState(true);
19493
- const canvasRef = React.useRef(null);
19494
- const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
19495
- const videoId = `pb-cache-video-${index}`;
19496
- const hlsRef = React.useRef(null);
19497
- const loopPlayRef = React.useRef(loopPlay);
19498
- React.useEffect(() => {
19499
- loopPlayRef.current = loopPlay;
19500
- }, [loopPlay]);
19501
- React.useImperativeHandle(ref, () => {
19502
- return {
19503
- play() {
19504
- var _a;
19505
- if (!videoRef.current)
19506
- return;
19507
- handleTimeUpload();
19508
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19509
- setIsPauseVideo(false);
19510
- },
19511
- pause() {
19512
- var _a;
19513
- if (!videoRef.current)
19514
- return;
19515
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19516
- setIsPauseVideo(true);
19517
- },
19518
- setLoopPlay(v) {
19519
- if (!videoRef.current)
19520
- return;
19521
- loopPlayRef.current = v;
19522
- },
19523
- isPlaying() {
19524
- var _a;
19525
- return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
19526
- }
19527
- };
19528
- });
19529
- React.useEffect(() => {
19530
- if (!videoRef.current)
19531
- return;
19532
- videoRef.current.muted = muted;
19533
- }, [muted]);
19534
- React.useCallback(() => {
19535
- var _a;
19536
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19537
- }, []);
19538
- const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
19539
- React.useCallback(() => {
19540
- var _a, _b, _c, _d, _e, _f;
19541
- setIsPauseVideo(false);
19542
- const item = data[index];
19543
- if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
19544
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
19545
- ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
19546
- ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
19547
- setIsFirstPlay(false);
19548
- }
19549
- }, [bffEventReport, data, index, isFirstPlay]);
19550
- const handleLoadedMetadata = React.useCallback(() => {
19551
- var _a;
19552
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19553
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19554
- setIsLoadFinish(true);
19555
- }, []);
19556
- const handleClickVideo = React.useCallback((type) => () => {
19557
- var _a, _b, _c, _d, _e, _f;
19558
- if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
19559
- return;
19560
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
19561
- switch (type) {
19562
- case 'start':
19563
- if (!isPause)
19564
- return;
19565
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
19566
- setIsPauseVideo(false);
19567
- break;
19568
- case 'pause':
19569
- if (isPause)
19570
- return;
19571
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
19572
- setIsPauseVideo(true);
19573
- break;
19574
- default:
19575
- if (isPause) {
19576
- 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)) {
19577
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19578
- }
19579
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
19580
- }
19581
- else {
19582
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
19583
- }
19584
- setIsPauseVideo(!isPause);
19585
- break;
19586
- }
19587
- }, [isLoadFinish]);
19588
- const blur = React.useMemo(() => {
19589
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
19590
- }, [videoPostConfig]);
19591
- React.useMemo(() => {
19592
- var _a;
19593
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
19594
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
19595
- : 'translateY(-50%)';
19596
- }, [videoPostConfig]);
19597
- React.useCallback(() => {
19598
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
19599
- return;
19600
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
19601
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
19602
- const ctx = canvas.getContext('2d');
19603
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
19604
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
19605
- canvas.height = targetHeight;
19606
- canvas.width = targetWidth;
19607
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
19608
- setFirstFrameSrc(canvas.toDataURL());
19609
- }, []);
19610
- const handleTimeUpload = React.useCallback(() => {
19611
- var _a;
19612
- if (!videoRef.current)
19613
- return;
19614
- 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);
19615
- onUpdateTimeLine === null || onUpdateTimeLine === void 0 ? void 0 : onUpdateTimeLine(index, localTime);
19616
- setTimeout(() => {
19617
- var _a, _b;
19618
- 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)) {
19619
- slideSwiper();
19620
- }
19621
- });
19622
- }, []);
19623
- const slideSwiper = () => {
19624
- var _a, _b, _c, _d, _e, _f, _g;
19625
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19626
- if (!loopPlayRef.current)
19627
- return;
19628
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
19629
- (_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);
19630
- }
19631
- else {
19632
- 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;
19633
- (_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);
19634
- }
19635
- };
19636
- const handlePause = () => {
19637
- setIsPauseVideo(true);
19638
- onPause === null || onPause === void 0 ? void 0 : onPause();
19639
- };
19640
- const handlePlay = () => {
19641
- var _a;
19642
- 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);
19643
- onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
19644
- };
19645
- React.useEffect(() => {
19646
- var _a, _b, _c, _d;
19647
- if (!isActive)
19648
- return;
19649
- const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
19650
- if (!videoSrc)
19651
- return;
19652
- setIsPauseVideo(false);
19653
- const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
19654
- if (!videoPlayerWrapperNode)
19655
- return;
19656
- videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
19657
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
19658
- return;
19659
- const Hls = window === null || window === void 0 ? void 0 : window.Hls;
19660
- let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
19661
- if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
19662
- hls = new Hls();
19663
- hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
19664
- hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
19665
- hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
19666
- var _a;
19667
- videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19668
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19669
- });
19670
- }
19671
- else {
19672
- videoRef.current.src = videoSrc;
19673
- }
19674
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
19675
- // videoRef.current?.addEventListener('playing', handlePlaying);
19676
- // videoRef.current?.addEventListener('loadeddata', handLoadeddata);
19677
- (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
19678
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
19679
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
19680
- return () => {
19681
- var _a, _b, _c, _d, _e;
19682
- if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
19683
- (_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
19684
- setIsLoadFinish(false);
19685
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
19686
- // videoRef.current?.removeEventListener('playing', handlePlaying);
19687
- // videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
19688
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
19689
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
19690
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
19691
- };
19692
- }, [isActive]);
19693
- const renderPoster = React.useMemo(() => {
19694
- if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
19695
- return null;
19696
- }
19697
- 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' }));
19698
- }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
19699
- React.useMemo(() => {
19700
- return blur
19701
- ? {
19702
- filter: 'blur(10px)',
19703
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
19704
- }
19705
- : {};
19706
- }, [blur]);
19707
- if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
19708
- return null;
19709
- }
19710
- // const renderLoading = useMemo(() => {
19711
- // if (!waiting || !isLoadFinish) return;
19712
- // return (
19713
- // <img
19714
- // style={{
19715
- // position: 'absolute',
19716
- // top: '50%',
19717
- // left: 0,
19718
- // right: 0,
19719
- // transform: 'translateY(-100%)',
19720
- // margin: 'auto',
19721
- // width: '50px',
19722
- // height: '50px',
19723
- // objectFit: 'contain'
19724
- // }}
19725
- // src={loading_gif}
19726
- // alt='placeholder image'
19727
- // />
19728
- // );
19729
- // }, [waiting, isLoadFinish]);
19730
- return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
19731
- position: 'relative',
19732
- width: '100%',
19733
- height,
19734
- overflow: 'hidden'
19735
- }, onClick: handleClickVideo() },
19736
- React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
19737
- renderPoster,
19738
- isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
19739
- });
19740
- var VideoWidget$1 = React.memo(VideoWidget);
19741
-
19742
- /*
19743
- * @Author: binruan@chatlabs.com
19744
- * @Date: 2025-03-25 13:54:27
19745
- * @LastEditors: binruan@chatlabs.com
19746
- * @LastEditTime: 2025-04-01 17:54:08
19747
- * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
19748
- *
19749
- */
19750
- const recData = {
19751
- position: 0,
19752
- isCollected: false,
19753
- product: null,
19754
- video: {
19755
- appId: null,
19756
- itemId: 'VIDEOSsRgI1695278974368',
19757
- title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
19758
- enTitle: null,
19759
- icon: null,
19760
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
19761
- link: null,
19762
- linkTitle: null,
19763
- linkType: null,
19764
- menuCategoryId: null,
19765
- remark: null,
19766
- tags: [
19767
- 'Gift-Giving',
19768
- 'Daily Wear',
19769
- 'Business Formal',
19770
- 'Sports/Casual',
19771
- 'Anniversary Gifts',
19772
- 'Wedding/Engagement',
19773
- 'Formal Dinner/Party'
19774
- ],
19775
- traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19776
- value: 385,
19777
- weight: null,
19778
- bindCta: null,
19779
- bindProduct: null,
19780
- bindProducts: [
19781
- {
19782
- appId: 'wx448578f8851f3dce',
19783
- itemId: 'test02178888',
19784
- title: 'christian dior小包包 新CDN',
19785
- enTitle: null,
19786
- icon: null,
19787
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
19788
- link: '/pages/details/index?spu_id=1702262707659534338',
19789
- linkTitle: '',
19790
- linkType: 'MP',
19791
- menuCategoryId: null,
19792
- remark: null,
19793
- tags: [],
19794
- traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19795
- value: null,
19796
- weight: null,
19797
- bindCta: {
19798
- appId: 'wx448578f8851f3dce',
19799
- itemId: 'CTA3KofE1716186622249',
19800
- title: 'SHOP NOW 立即购买',
19801
- enTitle: 'BUY NOW立即购买,选择你所喜爱的;',
19802
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
19803
- cover: null,
19804
- link: '/pages/details/index?spu_id=1702262707659534338',
19805
- linkTitle: '',
19806
- linkType: 'MP',
19807
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
19808
- remark: null,
19809
- tags: [
19810
- "Woman's Perfumes",
19811
- 'Plates & Bowls',
19812
- 'Glasses',
19813
- 'Multicolor',
19814
- 'Carafes',
19815
- 'Tea & Coffee',
19816
- 'Green',
19817
- 'Grey',
19818
- 'Cutlery'
19819
- ],
19820
- traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19821
- value: null,
19822
- weight: null
19823
- },
19824
- collection: 'Ricco',
19825
- currency: 'INR-₹',
19826
- homePage: [
19827
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
19828
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
19829
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
19830
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
19831
- ],
19832
- info: 'test',
19833
- price: 53200,
19834
- shippingInfo: null,
19835
- taxInfo: null
19836
- },
19837
- {
19838
- appId: null,
19839
- itemId: '113J631A0684_C520',
19840
- title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
19841
- enTitle: null,
19842
- icon: null,
19843
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
19844
- link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
19845
- linkTitle: null,
19846
- linkType: 'WEB',
19847
- menuCategoryId: null,
19848
- remark: null,
19849
- tags: [],
19850
- traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19851
- value: null,
19852
- weight: null,
19853
- bindCta: {
19854
- appId: null,
19855
- itemId: 'CTAAfaKf1730796437032',
19856
- title: 'test',
19857
- enTitle: 'test',
19858
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
19859
- cover: null,
19860
- link: null,
19861
- linkTitle: null,
19862
- linkType: null,
19863
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
19864
- remark: '',
19865
- tags: [],
19866
- traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19867
- value: null,
19868
- weight: null
19869
- },
19870
- collection: 'Jacquard de coton éponge bleu',
19871
- currency: 'EUR-€',
19872
- homePage: [
19873
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
19874
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
19875
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
19876
- ],
19877
- 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",
19878
- price: 1800,
19879
- shippingInfo: null,
19880
- taxInfo: null
19881
- },
19882
- {
19883
- appId: null,
19884
- itemId: 'S5573CRIW_M928',
19885
- title: 'Mini Dior Book Tote',
19886
- enTitle: null,
19887
- icon: null,
19888
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
19889
- link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
19890
- linkTitle: null,
19891
- linkType: 'WEB',
19892
- menuCategoryId: null,
19893
- remark: null,
19894
- tags: ['ダイヤモンド'],
19895
- traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
19896
- value: null,
19897
- weight: null,
19898
- bindCta: null,
19899
- collection: null,
19900
- currency: 'GBP-£',
19901
- homePage: [
19902
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
19903
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
19904
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
19905
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
19906
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
19907
- ],
19908
- 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.",
19909
- price: 1950,
19910
- shippingInfo: null,
19911
- taxInfo: null
19912
- }
19913
- ],
19914
- url: null,
19915
- blockCta: 1,
19916
- blockProduct: 1,
19917
- hashTags: [
19918
- 'Sports/Casual',
19919
- 'Formal Dinner/Party',
19920
- 'Business Formal',
19921
- 'Wedding/Engagement',
19922
- 'Gift-Giving',
19923
- 'Daily Wear',
19924
- 'Anniversary Gifts'
19925
- ]
19926
- }
19927
- };
19928
- const RESOLVER$1 = {};
19929
- Object.values(_materials_).forEach((v) => {
19930
- RESOLVER$1[v.extend.type] = v;
19931
- });
19932
- const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19933
- const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19934
- const DiyStoryPreview = React.forwardRef(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener, onPlay, onPause }, ref) => {
19935
- const videoWidgetRef = React.useRef(null);
19936
- const swiperRef = React.useRef(null);
19937
- const [curIndex, setCurIndex] = React.useState(0);
19938
- React.useMemo(() => {
19939
- let minusHeight = 0;
19940
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
19941
- minusHeight += 45;
19942
- }
19943
- if (tagList.length > 0) {
19944
- minusHeight += 45;
19945
- }
19946
- return containerHeight - minusHeight;
19947
- }, [globalConfig, containerHeight, tagList]);
19948
- React.useImperativeHandle(ref, () => {
19949
- return {
19950
- play() {
19951
- var _a;
19952
- (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
19953
- },
19954
- pause() {
19955
- var _a;
19956
- (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19957
- },
19958
- slideTo(n) {
19959
- var _a, _b;
19960
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
19961
- return;
19962
- (_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);
19963
- },
19964
- isPlaying() {
19965
- var _a, _b;
19966
- 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;
19967
- }
19968
- };
19969
- });
19970
- // 判断是否是视频
19971
- const isVideoUrl = (url) => {
19972
- if (url && url !== '' && typeof url === 'string') {
19973
- const imageExtensions = ['.mp4', '.m3u8'];
19974
- const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
19975
- return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
19976
- }
19977
- else {
19978
- return false;
19979
- }
19980
- };
19981
- const renderContent = (rec, index) => {
19982
- const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
19983
- if (isVideo) {
19984
- return (React.createElement(VideoWidget$1, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlay, onUpdateTimeLine: onUpdateTimeLine, onPlay: onPlay, onPause: onPause })));
19985
- }
19986
- else {
19987
- 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 }));
19988
- }
19989
- };
19990
- React.useMemo(() => {
19991
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
19992
- return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
19993
- React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
19994
- }
19995
- return null;
19996
- }, [globalConfig]);
19997
- const renderBottom = (rec, index) => {
19998
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
19999
- if (rec === null || rec === void 0 ? void 0 : rec.video) {
20000
- let cta = null;
20001
- 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) {
20002
- cta = '多商品CTA';
20003
- }
20004
- else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
20005
- cta = '商品CTA';
20006
- }
20007
- else {
20008
- 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;
20009
- }
20010
- const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
20011
- return (React.createElement(React.Fragment, null,
20012
- ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
20013
- background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
20014
- height: '130px',
20015
- position: 'absolute',
20016
- bottom: 0,
20017
- width: '100%',
20018
- willChange: 'transform',
20019
- zIndex: 2,
20020
- pointerEvents
20021
- } })),
20022
- React.createElement("div", { style: {
20023
- marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
20024
- zIndex: 999,
20025
- position: 'absolute',
20026
- bottom: 0,
20027
- left: 0,
20028
- right: 0,
20029
- paddingTop: '20px'
20030
- } },
20031
- (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
20032
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
20033
- React.createElement("div", null,
20034
- React.createElement(ExpandableText$1
20035
- // className='clc-sxp-bottom-text'
20036
- , {
20037
- // className='clc-sxp-bottom-text'
20038
- 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' }) }),
20039
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
20040
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
20041
- }
20042
- return null;
20043
- };
20044
- const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
20045
- const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
20046
- const renderLikeButton = (rec, index) => {
20047
- var _a, _b, _c, _d;
20048
- if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
20049
- return;
20050
- let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
20051
- if (top < 40) {
20052
- top += 40;
20053
- }
20054
- if (rec === null || rec === void 0 ? void 0 : rec.video) {
20055
- 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,
20056
- // className={style['clc-sxp-like-button']}
20057
- style: {
20058
- top,
20059
- right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
20060
- position: 'absolute',
20061
- zIndex: 999,
20062
- backgroundColor: 'transparent',
20063
- width: '50px',
20064
- height: '50px',
20065
- outline: 'none',
20066
- border: 'none',
20067
- boxSizing: 'content-box',
20068
- padding: 0,
20069
- transform: 'translate3d(0px, 0px, 0px)'
20070
- } }));
20071
- }
20072
- return null;
20073
- };
20074
- const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
20075
- const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
20076
- const renderToggleButton = (visible) => {
20077
- var _a, _b, _c, _d;
20078
- if (!visible)
20079
- return;
20080
- let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
20081
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
20082
- top += 45;
20083
- }
20084
- 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: {
20085
- position: 'absolute',
20086
- visibility: 'visible',
20087
- zIndex: 999,
20088
- transform: 'translate3d(0px,0px,0px)',
20089
- [(_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,
20090
- [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
20091
- backgroundColor: 'transparent',
20092
- width: '50px',
20093
- height: '50px',
20094
- outline: 'none',
20095
- border: 'none',
20096
- boxSizing: 'content-box',
20097
- padding: 0
20098
- }, 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 })));
20099
- };
20100
- const renderView = (item, index) => {
20101
- var _a, _b, _c, _d;
20102
- const rec = lodash.cloneDeep(recData);
20103
- rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
20104
- rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
20105
- return (React.createElement("div", { style: { position: 'relative' } },
20106
- React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
20107
- renderBottom(rec, index),
20108
- renderLikeButton(rec, index),
20109
- renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
20110
- React.createElement(ToggleButton$1, { style: {
20111
- position: 'absolute',
20112
- right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
20113
- 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',
20114
- bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
20115
- zIndex: 999
20116
- }, 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 }),
20117
- renderContent(item, index))));
20118
- };
20119
- React.useEffect(() => {
20120
- var _a, _b;
20121
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
20122
- return;
20123
- (_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);
20124
- }, [activeIndex]);
20125
- const handleSessionExpire = React.useCallback(lodash.debounce(() => {
20126
- var _a;
20127
- (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
20128
- }, 1000), []);
20129
- React.useEffect(() => {
20130
- if (disabledListener)
20131
- return;
20132
- const events = ['touchstart', 'touchcancel'];
20133
- events.forEach((event) => {
20134
- window.addEventListener(event, handleSessionExpire);
20135
- });
20136
- return () => {
20137
- events.forEach((event) => {
20138
- window.removeEventListener(event, handleSessionExpire);
20139
- });
20140
- };
20141
- }, [handleSessionExpire, disabledListener]);
20142
- return (React.createElement("div", { id: 'sxp-render',
20143
- // className={style['clc-sxp-container']}
20144
- style: { height: containerHeight, position: 'relative', pointerEvents } },
20145
- React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
20146
- swiperRef.current.swiper.allowTouchMove = false;
20147
- setTimeout(() => {
20148
- swiperRef.current.swiper.allowTouchMove = true;
20149
- }, 500);
20150
- }, onActiveIndexChange: (swiper) => {
20151
- setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
20152
- onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
20153
- }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
20154
- return renderView(rec, index);
20155
- }))));
20156
- });
20157
- var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
20158
-
20159
19463
  /*
20160
19464
  * @Author: binruan@chatlabs.com
20161
19465
  * @Date: 2023-10-31 10:56:01
20162
19466
  * @LastEditors: binruan@chatlabs.com
20163
- * @LastEditTime: 2025-03-28 17:15:47
19467
+ * @LastEditTime: 2024-10-23 15:07:29
20164
19468
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
20165
19469
  *
20166
19470
  */
@@ -20252,9 +19556,17 @@ const Popup = () => {
20252
19556
 
20253
19557
  /*
20254
19558
  * @Author: binruan@chatlabs.com
20255
- * @Date: 2024-03-20 10:27:31
19559
+ * @Date: 2024-01-15 19:03:09
19560
+ * @LastEditors: binruan@chatlabs.com
19561
+ * @LastEditTime: 2025-02-24 15:47:44
19562
+ * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
19563
+ *
19564
+ */
19565
+ /*
19566
+ * @Author: binruan@chatlabs.com
19567
+ * @Date: 2023-11-24 15:58:00
20256
19568
  * @LastEditors: binruan@chatlabs.com
20257
- * @LastEditTime: 2025-03-28 16:55:21
19569
+ * @LastEditTime: 2023-12-26 10:24:42
20258
19570
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
20259
19571
  *
20260
19572
  */
@@ -20262,20 +19574,20 @@ const RESOLVER = {};
20262
19574
  Object.values(_materials_).forEach((v) => {
20263
19575
  RESOLVER[v.extend.type] = v;
20264
19576
  });
20265
- const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
20266
- var _a, _b, _c, _d, _e, _f, _g, _h;
19577
+ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
19578
+ var _a, _b, _c, _d, _e, _f;
20267
19579
  const utmVal = React.useMemo(() => {
20268
19580
  var _a;
20269
19581
  const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
20270
19582
  return searchParams;
20271
19583
  }, []);
20272
- const [_schema, setSchema] = React.useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
19584
+ const [_schema, setSchema] = React.useState(data === null || data === void 0 ? void 0 : data.data);
20273
19585
  const [channel, setChannel] = React.useState();
20274
19586
  return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
20275
- 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 }) => {
20276
- var _a, _b;
19587
+ React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
19588
+ var _a;
20277
19589
  return (React.createElement(React.Fragment, null,
20278
- React.createElement(DiyStoryPreview$1, Object.assign({ defaultData: Object.assign(Object.assign({}, data), { data: (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data }) }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents, loopPlay: true })),
19590
+ React.createElement(SxpPageRender$1, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
20279
19591
  React.createElement(Popup, null)));
20280
19592
  } })));
20281
19593
  };
@@ -20285,18 +19597,17 @@ var index = React.memo(SxpPageCore);
20285
19597
  * @Author : haocanweng@chatlabs.cn
20286
19598
  * @Date : 2023-08-21 16:31:58
20287
19599
  * @LastEditors: binruan@chatlabs.com
20288
- * @LastEditTime: 2025-03-25 14:31:53
19600
+ * @LastEditTime: 2024-06-25 11:37:48
20289
19601
  * @FilePath: \pb-sxp-ui\src\index.ts
20290
19602
  */
20291
19603
 
20292
19604
  exports.DiyPortalPreview = index$1;
20293
- exports.DiyStoryPreview = DiyStoryPreview$1;
20294
19605
  exports.EditorDataProvider = EditorDataProvider;
20295
19606
  exports.Modal = Modal$1;
20296
19607
  exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
20297
19608
  exports.SxpPageCore = index;
20298
- exports.SxpPageRender = index$2;
20299
- exports.core = index$3;
19609
+ exports.SxpPageRender = SxpPageRender$1;
19610
+ exports.core = index$2;
20300
19611
  exports.default = Pagebuilder;
20301
19612
  exports.materials = _materials_;
20302
19613
  exports.useEditorDataProvider = useEditorDataProvider;