pb-sxp-ui 1.0.42 → 1.0.44

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 (30) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +111 -111
  3. package/dist/index.cjs +183 -114
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +0 -6
  6. package/dist/index.js +183 -114
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.min.cjs +3 -3
  9. package/dist/index.min.cjs.map +1 -1
  10. package/dist/index.min.js +3 -3
  11. package/dist/index.min.js.map +1 -1
  12. package/dist/pb-ui.js +183 -114
  13. package/dist/pb-ui.js.map +1 -1
  14. package/dist/pb-ui.min.js +3 -3
  15. package/dist/pb-ui.min.js.map +1 -1
  16. package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  17. package/es/core/components/SxpPageRender/VideoWidget/index.js +119 -88
  18. package/es/core/components/SxpPageRender/index.js +51 -4
  19. package/es/core/context/SxpDataSourceProvider.d.ts +2 -0
  20. package/es/core/context/SxpDataSourceProvider.js +4 -1
  21. package/es/materials/sxp/popup/CommodityDetail/index.js +4 -4
  22. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  23. package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  24. package/lib/core/components/SxpPageRender/VideoWidget/index.js +119 -88
  25. package/lib/core/components/SxpPageRender/index.js +51 -4
  26. package/lib/core/context/SxpDataSourceProvider.d.ts +2 -0
  27. package/lib/core/context/SxpDataSourceProvider.js +4 -1
  28. package/lib/materials/sxp/popup/CommodityDetail/index.js +4 -4
  29. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  30. package/package.json +115 -115
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -7,9 +7,8 @@ const useIconLink_1 = require("../useIconLink");
7
7
  const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
10
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
10
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
11
11
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
12
- const videoRef = (0, react_1.useRef)(null);
13
12
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = (0, hooks_1.useSxpDataSource)();
14
13
  const videoStartTime = (0, react_1.useRef)(0);
15
14
  const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
@@ -17,99 +16,118 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
17
16
  const { isActive } = (0, react_2.useSwiperSlide)();
18
17
  const canvasRef = (0, react_1.useRef)(null);
19
18
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
19
+ const videoId = `pb-cache-video-${index}`;
20
+ const videoEleRef = (0, react_1.useRef)(null);
20
21
  (0, react_1.useEffect)(() => {
21
- if (!videoRef.current)
22
+ if (!videoRef)
22
23
  return;
23
- videoRef.current.muted = muted;
24
- }, [muted]);
25
- const handleVideoStart = (0, react_1.useCallback)(() => {
26
- var _a;
27
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
28
- }, []);
24
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.muted(muted);
25
+ }, [muted, videoRef]);
26
+ const handleEnded = (0, react_1.useCallback)(() => {
27
+ if (!videoRef)
28
+ return;
29
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
30
+ }, [videoRef]);
29
31
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
30
32
  const handlePlaying = (0, react_1.useCallback)(() => {
31
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
33
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
34
+ if (!videoRef)
35
+ return;
32
36
  setIsPauseVideo(false);
33
37
  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);
38
+ if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration())) {
39
+ videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) || 0;
40
+ const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
41
+ const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
38
42
  const playType = isFirstPlay ? '0' : '1';
39
43
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
40
44
  eventInfo: {
41
45
  eventSubject: 'playVideo',
42
46
  eventDescription: 'User played the video',
43
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
44
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
47
+ contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
48
+ contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
45
49
  playType,
46
50
  startTime: videoCurrentTime,
47
51
  videoDuration,
48
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
52
+ contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
49
53
  position: index + '',
50
54
  contentFormat: 'video',
51
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
55
+ traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
52
56
  }
53
57
  });
54
58
  setIsFirstPlay(false);
55
59
  }
56
- }, [bffEventReport, data, index, isFirstPlay]);
57
- const handleLoadedMetadata = (0, react_1.useCallback)(() => {
60
+ }, [bffEventReport, data, index, isFirstPlay, videoRef]);
61
+ const handleLoadedmetadata = (0, react_1.useCallback)(() => {
62
+ if (!videoRef)
63
+ return;
64
+ if (activeIndex !== index) {
65
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
66
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
67
+ }
68
+ setIsLoadFinish(true);
69
+ }, [activeIndex, index, videoRef]);
70
+ const handleCanplay = (0, react_1.useCallback)(() => {
58
71
  setIsLoadFinish(true);
59
72
  }, []);
60
73
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
61
- var _a, _b, _c, _d, _e;
74
+ if (!videoRef)
75
+ return;
62
76
  if (!isLoadFinish)
63
77
  return;
64
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
78
+ const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
65
79
  switch (type) {
66
80
  case 'start':
67
81
  if (!isPause)
68
82
  return;
69
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
83
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
70
84
  setIsPauseVideo(false);
71
85
  break;
72
86
  case 'pause':
73
87
  if (isPause)
74
88
  return;
75
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
89
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
76
90
  setIsPauseVideo(true);
77
91
  break;
78
92
  default:
79
93
  if (isPause) {
80
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
94
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
81
95
  }
82
96
  else {
83
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
97
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
84
98
  }
85
99
  setIsPauseVideo(!isPause);
86
100
  break;
87
101
  }
88
- }, [isLoadFinish]);
89
- const onPause = (0, react_1.useCallback)(() => {
90
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
102
+ }, [isLoadFinish, videoRef]);
103
+ const handlePause = (0, react_1.useCallback)(() => {
104
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
105
+ if (!videoRef)
106
+ return;
107
+ if (activeIndex !== index)
108
+ return;
91
109
  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);
110
+ const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
111
+ const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
112
+ if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) {
113
+ const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) - videoStartTime.current).toFixed(2);
96
114
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
97
115
  eventInfo: {
98
116
  eventSubject: 'playOverVideo',
99
117
  eventDescription: 'User finished playing the video',
100
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
101
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
118
+ contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
119
+ contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
102
120
  endTime: videoCurrentTime,
103
121
  videoDuration,
104
122
  playDuration,
105
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
123
+ contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
106
124
  position: index + '',
107
125
  contentFormat: 'video',
108
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
126
+ traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
109
127
  }
110
128
  });
111
129
  }
112
- }, [data, index, bffEventReport]);
130
+ }, [data, index, bffEventReport, videoRef]);
113
131
  const blur = (0, react_1.useMemo)(() => {
114
132
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
115
133
  }, [videoPostConfig]);
@@ -124,64 +142,79 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
124
142
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
125
143
  }, [firstFrameSrc, rec]);
126
144
  const handLoadeddata = (0, react_1.useCallback)(() => {
127
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
145
+ var _a;
146
+ if (!videoRef)
128
147
  return;
129
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
130
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
131
- const ctx = canvas.getContext('2d');
132
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
133
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
134
- canvas.height = targetHeight;
135
- canvas.width = targetWidth;
136
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
137
- setFirstFrameSrc(canvas.toDataURL());
138
- }, []);
148
+ const videoDomRef = document.getElementById(`${videoId}_html5_api`);
149
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
150
+ return;
151
+ const setFrameImg = () => {
152
+ const video = videoDomRef;
153
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
154
+ const ctx = canvas.getContext('2d');
155
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
156
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
157
+ canvas.height = targetHeight;
158
+ canvas.width = targetWidth;
159
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
160
+ setFirstFrameSrc(canvas.toDataURL());
161
+ };
162
+ setFrameImg();
163
+ setTimeout(() => {
164
+ setFrameImg();
165
+ }, 500);
166
+ }, [videoRef]);
139
167
  (0, react_1.useEffect)(() => {
140
- var _a, _b, _c, _d;
141
- if (!videoRef.current)
168
+ if (!isActive || !videoRef)
169
+ return;
170
+ const videoSrc = rec.video.url;
171
+ if (!videoSrc)
142
172
  return;
143
173
  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');
149
- }
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);
174
+ const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
175
+ const dom = document.querySelector('#player-container-id');
176
+ const dom2 = document.querySelector('#player-container-id-copy');
177
+ if (!dom && !dom2)
178
+ return;
179
+ videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
180
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
181
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
182
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
183
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('canplay', handleCanplay);
184
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
185
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('pause', handlePause);
186
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('ended', handleEnded);
154
187
  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);
188
+ dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
189
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadedmetadata', handleLoadedmetadata);
190
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadeddata', handLoadeddata);
191
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('canplay', handleCanplay);
192
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('playing', handlePlaying);
193
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('pause', handlePause);
194
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('ended', handleEnded);
160
195
  };
161
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
196
+ }, [isActive, videoId, rec, videoRef]);
162
197
  (0, react_1.useEffect)(() => {
163
- var _a;
164
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
198
+ if (!videoRef || !isLoadFinish)
165
199
  return;
166
200
  if (isActive) {
167
- videoRef.current.play();
201
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
168
202
  }
169
203
  else {
170
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
204
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
171
205
  }
172
- }, [isActive, isLoadFinish]);
206
+ }, [isActive, isLoadFinish, videoRef]);
173
207
  (0, react_1.useEffect)(() => {
174
- var _a, _b, _c;
175
- if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
208
+ if (!isActive || !videoRef)
176
209
  return;
177
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
210
+ const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
178
211
  if (!isPause && openHashtag) {
179
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
212
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
180
213
  }
181
214
  else if (!openHashtag) {
182
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
215
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
183
216
  }
184
- }, [openHashtag, isActive]);
217
+ }, [openHashtag, isActive, videoRef]);
185
218
  (0, react_1.useEffect)(() => {
186
219
  if (!isActive)
187
220
  return;
@@ -201,9 +234,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
201
234
  return (react_1.default.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
202
235
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
203
236
  (0, react_1.useEffect)(() => {
237
+ if (!videoRef)
238
+ return;
204
239
  const handleBeforeUnload = () => {
205
- var _a, _b;
206
- if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
240
+ var _a;
241
+ if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && videoRef && !isPauseVideo) {
207
242
  handleClickVideo('pause')();
208
243
  }
209
244
  };
@@ -241,19 +276,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
241
276
  right: 0
242
277
  } },
243
278
  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: {
245
- width: '100%',
246
- height: '100%',
247
- objectFit: 'contain'
248
- } }),
279
+ react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
249
280
  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: {
281
+ renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
251
282
  position: 'relative',
252
283
  width: '100%',
253
284
  height,
254
285
  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 }),
286
+ }, onClick: handleClickVideo() },
287
+ react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
257
288
  renderPoster,
258
289
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
259
290
  };
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -37,6 +37,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
37
37
  const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
38
38
  const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
39
39
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = (0, hooks_1.useSxpDataSource)();
40
+ const [videoRef, setVideoRef] = (0, react_1.useState)(null);
41
+ const playerRef = (0, react_1.useRef)();
40
42
  const { productView } = (0, useEventReport_1.useEventReport)();
41
43
  const isShowFingerTip = (0, react_1.useMemo)(() => {
42
44
  return data.length > 0 && !loading && (0, localStore_1.getFeUserId)();
@@ -72,6 +74,25 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
72
74
  viewTime.current = new Date();
73
75
  (0, sessionStore_1.refreshFeSessionId)();
74
76
  };
77
+ const firstRef = (0, react_1.useRef)();
78
+ (0, react_1.useEffect)(() => {
79
+ if (!firstRef.current && !videoRef) {
80
+ firstRef.current = true;
81
+ const player = TCPlayer('player-container-id', {
82
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
83
+ controls: false,
84
+ autoplay: false,
85
+ loop: false,
86
+ muted: true,
87
+ preload: 'auto',
88
+ posterImage: false,
89
+ bigPlayButton: true
90
+ });
91
+ player === null || player === void 0 ? void 0 : player.ready(() => {
92
+ setVideoRef(player);
93
+ });
94
+ }
95
+ }, [videoRef]);
75
96
  (0, react_1.useEffect)(() => {
76
97
  if (!isInit)
77
98
  handleH5EnterLink();
@@ -164,7 +185,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
164
185
  const renderContent = (0, react_1.useCallback)((rec, index) => {
165
186
  var _a, _b, _c, _d;
166
187
  if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
167
- return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
188
+ return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
168
189
  }
169
190
  if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
170
191
  return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -179,7 +200,19 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
179
200
  });
180
201
  }
181
202
  return null;
182
- }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
203
+ }, [
204
+ containerWidth,
205
+ data,
206
+ height,
207
+ isMuted,
208
+ activeIndex,
209
+ globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost,
210
+ viewTime,
211
+ tipText,
212
+ resolver,
213
+ schema,
214
+ videoRef
215
+ ]);
183
216
  const onExpandableChange = (0, react_1.useCallback)((v) => {
184
217
  setIsShowMore(v);
185
218
  }, []);
@@ -361,7 +394,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
361
394
  renderLogo,
362
395
  react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
363
396
  isShowFingerTip ? react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
364
- react_1.default.createElement(react_2.Swiper, { ref: swiperRef, onActiveIndexChange: (swiper) => {
397
+ react_1.default.createElement(react_2.Swiper, { ref: swiperRef, onSlideChange: () => {
398
+ swiperRef.current.swiper.allowTouchMove = false;
399
+ setTimeout(() => {
400
+ swiperRef.current.swiper.allowTouchMove = true;
401
+ }, 500);
402
+ }, onActiveIndexChange: (swiper) => {
365
403
  setActiveIndex(swiper.activeIndex);
366
404
  if (openHashtag)
367
405
  return;
@@ -385,6 +423,15 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
385
423
  zIndex: 999
386
424
  }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
387
425
  renderView),
388
- react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props))));
426
+ react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props)),
427
+ react_1.default.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
428
+ react_1.default.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
429
+ backgroundColor: 'transparent',
430
+ width: '100%',
431
+ height: '100%',
432
+ objectFit: 'cover',
433
+ pointerEvents: 'none'
434
+ } }),
435
+ react_1.default.createElement("div", { id: 'player-container-id-copy' }))));
389
436
  };
390
437
  exports.default = SxpPageRender;
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -62,6 +62,8 @@ export interface ISxpDataSourceContext {
62
62
  isOpenHashTag?: boolean;
63
63
  tagList: string[];
64
64
  setLoading?: React.Dispatch<React.SetStateAction<boolean>>;
65
+ videoRef?: any;
66
+ setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
65
67
  }
66
68
  export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
67
69
  export interface SxpDataSourceProviderProps {
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -29,6 +29,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
29
29
  const [cacheRtcList, setCacheRtcList] = (0, react_1.useState)([]);
30
30
  const [cacheActiveIndex, setCacheActiveIndex] = (0, react_1.useState)(0);
31
31
  const [isFromHashtag, setIsFromHashtag] = (0, react_1.useState)(false);
32
+ const [videoRef, setVideoRef] = (0, react_1.useState)(null);
32
33
  (0, react_1.useEffect)(() => {
33
34
  setOpenHashtag(isOpenHashTag);
34
35
  }, [isOpenHashTag]);
@@ -223,7 +224,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
223
224
  loadingImage: loadingImage !== null && loadingImage !== void 0 ? loadingImage : defaultLoadingImage,
224
225
  isOpenHashTag,
225
226
  tagList,
226
- setLoading
227
+ setLoading,
228
+ videoRef,
229
+ setVideoRef
227
230
  } }, render({
228
231
  rtcList,
229
232
  mutateLike: bffMutateLike,
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -61,10 +61,10 @@ const CommodityDetail = (_a) => {
61
61
  react_1.default.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
62
62
  react_1.default.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
63
63
  react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
64
- react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
65
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
66
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
67
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
64
+ react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
65
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
66
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
67
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
68
68
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
69
69
  };
70
70
  const renderBtn = () => {
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -86,7 +86,7 @@ const CommodityDetailDiroNew = (_a) => {
86
86
  const productInfoText = ({ isPost }) => {
87
87
  return (react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
88
88
  react_1.default.createElement(ExpandableText_1.default, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
89
- `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
89
+ `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
90
90
  Made in Italy` })));
91
91
  };
92
92
  return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },