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/pb-ui.js CHANGED
@@ -12031,6 +12031,7 @@ Made in Italy` })));
12031
12031
  }
12032
12032
  }, [bffEventReport, data, index, isFirstPlay]);
12033
12033
  const handleCanplay = React.useCallback(() => {
12034
+ handLoadeddata();
12034
12035
  setIsLoadFinish(true);
12035
12036
  }, []);
12036
12037
  const handleClickVideo = React.useCallback((type) => () => {
@@ -12100,21 +12101,28 @@ Made in Italy` })));
12100
12101
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
12101
12102
  }, [firstFrameSrc, rec]);
12102
12103
  const handLoadeddata = React.useCallback(() => {
12104
+ var _a;
12103
12105
  const videoDomRef = document.getElementById(`${videoId}_html5_api`);
12104
- if (!canvasRef || !videoDomRef || !canvasRef.current)
12106
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
12105
12107
  return;
12106
- const video = videoDomRef;
12107
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
12108
- const ctx = canvas.getContext('2d');
12109
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
12110
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
12111
- canvas.height = targetHeight;
12112
- canvas.width = targetWidth;
12113
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
12114
- setFirstFrameSrc(canvas.toDataURL());
12108
+ const setFrameImg = () => {
12109
+ const video = videoDomRef;
12110
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
12111
+ const ctx = canvas.getContext('2d');
12112
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
12113
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
12114
+ canvas.height = targetHeight;
12115
+ canvas.width = targetWidth;
12116
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
12117
+ setFirstFrameSrc(canvas.toDataURL());
12118
+ };
12119
+ setFrameImg();
12120
+ setTimeout(() => {
12121
+ setFrameImg();
12122
+ }, 500);
12115
12123
  }, []);
12116
12124
  React.useEffect(() => {
12117
- var _a, _b, _c, _d, _e, _f;
12125
+ var _a, _b, _c, _d, _e;
12118
12126
  setIsPauseVideo(false);
12119
12127
  const videoSrc = rec.video.url;
12120
12128
  if (videoSrc && typeof TCPlayer === 'function') {
@@ -12133,21 +12141,23 @@ Made in Italy` })));
12133
12141
  posterImage: false,
12134
12142
  bigPlayButton: true
12135
12143
  });
12144
+ videoRef.current.play();
12145
+ videoRef.current.pause();
12136
12146
  }
12137
12147
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
12138
12148
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
12139
12149
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
12140
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('loadeddata', handLoadeddata);
12141
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('pause', handlePause);
12142
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.on('ended', handleEnded);
12150
+ // videoRef.current?.on('loadeddata', handLoadeddata);
12151
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('pause', handlePause);
12152
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('ended', handleEnded);
12143
12153
  return () => {
12144
- var _a, _b, _c, _d, _e, _f;
12154
+ var _a, _b, _c, _d, _e;
12145
12155
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.off('loadedmetadata', handleCanplay);
12146
12156
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.off('canplay', handleCanplay);
12147
12157
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.off('playing', handlePlaying);
12148
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('loadeddata', handLoadeddata);
12149
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('pause', handlePause);
12150
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.off('ended', handleEnded);
12158
+ // videoRef.current?.off('loadeddata', handLoadeddata);
12159
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('pause', handlePause);
12160
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('ended', handleEnded);
12151
12161
  videoRef.current.dispose();
12152
12162
  };
12153
12163
  }, []);