pb-sxp-ui 1.0.32 → 1.0.33

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 (24) hide show
  1. package/dist/index.cjs +72 -71
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +0 -6
  4. package/dist/index.js +72 -71
  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 +76 -74
  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 +56 -55
  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/lib/core/components/SxpPageRender/VideoWidget/index.js +56 -55
  20. package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -1
  21. package/lib/core/components/SxpPageRender/index.js +7 -7
  22. package/lib/core/context/SxpDataSourceProvider.js +1 -1
  23. package/lib/core/hooks/useEventReport.js +4 -4
  24. package/package.json +1 -2
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
2
  import { useSwiperSlide } from 'swiper/react';
3
- import Hls from 'hls.js';
4
3
  import { useIconLink } from '../useIconLink';
5
4
  import FormatImage from '../FormatImage';
6
5
  import { useSxpDataSource } from '../../../../core/hooks';
@@ -15,12 +14,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
15
14
  const { isActive } = useSwiperSlide();
16
15
  const canvasRef = useRef(null);
17
16
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
17
+ const videoId = `pb-video-${index}`;
18
18
  useEffect(() => {
19
19
  if (!videoRef.current)
20
20
  return;
21
- videoRef.current.muted = muted;
21
+ videoRef.current.muted(muted);
22
22
  }, [muted]);
23
- const handleVideoStart = useCallback(() => {
23
+ const handleEnded = useCallback(() => {
24
24
  var _a;
25
25
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
26
26
  }, []);
@@ -29,10 +29,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
29
29
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
30
30
  setIsPauseVideo(false);
31
31
  const item = data[index];
32
- if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
33
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
34
- const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
35
- const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
32
+ if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration())) {
33
+ videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime()) || 0;
34
+ const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration()) !== null && _d !== void 0 ? _d : 0).toFixed(2);
35
+ const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime()) !== null && _f !== void 0 ? _f : 0).toFixed(2);
36
36
  const playType = isFirstPlay ? '0' : '1';
37
37
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
38
38
  eventInfo: {
@@ -52,14 +52,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
52
52
  setIsFirstPlay(false);
53
53
  }
54
54
  }, [bffEventReport, data, index, isFirstPlay]);
55
- const handleLoadedMetadata = useCallback(() => {
55
+ const handleCanplay = useCallback(() => {
56
56
  setIsLoadFinish(true);
57
57
  }, []);
58
58
  const handleClickVideo = useCallback((type) => () => {
59
59
  var _a, _b, _c, _d, _e;
60
60
  if (!isLoadFinish)
61
61
  return;
62
- 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();
63
63
  switch (type) {
64
64
  case 'start':
65
65
  if (!isPause)
@@ -84,13 +84,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
84
84
  break;
85
85
  }
86
86
  }, [isLoadFinish]);
87
- const onPause = useCallback(() => {
87
+ const handlePause = useCallback(() => {
88
88
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
89
89
  const item = data[index];
90
- const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
91
- const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
92
- if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
93
- const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
90
+ const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
91
+ const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime()) !== null && _d !== void 0 ? _d : 0).toFixed(2);
92
+ if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration()) {
93
+ const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime()) - videoStartTime.current).toFixed(2);
94
94
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
95
95
  eventInfo: {
96
96
  eventSubject: 'playOverVideo',
@@ -122,9 +122,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
122
122
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
123
123
  }, [firstFrameSrc, rec]);
124
124
  const handLoadeddata = useCallback(() => {
125
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
125
+ const videoDomRef = document.getElementById(`${videoId}_html5_api`);
126
+ if (!canvasRef || !videoDomRef || !canvasRef.current)
126
127
  return;
127
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
128
+ const video = videoDomRef;
128
129
  const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
129
130
  const ctx = canvas.getContext('2d');
130
131
  const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
@@ -135,43 +136,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
135
136
  setFirstFrameSrc(canvas.toDataURL());
136
137
  }, []);
137
138
  useEffect(() => {
138
- var _a, _b, _c, _d;
139
- if (!videoRef.current)
139
+ var _a, _b, _c, _d, _e, _f;
140
+ if (videoRef.current)
140
141
  return;
141
142
  setIsPauseVideo(false);
142
- if (!videoRef.current.src) {
143
- const videoSrc = rec.video.url;
144
- if (videoSrc.includes('.m3u8')) {
145
- if (Hls.isSupported()) {
146
- const hls = new Hls();
147
- hls.loadSource(videoSrc);
148
- hls.attachMedia(videoRef.current);
149
- }
150
- else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
151
- videoRef.current.src = videoSrc;
152
- }
153
- else {
154
- videoRef.current.src = videoSrc;
155
- }
156
- }
157
- else {
158
- videoRef.current.src = videoSrc;
159
- }
160
- videoRef.current.setAttribute('x5-playsinline', 'true');
161
- videoRef.current.setAttribute('webkit-playsinline', 'true');
143
+ const videoSrc = rec.video.url;
144
+ if (videoSrc && typeof TCPlayer === 'function') {
145
+ videoRef.current = TCPlayer(videoId, {
146
+ sources: [
147
+ {
148
+ src: videoSrc
149
+ }
150
+ ],
151
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
152
+ controls: false,
153
+ autoplay: false,
154
+ loop: false,
155
+ muted: true,
156
+ preload: 'meta',
157
+ posterImage: false,
158
+ bigPlayButton: true
159
+ });
162
160
  }
163
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
164
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
165
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
166
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
167
- return () => {
168
- var _a, _b, _c, _d;
169
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
170
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
171
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
172
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
173
- };
174
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
161
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
162
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
163
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
164
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('loadeddata', handLoadeddata);
165
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('pause', handlePause);
166
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.on('ended', handleEnded);
167
+ }, [handleCanplay, handlePlaying, rec.video, handLoadeddata, index, handlePause, handleEnded, videoId]);
175
168
  useEffect(() => {
176
169
  var _a;
177
170
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -254,19 +247,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
254
247
  right: 0
255
248
  } },
256
249
  React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
257
- 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: {
250
+ React.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
258
251
  width: '100%',
259
252
  height: '100%',
260
- objectFit: 'contain'
253
+ objectFit: 'contain',
254
+ backgroundColor: 'transparent',
255
+ pointerEvents: 'none'
261
256
  } }),
262
257
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
263
- renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
258
+ renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
264
259
  position: 'relative',
265
260
  width: '100%',
266
261
  height,
267
262
  overflow: 'hidden'
268
- } },
269
- 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 }),
263
+ }, onClick: handleClickVideo() },
264
+ React.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
265
+ backgroundColor: 'transparent',
266
+ width: '100%',
267
+ height: '100%',
268
+ objectFit: 'cover',
269
+ pointerEvents: 'none'
270
+ } }),
270
271
  renderPoster,
271
272
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
272
273
  };
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/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const react_2 = require("swiper/react");
6
- const hls_js_1 = tslib_1.__importDefault(require("hls.js"));
7
6
  const useIconLink_1 = require("../useIconLink");
8
7
  const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
9
8
  const hooks_1 = require("../../../../core/hooks");
@@ -18,12 +17,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
18
17
  const { isActive } = (0, react_2.useSwiperSlide)();
19
18
  const canvasRef = (0, react_1.useRef)(null);
20
19
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
20
+ const videoId = `pb-video-${index}`;
21
21
  (0, react_1.useEffect)(() => {
22
22
  if (!videoRef.current)
23
23
  return;
24
- videoRef.current.muted = muted;
24
+ videoRef.current.muted(muted);
25
25
  }, [muted]);
26
- const handleVideoStart = (0, react_1.useCallback)(() => {
26
+ const handleEnded = (0, react_1.useCallback)(() => {
27
27
  var _a;
28
28
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
29
29
  }, []);
@@ -32,10 +32,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
32
32
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
33
33
  setIsPauseVideo(false);
34
34
  const item = data[index];
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);
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);
39
39
  const playType = isFirstPlay ? '0' : '1';
40
40
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
41
41
  eventInfo: {
@@ -55,14 +55,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
55
55
  setIsFirstPlay(false);
56
56
  }
57
57
  }, [bffEventReport, data, index, isFirstPlay]);
58
- const handleLoadedMetadata = (0, react_1.useCallback)(() => {
58
+ const handleCanplay = (0, react_1.useCallback)(() => {
59
59
  setIsLoadFinish(true);
60
60
  }, []);
61
61
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
62
62
  var _a, _b, _c, _d, _e;
63
63
  if (!isLoadFinish)
64
64
  return;
65
- 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();
66
66
  switch (type) {
67
67
  case 'start':
68
68
  if (!isPause)
@@ -87,13 +87,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
87
87
  break;
88
88
  }
89
89
  }, [isLoadFinish]);
90
- const onPause = (0, react_1.useCallback)(() => {
90
+ const handlePause = (0, react_1.useCallback)(() => {
91
91
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
92
92
  const item = data[index];
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);
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);
97
97
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
98
98
  eventInfo: {
99
99
  eventSubject: 'playOverVideo',
@@ -125,9 +125,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
125
125
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
126
126
  }, [firstFrameSrc, rec]);
127
127
  const handLoadeddata = (0, react_1.useCallback)(() => {
128
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
128
+ const videoDomRef = document.getElementById(`${videoId}_html5_api`);
129
+ if (!canvasRef || !videoDomRef || !canvasRef.current)
129
130
  return;
130
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
131
+ const video = videoDomRef;
131
132
  const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
132
133
  const ctx = canvas.getContext('2d');
133
134
  const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
@@ -138,43 +139,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
138
139
  setFirstFrameSrc(canvas.toDataURL());
139
140
  }, []);
140
141
  (0, react_1.useEffect)(() => {
141
- var _a, _b, _c, _d;
142
- if (!videoRef.current)
142
+ var _a, _b, _c, _d, _e, _f;
143
+ if (videoRef.current)
143
144
  return;
144
145
  setIsPauseVideo(false);
145
- if (!videoRef.current.src) {
146
- const videoSrc = rec.video.url;
147
- if (videoSrc.includes('.m3u8')) {
148
- if (hls_js_1.default.isSupported()) {
149
- const hls = new hls_js_1.default();
150
- hls.loadSource(videoSrc);
151
- hls.attachMedia(videoRef.current);
152
- }
153
- else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
154
- videoRef.current.src = videoSrc;
155
- }
156
- else {
157
- videoRef.current.src = videoSrc;
158
- }
159
- }
160
- else {
161
- videoRef.current.src = videoSrc;
162
- }
163
- videoRef.current.setAttribute('x5-playsinline', 'true');
164
- videoRef.current.setAttribute('webkit-playsinline', 'true');
146
+ const videoSrc = rec.video.url;
147
+ if (videoSrc && typeof TCPlayer === 'function') {
148
+ videoRef.current = TCPlayer(videoId, {
149
+ sources: [
150
+ {
151
+ src: videoSrc
152
+ }
153
+ ],
154
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
155
+ controls: false,
156
+ autoplay: false,
157
+ loop: false,
158
+ muted: true,
159
+ preload: 'meta',
160
+ posterImage: false,
161
+ bigPlayButton: true
162
+ });
165
163
  }
166
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
167
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
168
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
169
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
170
- return () => {
171
- var _a, _b, _c, _d;
172
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
173
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
174
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
175
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
176
- };
177
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
164
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
165
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
166
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
167
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('loadeddata', handLoadeddata);
168
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('pause', handlePause);
169
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.on('ended', handleEnded);
170
+ }, [handleCanplay, handlePlaying, rec.video, handLoadeddata, index, handlePause, handleEnded, videoId]);
178
171
  (0, react_1.useEffect)(() => {
179
172
  var _a;
180
173
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -257,19 +250,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
257
250
  right: 0
258
251
  } },
259
252
  react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
260
- 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: {
253
+ react_1.default.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
261
254
  width: '100%',
262
255
  height: '100%',
263
- objectFit: 'contain'
256
+ objectFit: 'contain',
257
+ backgroundColor: 'transparent',
258
+ pointerEvents: 'none'
264
259
  } }),
265
260
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
266
- renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
261
+ renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
267
262
  position: 'relative',
268
263
  width: '100%',
269
264
  height,
270
265
  overflow: 'hidden'
271
- } },
272
- 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 }),
266
+ }, onClick: handleClickVideo() },
267
+ react_1.default.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
268
+ backgroundColor: 'transparent',
269
+ width: '100%',
270
+ height: '100%',
271
+ objectFit: 'cover',
272
+ pointerEvents: 'none'
273
+ } }),
273
274
  renderPoster,
274
275
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
275
276
  };
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,
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -123,12 +123,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
123
123
  sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
124
124
  eventSubject: 'sessionCompleted',
125
125
  eventDescription: 'Session completed',
126
- contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
127
- productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
126
+ relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
127
+ relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
128
128
  position: activeIndex + '',
129
129
  fromKName,
130
130
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
131
- ctatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
131
+ relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
132
132
  }
133
133
  });
134
134
  }
@@ -261,8 +261,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
261
261
  eventInfo: {
262
262
  eventSubject: 'scrollDown',
263
263
  eventDescription: 'User scroll down',
264
- contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
265
- productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
264
+ relatedContentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
265
+ relatedProductId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
266
266
  requestId: null
267
267
  }
268
268
  });
@@ -273,8 +273,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
273
273
  eventInfo: {
274
274
  eventSubject: 'scrollUp',
275
275
  eventDescription: 'User scroll up',
276
- contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
277
- productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
276
+ relatedContentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
277
+ relatedProductId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
278
278
  requestId: null
279
279
  }
280
280
  });
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -144,7 +144,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
144
144
  fromKName = 'imagePage';
145
145
  }
146
146
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
147
- eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
147
+ eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', relatedContentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', relatedProductId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
148
148
  });
149
149
  }, [bffEventReport, isFromHashtag]);
150
150
  (0, react_1.useEffect)(() => {
package/lib/core/hooks/useEventReport.js CHANGED
@@ -35,8 +35,8 @@ function useEventReport() {
35
35
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
36
36
  contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
37
37
  position: position + '',
38
- contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
39
- ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
38
+ relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
39
+ relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
40
40
  traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
41
41
  }
42
42
  });
@@ -60,8 +60,8 @@ function useEventReport() {
60
60
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
61
61
  contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
62
62
  position: position + '',
63
- contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
64
- ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
63
+ relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
64
+ relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
65
65
  traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
66
66
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
67
67
  eventSubject: 'productView',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.32",
3
+ "version": "1.0.33",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -42,7 +42,6 @@
42
42
  "antd": "^5.15.3",
43
43
  "eslint": "^8.48.0",
44
44
  "eventemitter3": "^5.0.1",
45
- "hls.js": "^1.5.8",
46
45
  "less": "^4.2.0",
47
46
  "lodash": "^4.17.21",
48
47
  "pako": "^2.1.0",