pb-sxp-ui 1.0.38 → 1.0.39

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 (15) hide show
  1. package/dist/index.cjs +28 -18
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +28 -18
  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 +28 -18
  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/lib/core/components/SxpPageRender/VideoWidget/index.js +26 -18
  15. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -12039,6 +12039,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
12039
12039
  }
12040
12040
  }, [bffEventReport, data, index, isFirstPlay]);
12041
12041
  const handleCanplay = React.useCallback(() => {
12042
+ handLoadeddata();
12042
12043
  setIsLoadFinish(true);
12043
12044
  }, []);
12044
12045
  const handleClickVideo = React.useCallback((type) => () => {
@@ -12108,21 +12109,28 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
12108
12109
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
12109
12110
  }, [firstFrameSrc, rec]);
12110
12111
  const handLoadeddata = React.useCallback(() => {
12112
+ var _a;
12111
12113
  const videoDomRef = document.getElementById(`${videoId}_html5_api`);
12112
- if (!canvasRef || !videoDomRef || !canvasRef.current)
12114
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
12113
12115
  return;
12114
- const video = videoDomRef;
12115
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
12116
- const ctx = canvas.getContext('2d');
12117
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
12118
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
12119
- canvas.height = targetHeight;
12120
- canvas.width = targetWidth;
12121
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
12122
- setFirstFrameSrc(canvas.toDataURL());
12116
+ const setFrameImg = () => {
12117
+ const video = videoDomRef;
12118
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
12119
+ const ctx = canvas.getContext('2d');
12120
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
12121
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
12122
+ canvas.height = targetHeight;
12123
+ canvas.width = targetWidth;
12124
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
12125
+ setFirstFrameSrc(canvas.toDataURL());
12126
+ };
12127
+ setFrameImg();
12128
+ setTimeout(() => {
12129
+ setFrameImg();
12130
+ }, 500);
12123
12131
  }, []);
12124
12132
  React.useEffect(() => {
12125
- var _a, _b, _c, _d, _e, _f;
12133
+ var _a, _b, _c, _d, _e;
12126
12134
  setIsPauseVideo(false);
12127
12135
  const videoSrc = rec.video.url;
12128
12136
  if (videoSrc && typeof TCPlayer === 'function') {
@@ -12141,21 +12149,23 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
12141
12149
  posterImage: false,
12142
12150
  bigPlayButton: true
12143
12151
  });
12152
+ videoRef.current.play();
12153
+ videoRef.current.pause();
12144
12154
  }
12145
12155
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
12146
12156
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
12147
12157
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
12148
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('loadeddata', handLoadeddata);
12149
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('pause', handlePause);
12150
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.on('ended', handleEnded);
12158
+ // videoRef.current?.on('loadeddata', handLoadeddata);
12159
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('pause', handlePause);
12160
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('ended', handleEnded);
12151
12161
  return () => {
12152
- var _a, _b, _c, _d, _e, _f;
12162
+ var _a, _b, _c, _d, _e;
12153
12163
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.off('loadedmetadata', handleCanplay);
12154
12164
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.off('canplay', handleCanplay);
12155
12165
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.off('playing', handlePlaying);
12156
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('loadeddata', handLoadeddata);
12157
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('pause', handlePause);
12158
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.off('ended', handleEnded);
12166
+ // videoRef.current?.off('loadeddata', handLoadeddata);
12167
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('pause', handlePause);
12168
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('ended', handleEnded);
12159
12169
  videoRef.current.dispose();
12160
12170
  };
12161
12171
  }, []);