pb-sxp-ui 1.0.40 → 1.0.41

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 (46) hide show
  1. package/dist/index.cjs +455 -135
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +8 -1
  4. package/dist/index.js +454 -135
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +458 -139
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/DiyPortalPreview/PictureGroup.d.ts +13 -0
  15. package/es/core/components/DiyPortalPreview/PictureGroup.js +11 -0
  16. package/es/core/components/DiyPortalPreview/VideoWidget.d.ts +15 -0
  17. package/es/core/components/DiyPortalPreview/VideoWidget.js +236 -0
  18. package/es/core/components/DiyPortalPreview/index.d.ts +6 -0
  19. package/es/core/components/DiyPortalPreview/index.js +112 -0
  20. package/es/core/components/SxpPageRender/PictureGroup/Picture.js +1 -0
  21. package/es/core/components/SxpPageRender/VideoWidget/index.js +46 -79
  22. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
  23. package/es/core/components/SxpPageRender/index.js +8 -13
  24. package/es/core/context/SxpDataSourceProvider.js +1 -1
  25. package/es/core/hooks/useEventReport.js +4 -4
  26. package/es/index.d.ts +1 -0
  27. package/es/index.js +1 -0
  28. package/es/materials/sxp/popup/CommodityDetail/index.js +6 -6
  29. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -9
  30. package/lib/core/components/DiyPortalPreview/PictureGroup.d.ts +13 -0
  31. package/lib/core/components/DiyPortalPreview/PictureGroup.js +14 -0
  32. package/lib/core/components/DiyPortalPreview/VideoWidget.d.ts +15 -0
  33. package/lib/core/components/DiyPortalPreview/VideoWidget.js +239 -0
  34. package/lib/core/components/DiyPortalPreview/index.d.ts +6 -0
  35. package/lib/core/components/DiyPortalPreview/index.js +115 -0
  36. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +1 -0
  37. package/lib/core/components/SxpPageRender/VideoWidget/index.js +46 -79
  38. package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -1
  39. package/lib/core/components/SxpPageRender/index.js +8 -13
  40. package/lib/core/context/SxpDataSourceProvider.js +1 -1
  41. package/lib/core/hooks/useEventReport.js +4 -4
  42. package/lib/index.d.ts +1 -0
  43. package/lib/index.js +3 -1
  44. package/lib/materials/sxp/popup/CommodityDetail/index.js +6 -6
  45. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -9
  46. package/package.json +2 -1
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -120,12 +120,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
120
120
  sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
121
121
  eventSubject: 'sessionCompleted',
122
122
  eventDescription: 'Session completed',
123
- relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
124
- relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
123
+ contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
124
+ productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
125
125
  position: activeIndex + '',
126
126
  fromKName,
127
127
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
128
- relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
128
+ ctatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
129
129
  }
130
130
  });
131
131
  }
@@ -258,8 +258,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
258
258
  eventInfo: {
259
259
  eventSubject: 'scrollDown',
260
260
  eventDescription: 'User scroll down',
261
- relatedContentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
262
- relatedProductId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
261
+ contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
262
+ productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
263
263
  requestId: null
264
264
  }
265
265
  });
@@ -270,8 +270,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
270
270
  eventInfo: {
271
271
  eventSubject: 'scrollUp',
272
272
  eventDescription: 'User scroll up',
273
- relatedContentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
274
- relatedProductId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
273
+ contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
274
+ productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
275
275
  requestId: null
276
276
  }
277
277
  });
@@ -349,12 +349,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
349
349
  } })),
350
350
  renderLogo,
351
351
  isShowFingerTip ? React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
352
- React.createElement(Swiper, { ref: swiperRef, onSlideChange: () => {
353
- swiperRef.current.swiper.allowTouchMove = false;
354
- setTimeout(() => {
355
- swiperRef.current.swiper.allowTouchMove = true;
356
- }, 500);
357
- }, onActiveIndexChange: (swiper) => {
352
+ React.createElement(Swiper, { ref: swiperRef, onActiveIndexChange: (swiper) => {
358
353
  setActiveIndex(swiper.activeIndex);
359
354
  if (openHashtag)
360
355
  return;
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -141,7 +141,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
141
141
  fromKName = 'imagePage';
142
142
  }
143
143
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
144
- eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', relatedContentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', relatedProductId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
144
+ eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
145
145
  });
146
146
  }, [bffEventReport, isFromHashtag]);
147
147
  useEffect(() => {
package/es/core/hooks/useEventReport.js CHANGED
@@ -32,8 +32,8 @@ export function useEventReport() {
32
32
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
33
33
  contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
34
34
  position: position + '',
35
- relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
36
- relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
35
+ contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
36
+ ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
37
37
  traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
38
38
  }
39
39
  });
@@ -57,8 +57,8 @@ export function useEventReport() {
57
57
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
58
58
  contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
59
59
  position: position + '',
60
- relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
61
- relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
60
+ contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
61
+ ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
62
62
  traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
63
63
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
64
64
  eventSubject: 'productView',
package/es/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import { Pagebuilder } from './core/Pagebuilder';
2
2
  export * as core from './core';
3
3
  export * as materials from './materials';
4
4
  export { default as SxpPageRender } from './core/components/SxpPageRender';
5
+ export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
5
6
  export { default as Modal } from './core/components/SxpPageRender/Modal';
6
7
  export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
7
8
  export { default as SxpPageCore } from './core/components/SxpPageCore';
package/es/index.js CHANGED
@@ -4,6 +4,7 @@ export { core_1 as core };
4
4
  import * as materials_1 from './materials';
5
5
  export { materials_1 as materials };
6
6
  export { default as SxpPageRender } from './core/components/SxpPageRender';
7
+ export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
7
8
  export { default as Modal } from './core/components/SxpPageRender/Modal';
8
9
  export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
9
10
  export { default as SxpPageCore } from './core/components/SxpPageCore';
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -10,7 +10,7 @@ import Modal from '../../../../core/components/SxpPageRender/Modal';
10
10
  import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
11
11
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
12
  const CommodityDetail = (_a) => {
13
- var _b, _c, _d, _e, _f, _g, _h, _j;
13
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k;
14
14
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
15
15
  const { sxpParameter } = useSxpDataSource();
16
16
  const { popupDetailData, bffEventReport, isPreview, waterFallData } = useSxpDataSource();
@@ -51,7 +51,7 @@ const CommodityDetail = (_a) => {
51
51
  return '$7,000';
52
52
  }
53
53
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
54
- const width = isPreview ? 375 : window.innerWidth;
54
+ const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
55
55
  const renderContent = ({ isPost }) => {
56
56
  var _a, _b, _c;
57
57
  return (React.createElement("div", null,
@@ -71,7 +71,7 @@ const CommodityDetail = (_a) => {
71
71
  };
72
72
  return (React.createElement("div", { className: 'pb-commondity' },
73
73
  React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
74
- product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
74
+ product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
75
75
  clickable: true,
76
76
  bulletActiveClass: 'swipe-item-active-bullet',
77
77
  clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -79,7 +79,7 @@ const CommodityDetail = (_a) => {
79
79
  : 'commondityDetail-swiper-clickable-center'
80
80
  }, loop: true, autoplay: {
81
81
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
82
- } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
82
+ } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
83
83
  return (React.createElement(SwiperSlide, { key: src },
84
84
  React.createElement("div", { style: {
85
85
  overflow: 'hidden',
@@ -88,7 +88,7 @@ const CommodityDetail = (_a) => {
88
88
  } },
89
89
  React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
90
90
  }))),
91
- !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
91
+ !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
92
92
  position: 'relative',
93
93
  height: 0,
94
94
  width: '100%',
@@ -101,7 +101,7 @@ const CommodityDetail = (_a) => {
101
101
  top: 0,
102
102
  objectFit: 'cover',
103
103
  width: '100%'
104
- }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
104
+ }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
105
105
  React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
106
106
  renderBtn(),
107
107
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -10,7 +10,7 @@ import ExpandableText from '../../../../core/components/SxpPageRender/Expandable
10
10
  import { useEventReport } from '../../../../core/hooks/useEventReport';
11
11
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
12
  const CommodityDetailDiroNew = (_a) => {
13
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
13
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
14
14
  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"]);
15
15
  const [spread, setSpread] = useState(true);
16
16
  const { sxpParameter } = useSxpDataSource();
@@ -58,7 +58,7 @@ const CommodityDetailDiroNew = (_a) => {
58
58
  return '£102,300.00';
59
59
  }
60
60
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
61
- const width = isPreview ? 375 : window.innerWidth;
61
+ const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
62
62
  const handleClickCollapse = () => {
63
63
  setSpread(!spread);
64
64
  };
@@ -89,7 +89,7 @@ Made in Italy` })));
89
89
  };
90
90
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
91
91
  React.createElement("div", Object.assign({ ref: scrollRef, className: css(Object.assign({}, style)) }, props),
92
- product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
92
+ product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
93
93
  clickable: true,
94
94
  bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
95
95
  clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -97,7 +97,7 @@ Made in Italy` })));
97
97
  : 'commondityDiroNew-swiper-clickable-center'
98
98
  }, loop: true, autoplay: {
99
99
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
100
- } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
100
+ } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
101
101
  return (React.createElement(SwiperSlide, { key: src },
102
102
  React.createElement("div", { style: {
103
103
  overflow: 'hidden',
@@ -106,7 +106,7 @@ Made in Italy` })));
106
106
  } },
107
107
  React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
108
108
  }))),
109
- !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
109
+ !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
110
110
  position: 'relative',
111
111
  height: 0,
112
112
  width: '100%',
@@ -119,16 +119,16 @@ Made in Italy` })));
119
119
  top: 0,
120
120
  objectFit: 'cover',
121
121
  width: '100%'
122
- }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
122
+ }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
123
123
  React.createElement("div", { className: 'pb-commondityDiroNew-content' },
124
124
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
125
125
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
126
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
126
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours Bag'),
127
127
  React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
128
128
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
129
129
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
130
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
131
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
130
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
131
+ (!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')),
132
132
  productInfoText({ isPost }))),
133
133
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
134
134
  };
package/lib/core/components/DiyPortalPreview/PictureGroup.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { RecItemType } from '../SxpPageRender/typing';
3
+ import { postConfigType } from '../SxpPageRender';
4
+ interface IPictureGroupProps {
5
+ imgUrls?: string[];
6
+ width: number;
7
+ height: number;
8
+ rec: RecItemType;
9
+ index: number;
10
+ imgUrlsPostConfig?: postConfigType;
11
+ }
12
+ declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
13
+ export default _default;
package/lib/core/components/DiyPortalPreview/PictureGroup.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const react_1 = tslib_1.__importStar(require("react"));
5
+ const modules_1 = require("swiper/modules");
6
+ const react_2 = require("swiper/react");
7
+ const Picture_1 = tslib_1.__importDefault(require("../SxpPageRender/PictureGroup/Picture"));
8
+ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
9
+ return (react_1.default.createElement(react_2.Swiper, { defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
10
+ return (react_1.default.createElement(react_2.SwiperSlide, { key: url },
11
+ react_1.default.createElement(Picture_1.default, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
12
+ })));
13
+ };
14
+ exports.default = (0, react_1.memo)(PictureGroup);
package/lib/core/components/DiyPortalPreview/VideoWidget.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { RecItemType } from '../SxpPageRender/typing';
3
+ import { postConfigType } from '../SxpPageRender';
4
+ interface IVideoWidgetProps {
5
+ rec: RecItemType;
6
+ index: number;
7
+ height: number;
8
+ width: number;
9
+ data: RecItemType[];
10
+ muted: boolean;
11
+ activeIndex?: number;
12
+ videoPostConfig?: postConfigType;
13
+ }
14
+ declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
15
+ export default _default;
package/lib/core/components/DiyPortalPreview/VideoWidget.js ADDED
@@ -0,0 +1,239 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const react_1 = tslib_1.__importStar(require("react"));
5
+ const hls_js_1 = tslib_1.__importDefault(require("hls.js"));
6
+ const useIconLink_1 = require("../SxpPageRender/useIconLink");
7
+ const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
8
+ const hooks_1 = require("../../../core/hooks");
9
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
10
+ const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
11
+ const videoRef = (0, react_1.useRef)(null);
12
+ const { bffEventReport, sxpParameter, waterFallData, openHashtag } = (0, hooks_1.useSxpDataSource)();
13
+ const videoStartTime = (0, react_1.useRef)(0);
14
+ const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
15
+ const [isFirstPlay, setIsFirstPlay] = (0, react_1.useState)(true);
16
+ const canvasRef = (0, react_1.useRef)(null);
17
+ const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
18
+ (0, react_1.useEffect)(() => {
19
+ if (!videoRef.current)
20
+ return;
21
+ videoRef.current.muted = muted;
22
+ }, [muted]);
23
+ const handleVideoStart = (0, react_1.useCallback)(() => {
24
+ var _a;
25
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
26
+ }, []);
27
+ const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
28
+ const handlePlaying = (0, react_1.useCallback)(() => {
29
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
30
+ setIsPauseVideo(false);
31
+ const item = data[index];
32
+ if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
33
+ videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
34
+ const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
35
+ const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
36
+ const playType = isFirstPlay ? '0' : '1';
37
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
38
+ eventInfo: {
39
+ eventSubject: 'playVideo',
40
+ eventDescription: 'User played the video',
41
+ contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
42
+ contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
43
+ playType,
44
+ startTime: videoCurrentTime,
45
+ videoDuration,
46
+ contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
47
+ position: index + '',
48
+ contentFormat: 'video',
49
+ traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
50
+ }
51
+ });
52
+ setIsFirstPlay(false);
53
+ }
54
+ }, [bffEventReport, data, index, isFirstPlay]);
55
+ const handleLoadedMetadata = (0, react_1.useCallback)(() => {
56
+ setIsLoadFinish(true);
57
+ }, []);
58
+ const handleClickVideo = (0, react_1.useCallback)((type) => () => {
59
+ var _a, _b, _c, _d, _e;
60
+ if (!isLoadFinish)
61
+ return;
62
+ const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
63
+ switch (type) {
64
+ case 'start':
65
+ if (!isPause)
66
+ return;
67
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
68
+ setIsPauseVideo(false);
69
+ break;
70
+ case 'pause':
71
+ if (isPause)
72
+ return;
73
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
74
+ setIsPauseVideo(true);
75
+ break;
76
+ default:
77
+ if (isPause) {
78
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
79
+ }
80
+ else {
81
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
82
+ }
83
+ setIsPauseVideo(!isPause);
84
+ break;
85
+ }
86
+ }, [isLoadFinish]);
87
+ const onPause = (0, react_1.useCallback)(() => {
88
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
89
+ const item = data[index];
90
+ const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
91
+ const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
92
+ if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
93
+ const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
94
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
95
+ eventInfo: {
96
+ eventSubject: 'playOverVideo',
97
+ eventDescription: 'User finished playing the video',
98
+ contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
99
+ contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
100
+ endTime: videoCurrentTime,
101
+ videoDuration,
102
+ playDuration,
103
+ contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
104
+ position: index + '',
105
+ contentFormat: 'video',
106
+ traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
107
+ }
108
+ });
109
+ }
110
+ }, [data, index, bffEventReport]);
111
+ const blur = (0, react_1.useMemo)(() => {
112
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
113
+ }, [videoPostConfig]);
114
+ const translateY = (0, react_1.useMemo)(() => {
115
+ var _a;
116
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
117
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
118
+ : 'translateY(-50%)';
119
+ }, [videoPostConfig]);
120
+ const blurBgSrc = (0, react_1.useMemo)(() => {
121
+ var _a;
122
+ return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
123
+ }, [firstFrameSrc, rec]);
124
+ const handLoadeddata = (0, react_1.useCallback)(() => {
125
+ if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
126
+ return;
127
+ const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
128
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
129
+ const ctx = canvas.getContext('2d');
130
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
131
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
132
+ canvas.height = targetHeight;
133
+ canvas.width = targetWidth;
134
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
135
+ setFirstFrameSrc(canvas.toDataURL());
136
+ }, []);
137
+ (0, react_1.useEffect)(() => {
138
+ var _a, _b, _c, _d;
139
+ if (!videoRef.current)
140
+ return;
141
+ setIsPauseVideo(false);
142
+ if (!videoRef.current.src) {
143
+ const videoSrc = rec.video.url;
144
+ if (videoSrc.includes('.m3u8')) {
145
+ if (hls_js_1.default.isSupported()) {
146
+ const hls = new hls_js_1.default();
147
+ hls.loadSource(videoSrc);
148
+ hls.attachMedia(videoRef.current);
149
+ }
150
+ else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
151
+ videoRef.current.src = videoSrc;
152
+ }
153
+ else {
154
+ videoRef.current.src = videoSrc;
155
+ }
156
+ }
157
+ else {
158
+ videoRef.current.src = videoSrc;
159
+ }
160
+ videoRef.current.setAttribute('x5-playsinline', 'true');
161
+ videoRef.current.setAttribute('webkit-playsinline', 'true');
162
+ }
163
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
164
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
165
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
166
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
167
+ return () => {
168
+ var _a, _b, _c, _d;
169
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
170
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
171
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
172
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
173
+ };
174
+ }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
175
+ const renderPoster = (0, react_1.useMemo)(() => {
176
+ if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
177
+ return null;
178
+ }
179
+ return (react_1.default.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 }));
180
+ }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
181
+ (0, react_1.useEffect)(() => {
182
+ const handleBeforeUnload = () => {
183
+ var _a, _b;
184
+ if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
185
+ handleClickVideo('pause')();
186
+ }
187
+ };
188
+ window.addEventListener('beforeunload', handleBeforeUnload);
189
+ return () => {
190
+ window.removeEventListener('beforeunload', handleBeforeUnload);
191
+ };
192
+ }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
193
+ const blurStyle = (0, react_1.useMemo)(() => {
194
+ return blur
195
+ ? {
196
+ filter: 'blur(10px)',
197
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
198
+ }
199
+ : {};
200
+ }, [blur]);
201
+ if (!rec.video) {
202
+ return null;
203
+ }
204
+ return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
205
+ position: 'relative',
206
+ width,
207
+ height,
208
+ overflow: 'hidden'
209
+ } },
210
+ react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height,
211
+ width, objectFit: 'cover' }, blurStyle) }),
212
+ react_1.default.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
213
+ react_1.default.createElement("div", { style: {
214
+ position: 'absolute',
215
+ width,
216
+ height,
217
+ top: '50%',
218
+ transform: translateY,
219
+ left: 0,
220
+ right: 0
221
+ } },
222
+ react_1.default.createElement("div", { style: { position: 'relative', width, height: '100%' } },
223
+ react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
224
+ width: '100%',
225
+ height,
226
+ objectFit: 'contain'
227
+ } }),
228
+ react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
229
+ renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
230
+ position: 'relative',
231
+ width,
232
+ height,
233
+ overflow: 'hidden'
234
+ } },
235
+ react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
236
+ renderPoster,
237
+ react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
238
+ };
239
+ exports.default = (0, react_1.memo)(VideoWidget);
package/lib/core/components/DiyPortalPreview/index.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { ISxpPageRenderProps } from '../SxpPageRender';
3
+ declare const _default: React.NamedExoticComponent<ISxpPageRenderProps & {
4
+ appDomain?: string | undefined;
5
+ }>;
6
+ export default _default;