pb-sxp-ui 1.0.38 → 1.0.40

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 (17) hide show
  1. package/dist/index.cjs +38 -20
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +38 -20
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +38 -20
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/VideoWidget/index.js +26 -18
  14. package/es/core/components/SxpPageRender/index.js +6 -1
  15. package/lib/core/components/SxpPageRender/VideoWidget/index.js +26 -18
  16. package/lib/core/components/SxpPageRender/index.js +6 -1
  17. package/package.json +1 -1
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -53,6 +53,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
53
53
  }
54
54
  }, [bffEventReport, data, index, isFirstPlay]);
55
55
  const handleCanplay = useCallback(() => {
56
+ handLoadeddata();
56
57
  setIsLoadFinish(true);
57
58
  }, []);
58
59
  const handleClickVideo = useCallback((type) => () => {
@@ -122,21 +123,28 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
122
123
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
123
124
  }, [firstFrameSrc, rec]);
124
125
  const handLoadeddata = useCallback(() => {
126
+ var _a;
125
127
  const videoDomRef = document.getElementById(`${videoId}_html5_api`);
126
- if (!canvasRef || !videoDomRef || !canvasRef.current)
128
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
127
129
  return;
128
- const video = videoDomRef;
129
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
130
- const ctx = canvas.getContext('2d');
131
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
132
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
133
- canvas.height = targetHeight;
134
- canvas.width = targetWidth;
135
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
136
- setFirstFrameSrc(canvas.toDataURL());
130
+ const setFrameImg = () => {
131
+ const video = videoDomRef;
132
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
133
+ const ctx = canvas.getContext('2d');
134
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
135
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
136
+ canvas.height = targetHeight;
137
+ canvas.width = targetWidth;
138
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
139
+ setFirstFrameSrc(canvas.toDataURL());
140
+ };
141
+ setFrameImg();
142
+ setTimeout(() => {
143
+ setFrameImg();
144
+ }, 500);
137
145
  }, []);
138
146
  useEffect(() => {
139
- var _a, _b, _c, _d, _e, _f;
147
+ var _a, _b, _c, _d, _e;
140
148
  setIsPauseVideo(false);
141
149
  const videoSrc = rec.video.url;
142
150
  if (videoSrc && typeof TCPlayer === 'function') {
@@ -155,21 +163,21 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
155
163
  posterImage: false,
156
164
  bigPlayButton: true
157
165
  });
166
+ videoRef.current.play();
167
+ videoRef.current.pause();
158
168
  }
159
169
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
160
170
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
161
171
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
162
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('loadeddata', handLoadeddata);
163
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('pause', handlePause);
164
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.on('ended', handleEnded);
172
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('pause', handlePause);
173
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('ended', handleEnded);
165
174
  return () => {
166
- var _a, _b, _c, _d, _e, _f;
175
+ var _a, _b, _c, _d, _e;
167
176
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.off('loadedmetadata', handleCanplay);
168
177
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.off('canplay', handleCanplay);
169
178
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.off('playing', handlePlaying);
170
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('loadeddata', handLoadeddata);
171
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('pause', handlePause);
172
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.off('ended', handleEnded);
179
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('pause', handlePause);
180
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('ended', handleEnded);
173
181
  videoRef.current.dispose();
174
182
  };
175
183
  }, []);
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -349,7 +349,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
349
349
  } })),
350
350
  renderLogo,
351
351
  isShowFingerTip ? React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
352
- React.createElement(Swiper, { ref: swiperRef, onActiveIndexChange: (swiper) => {
352
+ React.createElement(Swiper, { ref: swiperRef, onSlideChange: () => {
353
+ swiperRef.current.swiper.allowTouchMove = false;
354
+ setTimeout(() => {
355
+ swiperRef.current.swiper.allowTouchMove = true;
356
+ }, 500);
357
+ }, onActiveIndexChange: (swiper) => {
353
358
  setActiveIndex(swiper.activeIndex);
354
359
  if (openHashtag)
355
360
  return;
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -56,6 +56,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
56
56
  }
57
57
  }, [bffEventReport, data, index, isFirstPlay]);
58
58
  const handleCanplay = (0, react_1.useCallback)(() => {
59
+ handLoadeddata();
59
60
  setIsLoadFinish(true);
60
61
  }, []);
61
62
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
@@ -125,21 +126,28 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
125
126
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
126
127
  }, [firstFrameSrc, rec]);
127
128
  const handLoadeddata = (0, react_1.useCallback)(() => {
129
+ var _a;
128
130
  const videoDomRef = document.getElementById(`${videoId}_html5_api`);
129
- if (!canvasRef || !videoDomRef || !canvasRef.current)
131
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
130
132
  return;
131
- const video = videoDomRef;
132
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
133
- const ctx = canvas.getContext('2d');
134
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
135
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
136
- canvas.height = targetHeight;
137
- canvas.width = targetWidth;
138
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
139
- setFirstFrameSrc(canvas.toDataURL());
133
+ const setFrameImg = () => {
134
+ const video = videoDomRef;
135
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
136
+ const ctx = canvas.getContext('2d');
137
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
138
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
139
+ canvas.height = targetHeight;
140
+ canvas.width = targetWidth;
141
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
142
+ setFirstFrameSrc(canvas.toDataURL());
143
+ };
144
+ setFrameImg();
145
+ setTimeout(() => {
146
+ setFrameImg();
147
+ }, 500);
140
148
  }, []);
141
149
  (0, react_1.useEffect)(() => {
142
- var _a, _b, _c, _d, _e, _f;
150
+ var _a, _b, _c, _d, _e;
143
151
  setIsPauseVideo(false);
144
152
  const videoSrc = rec.video.url;
145
153
  if (videoSrc && typeof TCPlayer === 'function') {
@@ -158,21 +166,21 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
158
166
  posterImage: false,
159
167
  bigPlayButton: true
160
168
  });
169
+ videoRef.current.play();
170
+ videoRef.current.pause();
161
171
  }
162
172
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
163
173
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
164
174
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
165
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('loadeddata', handLoadeddata);
166
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('pause', handlePause);
167
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.on('ended', handleEnded);
175
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('pause', handlePause);
176
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('ended', handleEnded);
168
177
  return () => {
169
- var _a, _b, _c, _d, _e, _f;
178
+ var _a, _b, _c, _d, _e;
170
179
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.off('loadedmetadata', handleCanplay);
171
180
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.off('canplay', handleCanplay);
172
181
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.off('playing', handlePlaying);
173
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('loadeddata', handLoadeddata);
174
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('pause', handlePause);
175
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.off('ended', handleEnded);
182
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('pause', handlePause);
183
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('ended', handleEnded);
176
184
  videoRef.current.dispose();
177
185
  };
178
186
  }, []);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -352,7 +352,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
352
352
  } })),
353
353
  renderLogo,
354
354
  isShowFingerTip ? react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
355
- react_1.default.createElement(react_2.Swiper, { ref: swiperRef, onActiveIndexChange: (swiper) => {
355
+ react_1.default.createElement(react_2.Swiper, { ref: swiperRef, onSlideChange: () => {
356
+ swiperRef.current.swiper.allowTouchMove = false;
357
+ setTimeout(() => {
358
+ swiperRef.current.swiper.allowTouchMove = true;
359
+ }, 500);
360
+ }, onActiveIndexChange: (swiper) => {
356
361
  setActiveIndex(swiper.activeIndex);
357
362
  if (openHashtag)
358
363
  return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.38",
3
+ "version": "1.0.40",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",