pb-sxp-ui 1.0.37 → 1.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/index.cjs +106 -443
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1 -6
  4. package/dist/index.js +106 -442
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +110 -446
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +63 -38
  15. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
  16. package/es/core/components/SxpPageRender/index.js +7 -7
  17. package/es/core/context/SxpDataSourceProvider.js +1 -1
  18. package/es/core/hooks/useEventReport.js +4 -4
  19. package/es/index.d.ts +0 -1
  20. package/es/index.js +0 -1
  21. package/es/materials/sxp/popup/CommodityDetail/index.js +6 -6
  22. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -9
  23. package/lib/core/components/SxpPageRender/VideoWidget/index.js +63 -38
  24. package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -1
  25. package/lib/core/components/SxpPageRender/index.js +7 -7
  26. package/lib/core/context/SxpDataSourceProvider.js +1 -1
  27. package/lib/core/hooks/useEventReport.js +4 -4
  28. package/lib/index.d.ts +0 -1
  29. package/lib/index.js +1 -3
  30. package/lib/materials/sxp/popup/CommodityDetail/index.js +6 -6
  31. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -9
  32. package/package.json +1 -2
  33. package/es/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
  34. package/es/core/components/DiyPortalPreview/PictureGroup.js +0 -11
  35. package/es/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
  36. package/es/core/components/DiyPortalPreview/VideoWidget.js +0 -236
  37. package/es/core/components/DiyPortalPreview/index.d.ts +0 -6
  38. package/es/core/components/DiyPortalPreview/index.js +0 -112
  39. package/lib/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
  40. package/lib/core/components/DiyPortalPreview/PictureGroup.js +0 -14
  41. package/lib/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
  42. package/lib/core/components/DiyPortalPreview/VideoWidget.js +0 -239
  43. package/lib/core/components/DiyPortalPreview/index.d.ts +0 -6
  44. package/lib/core/components/DiyPortalPreview/index.js +0 -115
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -14,12 +14,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
14
14
  const { isActive } = useSwiperSlide();
15
15
  const canvasRef = useRef(null);
16
16
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
17
+ const videoId = `pb-video-${index}`;
17
18
  useEffect(() => {
18
19
  if (!videoRef.current)
19
20
  return;
20
- videoRef.current.muted = muted;
21
+ videoRef.current.muted(muted);
21
22
  }, [muted]);
22
- const handleVideoStart = useCallback(() => {
23
+ const handleEnded = useCallback(() => {
23
24
  var _a;
24
25
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
25
26
  }, []);
@@ -28,10 +29,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
28
29
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
29
30
  setIsPauseVideo(false);
30
31
  const item = data[index];
31
- if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
32
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
33
- const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
34
- const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
32
+ if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration())) {
33
+ videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime()) || 0;
34
+ const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration()) !== null && _d !== void 0 ? _d : 0).toFixed(2);
35
+ const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime()) !== null && _f !== void 0 ? _f : 0).toFixed(2);
35
36
  const playType = isFirstPlay ? '0' : '1';
36
37
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
37
38
  eventInfo: {
@@ -51,14 +52,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
51
52
  setIsFirstPlay(false);
52
53
  }
53
54
  }, [bffEventReport, data, index, isFirstPlay]);
54
- const handleLoadedMetadata = useCallback(() => {
55
+ const handleCanplay = useCallback(() => {
55
56
  setIsLoadFinish(true);
56
57
  }, []);
57
58
  const handleClickVideo = useCallback((type) => () => {
58
59
  var _a, _b, _c, _d, _e;
59
60
  if (!isLoadFinish)
60
61
  return;
61
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
62
+ const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused();
62
63
  switch (type) {
63
64
  case 'start':
64
65
  if (!isPause)
@@ -83,13 +84,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
83
84
  break;
84
85
  }
85
86
  }, [isLoadFinish]);
86
- const onPause = useCallback(() => {
87
+ const handlePause = useCallback(() => {
87
88
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
88
89
  const item = data[index];
89
- const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
90
- const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
91
- if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
92
- const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
90
+ const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
91
+ const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime()) !== null && _d !== void 0 ? _d : 0).toFixed(2);
92
+ if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration()) {
93
+ const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime()) - videoStartTime.current).toFixed(2);
93
94
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
94
95
  eventInfo: {
95
96
  eventSubject: 'playOverVideo',
@@ -121,9 +122,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
121
122
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
122
123
  }, [firstFrameSrc, rec]);
123
124
  const handLoadeddata = useCallback(() => {
124
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
125
+ const videoDomRef = document.getElementById(`${videoId}_html5_api`);
126
+ if (!canvasRef || !videoDomRef || !canvasRef.current)
125
127
  return;
126
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
128
+ const video = videoDomRef;
127
129
  const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
128
130
  const ctx = canvas.getContext('2d');
129
131
  const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
@@ -134,28 +136,43 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
134
136
  setFirstFrameSrc(canvas.toDataURL());
135
137
  }, []);
136
138
  useEffect(() => {
137
- var _a, _b, _c, _d;
138
- if (!videoRef.current)
139
- return;
139
+ var _a, _b, _c, _d, _e, _f;
140
140
  setIsPauseVideo(false);
141
- if (!videoRef.current.src) {
142
- const videoSrc = rec.video.url;
143
- videoRef.current.src = videoSrc;
144
- videoRef.current.setAttribute('x5-playsinline', 'true');
145
- videoRef.current.setAttribute('webkit-playsinline', 'true');
141
+ const videoSrc = rec.video.url;
142
+ if (videoSrc && typeof TCPlayer === 'function') {
143
+ videoRef.current = TCPlayer(videoId, {
144
+ sources: [
145
+ {
146
+ src: videoSrc
147
+ }
148
+ ],
149
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
150
+ controls: false,
151
+ autoplay: false,
152
+ loop: false,
153
+ muted: true,
154
+ preload: 'auto',
155
+ posterImage: false,
156
+ bigPlayButton: true
157
+ });
146
158
  }
147
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
148
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
149
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
150
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
159
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
160
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
161
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
162
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('loadeddata', handLoadeddata);
163
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('pause', handlePause);
164
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.on('ended', handleEnded);
151
165
  return () => {
152
- var _a, _b, _c, _d;
153
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
154
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
155
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
156
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
166
+ var _a, _b, _c, _d, _e, _f;
167
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.off('loadedmetadata', handleCanplay);
168
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.off('canplay', handleCanplay);
169
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.off('playing', handlePlaying);
170
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('loadeddata', handLoadeddata);
171
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('pause', handlePause);
172
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.off('ended', handleEnded);
173
+ videoRef.current.dispose();
157
174
  };
158
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
175
+ }, []);
159
176
  useEffect(() => {
160
177
  var _a;
161
178
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -238,19 +255,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
238
255
  right: 0
239
256
  } },
240
257
  React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
241
- React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
258
+ React.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
242
259
  width: '100%',
243
260
  height: '100%',
244
- objectFit: 'contain'
261
+ objectFit: 'contain',
262
+ backgroundColor: 'transparent',
263
+ pointerEvents: 'none'
245
264
  } }),
246
265
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
247
- renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
266
+ renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
248
267
  position: 'relative',
249
268
  width: '100%',
250
269
  height,
251
270
  overflow: 'hidden'
252
- } },
253
- React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
271
+ }, onClick: handleClickVideo() },
272
+ React.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
273
+ backgroundColor: 'transparent',
274
+ width: '100%',
275
+ height: '100%',
276
+ objectFit: 'cover',
277
+ pointerEvents: 'none'
278
+ } }),
254
279
  renderPoster,
255
280
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
256
281
  };
package/es/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -63,7 +63,7 @@ const WaterFall = (props) => {
63
63
  }
64
64
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
65
65
  eventInfo: {
66
- contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
66
+ relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
67
67
  position: cacheActiveIndex + '',
68
68
  contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
69
69
  traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -120,12 +120,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
120
120
  sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
121
121
  eventSubject: 'sessionCompleted',
122
122
  eventDescription: 'Session completed',
123
- contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
124
- productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
123
+ relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
124
+ relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
125
125
  position: activeIndex + '',
126
126
  fromKName,
127
127
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
128
- ctatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
128
+ relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
129
129
  }
130
130
  });
131
131
  }
@@ -258,8 +258,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
258
258
  eventInfo: {
259
259
  eventSubject: 'scrollDown',
260
260
  eventDescription: 'User scroll down',
261
- contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
262
- productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
261
+ relatedContentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
262
+ relatedProductId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
263
263
  requestId: null
264
264
  }
265
265
  });
@@ -270,8 +270,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
270
270
  eventInfo: {
271
271
  eventSubject: 'scrollUp',
272
272
  eventDescription: 'User scroll up',
273
- contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
274
- productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
273
+ relatedContentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
274
+ relatedProductId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
275
275
  requestId: null
276
276
  }
277
277
  });
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -141,7 +141,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
141
141
  fromKName = 'imagePage';
142
142
  }
143
143
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
144
- eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
144
+ eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', relatedContentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', relatedProductId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
145
145
  });
146
146
  }, [bffEventReport, isFromHashtag]);
147
147
  useEffect(() => {
package/es/core/hooks/useEventReport.js CHANGED
@@ -32,8 +32,8 @@ export function useEventReport() {
32
32
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
33
33
  contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
34
34
  position: position + '',
35
- contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
36
- ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
35
+ relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
36
+ relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
37
37
  traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
38
38
  }
39
39
  });
@@ -57,8 +57,8 @@ export function useEventReport() {
57
57
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
58
58
  contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
59
59
  position: position + '',
60
- contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
61
- ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
60
+ relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
61
+ relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
62
62
  traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
63
63
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
64
64
  eventSubject: 'productView',
package/es/index.d.ts CHANGED
@@ -2,7 +2,6 @@ import { Pagebuilder } from './core/Pagebuilder';
2
2
  export * as core from './core';
3
3
  export * as materials from './materials';
4
4
  export { default as SxpPageRender } from './core/components/SxpPageRender';
5
- export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
6
5
  export { default as Modal } from './core/components/SxpPageRender/Modal';
7
6
  export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
8
7
  export { default as SxpPageCore } from './core/components/SxpPageCore';
package/es/index.js CHANGED
@@ -4,7 +4,6 @@ export { core_1 as core };
4
4
  import * as materials_1 from './materials';
5
5
  export { materials_1 as materials };
6
6
  export { default as SxpPageRender } from './core/components/SxpPageRender';
7
- export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
8
7
  export { default as Modal } from './core/components/SxpPageRender/Modal';
9
8
  export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
10
9
  export { default as SxpPageCore } from './core/components/SxpPageCore';
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -10,7 +10,7 @@ import Modal from '../../../../core/components/SxpPageRender/Modal';
10
10
  import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
11
11
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
12
  const CommodityDetail = (_a) => {
13
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
13
+ var _b, _c, _d, _e, _f, _g, _h, _j;
14
14
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
15
15
  const { sxpParameter } = useSxpDataSource();
16
16
  const { popupDetailData, bffEventReport, isPreview, waterFallData } = useSxpDataSource();
@@ -51,7 +51,7 @@ const CommodityDetail = (_a) => {
51
51
  return '$7,000';
52
52
  }
53
53
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
54
- const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
54
+ const width = isPreview ? 375 : window.innerWidth;
55
55
  const renderContent = ({ isPost }) => {
56
56
  var _a, _b, _c;
57
57
  return (React.createElement("div", null,
@@ -71,7 +71,7 @@ const CommodityDetail = (_a) => {
71
71
  };
72
72
  return (React.createElement("div", { className: 'pb-commondity' },
73
73
  React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
74
- product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
74
+ product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
75
75
  clickable: true,
76
76
  bulletActiveClass: 'swipe-item-active-bullet',
77
77
  clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -79,7 +79,7 @@ const CommodityDetail = (_a) => {
79
79
  : 'commondityDetail-swiper-clickable-center'
80
80
  }, loop: true, autoplay: {
81
81
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
82
- } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
82
+ } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
83
83
  return (React.createElement(SwiperSlide, { key: src },
84
84
  React.createElement("div", { style: {
85
85
  overflow: 'hidden',
@@ -88,7 +88,7 @@ const CommodityDetail = (_a) => {
88
88
  } },
89
89
  React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
90
90
  }))),
91
- !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
91
+ !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
92
92
  position: 'relative',
93
93
  height: 0,
94
94
  width: '100%',
@@ -101,7 +101,7 @@ const CommodityDetail = (_a) => {
101
101
  top: 0,
102
102
  objectFit: 'cover',
103
103
  width: '100%'
104
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
104
+ }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
105
105
  React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
106
106
  renderBtn(),
107
107
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -10,7 +10,7 @@ import ExpandableText from '../../../../core/components/SxpPageRender/Expandable
10
10
  import { useEventReport } from '../../../../core/hooks/useEventReport';
11
11
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
12
  const CommodityDetailDiroNew = (_a) => {
13
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
13
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
14
14
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
15
15
  const [spread, setSpread] = useState(true);
16
16
  const { sxpParameter } = useSxpDataSource();
@@ -58,7 +58,7 @@ const CommodityDetailDiroNew = (_a) => {
58
58
  return '£102,300.00';
59
59
  }
60
60
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
61
- const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
61
+ const width = isPreview ? 375 : window.innerWidth;
62
62
  const handleClickCollapse = () => {
63
63
  setSpread(!spread);
64
64
  };
@@ -89,7 +89,7 @@ Made in Italy` })));
89
89
  };
90
90
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
91
91
  React.createElement("div", Object.assign({ ref: scrollRef, className: css(Object.assign({}, style)) }, props),
92
- product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
92
+ product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
93
93
  clickable: true,
94
94
  bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
95
95
  clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -97,7 +97,7 @@ Made in Italy` })));
97
97
  : 'commondityDiroNew-swiper-clickable-center'
98
98
  }, loop: true, autoplay: {
99
99
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
100
- } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
100
+ } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
101
101
  return (React.createElement(SwiperSlide, { key: src },
102
102
  React.createElement("div", { style: {
103
103
  overflow: 'hidden',
@@ -106,7 +106,7 @@ Made in Italy` })));
106
106
  } },
107
107
  React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
108
108
  }))),
109
- !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
109
+ !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
110
110
  position: 'relative',
111
111
  height: 0,
112
112
  width: '100%',
@@ -119,16 +119,16 @@ Made in Italy` })));
119
119
  top: 0,
120
120
  objectFit: 'cover',
121
121
  width: '100%'
122
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
122
+ }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
123
123
  React.createElement("div", { className: 'pb-commondityDiroNew-content' },
124
124
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
125
125
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
126
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours Bag'),
126
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
127
127
  React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
128
128
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
129
129
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
130
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
131
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now')),
130
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
131
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
132
132
  productInfoText({ isPost }))),
133
133
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
134
134
  };
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -17,12 +17,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
17
17
  const { isActive } = (0, react_2.useSwiperSlide)();
18
18
  const canvasRef = (0, react_1.useRef)(null);
19
19
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
20
+ const videoId = `pb-video-${index}`;
20
21
  (0, react_1.useEffect)(() => {
21
22
  if (!videoRef.current)
22
23
  return;
23
- videoRef.current.muted = muted;
24
+ videoRef.current.muted(muted);
24
25
  }, [muted]);
25
- const handleVideoStart = (0, react_1.useCallback)(() => {
26
+ const handleEnded = (0, react_1.useCallback)(() => {
26
27
  var _a;
27
28
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
28
29
  }, []);
@@ -31,10 +32,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
31
32
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
32
33
  setIsPauseVideo(false);
33
34
  const item = data[index];
34
- if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
35
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
36
- const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
37
- const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
35
+ if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration())) {
36
+ videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime()) || 0;
37
+ const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration()) !== null && _d !== void 0 ? _d : 0).toFixed(2);
38
+ const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime()) !== null && _f !== void 0 ? _f : 0).toFixed(2);
38
39
  const playType = isFirstPlay ? '0' : '1';
39
40
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
40
41
  eventInfo: {
@@ -54,14 +55,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
54
55
  setIsFirstPlay(false);
55
56
  }
56
57
  }, [bffEventReport, data, index, isFirstPlay]);
57
- const handleLoadedMetadata = (0, react_1.useCallback)(() => {
58
+ const handleCanplay = (0, react_1.useCallback)(() => {
58
59
  setIsLoadFinish(true);
59
60
  }, []);
60
61
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
61
62
  var _a, _b, _c, _d, _e;
62
63
  if (!isLoadFinish)
63
64
  return;
64
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
65
+ const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused();
65
66
  switch (type) {
66
67
  case 'start':
67
68
  if (!isPause)
@@ -86,13 +87,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
86
87
  break;
87
88
  }
88
89
  }, [isLoadFinish]);
89
- const onPause = (0, react_1.useCallback)(() => {
90
+ const handlePause = (0, react_1.useCallback)(() => {
90
91
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
91
92
  const item = data[index];
92
- const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
93
- const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
94
- if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
95
- const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
93
+ const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
94
+ const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime()) !== null && _d !== void 0 ? _d : 0).toFixed(2);
95
+ if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration()) {
96
+ const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime()) - videoStartTime.current).toFixed(2);
96
97
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
97
98
  eventInfo: {
98
99
  eventSubject: 'playOverVideo',
@@ -124,9 +125,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
124
125
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
125
126
  }, [firstFrameSrc, rec]);
126
127
  const handLoadeddata = (0, react_1.useCallback)(() => {
127
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
128
+ const videoDomRef = document.getElementById(`${videoId}_html5_api`);
129
+ if (!canvasRef || !videoDomRef || !canvasRef.current)
128
130
  return;
129
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
131
+ const video = videoDomRef;
130
132
  const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
131
133
  const ctx = canvas.getContext('2d');
132
134
  const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
@@ -137,28 +139,43 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
137
139
  setFirstFrameSrc(canvas.toDataURL());
138
140
  }, []);
139
141
  (0, react_1.useEffect)(() => {
140
- var _a, _b, _c, _d;
141
- if (!videoRef.current)
142
- return;
142
+ var _a, _b, _c, _d, _e, _f;
143
143
  setIsPauseVideo(false);
144
- if (!videoRef.current.src) {
145
- const videoSrc = rec.video.url;
146
- videoRef.current.src = videoSrc;
147
- videoRef.current.setAttribute('x5-playsinline', 'true');
148
- videoRef.current.setAttribute('webkit-playsinline', 'true');
144
+ const videoSrc = rec.video.url;
145
+ if (videoSrc && typeof TCPlayer === 'function') {
146
+ videoRef.current = TCPlayer(videoId, {
147
+ sources: [
148
+ {
149
+ src: videoSrc
150
+ }
151
+ ],
152
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
153
+ controls: false,
154
+ autoplay: false,
155
+ loop: false,
156
+ muted: true,
157
+ preload: 'auto',
158
+ posterImage: false,
159
+ bigPlayButton: true
160
+ });
149
161
  }
150
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
151
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
152
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
153
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
162
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
163
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
164
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
165
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('loadeddata', handLoadeddata);
166
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('pause', handlePause);
167
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.on('ended', handleEnded);
154
168
  return () => {
155
- var _a, _b, _c, _d;
156
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
157
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
158
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
159
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
169
+ var _a, _b, _c, _d, _e, _f;
170
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.off('loadedmetadata', handleCanplay);
171
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.off('canplay', handleCanplay);
172
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.off('playing', handlePlaying);
173
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('loadeddata', handLoadeddata);
174
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('pause', handlePause);
175
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.off('ended', handleEnded);
176
+ videoRef.current.dispose();
160
177
  };
161
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
178
+ }, []);
162
179
  (0, react_1.useEffect)(() => {
163
180
  var _a;
164
181
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -241,19 +258,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
241
258
  right: 0
242
259
  } },
243
260
  react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
244
- react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
261
+ react_1.default.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
245
262
  width: '100%',
246
263
  height: '100%',
247
- objectFit: 'contain'
264
+ objectFit: 'contain',
265
+ backgroundColor: 'transparent',
266
+ pointerEvents: 'none'
248
267
  } }),
249
268
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
250
- renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
269
+ renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
251
270
  position: 'relative',
252
271
  width: '100%',
253
272
  height,
254
273
  overflow: 'hidden'
255
- } },
256
- react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
274
+ }, onClick: handleClickVideo() },
275
+ react_1.default.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
276
+ backgroundColor: 'transparent',
277
+ width: '100%',
278
+ height: '100%',
279
+ objectFit: 'cover',
280
+ pointerEvents: 'none'
281
+ } }),
257
282
  renderPoster,
258
283
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
259
284
  };
package/lib/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -66,7 +66,7 @@ const WaterFall = (props) => {
66
66
  }
67
67
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
68
68
  eventInfo: {
69
- contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
69
+ relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
70
70
  position: cacheActiveIndex + '',
71
71
  contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
72
72
  traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,