pb-sxp-ui 1.0.86 → 1.0.88

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 (61) hide show
  1. package/dist/index.cjs +113 -166
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +113 -166
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -4
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -4
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +113 -166
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -4
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/Consent/index.js +2 -2
  14. package/es/core/components/DiyPortalPreview/VideoWidget.js +3 -3
  15. package/es/core/components/SxpPageRender/FingerSwipeTip/index.js +1 -1
  16. package/es/core/components/SxpPageRender/FormatImage.js +2 -2
  17. package/es/core/components/SxpPageRender/LikeButton/index.js +1 -1
  18. package/es/core/components/SxpPageRender/Navbar.js +1 -1
  19. package/es/core/components/SxpPageRender/Nudge/index.js +1 -1
  20. package/es/core/components/SxpPageRender/Tagbar.js +6 -7
  21. package/es/core/components/SxpPageRender/ToggleButton/index.js +2 -2
  22. package/es/core/components/SxpPageRender/VideoWidget/index.js +3 -3
  23. package/es/core/components/SxpPageRender/WaterFall/List.js +2 -2
  24. package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +17 -52
  25. package/es/core/components/SxpPageRender/WaterFall/index.js +2 -4
  26. package/es/core/components/SxpPageRender/index.js +28 -30
  27. package/es/core/context/SxpDataSourceProvider.d.ts +4 -0
  28. package/es/core/context/SxpDataSourceProvider.js +9 -3
  29. package/es/core/hooks/useEventReport.d.ts +1 -1
  30. package/es/core/hooks/useEventReport.js +13 -10
  31. package/es/materials/sxp/popup/AppointForm/index.js +1 -1
  32. package/es/materials/sxp/popup/CommodityDetail/index.js +3 -3
  33. package/es/materials/sxp/popup/CommodityDetailDiro/index.js +4 -4
  34. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +3 -3
  35. package/es/materials/sxp/popup/Prompt/index.js +2 -2
  36. package/es/materials/sxp/template/Appoint/index.js +1 -1
  37. package/lib/core/components/Consent/index.js +2 -2
  38. package/lib/core/components/DiyPortalPreview/VideoWidget.js +3 -3
  39. package/lib/core/components/SxpPageRender/FingerSwipeTip/index.js +1 -1
  40. package/lib/core/components/SxpPageRender/FormatImage.js +2 -2
  41. package/lib/core/components/SxpPageRender/LikeButton/index.js +1 -1
  42. package/lib/core/components/SxpPageRender/Navbar.js +1 -1
  43. package/lib/core/components/SxpPageRender/Nudge/index.js +1 -1
  44. package/lib/core/components/SxpPageRender/Tagbar.js +7 -8
  45. package/lib/core/components/SxpPageRender/ToggleButton/index.js +2 -2
  46. package/lib/core/components/SxpPageRender/VideoWidget/index.js +3 -3
  47. package/lib/core/components/SxpPageRender/WaterFall/List.js +2 -2
  48. package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +17 -52
  49. package/lib/core/components/SxpPageRender/WaterFall/index.js +2 -4
  50. package/lib/core/components/SxpPageRender/index.js +28 -30
  51. package/lib/core/context/SxpDataSourceProvider.d.ts +4 -0
  52. package/lib/core/context/SxpDataSourceProvider.js +10 -4
  53. package/lib/core/hooks/useEventReport.d.ts +1 -1
  54. package/lib/core/hooks/useEventReport.js +13 -10
  55. package/lib/materials/sxp/popup/AppointForm/index.js +1 -1
  56. package/lib/materials/sxp/popup/CommodityDetail/index.js +3 -3
  57. package/lib/materials/sxp/popup/CommodityDetailDiro/index.js +4 -4
  58. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +3 -3
  59. package/lib/materials/sxp/popup/Prompt/index.js +2 -2
  60. package/lib/materials/sxp/template/Appoint/index.js +1 -1
  61. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -419,7 +419,7 @@ var SXP_EVENT_TYPE;
419
419
  * @Author: binruan@chatlabs.com
420
420
  * @Date: 2024-06-13 15:16:53
421
421
  * @LastEditors: binruan@chatlabs.com
422
- * @LastEditTime: 2024-06-18 16:06:16
422
+ * @LastEditTime: 2024-06-19 14:13:50
423
423
  * @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
424
424
  *
425
425
  */
@@ -474,8 +474,8 @@ const Consent$2 = ({ width = window.innerWidth, height = window.innerHeight, pri
474
474
  React.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
475
475
  React.createElement("div", { className: 'consent-content' }, privacy_context !== null && privacy_context !== void 0 ? privacy_context : 'This site uses cookies to improve your online experience. By continuing to use the site please agree the policy first.')),
476
476
  React.createElement("div", { className: 'consent-col' },
477
- React.createElement("button", { className: 'consent-btn', onClick: handleAgree }, "Agree"),
478
- React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
477
+ React.createElement("button", { "aria-label": 'agree', className: 'consent-btn', onClick: handleAgree }, "Agree"),
478
+ React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url ? `https://${privacy_policy_url}` : undefined }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
479
479
  };
480
480
  var Consent$3 = memo(Consent$2);
481
481
 
@@ -488,6 +488,7 @@ var DataSourceType;
488
488
  DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
489
489
  })(DataSourceType || (DataSourceType = {}));
490
490
  const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
491
+ const DEFAULT_TAG = 'FOR U';
491
492
  const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
492
493
  var _a, _b, _c;
493
494
  const [rtcList, setRtcList] = useState([]);
@@ -507,6 +508,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
507
508
  const [videoRef, setVideoRef] = useState(null);
508
509
  const themeTag = useRef();
509
510
  const curTime = useRef();
511
+ const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
510
512
  const isShowConsent = useMemo(() => {
511
513
  var _a, _b, _c, _d;
512
514
  return (((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === 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.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent;
@@ -716,8 +718,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
716
718
  });
717
719
  }, [bffEventReport]);
718
720
  useEffect(() => {
719
- h5EnterLink();
720
- }, []);
721
+ if (!isShowConsent)
722
+ h5EnterLink();
723
+ }, [isShowConsent]);
721
724
  useEffect(() => {
722
725
  if (isShowConsent)
723
726
  return;
@@ -796,7 +799,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
796
799
  setIsAgreePolicy,
797
800
  curTime,
798
801
  h5EnterLink,
799
- themeTag
802
+ themeTag,
803
+ isShowConsent,
804
+ selectTag,
805
+ setSelectTag
800
806
  } }, isShowConsent ? (React.createElement(Consent$3, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
801
807
  rtcList,
802
808
  mutateLike: bffMutateLike,
@@ -1207,7 +1213,7 @@ var settingRender$6 = [
1207
1213
  * @Author: binruan@chatlabs.com
1208
1214
  * @Date: 2024-03-12 10:59:06
1209
1215
  * @LastEditors: binruan@chatlabs.com
1210
- * @LastEditTime: 2024-06-12 10:53:57
1216
+ * @LastEditTime: 2024-06-20 13:39:07
1211
1217
  * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
1212
1218
  *
1213
1219
  */
@@ -1277,16 +1283,18 @@ function useEventReport() {
1277
1283
  }
1278
1284
  });
1279
1285
  }, [bffEventReport, popupDetailData]);
1280
- const backMainFeed = useCallback((lastFeed, themeTag, hashTag) => {
1281
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
1282
- eventInfo: {
1283
- lastFeed,
1284
- themeTags: themeTag ? `[${themeTag}]` : '',
1285
- hashTags: hashTag ? `[${hashTag}]` : '',
1286
- eventSubject: 'backMainFeed',
1287
- eventDescription: 'back Main Feed'
1288
- }
1289
- });
1286
+ const backMainFeed = useCallback((lastFeed, selectTag, themeTag, hashTag) => {
1287
+ if (selectTag && selectTag === DEFAULT_TAG) {
1288
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
1289
+ eventInfo: {
1290
+ lastFeed,
1291
+ themeTags: themeTag ? `['${themeTag}']` : '',
1292
+ hashTags: hashTag ? `['${hashTag}']` : '',
1293
+ eventSubject: 'backMainFeed',
1294
+ eventDescription: 'back Main Feed'
1295
+ }
1296
+ });
1297
+ }
1290
1298
  }, [bffEventReport]);
1291
1299
  return {
1292
1300
  jumpToWeb,
@@ -1373,7 +1381,7 @@ const AppointForm$1 = (_a) => {
1373
1381
  React.createElement("div", { className: 'pb-appoint-form-container' },
1374
1382
  React.createElement(BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
1375
1383
  React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
1376
- React.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
1384
+ React.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
1377
1385
  };
1378
1386
  var AppointFormComponent = memo(AppointForm$1);
1379
1387
 
@@ -8565,7 +8573,7 @@ var ExpandableText$1 = memo(ExpandableText);
8565
8573
  * @Author: binruan@chatlabs.com
8566
8574
  * @Date: 2024-03-20 10:27:31
8567
8575
  * @LastEditors: binruan@chatlabs.com
8568
- * @LastEditTime: 2024-05-27 09:47:19
8576
+ * @LastEditTime: 2024-06-19 16:25:46
8569
8577
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
8570
8578
  *
8571
8579
  */
@@ -8615,9 +8623,9 @@ const FormatImage = forwardRef((props, ref) => {
8615
8623
  React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
8616
8624
  React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
8617
8625
  onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
8618
- } }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
8626
+ }, alt: 'image' }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
8619
8627
  onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
8620
- } }))));
8628
+ }, alt: 'image' }))));
8621
8629
  });
8622
8630
  var FormatImage$1 = memo(FormatImage);
8623
8631
 
@@ -8685,8 +8693,8 @@ const CommodityDetail$1 = (_a) => {
8685
8693
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
8686
8694
  };
8687
8695
  const renderBtn = () => {
8688
- var _a;
8689
- return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website'))));
8696
+ var _a, _b;
8697
+ return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website'))));
8690
8698
  };
8691
8699
  const getStyle = useCallback((style) => {
8692
8700
  if (style === null || style === void 0 ? void 0 : style.lineClamp) {
@@ -8732,7 +8740,7 @@ const CommodityDetail$1 = (_a) => {
8732
8740
  top: 0,
8733
8741
  objectFit: 'cover',
8734
8742
  width: '100%'
8735
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
8743
+ }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
8736
8744
  React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
8737
8745
  renderBtn(),
8738
8746
  React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) },
@@ -8936,9 +8944,9 @@ const Prompt$1 = (_a) => {
8936
8944
  };
8937
8945
  return (React.createElement("div", Object.assign({ className: `pb-prompt ${css(Object.assign({}, style))}` }, props),
8938
8946
  React.createElement("div", { className: 'pb-prompt-icon' },
8939
- React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : img$2 })),
8947
+ React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : img$2, alt: 'success image' })),
8940
8948
  React.createElement("div", { className: 'pb-prompt-content' }, content),
8941
- React.createElement("button", { className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
8949
+ React.createElement("button", { "aria-label": btnText, className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
8942
8950
  };
8943
8951
  var PromptComponent = memo(Prompt$1);
8944
8952
 
@@ -9162,7 +9170,7 @@ var settingRender$3 = [
9162
9170
  ];
9163
9171
 
9164
9172
  const CommodityDetailDiroNew$1 = (_a) => {
9165
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
9173
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
9166
9174
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
9167
9175
  useState(true);
9168
9176
  const { sxpParameter } = useSxpDataSource();
@@ -9268,7 +9276,7 @@ Made in Italy` })));
9268
9276
  top: 0,
9269
9277
  objectFit: 'cover',
9270
9278
  width: '100%'
9271
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
9279
+ }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
9272
9280
  React.createElement("div", { className: 'pb-commondityDiroNew-content' },
9273
9281
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
9274
9282
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
@@ -9277,7 +9285,7 @@ Made in Italy` })));
9277
9285
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
9278
9286
  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) }, priceText),
9279
9287
  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) }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
9280
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now')),
9288
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now')),
9281
9289
  productInfoText({ isPost }))),
9282
9290
  React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
9283
9291
  };
@@ -9769,7 +9777,7 @@ const Appoint$1 = (_a) => {
9769
9777
  const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
9770
9778
  return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
9771
9779
  React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
9772
- React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
9780
+ React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: 'cta image' })),
9773
9781
  React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
9774
9782
  };
9775
9783
  var AppointComponent = memo(Appoint$1);
@@ -10687,7 +10695,7 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
10687
10695
  var _a;
10688
10696
  const { waterFallData, setOpenHashtag } = useSxpDataSource();
10689
10697
  return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
10690
- React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: '', onClick: onClose }),
10698
+ React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
10691
10699
  React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle }, `#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`)));
10692
10700
  };
10693
10701
  var Navbar$1 = memo(Navbar);
@@ -11979,15 +11987,15 @@ const WaterfallFlowItem$1 = (props) => {
11979
11987
  const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
11980
11988
  const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
11981
11989
  const [showVideo, setShowVideo] = useState(false);
11982
- const [isLoading, setIsLoading] = useState(false);
11983
- const [imgInfo, setImgInfo] = useState({
11990
+ useState(false);
11991
+ useState({
11984
11992
  height: 1,
11985
11993
  width: 1
11986
11994
  });
11987
11995
  const imgDom = useRef(null);
11988
11996
  const ref = useRef(null);
11989
- const videoDom = useRef(null);
11990
- const canvasRef = useRef(null);
11997
+ useRef(null);
11998
+ useRef(null);
11991
11999
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
11992
12000
  const src = useMemo(() => {
11993
12001
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -12017,7 +12025,7 @@ const WaterfallFlowItem$1 = (props) => {
12017
12025
  return y;
12018
12026
  }, [style]);
12019
12027
  /** 是否加载图片 */
12020
- const isImgShow = useMemo(() => {
12028
+ useMemo(() => {
12021
12029
  if (top === undefined) {
12022
12030
  return false;
12023
12031
  }
@@ -12043,58 +12051,25 @@ const WaterfallFlowItem$1 = (props) => {
12043
12051
  if (imgDom.current === null || src === '') {
12044
12052
  return;
12045
12053
  }
12046
- const img = new Image();
12054
+ let imgSrc = null;
12047
12055
  if (showVideo && firstFrameSrc) {
12048
- img.src = firstFrameSrc;
12056
+ imgSrc = firstFrameSrc;
12049
12057
  }
12050
12058
  else {
12051
- img.src = src;
12059
+ imgSrc = src;
12052
12060
  }
12053
- img.onload = () => {
12054
- setImgInfo({
12055
- height: img.height,
12056
- width: img.width
12057
- });
12058
- setIsLoading(true);
12059
- };
12060
- imgDom.current.setSrc(img.src);
12061
- }, [src, showVideo, firstFrameSrc, isImgShow]);
12062
- useEffect(() => {
12063
- // 通过宽度比例获取图片高度
12064
- const height = imgInfo.height * (unitWidth / imgInfo.width);
12065
- if (isLoading) {
12061
+ if (imgSrc)
12062
+ imgDom.current.setSrc(imgSrc);
12063
+ }, [src, showVideo, firstFrameSrc]);
12064
+ const pictRef = useRef();
12065
+ const imgLoad = useCallback((img) => {
12066
+ setTimeout(() => {
12067
+ var _a;
12068
+ const height = (_a = pictRef === null || pictRef === void 0 ? void 0 : pictRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
12066
12069
  // 加56是因为下方文字部分高度为56,可以自己设置
12067
12070
  sizeChange(height + 56 + space, index);
12068
- }
12069
- }, [imgInfo, index, unitWidth, isLoading, space]); /* 增加sizeChange依赖项会导致在admin预览编辑时无限刷新 */
12070
- const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
12071
- const aspectRatio = videoWidth / videoHeight;
12072
- const targetHeight = targetWidth / aspectRatio;
12073
- return targetHeight;
12074
- };
12075
- useEffect(() => {
12076
- const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
12077
- if (video === null || src === '' || !showVideo) {
12078
- return;
12079
- }
12080
- video.src = src;
12081
- video.currentTime = 1;
12082
- video.crossOrigin = 'anonymous';
12083
- video.onloadeddata = () => {
12084
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
12085
- if (!canvas)
12086
- return;
12087
- const ctx = canvas.getContext('2d');
12088
- const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
12089
- const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
12090
- canvas.height = targetHeight;
12091
- canvas.width = targetWidth;
12092
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
12093
- setFirstFrameSrc(canvas.toDataURL());
12094
- video.remove();
12095
- canvas.remove();
12096
- };
12097
- }, [src, showVideo]);
12071
+ }, 0);
12072
+ }, [space, sizeChange, index, unitWidth, pictRef]);
12098
12073
  const handleClickToDetail = () => {
12099
12074
  reportTagsView();
12100
12075
  setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
@@ -12105,17 +12080,14 @@ const WaterfallFlowItem$1 = (props) => {
12105
12080
  }, 0);
12106
12081
  };
12107
12082
  return (React.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
12108
- React.createElement("div", { className: 'waterFallList-content-listItem-picture' },
12109
- showVideo && (React.createElement("div", { style: { display: 'none' } },
12110
- React.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
12111
- React.createElement("canvas", { ref: canvasRef }))),
12112
- React.createElement(FormatImage$1, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
12083
+ React.createElement("div", { className: 'waterFallList-content-listItem-picture', ref: pictRef },
12084
+ React.createElement(FormatImage$1, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', onLoad: imgLoad, ref: imgDom })),
12113
12085
  React.createElement("div", { className: 'waterFallList-content-listItem-info' },
12114
12086
  React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
12115
12087
  React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
12116
12088
  };
12117
12089
  function WaterfallList$1(_a) {
12118
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
12090
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
12119
12091
  var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
12120
12092
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
12121
12093
  /** 滚动的父元素 */
@@ -12167,7 +12139,6 @@ function WaterfallList$1(_a) {
12167
12139
  for (let i = 0; i < (list === null || list === void 0 ? void 0 : list.length); i++) {
12168
12140
  // 原本应对应的行数
12169
12141
  const currentRow = Math.floor(i / rowsNum);
12170
- //
12171
12142
  const remainder = (i % rowsNum) + 1;
12172
12143
  // 最低item下标
12173
12144
  let minHeightInd = 0;
@@ -12344,7 +12315,7 @@ function WaterfallList$1(_a) {
12344
12315
  } }))),
12345
12316
  React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
12346
12317
  React.createElement("div", { ref: buttonRef, hidden: !((_u = data === null || data === void 0 ? void 0 : data.tag) === null || _u === void 0 ? void 0 : _u.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
12347
- React.createElement("button", { className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection'))))));
12318
+ React.createElement("button", { "aria-label": ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection', className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_w = data === null || data === void 0 ? void 0 : data.tag) === null || _w === void 0 ? void 0 : _w.linkTitle) || 'Shop the collection'))))));
12348
12319
  }
12349
12320
 
12350
12321
  var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
@@ -12473,7 +12444,7 @@ const WaterfallFlowItem = (props) => {
12473
12444
  React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
12474
12445
  };
12475
12446
  function WaterfallList(_a) {
12476
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
12447
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
12477
12448
  var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
12478
12449
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
12479
12450
  const [list, setList] = useState();
@@ -12562,20 +12533,20 @@ function WaterfallList(_a) {
12562
12533
  } })),
12563
12534
  React.createElement("div", { className: 'list-bottom', hidden: !((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
12564
12535
  React.createElement("div", { hidden: !((_p = data === null || data === void 0 ? void 0 : data.tag) === null || _p === void 0 ? void 0 : _p.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
12565
- React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.linkTitle) || 'Shop the collection'))))));
12536
+ React.createElement("button", { "aria-label": ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.linkTitle) || 'Shop the collection', className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.linkTitle) || 'Shop the collection'))))));
12566
12537
  }
12567
12538
 
12568
12539
  /*
12569
12540
  * @Author: binruan@chatlabs.com
12570
12541
  * @Date: 2024-01-10 10:58:24
12571
12542
  * @LastEditors: binruan@chatlabs.com
12572
- * @LastEditTime: 2024-06-12 14:18:56
12543
+ * @LastEditTime: 2024-06-20 12:45:26
12573
12544
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
12574
12545
  *
12575
12546
  */
12576
12547
  const WaterFall = (props) => {
12577
12548
  var _a;
12578
- const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag } = useSxpDataSource();
12549
+ const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag } = useSxpDataSource();
12579
12550
  const { backMainFeed } = useEventReport();
12580
12551
  useRef(null);
12581
12552
  const modalEleRef = useRef(null);
@@ -12597,9 +12568,7 @@ const WaterFall = (props) => {
12597
12568
  if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
12598
12569
  setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
12599
12570
  }
12600
- if (!(themeTag === null || themeTag === void 0 ? void 0 : themeTag.current)) {
12601
- backMainFeed('branch', themeTag === null || themeTag === void 0 ? void 0 : themeTag.current, waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag);
12602
- }
12571
+ backMainFeed('branch', selectTag, undefined, waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag);
12603
12572
  reportTagsView();
12604
12573
  setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData(undefined);
12605
12574
  setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(false);
@@ -12911,7 +12880,7 @@ const LikeButton = (_a) => {
12911
12880
  }
12912
12881
  }
12913
12882
  }), 200);
12914
- return (React.createElement("button", Object.assign({}, props, { onClick: handleClick }),
12883
+ return (React.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
12915
12884
  React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
12916
12885
  };
12917
12886
  var LikeButton$1 = memo(LikeButton);
@@ -13170,7 +13139,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
13170
13139
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
13171
13140
  return null;
13172
13141
  }
13173
- return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
13142
+ return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
13174
13143
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
13175
13144
  useEffect(() => {
13176
13145
  if (!videoRef)
@@ -13203,7 +13172,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
13203
13172
  } },
13204
13173
  React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
13205
13174
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
13206
- React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
13175
+ React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
13207
13176
  renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
13208
13177
  position: 'relative',
13209
13178
  width: '100%',
@@ -13212,7 +13181,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
13212
13181
  }, onClick: handleClickVideo() },
13213
13182
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
13214
13183
  renderPoster,
13215
- React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
13184
+ React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
13216
13185
  };
13217
13186
  var VideoWidget$3 = memo(VideoWidget$2);
13218
13187
 
@@ -13232,8 +13201,8 @@ const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style
13232
13201
  setIsTure(result);
13233
13202
  onChange === null || onChange === void 0 ? void 0 : onChange(result);
13234
13203
  };
13235
- return (React.createElement("button", { style: style, className: 'pb-toggle-button', onClick: handleClick },
13236
- React.createElement("img", { className: 'pb-toggle-button-icon', src: isTrue ? activeIcon : unactiveIcon })));
13204
+ return (React.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
13205
+ React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
13237
13206
  };
13238
13207
  var ToggleButton$1 = memo(ToggleButton);
13239
13208
 
@@ -13258,7 +13227,7 @@ const FingerSwipeTip = ({ imageUrl, style }) => {
13258
13227
  return show ? 'pb-fadeIn' : 'pb-fadeOut';
13259
13228
  }, [show]);
13260
13229
  return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: style },
13261
- React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
13230
+ React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
13262
13231
  };
13263
13232
 
13264
13233
  /*
@@ -13520,7 +13489,7 @@ const Nudge = ({ nudge }) => {
13520
13489
  backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
13521
13490
  borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
13522
13491
  } },
13523
- (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover', flexShrink: 0 } }) : null,
13492
+ (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (React.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
13524
13493
  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 : '')))));
13525
13494
  };
13526
13495
 
@@ -13528,14 +13497,12 @@ const Nudge = ({ nudge }) => {
13528
13497
  * @Author: binruan@chatlabs.com
13529
13498
  * @Date: 2024-04-29 16:32:21
13530
13499
  * @LastEditors: binruan@chatlabs.com
13531
- * @LastEditTime: 2024-06-12 11:01:48
13500
+ * @LastEditTime: 2024-06-20 10:53:08
13532
13501
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Tagbar.tsx
13533
13502
  *
13534
13503
  */
13535
- const DEFAULT_TAG = 'FOR U';
13536
13504
  const Tagbar = ({ tagList = [], setActiveIndex }) => {
13537
- const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
13538
- const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport } = useSxpDataSource();
13505
+ const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport, selectTag, setSelectTag } = useSxpDataSource();
13539
13506
  const { backMainFeed } = useEventReport();
13540
13507
  const realTagList = useMemo(() => {
13541
13508
  return [DEFAULT_TAG, ...tagList];
@@ -13548,12 +13515,12 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
13548
13515
  eventInfo: {
13549
13516
  eventSubject: 'clickThemeTagsViewContents',
13550
13517
  eventDescription: 'click Theme Tags View Contents',
13551
- themeTags: `[${tag}]`
13518
+ themeTags: `['${tag}']`
13552
13519
  }
13553
13520
  });
13554
13521
  }
13555
13522
  else {
13556
- backMainFeed('theme', selectTag);
13523
+ backMainFeed('theme', tag, selectTag);
13557
13524
  }
13558
13525
  let themeTag;
13559
13526
  if (tag !== DEFAULT_TAG) {
@@ -13571,7 +13538,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
13571
13538
  }).finally(() => {
13572
13539
  setLoading === null || setLoading === void 0 ? void 0 : setLoading(false);
13573
13540
  });
13574
- setSelectTag(tag);
13541
+ setSelectTag === null || setSelectTag === void 0 ? void 0 : setSelectTag(tag);
13575
13542
  };
13576
13543
  if (waterFallData || tagList.length <= 0)
13577
13544
  return null;
@@ -13586,7 +13553,7 @@ var Tagbar$1 = memo(Tagbar);
13586
13553
  * @Author: binruan@chatlabs.com
13587
13554
  * @Date: 2024-01-15 19:03:09
13588
13555
  * @LastEditors: binruan@chatlabs.com
13589
- * @LastEditTime: 2024-06-18 11:50:31
13556
+ * @LastEditTime: 2024-06-20 15:54:53
13590
13557
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
13591
13558
  *
13592
13559
  */
@@ -13595,12 +13562,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
13595
13562
  const { schema } = useEditor();
13596
13563
  const [activeIndex, setActiveIndex] = useState(0);
13597
13564
  const viewImageStartTime = useRef(0);
13598
- const [isInit, setIsInit] = useState(false);
13565
+ useState(false);
13599
13566
  const [isMuted, setIsMuted] = useState(true);
13600
13567
  const viewTime = useRef();
13601
13568
  const [isLoadMore, setIsLoadMore] = useState(false);
13602
13569
  const [isShowMore, setIsShowMore] = useState(false);
13603
- const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink } = useSxpDataSource();
13570
+ const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = useSxpDataSource();
13604
13571
  const { backMainFeed } = useEventReport();
13605
13572
  const [videoRef, setVideoRef] = useState(null);
13606
13573
  const playerRef = useRef();
@@ -13608,21 +13575,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
13608
13575
  const isShowFingerTip = useMemo(() => {
13609
13576
  return data.length > 0 && !loading && getFeUserId();
13610
13577
  }, [data, loading]);
13611
- const handleH5EnterLink = useCallback(() => {
13612
- if (data.length <= 0) {
13613
- return;
13578
+ useEffect(() => {
13579
+ refreshFeSessionId();
13580
+ }, []);
13581
+ useEffect(() => {
13582
+ if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
13583
+ const now = new Date();
13584
+ viewTime.current = now;
13585
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
13586
+ eventName: 'PageView'
13587
+ });
13614
13588
  }
13589
+ }, [data === null || data === void 0 ? void 0 : data.length]);
13590
+ const handleH5EnterLink = useCallback(() => {
13615
13591
  refreshFeSessionId();
13616
- const now = new Date();
13617
- viewTime.current = now;
13618
- if (isInit) {
13619
- h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
13592
+ h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
13593
+ if (data.length > 0) {
13594
+ const now = new Date();
13595
+ viewTime.current = now;
13596
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
13597
+ eventName: 'PageView'
13598
+ });
13620
13599
  }
13621
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
13622
- eventName: 'PageView'
13623
- });
13624
- setIsInit(true);
13625
- }, [data.length, bffFbReport, h5EnterLink, isInit]);
13600
+ }, [data.length, bffFbReport, h5EnterLink]);
13626
13601
  const firstRef = useRef();
13627
13602
  useEffect(() => {
13628
13603
  var _a, _b, _c, _d;
@@ -13650,10 +13625,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
13650
13625
  });
13651
13626
  }
13652
13627
  }, [videoRef, licenseUrl, data]);
13653
- useEffect(() => {
13654
- if (!isInit)
13655
- handleH5EnterLink();
13656
- }, [handleH5EnterLink, isInit]);
13657
13628
  useEffect(() => {
13658
13629
  var _a;
13659
13630
  const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -13674,10 +13645,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
13674
13645
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
13675
13646
  const visibleChange = () => {
13676
13647
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
13648
+ const repCond = !openHashtag && !isShowConsent;
13677
13649
  if (document.visibilityState === 'hidden') {
13678
13650
  // 当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器、刷新原页面(即离开原页面时),或者在移动设备上从浏览器切换到不同的应用程序时
13679
13651
  // 移动端h5直接杀掉浏览器或宿主app时不会触发,pc端直接杀掉标签页时能触发
13680
- if (!openHashtag) {
13652
+ if (repCond) {
13681
13653
  SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
13682
13654
  handleReportViewImageEnd(item);
13683
13655
  handleReportProductView(item);
@@ -13718,11 +13690,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
13718
13690
  else if (document.visibilityState === 'visible') {
13719
13691
  // 页面可见时触发,注意页面初始化时不会触发
13720
13692
  handleH5EnterLink();
13721
- if (!openHashtag) {
13693
+ if (repCond) {
13722
13694
  handleViewImageStartEvent(activeIndex);
13723
13695
  SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
13696
+ backMainFeed('external', selectTag);
13724
13697
  }
13725
- backMainFeed('external');
13726
13698
  }
13727
13699
  };
13728
13700
  document.addEventListener('visibilitychange', visibleChange);
@@ -13739,17 +13711,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
13739
13711
  tempMap,
13740
13712
  curTime,
13741
13713
  backMainFeed,
13742
- openHashtag
13714
+ openHashtag,
13715
+ isShowConsent,
13716
+ selectTag
13743
13717
  ]);
13744
- useEffect(() => {
13745
- const initTime = () => {
13746
- backMainFeed('external');
13747
- };
13748
- window.addEventListener('pageshow', initTime);
13749
- return () => {
13750
- window.removeEventListener('pageshow', initTime);
13751
- };
13752
- }, []);
13753
13718
  const tagHeight = useMemo(() => {
13754
13719
  let h = 0;
13755
13720
  if (tagList.length > 0) {
@@ -14022,24 +13987,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
14022
13987
  });
14023
13988
  }
14024
13989
  }
14025
- },
14026
- // style={{
14027
- // pointerEvents: canSwiper ? 'auto' : 'none'
14028
- // }}
14029
- // onReachEnd={() => {
14030
- // // 由hashtaglist跳转过来时不执行下面的方法
14031
- // if (waterFallData) return;
14032
- // if (!isLoadMore) {
14033
- // console.log('trigger load 2');
14034
- // setIsLoadMore(true);
14035
- // loadVideos?.(Math.ceil(activeIndex / 10) + 1).then(() => {
14036
- // setIsLoadMore(false);
14037
- // });
14038
- // }
14039
- // }}
14040
- // modules={[Virtual]}
14041
- // virtual={{ enabled: true, cache: true }}
14042
- direction: 'vertical', height: height },
13990
+ }, direction: 'vertical', height: height },
14043
13991
  React.createElement(ToggleButton$1, { style: {
14044
13992
  position: 'fixed',
14045
13993
  visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
@@ -14238,7 +14186,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
14238
14186
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
14239
14187
  return null;
14240
14188
  }
14241
- return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
14189
+ return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'video poster' }));
14242
14190
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
14243
14191
  useEffect(() => {
14244
14192
  const handleBeforeUnload = () => {
@@ -14287,7 +14235,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
14287
14235
  height,
14288
14236
  objectFit: 'contain'
14289
14237
  } }),
14290
- React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
14238
+ React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' }))),
14291
14239
  renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
14292
14240
  position: 'relative',
14293
14241
  width,
@@ -14296,7 +14244,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
14296
14244
  } },
14297
14245
  React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', style: { width: '100%' }, ref: videoRef, crossOrigin: 'anonymous', muted: true, autoPlay: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
14298
14246
  renderPoster,
14299
- React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
14247
+ React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
14300
14248
  };
14301
14249
  var VideoWidget$1 = memo(VideoWidget);
14302
14250
 
@@ -14573,4 +14521,3 @@ function useEditorDataProvider() {
14573
14521
  */
14574
14522
 
14575
14523
  export { index$1 as DiyPortalPreview, EditorDataProvider, Modal$1 as Modal, SxpDataSourceProvider$1 as SxpDataSourceProvider, index as SxpPageCore, SxpPageRender, index$2 as core, Pagebuilder as default, defaultSetting, _materials_ as materials, useEditorDataProvider };
14576
- //# sourceMappingURL=index.js.map