pb-sxp-ui 1.0.37 → 1.0.38

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