pb-sxp-ui 1.0.70 → 1.0.72

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 (55) hide show
  1. package/dist/index.cjs +167 -131
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +167 -131
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +171 -134
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/DiyPortalPreview/VideoWidget.js +15 -16
  14. package/es/core/components/DiyPortalPreview/index.js +8 -8
  15. package/es/core/components/SxpPageCore/index.js +2 -2
  16. package/es/core/components/SxpPageRender/FormatImage.js +2 -1
  17. package/es/core/components/SxpPageRender/LikeButton/index.js +11 -11
  18. package/es/core/components/SxpPageRender/Nudge/index.js +2 -2
  19. package/es/core/components/SxpPageRender/VideoWidget/index.js +13 -13
  20. package/es/core/components/SxpPageRender/WaterFall/List.js +5 -9
  21. package/es/core/components/SxpPageRender/index.js +39 -30
  22. package/es/core/components/SxpPageRender/typing.d.ts +1 -0
  23. package/es/core/context/SxpDataSourceProvider.d.ts +1 -0
  24. package/es/core/context/SxpDataSourceProvider.js +12 -4
  25. package/es/materials/sxp/HashTag/settingRender.d.ts +2 -7
  26. package/es/materials/sxp/HashTag/settingRender.js +0 -5
  27. package/es/materials/sxp/defaultSetting.js +1 -1
  28. package/es/materials/sxp/template/Commodity/index.js +4 -4
  29. package/es/materials/sxp/template/CommodityDiro/index.js +4 -4
  30. package/es/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  31. package/es/materials/sxp/template/MultiCommodity/index.js +4 -4
  32. package/es/materials/sxp/template/MultiCommodityDiro/index.js +4 -4
  33. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +4 -4
  34. package/lib/core/components/DiyPortalPreview/VideoWidget.js +15 -16
  35. package/lib/core/components/DiyPortalPreview/index.js +8 -8
  36. package/lib/core/components/SxpPageCore/index.js +2 -2
  37. package/lib/core/components/SxpPageRender/FormatImage.js +1 -0
  38. package/lib/core/components/SxpPageRender/LikeButton/index.js +11 -11
  39. package/lib/core/components/SxpPageRender/Nudge/index.js +2 -2
  40. package/lib/core/components/SxpPageRender/VideoWidget/index.js +13 -13
  41. package/lib/core/components/SxpPageRender/WaterFall/List.js +5 -9
  42. package/lib/core/components/SxpPageRender/index.js +39 -30
  43. package/lib/core/components/SxpPageRender/typing.d.ts +1 -0
  44. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -0
  45. package/lib/core/context/SxpDataSourceProvider.js +12 -4
  46. package/lib/materials/sxp/HashTag/settingRender.d.ts +2 -7
  47. package/lib/materials/sxp/HashTag/settingRender.js +0 -5
  48. package/lib/materials/sxp/defaultSetting.js +1 -1
  49. package/lib/materials/sxp/template/Commodity/index.js +4 -4
  50. package/lib/materials/sxp/template/CommodityDiro/index.js +4 -4
  51. package/lib/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  52. package/lib/materials/sxp/template/MultiCommodity/index.js +4 -4
  53. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +4 -4
  54. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +4 -4
  55. package/package.json +1 -2
package/dist/pb-ui.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('eventemitter3'), require('@emotion/css'), require('react-dom'), require('hls.js')) :
3
- typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', 'react-dom', 'hls.js'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.EventEmitter, global.css, global.ReactDOM, global.Hls));
5
- })(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, ReactDOM, Hls) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('eventemitter3'), require('@emotion/css'), require('react-dom')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', 'react-dom'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.EventEmitter, global.css, global.ReactDOM));
5
+ })(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, ReactDOM) { 'use strict';
6
6
 
7
7
  function _interopNamespaceDefault(e) {
8
8
  var n = Object.create(null);
@@ -438,7 +438,7 @@
438
438
  DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
439
439
  })(DataSourceType || (DataSourceType = {}));
440
440
  const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
441
- const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false }) => {
441
+ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, isShowTag = true }) => {
442
442
  const [rtcList, setRtcList] = React.useState([]);
443
443
  const [tagList, setTagList] = React.useState([]);
444
444
  const [loading, setLoading] = React.useState(false);
@@ -571,9 +571,17 @@
571
571
  if (!enableReportEvent || !enabledMetaConversionApi) {
572
572
  return;
573
573
  }
574
+ const fakeUserId = storeAndLoadFeUserId();
574
575
  return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
575
576
  method: 'POST',
576
- body: { eventName, actionSource, eventSourceUrl, 'userData.externalId': externalId },
577
+ body: {
578
+ eventName,
579
+ actionSource,
580
+ eventSourceUrl,
581
+ userData: {
582
+ externalId: fakeUserId
583
+ }
584
+ },
577
585
  type: 'beacon'
578
586
  });
579
587
  }, [bffFetch, enableReportEvent, enabledMetaConversionApi]);
@@ -592,7 +600,7 @@
592
600
  // 获取 Tag
593
601
  const bffGetTagList = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
594
602
  var _h, _j, _k, _l, _m;
595
- if (!utmVal)
603
+ if (!utmVal || !isShowTag)
596
604
  return;
597
605
  try {
598
606
  const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
@@ -605,7 +613,7 @@
605
613
  catch (e) {
606
614
  console.log('e', e);
607
615
  }
608
- }), [bffFetch, utmVal]);
616
+ }), [bffFetch, utmVal, isShowTag]);
609
617
  const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
610
618
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
611
619
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
@@ -942,11 +950,11 @@
942
950
  * @Author: binruan@chatlabs.com
943
951
  * @Date: 2024-04-28 14:42:22
944
952
  * @LastEditors: binruan@chatlabs.com
945
- * @LastEditTime: 2024-05-17 14:07:01
953
+ * @LastEditTime: 2024-05-23 17:01:21
946
954
  * @FilePath: \pb-sxp-ui\src\materials\sxp\defaultSetting.ts
947
955
  *
948
956
  */
949
- const fontOptions = [{ label: '默认字体', value: 'appFont' }];
957
+ const fontOptions = [{ label: 'defalut', value: 'appFont' }];
950
958
  const sxpFonts = typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.localStorage.getItem('sxp_font_links'));
951
959
  const data = sxpFonts && sxpFonts !== '' ? JSON.parse(sxpFonts) : [];
952
960
  var defaultSetting = {
@@ -8431,7 +8439,7 @@
8431
8439
  * @Author: binruan@chatlabs.com
8432
8440
  * @Date: 2024-03-20 10:27:31
8433
8441
  * @LastEditors: binruan@chatlabs.com
8434
- * @LastEditTime: 2024-04-19 14:12:55
8442
+ * @LastEditTime: 2024-05-20 15:53:04
8435
8443
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
8436
8444
  *
8437
8445
  */
@@ -8446,6 +8454,30 @@
8446
8454
  React.useEffect(() => {
8447
8455
  setImgSrc(src);
8448
8456
  }, [src]);
8457
+ React.useRef(null);
8458
+ // useEffect(() => {
8459
+ // let observer: any = null;
8460
+ // const { current } = imgRef;
8461
+ // if (current) {
8462
+ // observer = new IntersectionObserver(
8463
+ // (entries) => {
8464
+ // entries.forEach((entry) => {
8465
+ // if (entry.isIntersecting) {
8466
+ // setImgSrc(src);
8467
+ // observer.unobserve(current);
8468
+ // }
8469
+ // });
8470
+ // },
8471
+ // { threshold: 0.1 } // 触发阈值，可根据需要调整
8472
+ // );
8473
+ // observer.observe(current);
8474
+ // }
8475
+ // return () => {
8476
+ // if (observer && current) {
8477
+ // observer.unobserve(current);
8478
+ // }
8479
+ // };
8480
+ // }, [src]);
8449
8481
  return (React.createElement(React.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
8450
8482
  React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
8451
8483
  React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
@@ -9492,11 +9524,11 @@ Made in Italy` })));
9492
9524
  var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
9493
9525
 
9494
9526
  const Commodity$1 = (_a) => {
9495
- var _b, _c, _d, _e, _f, _g, _h;
9527
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k;
9496
9528
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
9497
9529
  const { sxpParameter } = useSxpDataSource();
9498
9530
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
9499
- const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
9531
+ const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
9500
9532
  return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
9501
9533
  React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
9502
9534
  React.createElement(FormatImage$1, { className: css.css({
@@ -9514,8 +9546,8 @@ Made in Italy` })));
9514
9546
  width: '100%',
9515
9547
  overflow: 'hidden'
9516
9548
  }) },
9517
- React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_f = product === null || product === void 0 ? void 0 : product.title) !== null && _f !== void 0 ? _f : 'Product Name'),
9518
- React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_h = (_g = product === null || product === void 0 ? void 0 : product.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now'))));
9549
+ React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
9550
+ React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
9519
9551
  };
9520
9552
  var CommodityComponent = React.memo(Commodity$1);
9521
9553
 
@@ -9741,11 +9773,11 @@ Made in Italy` })));
9741
9773
  var styles$4 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__yyHVb"};
9742
9774
 
9743
9775
  const CommodityDiro$1 = (_a) => {
9744
- var _b, _c, _d, _e, _f, _g, _h;
9776
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k;
9745
9777
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
9746
9778
  const { sxpParameter } = useSxpDataSource();
9747
9779
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
9748
- const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
9780
+ const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
9749
9781
  return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
9750
9782
  React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
9751
9783
  React.createElement(FormatImage$1, { className: css.css({
@@ -9763,8 +9795,8 @@ Made in Italy` })));
9763
9795
  width: '100%',
9764
9796
  overflow: 'hidden'
9765
9797
  }) },
9766
- React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_f = product === null || product === void 0 ? void 0 : product.title) !== null && _f !== void 0 ? _f : 'Product Name'),
9767
- React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_h = (_g = product === null || product === void 0 ? void 0 : product.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now'))));
9798
+ React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
9799
+ React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
9768
9800
  };
9769
9801
  var CommodityDiroComponent = React.memo(CommodityDiro$1);
9770
9802
 
@@ -9839,11 +9871,11 @@ Made in Italy` })));
9839
9871
  var styles$3 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__I-yCC"};
9840
9872
 
9841
9873
  const CommodityDiroNew$1 = (_a) => {
9842
- var _b, _c, _d, _e, _f, _g, _h;
9874
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k;
9843
9875
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
9844
9876
  const { sxpParameter } = useSxpDataSource();
9845
9877
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
9846
- const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
9878
+ const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
9847
9879
  return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
9848
9880
  React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
9849
9881
  React.createElement(FormatImage$1, { className: css.css({
@@ -9861,8 +9893,8 @@ Made in Italy` })));
9861
9893
  width: '100%',
9862
9894
  overflow: 'hidden'
9863
9895
  }) },
9864
- React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_f = product === null || product === void 0 ? void 0 : product.title) !== null && _f !== void 0 ? _f : 'Product Name'),
9865
- React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_h = (_g = product === null || product === void 0 ? void 0 : product.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop now'))));
9896
+ React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
9897
+ React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop now'))));
9866
9898
  };
9867
9899
  var CommodityDiroNewComponent = React.memo(CommodityDiroNew$1);
9868
9900
 
@@ -9991,10 +10023,10 @@ Made in Italy` })));
9991
10023
  }
9992
10024
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
9993
10025
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
9994
- var _a, _b, _c, _d, _e, _f;
10026
+ var _a, _b, _c, _d, _e, _f, _g;
9995
10027
  return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
9996
10028
  React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
9997
- React.createElement(Img$1, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item, index: index, style: {
10029
+ React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
9998
10030
  transform: `translateY(${translateY}%)`
9999
10031
  } })),
10000
10032
  React.createElement("div", { className: css.css({
@@ -10005,8 +10037,8 @@ Made in Italy` })));
10005
10037
  width: '100%',
10006
10038
  overflow: 'hidden'
10007
10039
  }) },
10008
- React.createElement("div", { className: styles$2['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_d = item === null || item === void 0 ? void 0 : item.title) !== null && _d !== void 0 ? _d : 'Product Name'),
10009
- React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_f = (_e = item === null || item === void 0 ? void 0 : item.bindCta) === null || _e === void 0 ? void 0 : _e.enTitle) !== null && _f !== void 0 ? _f : 'Shop Now'))));
10040
+ React.createElement("div", { className: styles$2['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
10041
+ React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
10010
10042
  })));
10011
10043
  };
10012
10044
  var MultiCommodityDiroComponent = React.memo(MultiCommodityDiro$1);
@@ -10106,10 +10138,10 @@ Made in Italy` })));
10106
10138
  }
10107
10139
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
10108
10140
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
10109
- var _a, _b, _c, _d, _e, _f;
10141
+ var _a, _b, _c, _d, _e, _f, _g;
10110
10142
  return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
10111
10143
  React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
10112
- React.createElement(Img$1, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item, index: index, style: {
10144
+ React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
10113
10145
  transform: `translateY(${translateY}%)`
10114
10146
  } })),
10115
10147
  React.createElement("div", { className: css.css({
@@ -10120,8 +10152,8 @@ Made in Italy` })));
10120
10152
  width: '100%',
10121
10153
  overflow: 'hidden'
10122
10154
  }) },
10123
- React.createElement("div", { className: styles$1['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_d = item === null || item === void 0 ? void 0 : item.title) !== null && _d !== void 0 ? _d : 'Product Name'),
10124
- React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_f = (_e = item === null || item === void 0 ? void 0 : item.bindCta) === null || _e === void 0 ? void 0 : _e.enTitle) !== null && _f !== void 0 ? _f : 'Shop Now'))));
10155
+ React.createElement("div", { className: styles$1['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
10156
+ React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
10125
10157
  })));
10126
10158
  };
10127
10159
  var MultiCommodityComponent = React.memo(MultiCommodity$1);
@@ -10220,10 +10252,10 @@ Made in Italy` })));
10220
10252
  }
10221
10253
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
10222
10254
  return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
10223
- var _a, _b, _c, _d, _e, _f;
10255
+ var _a, _b, _c, _d, _e, _f, _g;
10224
10256
  return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
10225
10257
  React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
10226
- React.createElement(Img$1, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item, index: index, style: {
10258
+ React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
10227
10259
  transform: `translateY(${translateY}%)`
10228
10260
  } })),
10229
10261
  React.createElement("div", { className: css.css({
@@ -10235,8 +10267,8 @@ Made in Italy` })));
10235
10267
  overflow: 'hidden',
10236
10268
  lineHeight: '20px'
10237
10269
  }) },
10238
- React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_d = item === null || item === void 0 ? void 0 : item.title) !== null && _d !== void 0 ? _d : 'Product Name'),
10239
- React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_f = (_e = item === null || item === void 0 ? void 0 : item.bindCta) === null || _e === void 0 ? void 0 : _e.enTitle) !== null && _f !== void 0 ? _f : 'Shop now'))));
10270
+ React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
10271
+ React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))));
10240
10272
  })));
10241
10273
  };
10242
10274
  var MultiCommodityDiroNewComponent = React.memo(MultiCommodityDiroNew$1);
@@ -10303,7 +10335,7 @@ Made in Italy` })));
10303
10335
  * @Author: binruan@chatlabs.com
10304
10336
  * @Date: 2024-04-07 14:07:12
10305
10337
  * @LastEditors: binruan@chatlabs.com
10306
- * @LastEditTime: 2024-04-29 19:55:53
10338
+ * @LastEditTime: 2024-05-23 11:03:15
10307
10339
  * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\settingRender.tsx
10308
10340
  *
10309
10341
  */
@@ -10311,11 +10343,11 @@ Made in Italy` })));
10311
10343
  {
10312
10344
  title: '卡片样式',
10313
10345
  child: [
10314
- {
10315
- type: 'Number',
10316
- label: '文本行数',
10317
- name: ['props', 'lineClamp']
10318
- },
10346
+ // {
10347
+ // type: 'Number',
10348
+ // label: '文本行数',
10349
+ // name: ['props', 'lineClamp']
10350
+ // },
10319
10351
  {
10320
10352
  type: 'Number',
10321
10353
  label: '上下边距',
@@ -11799,19 +11831,15 @@ Made in Italy` })));
11799
11831
  const canvasRef = React.useRef(null);
11800
11832
  const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
11801
11833
  const src = React.useMemo(() => {
11802
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
11834
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
11803
11835
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
11804
11836
  return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
11805
11837
  }
11806
- else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
11807
- setShowVideo(true);
11808
- return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
11838
+ else if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.imgUrls) === null || _d === void 0 ? void 0 : _d.length) {
11839
+ return (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f[0];
11809
11840
  }
11810
- else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
11811
- return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
11812
- }
11813
- else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
11814
- return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
11841
+ else if ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.homePage) === null || _h === void 0 ? void 0 : _h.length) {
11842
+ return (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k[0];
11815
11843
  }
11816
11844
  else {
11817
11845
  return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
@@ -12230,17 +12258,17 @@ Made in Italy` })));
12230
12258
  if (state) {
12231
12259
  // 先设置状态
12232
12260
  setState(false);
12233
- const result = (_d = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_c = (_b = recData.video) === null || _b === void 0 ? void 0 : _b.itemId) !== null && _c !== void 0 ? _c : '' })))) !== null && _d !== void 0 ? _d : false;
12261
+ const result = (_d = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.itemId) !== null && _c !== void 0 ? _c : '' })))) !== null && _d !== void 0 ? _d : false;
12234
12262
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
12235
12263
  eventInfo: {
12236
12264
  eventSubject: 'favoriteContentCanceled',
12237
12265
  eventDescription: 'This content was unfavorite by the user',
12238
- contentId: (_f = (_e = recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
12239
- contentName: (_h = (_g = recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
12240
- contentTags: JSON.stringify((_k = (_j = recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
12266
+ contentId: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
12267
+ contentName: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
12268
+ contentTags: JSON.stringify((_k = (_j = recData === null || recData === void 0 ? void 0 : recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
12241
12269
  position: position + '',
12242
- contentFormat: ((_l = recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
12243
- traceInfo: (_m = recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
12270
+ contentFormat: ((_l = recData === null || recData === void 0 ? void 0 : recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
12271
+ traceInfo: (_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
12244
12272
  }
12245
12273
  });
12246
12274
  // 如果接口调用失败，则回滚状态
@@ -12255,12 +12283,12 @@ Made in Italy` })));
12255
12283
  eventInfo: {
12256
12284
  eventSubject: 'favoriteContent',
12257
12285
  eventDescription: 'This content was favorite by the user',
12258
- contentId: (_q = (_p = recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
12259
- contentName: (_s = (_r = recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
12260
- contentTags: JSON.stringify((_u = (_t = recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
12286
+ contentId: (_q = (_p = recData === null || recData === void 0 ? void 0 : recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
12287
+ contentName: (_s = (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
12288
+ contentTags: JSON.stringify((_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
12261
12289
  position: position + '',
12262
- contentFormat: ((_v = recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
12263
- traceInfo: (_w = recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
12290
+ contentFormat: ((_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
12291
+ traceInfo: (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
12264
12292
  }
12265
12293
  });
12266
12294
  if (!result) {
@@ -12338,15 +12366,15 @@ Made in Italy` })));
12338
12366
  eventInfo: {
12339
12367
  eventSubject: 'playVideo',
12340
12368
  eventDescription: 'User played the video',
12341
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
12342
- contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
12369
+ contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
12370
+ contentName: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
12343
12371
  playType,
12344
12372
  startTime: videoCurrentTime,
12345
12373
  videoDuration,
12346
- contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
12374
+ contentTags: JSON.stringify((_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
12347
12375
  position: index + '',
12348
12376
  contentFormat: 'video',
12349
- traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
12377
+ traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
12350
12378
  }
12351
12379
  });
12352
12380
  setIsFirstPlay(false);
@@ -12436,15 +12464,15 @@ Made in Italy` })));
12436
12464
  eventInfo: {
12437
12465
  eventSubject: 'playOverVideo',
12438
12466
  eventDescription: 'User finished playing the video',
12439
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
12440
- contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
12467
+ contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
12468
+ contentName: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
12441
12469
  endTime: videoCurrentTime,
12442
12470
  videoDuration,
12443
12471
  playDuration,
12444
- contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
12472
+ contentTags: JSON.stringify((_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
12445
12473
  position: index + '',
12446
12474
  contentFormat: 'video',
12447
- traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
12475
+ traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
12448
12476
  }
12449
12477
  });
12450
12478
  }
@@ -12452,9 +12480,10 @@ Made in Italy` })));
12452
12480
  React.useEffect(() => {
12453
12481
  if (!isActive || !videoRef)
12454
12482
  return;
12455
- const videoSrc = rec.video.url;
12483
+ const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
12456
12484
  if (!videoSrc)
12457
12485
  return;
12486
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
12458
12487
  setIsPauseVideo(false);
12459
12488
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
12460
12489
  const dom = document.querySelector('#player-container-id');
@@ -12462,7 +12491,6 @@ Made in Italy` })));
12462
12491
  if (!dom && !dom2)
12463
12492
  return;
12464
12493
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
12465
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
12466
12494
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
12467
12495
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
12468
12496
  // videoRef?.on('canplay', handleCanplay);
@@ -12543,10 +12571,10 @@ Made in Italy` })));
12543
12571
  window.removeEventListener('beforeunload', handleBeforeUnload);
12544
12572
  };
12545
12573
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
12546
- if (!rec.video) {
12574
+ if (!(rec === null || rec === void 0 ? void 0 : rec.video)) {
12547
12575
  return null;
12548
12576
  }
12549
- return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
12577
+ return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
12550
12578
  !isBgColor && (React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
12551
12579
  React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
12552
12580
  React.createElement("div", { style: {
@@ -12561,7 +12589,7 @@ Made in Italy` })));
12561
12589
  React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
12562
12590
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
12563
12591
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
12564
- renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
12592
+ renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
12565
12593
  position: 'relative',
12566
12594
  width: '100%',
12567
12595
  height,
@@ -12860,7 +12888,7 @@ Made in Italy` })));
12860
12888
  * @Author: binruan@chatlabs.com
12861
12889
  * @Date: 2024-03-26 10:07:41
12862
12890
  * @LastEditors: binruan@chatlabs.com
12863
- * @LastEditTime: 2024-04-15 14:27:18
12891
+ * @LastEditTime: 2024-05-23 14:31:12
12864
12892
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Nudge\index.tsx
12865
12893
  *
12866
12894
  */
@@ -12873,8 +12901,8 @@ Made in Italy` })));
12873
12901
  backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
12874
12902
  borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
12875
12903
  } },
12876
- (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover' } }) : null,
12877
- React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
12904
+ (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover', flexShrink: 0 } }) : null,
12905
+ React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
12878
12906
  };
12879
12907
 
12880
12908
  const DEFAULT_TAG = 'FOR U';
@@ -12918,7 +12946,7 @@ Made in Italy` })));
12918
12946
  * @Author: binruan@chatlabs.com
12919
12947
  * @Date: 2024-01-15 19:03:09
12920
12948
  * @LastEditors: binruan@chatlabs.com
12921
- * @LastEditTime: 2024-05-17 13:58:46
12949
+ * @LastEditTime: 2024-05-24 16:32:06
12922
12950
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
12923
12951
  *
12924
12952
  */
@@ -12978,23 +13006,29 @@ Made in Italy` })));
12978
13006
  };
12979
13007
  const firstRef = React.useRef();
12980
13008
  React.useEffect(() => {
12981
- if (!firstRef.current && !videoRef) {
13009
+ var _a, _b, _c;
13010
+ if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
12982
13011
  firstRef.current = true;
12983
13012
  const player = TCPlayer('player-container-id', {
12984
13013
  licenseUrl, // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
12985
13014
  controls: false,
12986
- autoplay: false,
12987
13015
  loop: false,
13016
+ autoplay: true,
12988
13017
  muted: true,
12989
13018
  preload: 'auto',
12990
13019
  posterImage: false,
12991
- bigPlayButton: true
13020
+ bigPlayButton: true,
13021
+ sources: [
13022
+ {
13023
+ src: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : ''
13024
+ }
13025
+ ]
12992
13026
  });
12993
13027
  player === null || player === void 0 ? void 0 : player.ready(() => {
12994
13028
  setVideoRef(player);
12995
13029
  });
12996
13030
  }
12997
- }, [videoRef, licenseUrl]);
13031
+ }, [videoRef, licenseUrl, data]);
12998
13032
  React.useEffect(() => {
12999
13033
  if (!isInit)
13000
13034
  handleH5EnterLink();
@@ -13049,7 +13083,7 @@ Made in Italy` })));
13049
13083
  if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
13050
13084
  fromKName = 'pdpPage';
13051
13085
  }
13052
- else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
13086
+ else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
13053
13087
  fromKName = 'formPage';
13054
13088
  }
13055
13089
  else if (isFromHashtag) {
@@ -13074,7 +13108,7 @@ Made in Italy` })));
13074
13108
  position: activeIndex + '',
13075
13109
  fromKName,
13076
13110
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
13077
- ctatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
13111
+ ctatId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
13078
13112
  }
13079
13113
  });
13080
13114
  }
@@ -13112,11 +13146,11 @@ Made in Italy` })));
13112
13146
  }, [globalConfig]);
13113
13147
  const renderContent = React.useCallback((rec, index) => {
13114
13148
  var _a, _b, _c, _d;
13115
- if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
13149
+ if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
13116
13150
  return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
13117
13151
  }
13118
- if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
13119
- return (React.createElement(PictureGroup$3, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
13152
+ if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
13153
+ 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, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
13120
13154
  }
13121
13155
  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) {
13122
13156
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
@@ -13157,16 +13191,16 @@ Made in Italy` })));
13157
13191
  }, [isShowMore]);
13158
13192
  const renderBottom = React.useCallback((rec, index) => {
13159
13193
  var _a, _b, _c, _d, _e, _f, _g;
13160
- if (rec.video) {
13194
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
13161
13195
  return (React.createElement(React.Fragment, null,
13162
- ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
13196
+ ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
13163
13197
  React.createElement("div", { className: 'clc-sxp-bottom' },
13164
13198
  React.createElement(Nudge, { nudge: nudge }),
13165
13199
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
13166
13200
  React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
13167
13201
  React.createElement("div", null,
13168
- React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
13169
- React.createElement(Hashtag$1, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
13202
+ React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
13203
+ React.createElement(Hashtag$1, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
13170
13204
  }
13171
13205
  return null;
13172
13206
  }, [
@@ -13190,7 +13224,7 @@ Made in Italy` })));
13190
13224
  if (waterFallData && top < 40) {
13191
13225
  top += 40;
13192
13226
  }
13193
- if (rec.video) {
13227
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
13194
13228
  return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
13195
13229
  [(_b = globalConfig.likeIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig.likeIconX) !== null && _c !== void 0 ? _c : 0,
13196
13230
  [(_d = globalConfig.likeIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top
@@ -13200,27 +13234,27 @@ Made in Italy` })));
13200
13234
  }, [globalConfig, waterFallData]);
13201
13235
  const handleReportViewImageEnd = (item) => {
13202
13236
  var _a, _b, _c, _d, _e, _f;
13203
- if (!((_a = item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
13237
+ if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
13204
13238
  const endTime = Date.now();
13205
13239
  const duration = (endTime - viewImageStartTime.current) / 1000;
13206
13240
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
13207
13241
  eventInfo: {
13208
13242
  eventSubject: 'viewImageCarouselEnd',
13209
13243
  eventDescription: 'User end view the image carousel',
13210
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
13211
- contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
13244
+ contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
13245
+ contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
13212
13246
  imageEndTime: `${endTime}`,
13213
13247
  playDuration: `${duration}`,
13214
- contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
13248
+ contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
13215
13249
  position: activeIndex + '',
13216
13250
  contentFormat: 'image',
13217
- traceInfo: item.video.traceInfo
13251
+ traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
13218
13252
  }
13219
13253
  });
13220
13254
  }
13221
13255
  };
13222
13256
  const handleScrollEvent = (swiper) => {
13223
- var _a, _b, _c, _d, _e, _f, _g, _h;
13257
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
13224
13258
  viewTime.current = new Date();
13225
13259
  const item = data[swiper.previousIndex];
13226
13260
  if (!item)
@@ -13230,8 +13264,8 @@ Made in Italy` })));
13230
13264
  eventInfo: {
13231
13265
  eventSubject: 'scrollDown',
13232
13266
  eventDescription: 'User scroll down',
13233
- contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
13234
- productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
13267
+ contentId: (_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
13268
+ productId: (_d = (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
13235
13269
  requestId: null
13236
13270
  }
13237
13271
  });
@@ -13243,7 +13277,7 @@ Made in Italy` })));
13243
13277
  eventInfo: {
13244
13278
  eventSubject: 'scrollUp',
13245
13279
  eventDescription: 'User scroll up',
13246
- contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
13280
+ contentId: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
13247
13281
  productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
13248
13282
  requestId: null
13249
13283
  }
@@ -13253,14 +13287,17 @@ Made in Italy` })));
13253
13287
  }
13254
13288
  // 商品浏览事件
13255
13289
  handleReportProductView(item);
13290
+ const curItem = data[swiper.activeIndex];
13291
+ if (!((_j = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _j === void 0 ? void 0 : _j.url) && !((_k = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _k === void 0 ? void 0 : _k.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
13292
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
13293
+ eventName: 'ProductView'
13294
+ });
13295
+ }
13256
13296
  };
13257
13297
  const handleReportProductView = (item) => {
13258
13298
  var _a, _b, _c;
13259
13299
  if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && !((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls) && (item === null || item === void 0 ? void 0 : item.product)) {
13260
13300
  productView(item, item.product, (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.bindCta, viewTime.current, activeIndex);
13261
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
13262
- eventName: 'ProductView'
13263
- });
13264
13301
  }
13265
13302
  };
13266
13303
  React.useEffect(() => {
@@ -13279,13 +13316,13 @@ Made in Italy` })));
13279
13316
  eventInfo: {
13280
13317
  eventSubject: 'viewImageCarouselStart',
13281
13318
  eventDescription: 'User start view the image carousel',
13282
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
13283
- contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
13319
+ contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
13320
+ contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
13284
13321
  imageStartTime: `${startTime}`,
13285
- contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
13322
+ contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
13286
13323
  position: activeIndex + '',
13287
13324
  contentFormat: 'image',
13288
- traceInfo: item.video.traceInfo
13325
+ traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
13289
13326
  }
13290
13327
  });
13291
13328
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
@@ -13431,15 +13468,15 @@ Made in Italy` })));
13431
13468
  eventInfo: {
13432
13469
  eventSubject: 'playVideo',
13433
13470
  eventDescription: 'User played the video',
13434
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
13435
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
13471
+ contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
13472
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
13436
13473
  playType,
13437
13474
  startTime: videoCurrentTime,
13438
13475
  videoDuration,
13439
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
13476
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
13440
13477
  position: index + '',
13441
13478
  contentFormat: 'video',
13442
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
13479
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
13443
13480
  }
13444
13481
  });
13445
13482
  setIsFirstPlay(false);
@@ -13488,15 +13525,15 @@ Made in Italy` })));
13488
13525
  eventInfo: {
13489
13526
  eventSubject: 'playOverVideo',
13490
13527
  eventDescription: 'User finished playing the video',
13491
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
13492
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
13528
+ contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
13529
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
13493
13530
  endTime: videoCurrentTime,
13494
13531
  videoDuration,
13495
13532
  playDuration,
13496
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
13533
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
13497
13534
  position: index + '',
13498
13535
  contentFormat: 'video',
13499
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
13536
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
13500
13537
  }
13501
13538
  });
13502
13539
  }
@@ -13533,10 +13570,10 @@ Made in Italy` })));
13533
13570
  return;
13534
13571
  setIsPauseVideo(false);
13535
13572
  if (!videoRef.current.src) {
13536
- const videoSrc = rec.video.url;
13573
+ const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
13537
13574
  if (videoSrc.includes('.m3u8')) {
13538
- if (Hls.isSupported()) {
13539
- const hls = new Hls();
13575
+ if (typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.Hls.isSupported())) {
13576
+ const hls = new window.Hls();
13540
13577
  hls.loadSource(videoSrc);
13541
13578
  hls.attachMedia(videoRef.current);
13542
13579
  }
@@ -13564,7 +13601,7 @@ Made in Italy` })));
13564
13601
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
13565
13602
  (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
13566
13603
  };
13567
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
13604
+ }, [handleLoadedMetadata, handlePlaying, rec === null || rec === void 0 ? void 0 : rec.video, handLoadeddata]);
13568
13605
  const renderPoster = React.useMemo(() => {
13569
13606
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
13570
13607
  return null;
@@ -13591,10 +13628,10 @@ Made in Italy` })));
13591
13628
  }
13592
13629
  : {};
13593
13630
  }, [blur]);
13594
- if (!rec.video) {
13631
+ if (!(rec === null || rec === void 0 ? void 0 : rec.video)) {
13595
13632
  return null;
13596
13633
  }
13597
- return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
13634
+ return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
13598
13635
  position: 'relative',
13599
13636
  width,
13600
13637
  height,
@@ -13619,7 +13656,7 @@ Made in Italy` })));
13619
13656
  objectFit: 'contain'
13620
13657
  } }),
13621
13658
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
13622
- renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
13659
+ renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
13623
13660
  position: 'relative',
13624
13661
  width,
13625
13662
  height,
@@ -13650,11 +13687,11 @@ Made in Italy` })));
13650
13687
  }, [globalConfig, containerHeight, tagList]);
13651
13688
  const renderContent = (rec, index) => {
13652
13689
  var _a, _b, _c, _d;
13653
- if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
13690
+ if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
13654
13691
  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 }));
13655
13692
  }
13656
- if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
13657
- return (React.createElement(PictureGroup$1, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
13693
+ if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
13694
+ 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 }));
13658
13695
  }
13659
13696
  if (rec.product) {
13660
13697
  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) {
@@ -13688,15 +13725,15 @@ Made in Italy` })));
13688
13725
  };
13689
13726
  const renderBottom = (rec, index) => {
13690
13727
  var _a, _b, _c, _d, _e, _f, _g;
13691
- if (rec.video) {
13728
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
13692
13729
  return (React.createElement(React.Fragment, null,
13693
- ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
13730
+ ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
13694
13731
  React.createElement("div", { className: 'clc-sxp-bottom' },
13695
13732
  React.createElement(Nudge, { nudge: nudge }),
13696
13733
  CTA(rec, index),
13697
13734
  React.createElement("div", null,
13698
- React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', 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' }) })),
13699
- React.createElement(Hashtag$1, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
13735
+ React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', 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' }) })),
13736
+ React.createElement(Hashtag$1, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
13700
13737
  }
13701
13738
  return null;
13702
13739
  };
@@ -13710,7 +13747,7 @@ Made in Italy` })));
13710
13747
  if (top < 40) {
13711
13748
  top += 40;
13712
13749
  }
13713
- if (rec.video) {
13750
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
13714
13751
  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, className: 'clc-sxp-like-button', style: {
13715
13752
  top,
13716
13753
  right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0
@@ -13822,7 +13859,7 @@ Made in Italy` })));
13822
13859
  * @Author: binruan@chatlabs.com
13823
13860
  * @Date: 2024-01-15 19:03:09
13824
13861
  * @LastEditors: binruan@chatlabs.com
13825
- * @LastEditTime: 2024-05-06 17:26:37
13862
+ * @LastEditTime: 2024-05-17 18:41:05
13826
13863
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
13827
13864
  *
13828
13865
  */
@@ -13839,14 +13876,14 @@ Made in Italy` })));
13839
13876
  RESOLVER[v.extend.type] = v;
13840
13877
  });
13841
13878
  const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl, enabledMetaConversionApi }) => {
13842
- var _a, _b, _c, _d, _e, _f;
13879
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
13843
13880
  const utmVal = React.useMemo(() => {
13844
13881
  var _a;
13845
13882
  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('?', '') : '';
13846
13883
  return searchParams;
13847
13884
  }, []);
13848
13885
  return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
13849
- 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, render: ({ rtcList, tagList }) => {
13886
+ 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, isShowTag: (_j = (_h = (_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.sxpPageConf) === null || _h === void 0 ? void 0 : _h.globalConfig) === null || _j === void 0 ? void 0 : _j.isShowTag, render: ({ rtcList, tagList }) => {
13850
13887
  var _a;
13851
13888
  return (React.createElement(React.Fragment, null,
13852
13889
  React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),