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/es/core/components/SxpPageRender/VideoWidget/index.d.ts CHANGED
@@ -9,6 +9,7 @@ interface IVideoWidgetProps {
9
9
  muted: boolean;
10
10
  activeIndex?: number;
11
11
  videoPostConfig?: postConfigType;
12
+ videoRef?: any;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
14
15
  export default _default;
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -4,9 +4,8 @@ import { useIconLink } from '../useIconLink';
4
4
  import FormatImage from '../FormatImage';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
6
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
7
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
7
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
8
8
  const [isPauseVideo, setIsPauseVideo] = useState(false);
9
- const videoRef = useRef(null);
10
9
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
11
10
  const videoStartTime = useRef(0);
12
11
  const [isLoadFinish, setIsLoadFinish] = useState(false);
@@ -14,99 +13,118 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
14
13
  const { isActive } = useSwiperSlide();
15
14
  const canvasRef = useRef(null);
16
15
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
16
+ const videoId = `pb-cache-video-${index}`;
17
+ const videoEleRef = useRef(null);
17
18
  useEffect(() => {
18
- if (!videoRef.current)
19
+ if (!videoRef)
19
20
  return;
20
- videoRef.current.muted = muted;
21
- }, [muted]);
22
- const handleVideoStart = useCallback(() => {
23
- var _a;
24
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
25
- }, []);
21
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.muted(muted);
22
+ }, [muted, videoRef]);
23
+ const handleEnded = useCallback(() => {
24
+ if (!videoRef)
25
+ return;
26
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
27
+ }, [videoRef]);
26
28
  const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
27
29
  const handlePlaying = useCallback(() => {
28
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
30
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
31
+ if (!videoRef)
32
+ return;
29
33
  setIsPauseVideo(false);
30
34
  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);
35
+ if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration())) {
36
+ videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) || 0;
37
+ const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
38
+ const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
35
39
  const playType = isFirstPlay ? '0' : '1';
36
40
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
37
41
  eventInfo: {
38
42
  eventSubject: 'playVideo',
39
43
  eventDescription: 'User played the video',
40
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
41
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
44
+ contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
45
+ contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
42
46
  playType,
43
47
  startTime: videoCurrentTime,
44
48
  videoDuration,
45
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
49
+ contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
46
50
  position: index + '',
47
51
  contentFormat: 'video',
48
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
52
+ traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
49
53
  }
50
54
  });
51
55
  setIsFirstPlay(false);
52
56
  }
53
- }, [bffEventReport, data, index, isFirstPlay]);
54
- const handleLoadedMetadata = useCallback(() => {
57
+ }, [bffEventReport, data, index, isFirstPlay, videoRef]);
58
+ const handleLoadedmetadata = useCallback(() => {
59
+ if (!videoRef)
60
+ return;
61
+ if (activeIndex !== index) {
62
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
63
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
64
+ }
65
+ setIsLoadFinish(true);
66
+ }, [activeIndex, index, videoRef]);
67
+ const handleCanplay = useCallback(() => {
55
68
  setIsLoadFinish(true);
56
69
  }, []);
57
70
  const handleClickVideo = useCallback((type) => () => {
58
- var _a, _b, _c, _d, _e;
71
+ if (!videoRef)
72
+ return;
59
73
  if (!isLoadFinish)
60
74
  return;
61
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
75
+ const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
62
76
  switch (type) {
63
77
  case 'start':
64
78
  if (!isPause)
65
79
  return;
66
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
80
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
67
81
  setIsPauseVideo(false);
68
82
  break;
69
83
  case 'pause':
70
84
  if (isPause)
71
85
  return;
72
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
86
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
73
87
  setIsPauseVideo(true);
74
88
  break;
75
89
  default:
76
90
  if (isPause) {
77
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
91
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
78
92
  }
79
93
  else {
80
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
94
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
81
95
  }
82
96
  setIsPauseVideo(!isPause);
83
97
  break;
84
98
  }
85
- }, [isLoadFinish]);
86
- const onPause = useCallback(() => {
87
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
99
+ }, [isLoadFinish, videoRef]);
100
+ const handlePause = useCallback(() => {
101
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
102
+ if (!videoRef)
103
+ return;
104
+ if (activeIndex !== index)
105
+ return;
88
106
  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);
107
+ const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
108
+ const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
109
+ if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) {
110
+ const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) - videoStartTime.current).toFixed(2);
93
111
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
94
112
  eventInfo: {
95
113
  eventSubject: 'playOverVideo',
96
114
  eventDescription: 'User finished playing the video',
97
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
98
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
115
+ contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
116
+ contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
99
117
  endTime: videoCurrentTime,
100
118
  videoDuration,
101
119
  playDuration,
102
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
120
+ contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
103
121
  position: index + '',
104
122
  contentFormat: 'video',
105
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
123
+ traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
106
124
  }
107
125
  });
108
126
  }
109
- }, [data, index, bffEventReport]);
127
+ }, [data, index, bffEventReport, videoRef]);
110
128
  const blur = useMemo(() => {
111
129
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
112
130
  }, [videoPostConfig]);
@@ -121,64 +139,79 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
121
139
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
122
140
  }, [firstFrameSrc, rec]);
123
141
  const handLoadeddata = useCallback(() => {
124
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
142
+ var _a;
143
+ if (!videoRef)
125
144
  return;
126
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
127
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
128
- const ctx = canvas.getContext('2d');
129
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
130
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
131
- canvas.height = targetHeight;
132
- canvas.width = targetWidth;
133
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
134
- setFirstFrameSrc(canvas.toDataURL());
135
- }, []);
145
+ const videoDomRef = document.getElementById(`${videoId}_html5_api`);
146
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
147
+ return;
148
+ const setFrameImg = () => {
149
+ const video = videoDomRef;
150
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
151
+ const ctx = canvas.getContext('2d');
152
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
153
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
154
+ canvas.height = targetHeight;
155
+ canvas.width = targetWidth;
156
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
157
+ setFirstFrameSrc(canvas.toDataURL());
158
+ };
159
+ setFrameImg();
160
+ setTimeout(() => {
161
+ setFrameImg();
162
+ }, 500);
163
+ }, [videoRef]);
136
164
  useEffect(() => {
137
- var _a, _b, _c, _d;
138
- if (!videoRef.current)
165
+ if (!isActive || !videoRef)
166
+ return;
167
+ const videoSrc = rec.video.url;
168
+ if (!videoSrc)
139
169
  return;
140
170
  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');
146
- }
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);
171
+ const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
172
+ const dom = document.querySelector('#player-container-id');
173
+ const dom2 = document.querySelector('#player-container-id-copy');
174
+ if (!dom && !dom2)
175
+ return;
176
+ videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
177
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
178
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
179
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
180
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('canplay', handleCanplay);
181
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
182
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('pause', handlePause);
183
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('ended', handleEnded);
151
184
  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);
185
+ dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
186
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadedmetadata', handleLoadedmetadata);
187
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadeddata', handLoadeddata);
188
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('canplay', handleCanplay);
189
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('playing', handlePlaying);
190
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('pause', handlePause);
191
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('ended', handleEnded);
157
192
  };
158
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
193
+ }, [isActive, videoId, rec, videoRef]);
159
194
  useEffect(() => {
160
- var _a;
161
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
195
+ if (!videoRef || !isLoadFinish)
162
196
  return;
163
197
  if (isActive) {
164
- videoRef.current.play();
198
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
165
199
  }
166
200
  else {
167
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
201
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
168
202
  }
169
- }, [isActive, isLoadFinish]);
203
+ }, [isActive, isLoadFinish, videoRef]);
170
204
  useEffect(() => {
171
- var _a, _b, _c;
172
- if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
205
+ if (!isActive || !videoRef)
173
206
  return;
174
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
207
+ const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
175
208
  if (!isPause && openHashtag) {
176
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
209
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
177
210
  }
178
211
  else if (!openHashtag) {
179
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
212
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
180
213
  }
181
- }, [openHashtag, isActive]);
214
+ }, [openHashtag, isActive, videoRef]);
182
215
  useEffect(() => {
183
216
  if (!isActive)
184
217
  return;
@@ -198,9 +231,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
198
231
  return (React.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 }));
199
232
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
200
233
  useEffect(() => {
234
+ if (!videoRef)
235
+ return;
201
236
  const handleBeforeUnload = () => {
202
- var _a, _b;
203
- 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) {
237
+ var _a;
238
+ if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && videoRef && !isPauseVideo) {
204
239
  handleClickVideo('pause')();
205
240
  }
206
241
  };
@@ -238,19 +273,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
238
273
  right: 0
239
274
  } },
240
275
  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: {
242
- width: '100%',
243
- height: '100%',
244
- objectFit: 'contain'
245
- } }),
276
+ React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
246
277
  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: {
278
+ renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
248
279
  position: 'relative',
249
280
  width: '100%',
250
281
  height,
251
282
  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 }),
283
+ }, onClick: handleClickVideo() },
284
+ React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
254
285
  renderPoster,
255
286
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
256
287
  };
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -34,6 +34,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
34
34
  const [isLoadMore, setIsLoadMore] = useState(false);
35
35
  const [isShowMore, setIsShowMore] = useState(false);
36
36
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = useSxpDataSource();
37
+ const [videoRef, setVideoRef] = useState(null);
38
+ const playerRef = useRef();
37
39
  const { productView } = useEventReport();
38
40
  const isShowFingerTip = useMemo(() => {
39
41
  return data.length > 0 && !loading && getFeUserId();
@@ -69,6 +71,25 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
69
71
  viewTime.current = new Date();
70
72
  refreshFeSessionId();
71
73
  };
74
+ const firstRef = useRef();
75
+ useEffect(() => {
76
+ if (!firstRef.current && !videoRef) {
77
+ firstRef.current = true;
78
+ const player = TCPlayer('player-container-id', {
79
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
80
+ controls: false,
81
+ autoplay: false,
82
+ loop: false,
83
+ muted: true,
84
+ preload: 'auto',
85
+ posterImage: false,
86
+ bigPlayButton: true
87
+ });
88
+ player === null || player === void 0 ? void 0 : player.ready(() => {
89
+ setVideoRef(player);
90
+ });
91
+ }
92
+ }, [videoRef]);
72
93
  useEffect(() => {
73
94
  if (!isInit)
74
95
  handleH5EnterLink();
@@ -161,7 +182,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
161
182
  const renderContent = useCallback((rec, index) => {
162
183
  var _a, _b, _c, _d;
163
184
  if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
164
- return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
185
+ return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
165
186
  }
166
187
  if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
167
188
  return (React.createElement(PictureGroup, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -176,7 +197,19 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
176
197
  });
177
198
  }
178
199
  return null;
179
- }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
200
+ }, [
201
+ containerWidth,
202
+ data,
203
+ height,
204
+ isMuted,
205
+ activeIndex,
206
+ globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost,
207
+ viewTime,
208
+ tipText,
209
+ resolver,
210
+ schema,
211
+ videoRef
212
+ ]);
180
213
  const onExpandableChange = useCallback((v) => {
181
214
  setIsShowMore(v);
182
215
  }, []);
@@ -358,7 +391,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
358
391
  renderLogo,
359
392
  React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex }),
360
393
  isShowFingerTip ? React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
361
- React.createElement(Swiper, { ref: swiperRef, onActiveIndexChange: (swiper) => {
394
+ React.createElement(Swiper, { ref: swiperRef, onSlideChange: () => {
395
+ swiperRef.current.swiper.allowTouchMove = false;
396
+ setTimeout(() => {
397
+ swiperRef.current.swiper.allowTouchMove = true;
398
+ }, 500);
399
+ }, onActiveIndexChange: (swiper) => {
362
400
  setActiveIndex(swiper.activeIndex);
363
401
  if (openHashtag)
364
402
  return;
@@ -382,6 +420,15 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
382
420
  zIndex: 999
383
421
  }, 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 }),
384
422
  renderView),
385
- React.createElement(WaterFall, 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))));
423
+ React.createElement(WaterFall, 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)),
424
+ React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
425
+ React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
426
+ backgroundColor: 'transparent',
427
+ width: '100%',
428
+ height: '100%',
429
+ objectFit: 'cover',
430
+ pointerEvents: 'none'
431
+ } }),
432
+ React.createElement("div", { id: 'player-container-id-copy' }))));
386
433
  };
387
434
  export default SxpPageRender;
package/es/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/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -26,6 +26,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
26
26
  const [cacheRtcList, setCacheRtcList] = useState([]);
27
27
  const [cacheActiveIndex, setCacheActiveIndex] = useState(0);
28
28
  const [isFromHashtag, setIsFromHashtag] = useState(false);
29
+ const [videoRef, setVideoRef] = useState(null);
29
30
  useEffect(() => {
30
31
  setOpenHashtag(isOpenHashTag);
31
32
  }, [isOpenHashTag]);
@@ -220,7 +221,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
220
221
  loadingImage: loadingImage !== null && loadingImage !== void 0 ? loadingImage : defaultLoadingImage,
221
222
  isOpenHashTag,
222
223
  tagList,
223
- setLoading
224
+ setLoading,
225
+ videoRef,
226
+ setVideoRef
224
227
  } }, render({
225
228
  rtcList,
226
229
  mutateLike: bffMutateLike,
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -59,10 +59,10 @@ const CommodityDetail = (_a) => {
59
59
  React.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'),
60
60
  React.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),
61
61
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
62
- React.createElement(ExpandableText, { 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
63
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
64
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
65
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
62
+ React.createElement(ExpandableText, { 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
63
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
64
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
65
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
66
66
  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 }))));
67
67
  };
68
68
  const renderBtn = () => {
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -84,7 +84,7 @@ const CommodityDetailDiroNew = (_a) => {
84
84
  const productInfoText = ({ isPost }) => {
85
85
  return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
86
86
  React.createElement(ExpandableText, { 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) ||
87
- `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
87
+ `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
88
88
  Made in Italy` })));
89
89
  };
90
90
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts CHANGED
@@ -9,6 +9,7 @@ interface IVideoWidgetProps {
9
9
  muted: boolean;
10
10
  activeIndex?: number;
11
11
  videoPostConfig?: postConfigType;
12
+ videoRef?: any;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
14
15
  export default _default;