pb-sxp-ui 1.0.33 → 1.0.35

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/LICENSE +21 -21
  2. package/README.md +111 -111
  3. package/dist/index.cjs +449 -104
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +6 -1
  6. package/dist/index.js +448 -104
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.min.cjs +3 -3
  9. package/dist/index.min.cjs.map +1 -1
  10. package/dist/index.min.js +3 -3
  11. package/dist/index.min.js.map +1 -1
  12. package/dist/pb-ui.js +452 -108
  13. package/dist/pb-ui.js.map +1 -1
  14. package/dist/pb-ui.min.js +3 -3
  15. package/dist/pb-ui.min.js.map +1 -1
  16. package/es/core/components/DiyPortalPreview/PictureGroup.d.ts +13 -0
  17. package/es/core/components/DiyPortalPreview/PictureGroup.js +11 -0
  18. package/es/core/components/DiyPortalPreview/VideoWidget.d.ts +15 -0
  19. package/es/core/components/DiyPortalPreview/VideoWidget.js +236 -0
  20. package/es/core/components/DiyPortalPreview/index.d.ts +6 -0
  21. package/es/core/components/DiyPortalPreview/index.js +112 -0
  22. package/es/core/components/SxpPageRender/VideoWidget/index.js +55 -56
  23. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
  24. package/es/core/components/SxpPageRender/index.js +7 -7
  25. package/es/core/context/SxpDataSourceProvider.js +1 -1
  26. package/es/core/hooks/useEventReport.js +4 -4
  27. package/es/index.d.ts +1 -0
  28. package/es/index.js +1 -0
  29. package/es/materials/sxp/popup/CommodityDetail/index.js +10 -10
  30. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +10 -10
  31. package/lib/core/components/DiyPortalPreview/PictureGroup.d.ts +13 -0
  32. package/lib/core/components/DiyPortalPreview/PictureGroup.js +14 -0
  33. package/lib/core/components/DiyPortalPreview/VideoWidget.d.ts +15 -0
  34. package/lib/core/components/DiyPortalPreview/VideoWidget.js +239 -0
  35. package/lib/core/components/DiyPortalPreview/index.d.ts +6 -0
  36. package/lib/core/components/DiyPortalPreview/index.js +115 -0
  37. package/lib/core/components/SxpPageRender/VideoWidget/index.js +55 -56
  38. package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -1
  39. package/lib/core/components/SxpPageRender/index.js +7 -7
  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 +10 -10
  45. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +10 -10
  46. package/package.json +115 -114
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
  });
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,
@@ -59,10 +59,10 @@ const CommodityDetail = (_a) => {
59
59
  React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
60
60
  React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
61
61
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
62
- React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
63
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
64
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
65
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
62
+ React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
63
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
64
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
65
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
66
66
  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 }))));
67
67
  };
68
68
  const renderBtn = () => {
@@ -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
  };
@@ -84,12 +84,12 @@ const CommodityDetailDiroNew = (_a) => {
84
84
  const productInfoText = ({ isPost }) => {
85
85
  return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
86
86
  React.createElement(ExpandableText, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
87
- `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
87
+ `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
88
88
  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;