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/es/core/components/DiyPortalPreview/VideoWidget.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
- import Hls from 'hls.js';
3
2
  import { useIconLink } from '../SxpPageRender/useIconLink';
4
3
  import FormatImage from '../SxpPageRender/FormatImage';
5
4
  import { useSxpDataSource } from '../../../core/hooks';
@@ -35,15 +34,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
35
34
  eventInfo: {
36
35
  eventSubject: 'playVideo',
37
36
  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 : '',
37
+ contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
38
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
40
39
  playType,
41
40
  startTime: videoCurrentTime,
42
41
  videoDuration,
43
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
42
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
44
43
  position: index + '',
45
44
  contentFormat: 'video',
46
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
45
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
47
46
  }
48
47
  });
49
48
  setIsFirstPlay(false);
@@ -92,15 +91,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
92
91
  eventInfo: {
93
92
  eventSubject: 'playOverVideo',
94
93
  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 : '',
94
+ contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
95
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
97
96
  endTime: videoCurrentTime,
98
97
  videoDuration,
99
98
  playDuration,
100
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
99
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
101
100
  position: index + '',
102
101
  contentFormat: 'video',
103
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
102
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
104
103
  }
105
104
  });
106
105
  }
@@ -137,10 +136,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
137
136
  return;
138
137
  setIsPauseVideo(false);
139
138
  if (!videoRef.current.src) {
140
- const videoSrc = rec.video.url;
139
+ const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
141
140
  if (videoSrc.includes('.m3u8')) {
142
- if (Hls.isSupported()) {
143
- const hls = new Hls();
141
+ if (typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.Hls.isSupported())) {
142
+ const hls = new window.Hls();
144
143
  hls.loadSource(videoSrc);
145
144
  hls.attachMedia(videoRef.current);
146
145
  }
@@ -168,7 +167,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
168
167
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
169
168
  (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
170
169
  };
171
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
170
+ }, [handleLoadedMetadata, handlePlaying, rec === null || rec === void 0 ? void 0 : rec.video, handLoadeddata]);
172
171
  const renderPoster = useMemo(() => {
173
172
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
174
173
  return null;
@@ -195,10 +194,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
195
194
  }
196
195
  : {};
197
196
  }, [blur]);
198
- if (!rec.video) {
197
+ if (!(rec === null || rec === void 0 ? void 0 : rec.video)) {
199
198
  return null;
200
199
  }
201
- return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
200
+ return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
202
201
  position: 'relative',
203
202
  width,
204
203
  height,
@@ -223,7 +222,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
223
222
  objectFit: 'contain'
224
223
  } }),
225
224
  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: {
225
+ renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
227
226
  position: 'relative',
228
227
  width,
229
228
  height,
package/es/core/components/DiyPortalPreview/index.js CHANGED
@@ -31,11 +31,11 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
31
31
  }, [globalConfig, containerHeight, tagList]);
32
32
  const renderContent = (rec, index) => {
33
33
  var _a, _b, _c, _d;
34
- if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
34
+ if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
35
35
  return (React.createElement(VideoWidget, { 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 }));
36
36
  }
37
- if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
38
- return (React.createElement(PictureGroup, { 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 }));
37
+ if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
38
+ return (React.createElement(PictureGroup, { 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 }));
39
39
  }
40
40
  if (rec.product) {
41
41
  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) {
@@ -65,15 +65,15 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
65
65
  };
66
66
  const renderBottom = (rec, index) => {
67
67
  var _a, _b, _c, _d, _e, _f, _g;
68
- if (rec.video) {
68
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
69
69
  return (React.createElement(React.Fragment, null,
70
- ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
70
+ ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
71
71
  React.createElement("div", { className: 'clc-sxp-bottom' },
72
72
  React.createElement(Nudge, { nudge: nudge }),
73
73
  CTA(rec, index),
74
74
  React.createElement("div", null,
75
- React.createElement(ExpandableText, { 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' }) })),
76
- React.createElement(Hashtag, { 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 }))));
75
+ React.createElement(ExpandableText, { 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' }) })),
76
+ React.createElement(Hashtag, { 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 }))));
77
77
  }
78
78
  return null;
79
79
  };
@@ -87,7 +87,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
87
87
  if (top < 40) {
88
88
  top += 40;
89
89
  }
90
- if (rec.video) {
90
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
91
91
  return (React.createElement(LikeButton, { 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: {
92
92
  top,
93
93
  right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0
package/es/core/components/SxpPageCore/index.js CHANGED
@@ -9,14 +9,14 @@ Object.values(_materials_).forEach((v) => {
9
9
  RESOLVER[v.extend.type] = v;
10
10
  });
11
11
  const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl, enabledMetaConversionApi }) => {
12
- var _a, _b, _c, _d, _e, _f;
12
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
13
13
  const utmVal = useMemo(() => {
14
14
  var _a;
15
15
  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('?', '') : '';
16
16
  return searchParams;
17
17
  }, []);
18
18
  return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
19
- React.createElement(SxpDataSourceProvider, { 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 }) => {
19
+ React.createElement(SxpDataSourceProvider, { 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 }) => {
20
20
  var _a;
21
21
  return (React.createElement(React.Fragment, null,
22
22
  React.createElement(SxpPageRender, 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/es/core/components/SxpPageRender/FormatImage.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';
1
+ import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
2
2
  const FormatImage = forwardRef((props, ref) => {
3
3
  const { src, onLoad, style, className, loading } = props;
4
4
  const [imgSrc, setImgSrc] = useState();
@@ -10,6 +10,7 @@ const FormatImage = forwardRef((props, ref) => {
10
10
  useEffect(() => {
11
11
  setImgSrc(src);
12
12
  }, [src]);
13
+ const imgRef = useRef(null);
13
14
  return (React.createElement(React.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
14
15
  React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
15
16
  React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
package/es/core/components/SxpPageRender/LikeButton/index.js CHANGED
@@ -15,17 +15,17 @@ const LikeButton = (_a) => {
15
15
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
16
16
  if (state) {
17
17
  setState(false);
18
- 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;
18
+ 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;
19
19
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
20
20
  eventInfo: {
21
21
  eventSubject: 'favoriteContentCanceled',
22
22
  eventDescription: 'This content was unfavorite by the user',
23
- contentId: (_f = (_e = recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
24
- contentName: (_h = (_g = recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
25
- contentTags: JSON.stringify((_k = (_j = recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
23
+ 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 : '',
24
+ 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 : '',
25
+ 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 : []),
26
26
  position: position + '',
27
- contentFormat: ((_l = recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
28
- traceInfo: (_m = recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
27
+ contentFormat: ((_l = recData === null || recData === void 0 ? void 0 : recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
28
+ traceInfo: (_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
29
29
  }
30
30
  });
31
31
  if (!result) {
@@ -39,12 +39,12 @@ const LikeButton = (_a) => {
39
39
  eventInfo: {
40
40
  eventSubject: 'favoriteContent',
41
41
  eventDescription: 'This content was favorite by the user',
42
- contentId: (_q = (_p = recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
43
- contentName: (_s = (_r = recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
44
- contentTags: JSON.stringify((_u = (_t = recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
42
+ 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 : '',
43
+ 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 : '',
44
+ 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 : []),
45
45
  position: position + '',
46
- contentFormat: ((_v = recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
47
- traceInfo: (_w = recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
46
+ contentFormat: ((_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
47
+ traceInfo: (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
48
48
  }
49
49
  });
50
50
  if (!result) {
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -69,15 +69,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
69
69
  eventInfo: {
70
70
  eventSubject: 'playVideo',
71
71
  eventDescription: 'User played the video',
72
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
73
- contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
72
+ 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 : '',
73
+ 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 : '',
74
74
  playType,
75
75
  startTime: videoCurrentTime,
76
76
  videoDuration,
77
- contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
77
+ 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 : []),
78
78
  position: index + '',
79
79
  contentFormat: 'video',
80
- traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
80
+ traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
81
81
  }
82
82
  });
83
83
  setIsFirstPlay(false);
@@ -162,15 +162,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
162
162
  eventInfo: {
163
163
  eventSubject: 'playOverVideo',
164
164
  eventDescription: 'User finished playing the video',
165
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
166
- contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
165
+ 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 : '',
166
+ 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 : '',
167
167
  endTime: videoCurrentTime,
168
168
  videoDuration,
169
169
  playDuration,
170
- contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
170
+ 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 : []),
171
171
  position: index + '',
172
172
  contentFormat: 'video',
173
- traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
173
+ traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
174
174
  }
175
175
  });
176
176
  }
@@ -178,9 +178,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
178
178
  useEffect(() => {
179
179
  if (!isActive || !videoRef)
180
180
  return;
181
- const videoSrc = rec.video.url;
181
+ const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
182
182
  if (!videoSrc)
183
183
  return;
184
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
184
185
  setIsPauseVideo(false);
185
186
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
186
187
  const dom = document.querySelector('#player-container-id');
@@ -188,7 +189,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
188
189
  if (!dom && !dom2)
189
190
  return;
190
191
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
191
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
192
192
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
193
193
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
194
194
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
@@ -264,10 +264,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
264
264
  window.removeEventListener('beforeunload', handleBeforeUnload);
265
265
  };
266
266
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
267
- if (!rec.video) {
267
+ if (!(rec === null || rec === void 0 ? void 0 : rec.video)) {
268
268
  return null;
269
269
  }
270
- return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
270
+ return (React.createElement(React.Fragment, null, blur ? (React.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) },
271
271
  !isBgColor && (React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
272
272
  React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
273
273
  React.createElement("div", { style: {
@@ -282,7 +282,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
282
282
  React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
283
283
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
284
284
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
285
- renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
285
+ renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
286
286
  position: 'relative',
287
287
  width: '100%',
288
288
  height,
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -76,23 +76,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
76
76
  };
77
77
  const firstRef = useRef();
78
78
  useEffect(() => {
79
- if (!firstRef.current && !videoRef) {
79
+ var _a, _b, _c;
80
+ if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
80
81
  firstRef.current = true;
81
82
  const player = TCPlayer('player-container-id', {
82
83
  licenseUrl,
83
84
  controls: false,
84
- autoplay: false,
85
85
  loop: false,
86
+ autoplay: true,
86
87
  muted: true,
87
88
  preload: 'auto',
88
89
  posterImage: false,
89
- bigPlayButton: true
90
+ bigPlayButton: true,
91
+ sources: [
92
+ {
93
+ 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 : ''
94
+ }
95
+ ]
90
96
  });
91
97
  player === null || player === void 0 ? void 0 : player.ready(() => {
92
98
  setVideoRef(player);
93
99
  });
94
100
  }
95
- }, [videoRef, licenseUrl]);
101
+ }, [videoRef, licenseUrl, data]);
96
102
  useEffect(() => {
97
103
  if (!isInit)
98
104
  handleH5EnterLink();
@@ -125,7 +131,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
125
131
  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))) {
126
132
  fromKName = 'pdpPage';
127
133
  }
128
- 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') {
134
+ 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') {
129
135
  fromKName = 'formPage';
130
136
  }
131
137
  else if (isFromHashtag) {
@@ -150,7 +156,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
150
156
  position: activeIndex + '',
151
157
  fromKName,
152
158
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
153
- 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 : ''
159
+ 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 : ''
154
160
  }
155
161
  });
156
162
  }
@@ -187,11 +193,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
187
193
  }, [globalConfig]);
188
194
  const renderContent = useCallback((rec, index) => {
189
195
  var _a, _b, _c, _d;
190
- if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
196
+ if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
191
197
  return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
192
198
  }
193
- if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
194
- return (React.createElement(PictureGroup, { 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 }));
199
+ if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
200
+ return (React.createElement(PictureGroup, { 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 }));
195
201
  }
196
202
  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) {
197
203
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
@@ -232,16 +238,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
232
238
  }, [isShowMore]);
233
239
  const renderBottom = useCallback((rec, index) => {
234
240
  var _a, _b, _c, _d, _e, _f, _g;
235
- if (rec.video) {
241
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
236
242
  return (React.createElement(React.Fragment, null,
237
- ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
243
+ ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
238
244
  React.createElement("div", { className: 'clc-sxp-bottom' },
239
245
  React.createElement(Nudge, { nudge: nudge }),
240
246
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
241
247
  React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
242
248
  React.createElement("div", null,
243
- React.createElement(ExpandableText, { 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 }),
244
- React.createElement(Hashtag, { 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 })))));
249
+ React.createElement(ExpandableText, { 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 }),
250
+ React.createElement(Hashtag, { 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 })))));
245
251
  }
246
252
  return null;
247
253
  }, [
@@ -265,7 +271,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
265
271
  if (waterFallData && top < 40) {
266
272
  top += 40;
267
273
  }
268
- if (rec.video) {
274
+ if (rec === null || rec === void 0 ? void 0 : rec.video) {
269
275
  return (React.createElement(LikeButton, { 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: {
270
276
  [(_b = globalConfig.likeIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig.likeIconX) !== null && _c !== void 0 ? _c : 0,
271
277
  [(_d = globalConfig.likeIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top
@@ -275,21 +281,21 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
275
281
  }, [globalConfig, waterFallData]);
276
282
  const handleReportViewImageEnd = (item) => {
277
283
  var _a, _b, _c, _d, _e, _f;
278
- if (!((_a = item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
284
+ 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)) {
279
285
  const endTime = Date.now();
280
286
  const duration = (endTime - viewImageStartTime.current) / 1000;
281
287
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
282
288
  eventInfo: {
283
289
  eventSubject: 'viewImageCarouselEnd',
284
290
  eventDescription: 'User end view the image carousel',
285
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
286
- contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
291
+ 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 : '',
292
+ contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
287
293
  imageEndTime: `${endTime}`,
288
294
  playDuration: `${duration}`,
289
- contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
295
+ contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
290
296
  position: activeIndex + '',
291
297
  contentFormat: 'image',
292
- traceInfo: item.video.traceInfo
298
+ traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
293
299
  }
294
300
  });
295
301
  }
@@ -305,8 +311,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
305
311
  eventInfo: {
306
312
  eventSubject: 'scrollDown',
307
313
  eventDescription: 'User scroll down',
308
- contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
309
- productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
314
+ 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 : '',
315
+ 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 : '',
310
316
  requestId: null
311
317
  }
312
318
  });
@@ -317,7 +323,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
317
323
  eventInfo: {
318
324
  eventSubject: 'scrollUp',
319
325
  eventDescription: 'User scroll up',
320
- contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
326
+ 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 : '',
321
327
  productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
322
328
  requestId: null
323
329
  }
@@ -353,13 +359,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
353
359
  eventInfo: {
354
360
  eventSubject: 'viewImageCarouselStart',
355
361
  eventDescription: 'User start view the image carousel',
356
- contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
357
- contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
362
+ 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 : '',
363
+ contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
358
364
  imageStartTime: `${startTime}`,
359
- contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
365
+ contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
360
366
  position: activeIndex + '',
361
367
  contentFormat: 'image',
362
- traceInfo: item.video.traceInfo
368
+ traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
363
369
  }
364
370
  });
365
371
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
package/es/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/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -14,7 +14,7 @@ var DataSourceType;
14
14
  DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
15
15
  })(DataSourceType || (DataSourceType = {}));
16
16
  const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
17
- const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false }) => {
17
+ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, isShowTag = true }) => {
18
18
  const [rtcList, setRtcList] = useState([]);
19
19
  const [tagList, setTagList] = useState([]);
20
20
  const [loading, setLoading] = useState(false);
@@ -164,7 +164,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
164
164
  }), [bffFetch]);
165
165
  const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
166
166
  var _h, _j, _k, _l, _m;
167
- if (!utmVal)
167
+ if (!utmVal || !isShowTag)
168
168
  return;
169
169
  try {
170
170
  const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
@@ -177,7 +177,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
177
177
  catch (e) {
178
178
  console.log('e', e);
179
179
  }
180
- }), [bffFetch, utmVal]);
180
+ }), [bffFetch, utmVal, isShowTag]);
181
181
  const ctaEvent = useCallback((eventInfo, rec, product, position) => {
182
182
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
183
183
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
package/lib/core/components/DiyPortalPreview/VideoWidget.js CHANGED
@@ -2,7 +2,6 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
- const hls_js_1 = tslib_1.__importDefault(require("hls.js"));
6
5
  const useIconLink_1 = require("../SxpPageRender/useIconLink");
7
6
  const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
8
7
  const hooks_1 = require("../../../core/hooks");
@@ -38,15 +37,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
38
37
  eventInfo: {
39
38
  eventSubject: 'playVideo',
40
39
  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 : '',
40
+ contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
41
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
43
42
  playType,
44
43
  startTime: videoCurrentTime,
45
44
  videoDuration,
46
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
45
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
47
46
  position: index + '',
48
47
  contentFormat: 'video',
49
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
48
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
50
49
  }
51
50
  });
52
51
  setIsFirstPlay(false);
@@ -95,15 +94,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
95
94
  eventInfo: {
96
95
  eventSubject: 'playOverVideo',
97
96
  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 : '',
97
+ contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
98
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
100
99
  endTime: videoCurrentTime,
101
100
  videoDuration,
102
101
  playDuration,
103
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
102
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
104
103
  position: index + '',
105
104
  contentFormat: 'video',
106
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
105
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
107
106
  }
108
107
  });
109
108
  }
@@ -140,10 +139,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
140
139
  return;
141
140
  setIsPauseVideo(false);
142
141
  if (!videoRef.current.src) {
143
- const videoSrc = rec.video.url;
142
+ const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
144
143
  if (videoSrc.includes('.m3u8')) {
145
- if (hls_js_1.default.isSupported()) {
146
- const hls = new hls_js_1.default();
144
+ if (typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.Hls.isSupported())) {
145
+ const hls = new window.Hls();
147
146
  hls.loadSource(videoSrc);
148
147
  hls.attachMedia(videoRef.current);
149
148
  }
@@ -171,7 +170,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
171
170
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
172
171
  (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
173
172
  };
174
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
173
+ }, [handleLoadedMetadata, handlePlaying, rec === null || rec === void 0 ? void 0 : rec.video, handLoadeddata]);
175
174
  const renderPoster = (0, react_1.useMemo)(() => {
176
175
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
177
176
  return null;
@@ -198,10 +197,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
198
197
  }
199
198
  : {};
200
199
  }, [blur]);
201
- if (!rec.video) {
200
+ if (!(rec === null || rec === void 0 ? void 0 : rec.video)) {
202
201
  return null;
203
202
  }
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: {
203
+ 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: {
205
204
  position: 'relative',
206
205
  width,
207
206
  height,
@@ -226,7 +225,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
226
225
  objectFit: 'contain'
227
226
  } }),
228
227
  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: {
228
+ renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
230
229
  position: 'relative',
231
230
  width,
232
231
  height,