pb-sxp-ui 1.7.2 → 1.7.4

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 (59) hide show
  1. package/dist/index.cjs +147 -82
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +147 -82
  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 +147 -82
  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/SxpPageRender/PictureGroup/Picture.d.ts +1 -1
  14. package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -2
  15. package/es/core/components/SxpPageRender/PictureGroup/index.js +26 -6
  16. package/es/core/components/SxpPageRender/RenderCard.js +6 -1
  17. package/es/core/components/SxpPageRender/VideoWidget/index.js +21 -15
  18. package/es/core/components/SxpPageRender/WaterFall/List.js +3 -2
  19. package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +3 -2
  20. package/es/core/components/SxpPageRender/index.d.ts +1 -0
  21. package/es/core/components/SxpPageRender/index.js +36 -28
  22. package/es/core/context/SxpDataSourceProvider.js +9 -6
  23. package/es/core/utils/materials.d.ts +7 -1
  24. package/es/core/utils/materials.js +5 -2
  25. package/es/core/utils/tool.d.ts +2 -1
  26. package/es/core/utils/tool.js +11 -1
  27. package/es/materials/sxp/cta/AniLink/settingRender.d.ts +11 -0
  28. package/es/materials/sxp/cta/AniLink/settingRender.js +6 -0
  29. package/es/materials/sxp/cta/AniLinkPopup/settingRender.d.ts +1 -1
  30. package/es/materials/sxp/cta/AniLinkPopup/settingRender.js +6 -0
  31. package/es/materials/sxp/popup/CommodityDetail/index.js +3 -2
  32. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +3 -2
  33. package/es/materials/sxp/popup/CommodityList/index.js +5 -4
  34. package/es/materials/sxp/template/components/settingRender.d.ts +1 -1
  35. package/es/materials/sxp/template/components/settingRender.js +6 -0
  36. package/lib/core/components/SxpPageRender/PictureGroup/Picture.d.ts +1 -1
  37. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -2
  38. package/lib/core/components/SxpPageRender/PictureGroup/index.js +25 -6
  39. package/lib/core/components/SxpPageRender/RenderCard.js +6 -1
  40. package/lib/core/components/SxpPageRender/VideoWidget/index.js +20 -15
  41. package/lib/core/components/SxpPageRender/WaterFall/List.js +3 -2
  42. package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +3 -2
  43. package/lib/core/components/SxpPageRender/index.d.ts +1 -0
  44. package/lib/core/components/SxpPageRender/index.js +36 -28
  45. package/lib/core/context/SxpDataSourceProvider.js +9 -6
  46. package/lib/core/utils/materials.d.ts +7 -1
  47. package/lib/core/utils/materials.js +5 -2
  48. package/lib/core/utils/tool.d.ts +2 -1
  49. package/lib/core/utils/tool.js +12 -1
  50. package/lib/materials/sxp/cta/AniLink/settingRender.d.ts +11 -0
  51. package/lib/materials/sxp/cta/AniLink/settingRender.js +6 -0
  52. package/lib/materials/sxp/cta/AniLinkPopup/settingRender.d.ts +1 -1
  53. package/lib/materials/sxp/cta/AniLinkPopup/settingRender.js +6 -0
  54. package/lib/materials/sxp/popup/CommodityDetail/index.js +3 -2
  55. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +3 -2
  56. package/lib/materials/sxp/popup/CommodityList/index.js +5 -4
  57. package/lib/materials/sxp/template/components/settingRender.d.ts +1 -1
  58. package/lib/materials/sxp/template/components/settingRender.js +6 -0
  59. package/package.json +1 -1
package/dist/pb-ui.js CHANGED
@@ -313,6 +313,16 @@
313
313
  });
314
314
  return value !== null && value !== void 0 ? value : '';
315
315
  }
316
+ const getResFileSizeFromSrc = (imageSrc) => {
317
+ if (!imageSrc)
318
+ return '';
319
+ return fetch(imageSrc)
320
+ .then((response) => response.blob())
321
+ .then((blob) => {
322
+ const fileSizeInMB = blob.size / (1024 * 1024); // 将文件大小转换为 MB
323
+ return fileSizeInMB.toFixed(2) + '';
324
+ });
325
+ };
316
326
 
317
327
  function unzip(b64Data) {
318
328
  const strData = atob(b64Data);
@@ -813,17 +823,20 @@
813
823
  });
814
824
  }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
815
825
  const bffFbReport = React.useCallback(({ eventName, product }) => {
816
- var _a, _b, _c, _d;
817
- if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
826
+ var _a, _b, _c, _d, _e;
827
+ if (!enableReportEvent ||
828
+ !enabledMetaConversionApi ||
829
+ (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
830
+ !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
818
831
  return;
819
832
  }
820
- let jsonParams = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName];
833
+ let jsonParams = JSON.parse(JSON.stringify((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]));
821
834
  const urlParams = new URLSearchParams(window.location.search);
822
835
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
823
836
  const fix_par = {
824
- event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
837
+ event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
825
838
  external_id: storeAndLoadFeUserId(),
826
- client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '',
839
+ client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
827
840
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
828
841
  fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
829
842
  time: new Date().getTime()
@@ -848,7 +861,7 @@
848
861
  matches.forEach((match) => {
849
862
  const prop = match.substring(2, match.length - 2);
850
863
  try {
851
- const replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
864
+ let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
852
865
  if (replaceValue) {
853
866
  obj[key] = replaceValue;
854
867
  }
@@ -9283,7 +9296,7 @@
9283
9296
  * @Author: binruan@chatlabs.com
9284
9297
  * @Date: 2024-03-20 14:56:16
9285
9298
  * @LastEditors: binruan@chatlabs.com
9286
- * @LastEditTime: 2024-09-14 10:07:47
9299
+ * @LastEditTime: 2024-10-24 17:51:19
9287
9300
  * @FilePath: \pb-sxp-ui\src\core\utils\materials.ts
9288
9301
  *
9289
9302
  */
@@ -9310,8 +9323,8 @@
9310
9323
  return file && file.length > 0 ? (_a = file[0]) === null || _a === void 0 ? void 0 : _a.url : null;
9311
9324
  }
9312
9325
  };
9313
- const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef }) => {
9314
- var _a, _b, _c, _d, _e;
9326
+ const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef, style }) => {
9327
+ var _a, _b, _c, _d, _e, _f, _g, _h;
9315
9328
  if ((!(product === null || product === void 0 ? void 0 : product.currency) || !(product === null || product === void 0 ? void 0 : product.price)) && isHiddenDef)
9316
9329
  return null;
9317
9330
  let price = (product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price) ? product === null || product === void 0 ? void 0 : product.price : 7000;
@@ -9359,6 +9372,8 @@
9359
9372
  }
9360
9373
  });
9361
9374
  }
9375
+ currency = `<span style="font-family:${(_h = (_g = (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol) === null || _f === void 0 ? void 0 : _f.fontFamily) !== null && _g !== void 0 ? _g : style === null || style === void 0 ? void 0 : style['fontFamily-en']) !== null && _h !== void 0 ? _h : 'inherit'}">${currency}</span>`;
9376
+ text = setFontForText(text, style);
9362
9377
  if ((priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.currencyPosition) && (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.currencyPosition) !== 'none') {
9363
9378
  text = (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.currencyPosition) === 'left' ? currency + text : text + currency;
9364
9379
  }
@@ -9424,7 +9439,8 @@
9424
9439
  const priceText = getPriceText({
9425
9440
  product: product,
9426
9441
  enableFormattedPrice: (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice,
9427
- globalConfig
9442
+ globalConfig,
9443
+ style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price
9428
9444
  });
9429
9445
  const width = (isPreview ? 375 : (_u = style === null || style === void 0 ? void 0 : style.width) !== null && _u !== void 0 ? _u : window.innerWidth) - ((_v = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _v !== void 0 ? _v : 0) * 2;
9430
9446
  const height = commodityImgRatio ? width * (commodityImgRatio.h / commodityImgRatio.w) : width;
@@ -9438,7 +9454,7 @@
9438
9454
  __html: setFontForText((_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
9439
9455
  } }),
9440
9456
  React.createElement("div", { className: 'pb-commondity-content-price', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), dangerouslySetInnerHTML: {
9441
- __html: setFontForText(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
9457
+ __html: priceText !== null && priceText !== void 0 ? priceText : ''
9442
9458
  } }),
9443
9459
  React.createElement("div", { hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
9444
9460
  __html: setFontForText((_c = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _c !== void 0 ? _c : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
@@ -10312,7 +10328,8 @@
10312
10328
  const priceText = getPriceText({
10313
10329
  product,
10314
10330
  enableFormattedPrice: (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice,
10315
- globalConfig
10331
+ globalConfig,
10332
+ style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price
10316
10333
  });
10317
10334
  const width = (isPreview ? 375 : (_u = style === null || style === void 0 ? void 0 : style.width) !== null && _u !== void 0 ? _u : window.innerWidth) - ((_v = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _v !== void 0 ? _v : 0) * 2;
10318
10335
  const height = commodityImgRatio ? width * (commodityImgRatio.h / commodityImgRatio.w) : width;
@@ -10473,7 +10490,7 @@ Made in Italy` })));
10473
10490
  } })),
10474
10491
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
10475
10492
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price), dangerouslySetInnerHTML: {
10476
- __html: setFontForText(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
10493
+ __html: priceText !== null && priceText !== void 0 ? priceText : ''
10477
10494
  } }),
10478
10495
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
10479
10496
  __html: setFontForText((_2 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _2 !== void 0 ? _2 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
@@ -10931,7 +10948,8 @@ Made in Italy` })));
10931
10948
  return getPriceText({
10932
10949
  product,
10933
10950
  enableFormattedPrice: (_a = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice,
10934
- globalConfig
10951
+ globalConfig,
10952
+ style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price
10935
10953
  });
10936
10954
  }, [(_d = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _d === void 0 ? void 0 : _d.enableFormattedPrice, globalConfig]);
10937
10955
  const handleClick = lodash.throttle((item, multiCheckIndex) => {
@@ -10956,7 +10974,7 @@ Made in Italy` })));
10956
10974
  });
10957
10975
  }, []);
10958
10976
  return (React.createElement("div", { className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
10959
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
10977
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
10960
10978
  return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement("div", Object.assign({ key: index }, props, { className: css.css({
10961
10979
  display: 'flex'
10962
10980
  }), onClick: () => handleClick(item, index) }),
@@ -10983,10 +11001,10 @@ Made in Italy` })));
10983
11001
  }) },
10984
11002
  React.createElement("div", null,
10985
11003
  React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
10986
- __html: setFontForText(priceText(item), commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
11004
+ __html: (_j = priceText(item)) !== null && _j !== void 0 ? _j : ''
10987
11005
  } })),
10988
11006
  React.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
10989
- __html: setFontForText((_k = (_j = item === null || item === void 0 ? void 0 : item.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now', buttonStyle)
11007
+ __html: setFontForText((_l = (_k = item === null || item === void 0 ? void 0 : item.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', buttonStyle)
10990
11008
  } })))))));
10991
11009
  })));
10992
11010
  };
@@ -11134,7 +11152,7 @@ Made in Italy` })));
11134
11152
  * @Author: binruan@chatlabs.com
11135
11153
  * @Date: 2024-03-26 16:50:25
11136
11154
  * @LastEditors: binruan@chatlabs.com
11137
- * @LastEditTime: 2024-07-04 17:47:52
11155
+ * @LastEditTime: 2024-10-24 19:04:37
11138
11156
  * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\settingRender.tsx
11139
11157
  *
11140
11158
  */
@@ -11180,6 +11198,12 @@ Made in Italy` })));
11180
11198
  label: '背景色',
11181
11199
  name: ['style', 'backgroundColor']
11182
11200
  },
11201
+ {
11202
+ type: 'Number',
11203
+ label: '背景色毛玻璃',
11204
+ name: ['style', 'backdropFilter'],
11205
+ addonAfter: 'px'
11206
+ },
11183
11207
  {
11184
11208
  label: '内边距',
11185
11209
  type: 'Number',
@@ -13963,7 +13987,8 @@ Made in Italy` })));
13963
13987
  product: rec === null || rec === void 0 ? void 0 : rec.product,
13964
13988
  enableFormattedPrice: (_a = textStyles === null || textStyles === void 0 ? void 0 : textStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice,
13965
13989
  globalConfig,
13966
- isHiddenDef: true
13990
+ isHiddenDef: true,
13991
+ style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price
13967
13992
  });
13968
13993
  React.useEffect(() => {
13969
13994
  if (imgDom.current === null || src === '') {
@@ -14005,7 +14030,7 @@ Made in Italy` })));
14005
14030
  __html: setFontForText(title, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title)
14006
14031
  } }),
14007
14032
  React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price, dangerouslySetInnerHTML: {
14008
- __html: setFontForText(priceText, textStyles === null || textStyles === void 0 ? void 0 : textStyles.price)
14033
+ __html: priceText !== null && priceText !== void 0 ? priceText : ''
14009
14034
  } }))));
14010
14035
  };
14011
14036
  function WaterfallList$1(_a) {
@@ -14280,7 +14305,8 @@ Made in Italy` })));
14280
14305
  product: rec === null || rec === void 0 ? void 0 : rec.product,
14281
14306
  enableFormattedPrice: (_a = textStyles === null || textStyles === void 0 ? void 0 : textStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice,
14282
14307
  globalConfig,
14283
- isHiddenDef: true
14308
+ isHiddenDef: true,
14309
+ style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price
14284
14310
  });
14285
14311
  // useEffect(() => {
14286
14312
  // if (imgDom.current === null || src === '') {
@@ -14367,7 +14393,7 @@ Made in Italy` })));
14367
14393
  __html: setFontForText(title, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title)
14368
14394
  } }),
14369
14395
  React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText, dangerouslySetInnerHTML: {
14370
- __html: setFontForText(priceText, textStyles === null || textStyles === void 0 ? void 0 : textStyles.price)
14396
+ __html: priceText !== null && priceText !== void 0 ? priceText : ''
14371
14397
  } }))));
14372
14398
  };
14373
14399
  function WaterfallList(_a) {
@@ -14745,7 +14771,7 @@ Made in Italy` })));
14745
14771
  * @Author: binruan@chatlabs.com
14746
14772
  * @Date: 2024-07-02 14:51:32
14747
14773
  * @LastEditors: binruan@chatlabs.com
14748
- * @LastEditTime: 2024-08-06 14:28:34
14774
+ * @LastEditTime: 2024-10-25 10:39:04
14749
14775
  * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\settingRender.tsx
14750
14776
  *
14751
14777
  */
@@ -14791,6 +14817,12 @@ Made in Italy` })));
14791
14817
  label: '背景色',
14792
14818
  name: ['style', 'backgroundColor']
14793
14819
  },
14820
+ {
14821
+ type: 'Number',
14822
+ label: '背景色毛玻璃',
14823
+ name: ['style', 'backdropFilter'],
14824
+ addonAfter: 'px'
14825
+ },
14794
14826
  {
14795
14827
  type: 'TextMargin',
14796
14828
  name: ['style'],
@@ -15090,6 +15122,12 @@ Made in Italy` })));
15090
15122
  label: '背景色',
15091
15123
  name: ['style', 'backgroundColor']
15092
15124
  },
15125
+ {
15126
+ type: 'Number',
15127
+ label: '背景色毛玻璃',
15128
+ name: ['style', 'backdropFilter'],
15129
+ addonAfter: 'px'
15130
+ },
15093
15131
  {
15094
15132
  label: '外边距',
15095
15133
  type: 'Number',
@@ -15640,6 +15678,7 @@ Made in Italy` })));
15640
15678
  const videoId = `pb-cache-video-${index}`;
15641
15679
  const videoEleRef = React.useRef(null);
15642
15680
  const hlsRef = React.useRef(null);
15681
+ const initTimeRef = React.useRef();
15643
15682
  const blur = React.useMemo(() => {
15644
15683
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
15645
15684
  }, [videoPostConfig]);
@@ -15685,8 +15724,8 @@ Made in Italy` })));
15685
15724
  setWaiting(false);
15686
15725
  setIsLoadFinish(true);
15687
15726
  }, []);
15688
- const handleStartPlay = React.useCallback(() => {
15689
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
15727
+ const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
15728
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
15690
15729
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
15691
15730
  return;
15692
15731
  setIsPauseVideo(false);
@@ -15696,24 +15735,27 @@ Made in Italy` })));
15696
15735
  const videoDuration = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
15697
15736
  const videoCurrentTime = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
15698
15737
  const playType = isFirstPlay ? '0' : '1';
15738
+ const contentSize = yield getResFileSizeFromSrc((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url);
15699
15739
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
15700
15740
  eventInfo: {
15701
15741
  eventSubject: 'playVideo',
15702
15742
  eventDescription: 'User played the video',
15703
- 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 : '',
15704
- 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 : '',
15743
+ contentId: (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.itemId) !== null && _j !== void 0 ? _j : '',
15744
+ contentName: (_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '',
15705
15745
  playType,
15706
15746
  startTime: videoCurrentTime,
15707
15747
  videoDuration,
15708
- 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 : []),
15748
+ contentTags: JSON.stringify((_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.tags) !== null && _o !== void 0 ? _o : []),
15709
15749
  position: index + '',
15710
15750
  contentFormat: 'video',
15711
- traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
15751
+ traceInfo: (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.traceInfo,
15752
+ contentSize,
15753
+ loadTime: (new Date() - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current)).toFixed(2) + ''
15712
15754
  }
15713
15755
  });
15714
15756
  setIsFirstPlay(false);
15715
15757
  }
15716
- }, [bffEventReport, data, index, isFirstPlay, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
15758
+ }), [bffEventReport, data, index, isFirstPlay, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
15717
15759
  const handLoadeddata = React.useCallback(() => {
15718
15760
  var _a;
15719
15761
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
@@ -15817,6 +15859,7 @@ Made in Italy` })));
15817
15859
  videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
15818
15860
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
15819
15861
  return;
15862
+ initTimeRef.current = new Date();
15820
15863
  const Hls = window === null || window === void 0 ? void 0 : window.Hls;
15821
15864
  let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
15822
15865
  if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
@@ -15860,7 +15903,7 @@ Made in Italy` })));
15860
15903
  };
15861
15904
  }, [isActive]);
15862
15905
  React.useEffect(() => {
15863
- var _a, _b, _c, _d;
15906
+ var _a, _b, _c, _d, _e, _f;
15864
15907
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
15865
15908
  return;
15866
15909
  if (isActive) {
@@ -15868,10 +15911,14 @@ Made in Italy` })));
15868
15911
  eventName: 'ViewContent',
15869
15912
  product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
15870
15913
  });
15871
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
15914
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
15915
+ eventName: 'PageView',
15916
+ product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.bindProduct
15917
+ });
15918
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
15872
15919
  }
15873
15920
  else {
15874
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
15921
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
15875
15922
  }
15876
15923
  }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
15877
15924
  /*
@@ -15893,12 +15940,7 @@ Made in Italy` })));
15893
15940
  if (!isActive)
15894
15941
  return;
15895
15942
  const onShow = () => {
15896
- var _a, _b;
15897
15943
  handleClickVideo('start')();
15898
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
15899
- eventName: 'ViewContent',
15900
- product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
15901
- });
15902
15944
  };
15903
15945
  const onHide = handleClickVideo('pause');
15904
15946
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -16069,41 +16111,51 @@ Made in Italy` })));
16069
16111
  }, onLoad: onShowFirstImage }))));
16070
16112
  };
16071
16113
 
16072
- /*
16073
- * @Author: lewinlu@chatlabs.com
16074
- * @Date: 2024-01-03 14:39:09
16075
- * @LastEditors: binruan@chatlabs.com
16076
- * @LastEditTime: 2024-10-10 17:53:30
16077
- * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
16078
- */
16079
- const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
16114
+ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
16080
16115
  var _a, _b;
16081
16116
  const ref = React.useRef();
16082
16117
  const { isActive } = useSwiperSlide();
16083
16118
  const { sxpParameter, openHashtag } = useSxpDataSource();
16084
16119
  const [isLoad, setIsLoad] = React.useState(false);
16120
+ const [imgInfo, setImgInfo] = React.useState();
16121
+ const initTime = new Date();
16085
16122
  React.useEffect(() => {
16086
16123
  if (isLoad && isActive) {
16087
16124
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
16088
16125
  if (openHashtag) {
16089
- onReportViewImageEnd(rec);
16126
+ onViewImageEndEvent(rec);
16090
16127
  }
16091
16128
  else {
16092
- onViewImageStartEvent(index);
16129
+ onViewImageStartEvent(index, imgInfo, true);
16093
16130
  }
16094
16131
  }
16095
16132
  else {
16096
16133
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
16097
16134
  }
16098
- }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
16099
- const showFirstImageFn = React.useCallback(() => {
16135
+ }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
16136
+ const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
16100
16137
  if (!isLoad) {
16138
+ const contentSize = yield getResFileSizeFromSrc(e.src);
16139
+ setImgInfo({
16140
+ contentSize,
16141
+ loadTime: (new Date() - initTime).toFixed(2) + ''
16142
+ });
16101
16143
  setIsLoad(true);
16102
16144
  }
16103
- }, [isLoad]);
16145
+ }), [isLoad]);
16104
16146
  // if (!isActive) {
16105
16147
  // return <img src={sxpParameter?.placeholder_image} style={{ width, height, objectFit: 'cover' }} />;
16106
16148
  // }
16149
+ React.useEffect(() => {
16150
+ const onShow = () => onViewImageStartEvent(index, imgInfo);
16151
+ const onHide = () => onViewImageEndEvent(rec);
16152
+ SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
16153
+ SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
16154
+ return () => {
16155
+ SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
16156
+ SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
16157
+ };
16158
+ }, [imgInfo]);
16107
16159
  return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
16108
16160
  clickable: true,
16109
16161
  bulletActiveClass: 'swipe-item-active-bullet',
@@ -16242,7 +16294,7 @@ Made in Italy` })));
16242
16294
  * @Author: binruan@chatlabs.com
16243
16295
  * @Date: 2023-12-26 16:11:34
16244
16296
  * @LastEditors: binruan@chatlabs.com
16245
- * @LastEditTime: 2024-10-12 16:22:10
16297
+ * @LastEditTime: 2024-10-29 14:07:29
16246
16298
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
16247
16299
  *
16248
16300
  */
@@ -16291,7 +16343,12 @@ Made in Italy` })));
16291
16343
  const Component = withBindDataSource(t);
16292
16344
  const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
16293
16345
  const isExternalLink = ((_2 = (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.event) === null || _1 === void 0 ? void 0 : _1.onClick) === null || _2 === void 0 ? void 0 : _2.linkType) === 'externalLink';
16294
- return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.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), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.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 })));
16346
+ let style = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style;
16347
+ if (style.hasOwnProperty('backdropFilter')) {
16348
+ let sbf = style['backdropFilter'];
16349
+ style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
16350
+ }
16351
+ 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), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.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 })));
16295
16352
  }
16296
16353
  else {
16297
16354
  return null;
@@ -16384,7 +16441,7 @@ Made in Italy` })));
16384
16441
  * @Author: binruan@chatlabs.com
16385
16442
  * @Date: 2024-01-15 19:03:09
16386
16443
  * @LastEditors: binruan@chatlabs.com
16387
- * @LastEditTime: 2024-10-23 18:06:34
16444
+ * @LastEditTime: 2024-10-28 16:36:22
16388
16445
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
16389
16446
  *
16390
16447
  */
@@ -16454,7 +16511,6 @@ Made in Italy` })));
16454
16511
  // 移动端h5直接杀掉浏览器或宿主app时不会触发，pc端直接杀掉标签页时能触发
16455
16512
  if (repCond) {
16456
16513
  SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
16457
- handleReportViewImageEnd(item);
16458
16514
  handleReportProductView(item);
16459
16515
  }
16460
16516
  let fromKName = '';
@@ -16499,7 +16555,6 @@ Made in Italy` })));
16499
16555
  // 页面可见时触发，注意页面初始化时不会触发
16500
16556
  handleH5EnterLink();
16501
16557
  if (repCond) {
16502
- handleViewImageStartEvent(activeIndex);
16503
16558
  SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
16504
16559
  backMainFeed('external', selectTag);
16505
16560
  }
@@ -16584,7 +16639,7 @@ Made in Italy` })));
16584
16639
  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 }));
16585
16640
  }
16586
16641
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
16587
- 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 }));
16642
+ 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 }));
16588
16643
  }
16589
16644
  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) {
16590
16645
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
@@ -16658,7 +16713,7 @@ Made in Italy` })));
16658
16713
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
16659
16714
  return;
16660
16715
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
16661
- if (waterFallData && top < 40) {
16716
+ if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
16662
16717
  top += 40;
16663
16718
  }
16664
16719
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
@@ -16670,7 +16725,7 @@ Made in Italy` })));
16670
16725
  }
16671
16726
  return null;
16672
16727
  }, [globalConfig, waterFallData]);
16673
- const handleReportViewImageEnd = (item) => {
16728
+ const handleViewImageStartEnd = (item) => {
16674
16729
  var _a, _b, _c, _d, _e, _f;
16675
16730
  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)) {
16676
16731
  const endTime = Date.now();
@@ -16728,7 +16783,7 @@ Made in Italy` })));
16728
16783
  }
16729
16784
  };
16730
16785
  const handleScrollEvent = (swiper) => {
16731
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
16786
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
16732
16787
  const item = data[swiper.previousIndex];
16733
16788
  if (!item)
16734
16789
  return;
@@ -16748,11 +16803,12 @@ Made in Italy` })));
16748
16803
  productId: (_g = (_f = item === null || item === void 0 ? void 0 : item.product) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
16749
16804
  requestId: null,
16750
16805
  traceInfo: (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.traceInfo) !== null && _j !== void 0 ? _j : '',
16751
- contentFormat
16806
+ contentFormat,
16807
+ position: ((_k = swiper.previousIndex) !== null && _k !== void 0 ? _k : 0) + ''
16752
16808
  }
16753
16809
  });
16754
16810
  // 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
16755
- handleReportViewImageEnd(item);
16811
+ handleViewImageStartEnd(item);
16756
16812
  handleSlideSkip(item, swiper.previousIndex);
16757
16813
  }
16758
16814
  else {
@@ -16760,15 +16816,16 @@ Made in Italy` })));
16760
16816
  eventInfo: {
16761
16817
  eventSubject: 'scrollUp',
16762
16818
  eventDescription: 'User scroll up',
16763
- contentId: (_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '',
16764
- productId: (_o = (_m = item.product) === null || _m === void 0 ? void 0 : _m.itemId) !== null && _o !== void 0 ? _o : '',
16819
+ contentId: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
16820
+ productId: (_p = (_o = item.product) === null || _o === void 0 ? void 0 : _o.itemId) !== null && _p !== void 0 ? _p : '',
16765
16821
  requestId: null,
16766
- traceInfo: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : '',
16767
- contentFormat
16822
+ traceInfo: (_r = (_q = item === null || item === void 0 ? void 0 : item.video) === null || _q === void 0 ? void 0 : _q.traceInfo) !== null && _r !== void 0 ? _r : '',
16823
+ contentFormat,
16824
+ position: ((_s = swiper.previousIndex) !== null && _s !== void 0 ? _s : 0) + ''
16768
16825
  }
16769
16826
  });
16770
16827
  // 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
16771
- handleReportViewImageEnd(item);
16828
+ handleViewImageStartEnd(item);
16772
16829
  }
16773
16830
  // 商品浏览事件
16774
16831
  handleReportProductView(item);
@@ -16789,7 +16846,7 @@ Made in Italy` })));
16789
16846
  viewTime.current = new Date();
16790
16847
  }
16791
16848
  }, [openHashtag, data, activeIndex]);
16792
- const handleViewImageStartEvent = (activeIndex) => {
16849
+ const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
16793
16850
  var _a, _b, _c, _d, _e, _f, _g, _h;
16794
16851
  const item = data[activeIndex];
16795
16852
  // 如果是图片集则上报事件
@@ -16806,32 +16863,40 @@ Made in Italy` })));
16806
16863
  contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
16807
16864
  position: activeIndex + '',
16808
16865
  contentFormat: 'image',
16809
- traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
16866
+ traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
16867
+ contentSize: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.contentSize,
16868
+ loadTime: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.loadTime
16810
16869
  }
16811
16870
  });
16812
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
16813
- eventName: 'ViewContent',
16814
- product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
16815
- });
16816
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
16817
- eventName: 'PageView',
16818
- product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
16819
- });
16871
+ if (enableCapi) {
16872
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
16873
+ eventName: 'ViewContent',
16874
+ product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
16875
+ });
16876
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
16877
+ eventName: 'PageView',
16878
+ product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
16879
+ });
16880
+ }
16820
16881
  }
16821
16882
  };
16822
16883
  const renderToggleButton = React.useCallback((visible) => {
16823
16884
  var _a, _b, _c, _d, _e, _f;
16824
16885
  if (!visible)
16825
16886
  return;
16887
+ let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
16888
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
16889
+ top += 40;
16890
+ }
16826
16891
  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: {
16827
16892
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
16828
- visibility: ((_b = (_a = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) ? 'visible' : 'hidden',
16893
+ visibility: ((_c = (_b = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
16829
16894
  zIndex: 999,
16830
16895
  transform: 'translate3d(0px,0px,0px)',
16831
- [(_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _c !== void 0 ? _c : 'right']: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _d !== void 0 ? _d : 0,
16832
- [(_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _e !== void 0 ? _e : 'bottom']: (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _f !== void 0 ? _f : 23
16896
+ [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
16897
+ [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: top
16833
16898
  }, defaultValue: isMuted, 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, onChange: setIsMuted })));
16834
- }, [globalConfig, visList, activeIndex, isMuted]);
16899
+ }, [globalConfig, visList, activeIndex, isMuted, waterFallData]);
16835
16900
  const renderView = React.useMemo(() => {
16836
16901
  if (loading) {
16837
16902
  return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -16864,7 +16929,7 @@ Made in Italy` })));
16864
16929
  renderToggleButton
16865
16930
  ]);
16866
16931
  return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
16867
- waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
16932
+ waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff', top: `${minusHeight}px` }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
16868
16933
  const isEq = lodash.isEqual(rtcList, cacheRtcList);
16869
16934
  if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
16870
16935
  setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);