pb-sxp-ui 1.0.71 → 1.0.72

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 (31) hide show
  1. package/dist/index.cjs +111 -82
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +111 -82
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +115 -85
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/DiyPortalPreview/VideoWidget.js +15 -16
  14. package/es/core/components/DiyPortalPreview/index.js +8 -8
  15. package/es/core/components/SxpPageCore/index.js +2 -2
  16. package/es/core/components/SxpPageRender/FormatImage.js +2 -1
  17. package/es/core/components/SxpPageRender/LikeButton/index.js +11 -11
  18. package/es/core/components/SxpPageRender/VideoWidget/index.js +13 -13
  19. package/es/core/components/SxpPageRender/index.js +32 -26
  20. package/es/core/context/SxpDataSourceProvider.d.ts +1 -0
  21. package/es/core/context/SxpDataSourceProvider.js +3 -3
  22. package/lib/core/components/DiyPortalPreview/VideoWidget.js +15 -16
  23. package/lib/core/components/DiyPortalPreview/index.js +8 -8
  24. package/lib/core/components/SxpPageCore/index.js +2 -2
  25. package/lib/core/components/SxpPageRender/FormatImage.js +1 -0
  26. package/lib/core/components/SxpPageRender/LikeButton/index.js +11 -11
  27. package/lib/core/components/SxpPageRender/VideoWidget/index.js +13 -13
  28. package/lib/core/components/SxpPageRender/index.js +32 -26
  29. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -0
  30. package/lib/core/context/SxpDataSourceProvider.js +3 -3
  31. package/package.json +1 -2
package/lib/core/components/DiyPortalPreview/index.js CHANGED
@@ -34,11 +34,11 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
34
34
  }, [globalConfig, containerHeight, tagList]);
35
35
  const renderContent = (rec, index) => {
36
36
  var _a, _b, _c, _d;
37
- if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
37
+ if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
38
38
  return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
39
39
  }
40
- if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
41
- return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
40
+ if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
41
+ return (react_1.default.createElement(PictureGroup_1.default, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
42
42
  }
43
43
  if (rec.product) {
44
44
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
@@ -68,15 +68,15 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
68
68
  };
69
69
  const renderBottom = (rec, index) => {
70
70
  var _a, _b, _c, _d, _e, _f, _g;
71
- if (rec.video) {
71
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
72
72
  return (react_1.default.createElement(react_1.default.Fragment, null,
73
- ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
73
+ ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
74
74
  react_1.default.createElement("div", { className: 'clc-sxp-bottom' },
75
75
  react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
76
76
  CTA(rec, index),
77
77
  react_1.default.createElement("div", null,
78
- react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }) })),
79
- react_1.default.createElement(Hashtag_1.default, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
78
+ react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }) })),
79
+ react_1.default.createElement(Hashtag_1.default, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
80
80
  }
81
81
  return null;
82
82
  };
@@ -90,7 +90,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
90
90
  if (top < 40) {
91
91
  top += 40;
92
92
  }
93
- if (rec.video) {
93
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
94
94
  return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
95
95
  top,
96
96
  right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0
package/lib/core/components/SxpPageCore/index.js CHANGED
@@ -12,14 +12,14 @@ Object.values(_materials_).forEach((v) => {
12
12
  RESOLVER[v.extend.type] = v;
13
13
  });
14
14
  const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl, enabledMetaConversionApi }) => {
15
- var _a, _b, _c, _d, _e, _f;
15
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
16
16
  const utmVal = (0, react_1.useMemo)(() => {
17
17
  var _a;
18
18
  const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
19
19
  return searchParams;
20
20
  }, []);
21
21
  return (react_1.default.createElement(core_1.EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
22
- react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, render: ({ rtcList, tagList }) => {
22
+ react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, isShowTag: (_j = (_h = (_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.sxpPageConf) === null || _h === void 0 ? void 0 : _h.globalConfig) === null || _j === void 0 ? void 0 : _j.isShowTag, render: ({ rtcList, tagList }) => {
23
23
  var _a;
24
24
  return (react_1.default.createElement(react_1.default.Fragment, null,
25
25
  react_1.default.createElement(SxpPageRender_1.default, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),
package/lib/core/components/SxpPageRender/FormatImage.js CHANGED
@@ -13,6 +13,7 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
13
13
  (0, react_1.useEffect)(() => {
14
14
  setImgSrc(src);
15
15
  }, [src]);
16
+ const imgRef = (0, react_1.useRef)(null);
16
17
  return (react_1.default.createElement(react_1.default.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
17
18
  react_1.default.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
18
19
  react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
package/lib/core/components/SxpPageRender/LikeButton/index.js CHANGED
@@ -17,17 +17,17 @@ const LikeButton = (_a) => {
17
17
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
18
18
  if (state) {
19
19
  setState(false);
20
- const result = (_d = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_c = (_b = recData.video) === null || _b === void 0 ? void 0 : _b.itemId) !== null && _c !== void 0 ? _c : '' })))) !== null && _d !== void 0 ? _d : false;
20
+ const result = (_d = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.itemId) !== null && _c !== void 0 ? _c : '' })))) !== null && _d !== void 0 ? _d : false;
21
21
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
22
22
  eventInfo: {
23
23
  eventSubject: 'favoriteContentCanceled',
24
24
  eventDescription: 'This content was unfavorite by the user',
25
- contentId: (_f = (_e = recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
26
- contentName: (_h = (_g = recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
27
- contentTags: JSON.stringify((_k = (_j = recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
25
+ contentId: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
26
+ contentName: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
27
+ contentTags: JSON.stringify((_k = (_j = recData === null || recData === void 0 ? void 0 : recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
28
28
  position: position + '',
29
- contentFormat: ((_l = recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
30
- traceInfo: (_m = recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
29
+ contentFormat: ((_l = recData === null || recData === void 0 ? void 0 : recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
30
+ traceInfo: (_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
31
31
  }
32
32
  });
33
33
  if (!result) {
@@ -41,12 +41,12 @@ const LikeButton = (_a) => {
41
41
  eventInfo: {
42
42
  eventSubject: 'favoriteContent',
43
43
  eventDescription: 'This content was favorite by the user',
44
- contentId: (_q = (_p = recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
45
- contentName: (_s = (_r = recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
46
- contentTags: JSON.stringify((_u = (_t = recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
44
+ contentId: (_q = (_p = recData === null || recData === void 0 ? void 0 : recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
45
+ contentName: (_s = (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
46
+ contentTags: JSON.stringify((_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
47
47
  position: position + '',
48
- contentFormat: ((_v = recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
49
- traceInfo: (_w = recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
48
+ contentFormat: ((_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
49
+ traceInfo: (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
50
50
  }
51
51
  });
52
52
  if (!result) {
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -72,15 +72,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
72
72
  eventInfo: {
73
73
  eventSubject: 'playVideo',
74
74
  eventDescription: 'User played the video',
75
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
76
- contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
75
+ contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
76
+ contentName: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
77
77
  playType,
78
78
  startTime: videoCurrentTime,
79
79
  videoDuration,
80
- contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
80
+ contentTags: JSON.stringify((_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
81
81
  position: index + '',
82
82
  contentFormat: 'video',
83
- traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
83
+ traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
84
84
  }
85
85
  });
86
86
  setIsFirstPlay(false);
@@ -165,15 +165,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
165
165
  eventInfo: {
166
166
  eventSubject: 'playOverVideo',
167
167
  eventDescription: 'User finished playing the video',
168
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
169
- contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
168
+ contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
169
+ contentName: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
170
170
  endTime: videoCurrentTime,
171
171
  videoDuration,
172
172
  playDuration,
173
- contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
173
+ contentTags: JSON.stringify((_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
174
174
  position: index + '',
175
175
  contentFormat: 'video',
176
- traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
176
+ traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
177
177
  }
178
178
  });
179
179
  }
@@ -181,9 +181,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
181
181
  (0, react_1.useEffect)(() => {
182
182
  if (!isActive || !videoRef)
183
183
  return;
184
- const videoSrc = rec.video.url;
184
+ const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
185
185
  if (!videoSrc)
186
186
  return;
187
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
187
188
  setIsPauseVideo(false);
188
189
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
189
190
  const dom = document.querySelector('#player-container-id');
@@ -191,7 +192,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
191
192
  if (!dom && !dom2)
192
193
  return;
193
194
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
194
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
195
195
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
196
196
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
197
197
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
@@ -267,10 +267,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
267
267
  window.removeEventListener('beforeunload', handleBeforeUnload);
268
268
  };
269
269
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
270
- if (!rec.video) {
270
+ if (!(rec === null || rec === void 0 ? void 0 : rec.video)) {
271
271
  return null;
272
272
  }
273
- 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: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
273
+ return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
274
274
  !isBgColor && (react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
275
275
  react_1.default.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
276
276
  react_1.default.createElement("div", { style: {
@@ -285,7 +285,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
285
285
  react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
286
286
  react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
287
287
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
288
- renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
288
+ renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
289
289
  position: 'relative',
290
290
  width: '100%',
291
291
  height,
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -79,23 +79,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
79
79
  };
80
80
  const firstRef = (0, react_1.useRef)();
81
81
  (0, react_1.useEffect)(() => {
82
- if (!firstRef.current && !videoRef) {
82
+ var _a, _b, _c;
83
+ if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
83
84
  firstRef.current = true;
84
85
  const player = TCPlayer('player-container-id', {
85
86
  licenseUrl,
86
87
  controls: false,
87
- autoplay: false,
88
88
  loop: false,
89
+ autoplay: true,
89
90
  muted: true,
90
91
  preload: 'auto',
91
92
  posterImage: false,
92
- bigPlayButton: true
93
+ bigPlayButton: true,
94
+ sources: [
95
+ {
96
+ src: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : ''
97
+ }
98
+ ]
93
99
  });
94
100
  player === null || player === void 0 ? void 0 : player.ready(() => {
95
101
  setVideoRef(player);
96
102
  });
97
103
  }
98
- }, [videoRef, licenseUrl]);
104
+ }, [videoRef, licenseUrl, data]);
99
105
  (0, react_1.useEffect)(() => {
100
106
  if (!isInit)
101
107
  handleH5EnterLink();
@@ -128,7 +134,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
128
134
  if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
129
135
  fromKName = 'pdpPage';
130
136
  }
131
- else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
137
+ else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
132
138
  fromKName = 'formPage';
133
139
  }
134
140
  else if (isFromHashtag) {
@@ -153,7 +159,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
153
159
  position: activeIndex + '',
154
160
  fromKName,
155
161
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
156
- 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 : ''
162
+ ctatId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
157
163
  }
158
164
  });
159
165
  }
@@ -190,11 +196,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
190
196
  }, [globalConfig]);
191
197
  const renderContent = (0, react_1.useCallback)((rec, index) => {
192
198
  var _a, _b, _c, _d;
193
- if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
199
+ if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
194
200
  return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
195
201
  }
196
- if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
197
- return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
202
+ if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
203
+ return (react_1.default.createElement(PictureGroup_1.default, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
198
204
  }
199
205
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
200
206
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
@@ -235,16 +241,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
235
241
  }, [isShowMore]);
236
242
  const renderBottom = (0, react_1.useCallback)((rec, index) => {
237
243
  var _a, _b, _c, _d, _e, _f, _g;
238
- if (rec.video) {
244
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
239
245
  return (react_1.default.createElement(react_1.default.Fragment, null,
240
- ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
246
+ ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
241
247
  react_1.default.createElement("div", { className: 'clc-sxp-bottom' },
242
248
  react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
243
249
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
244
250
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
245
251
  react_1.default.createElement("div", null,
246
- react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
247
- react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
252
+ react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
253
+ react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
248
254
  }
249
255
  return null;
250
256
  }, [
@@ -268,7 +274,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
268
274
  if (waterFallData && top < 40) {
269
275
  top += 40;
270
276
  }
271
- if (rec.video) {
277
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
272
278
  return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
273
279
  [(_b = globalConfig.likeIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig.likeIconX) !== null && _c !== void 0 ? _c : 0,
274
280
  [(_d = globalConfig.likeIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top
@@ -278,21 +284,21 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
278
284
  }, [globalConfig, waterFallData]);
279
285
  const handleReportViewImageEnd = (item) => {
280
286
  var _a, _b, _c, _d, _e, _f;
281
- if (!((_a = item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
287
+ if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
282
288
  const endTime = Date.now();
283
289
  const duration = (endTime - viewImageStartTime.current) / 1000;
284
290
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
285
291
  eventInfo: {
286
292
  eventSubject: 'viewImageCarouselEnd',
287
293
  eventDescription: 'User end view the image carousel',
288
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
289
- contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
294
+ contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
295
+ contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
290
296
  imageEndTime: `${endTime}`,
291
297
  playDuration: `${duration}`,
292
- contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
298
+ contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
293
299
  position: activeIndex + '',
294
300
  contentFormat: 'image',
295
- traceInfo: item.video.traceInfo
301
+ traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
296
302
  }
297
303
  });
298
304
  }
@@ -308,8 +314,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
308
314
  eventInfo: {
309
315
  eventSubject: 'scrollDown',
310
316
  eventDescription: 'User scroll down',
311
- contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
312
- productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
317
+ contentId: (_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
318
+ productId: (_d = (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
313
319
  requestId: null
314
320
  }
315
321
  });
@@ -320,7 +326,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
320
326
  eventInfo: {
321
327
  eventSubject: 'scrollUp',
322
328
  eventDescription: 'User scroll up',
323
- contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
329
+ contentId: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
324
330
  productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
325
331
  requestId: null
326
332
  }
@@ -356,13 +362,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
356
362
  eventInfo: {
357
363
  eventSubject: 'viewImageCarouselStart',
358
364
  eventDescription: 'User start view the image carousel',
359
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
360
- contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
365
+ contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
366
+ contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
361
367
  imageStartTime: `${startTime}`,
362
- contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
368
+ contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
363
369
  position: activeIndex + '',
364
370
  contentFormat: 'image',
365
- traceInfo: item.video.traceInfo
371
+ traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
366
372
  }
367
373
  });
368
374
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -102,6 +102,7 @@ export interface SxpDataSourceProviderProps {
102
102
  loadingImage?: string;
103
103
  isOpenHashTag?: boolean;
104
104
  enabledMetaConversionApi?: boolean;
105
+ isShowTag?: boolean;
105
106
  }
106
107
  declare const _default: React.NamedExoticComponent<SxpDataSourceProviderProps>;
107
108
  export default _default;
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -17,7 +17,7 @@ var DataSourceType;
17
17
  DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
18
18
  })(DataSourceType || (DataSourceType = {}));
19
19
  const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
20
- const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false }) => {
20
+ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, isShowTag = true }) => {
21
21
  const [rtcList, setRtcList] = (0, react_1.useState)([]);
22
22
  const [tagList, setTagList] = (0, react_1.useState)([]);
23
23
  const [loading, setLoading] = (0, react_1.useState)(false);
@@ -167,7 +167,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
167
167
  }), [bffFetch]);
168
168
  const bffGetTagList = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
169
169
  var _h, _j, _k, _l, _m;
170
- if (!utmVal)
170
+ if (!utmVal || !isShowTag)
171
171
  return;
172
172
  try {
173
173
  const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
@@ -180,7 +180,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
180
180
  catch (e) {
181
181
  console.log('e', e);
182
182
  }
183
- }), [bffFetch, utmVal]);
183
+ }), [bffFetch, utmVal, isShowTag]);
184
184
  const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position) => {
185
185
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
186
186
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.71",
3
+ "version": "1.0.72",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -40,7 +40,6 @@
40
40
  "@emotion/css": "^11.11.2",
41
41
  "eslint": "^8.48.0",
42
42
  "eventemitter3": "^5.0.1",
43
- "hls.js": "^1.5.8",
44
43
  "less": "^4.2.0",
45
44
  "lodash": "^4.17.21",
46
45
  "pako": "^2.1.0",