pb-sxp-ui 1.0.31 → 1.0.33

package/dist/index.cjs

@@ -10,7 +10,6 @@ var qs = require('qs');
 var css = require('@emotion/css');
 var proComponents = require('@ant-design/pro-components');
 var ReactDOM = require('react-dom');
-var Hls = require('hls.js');
 var EventEmitter = require('eventemitter3');
 
 function _interopNamespaceDefault(e) {
@@ -12001,12 +12000,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const { isActive } = useSwiperSlide();
     const canvasRef = React.useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
+    const videoId = `pb-video-${index}`;
     React.useEffect(() => {
         if (!videoRef.current)
             return;
-        videoRef.current.muted = muted;
+        videoRef.current.muted(muted);
     }, [muted]);
-    const handleVideoStart = React.useCallback(() => {
+    const handleEnded = React.useCallback(() => {
         var _a;
         (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
     }, []);
@@ -12015,10 +12015,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         setIsPauseVideo(false);
         const item = data[index];
-        if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
-            videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
-            const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-            const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
+        if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration())) {
+            videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime()) || 0;
+            const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration()) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+            const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime()) !== null && _f !== void 0 ? _f : 0).toFixed(2);
             const playType = isFirstPlay ? '0' : '1';
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
@@ -12038,14 +12038,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             setIsFirstPlay(false);
         }
     }, [bffEventReport, data, index, isFirstPlay]);
-    const handleLoadedMetadata = React.useCallback(() => {
+    const handleCanplay = React.useCallback(() => {
         setIsLoadFinish(true);
     }, []);
     const handleClickVideo = React.useCallback((type) => () => {
         var _a, _b, _c, _d, _e;
         if (!isLoadFinish)
             return;
-        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused();
         switch (type) {
             case 'start':
                 if (!isPause)
@@ -12070,13 +12070,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 break;
         }
     }, [isLoadFinish]);
-    const onPause = React.useCallback(() => {
+    const handlePause = React.useCallback(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const item = data[index];
-        const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-        const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-        if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
-            const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
+        const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+        const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime()) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+        if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration()) {
+            const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime()) - videoStartTime.current).toFixed(2);
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'playOverVideo',
@@ -12108,9 +12108,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
     }, [firstFrameSrc, rec]);
     const handLoadeddata = React.useCallback(() => {
-        if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
+        const videoDomRef = document.getElementById(`${videoId}_html5_api`);
+        if (!canvasRef || !videoDomRef || !canvasRef.current)
             return;
-        const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
+        const video = videoDomRef;
         const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
         const ctx = canvas.getContext('2d');
         const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
@@ -12121,43 +12122,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         setFirstFrameSrc(canvas.toDataURL());
     }, []);
     React.useEffect(() => {
-        var _a, _b, _c, _d;
-        if (!videoRef.current)
+        var _a, _b, _c, _d, _e, _f;
+        if (videoRef.current)
             return;
         setIsPauseVideo(false);
-        if (!videoRef.current.src) {
-            const videoSrc = rec.video.url;
-            if (videoSrc.includes('.m3u8')) {
-                if (Hls.isSupported()) {
-                    const hls = new Hls();
-                    hls.loadSource(videoSrc);
-                    hls.attachMedia(videoRef.current);
-                }
-                else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
-                    videoRef.current.src = videoSrc;
-                }
-                else {
-                    videoRef.current.src = videoSrc;
-                }
-            }
-            else {
-                videoRef.current.src = videoSrc;
-            }
-            videoRef.current.setAttribute('x5-playsinline', 'true');
-            videoRef.current.setAttribute('webkit-playsinline', 'true');
+        const videoSrc = rec.video.url;
+        if (videoSrc && typeof TCPlayer === 'function') {
+            videoRef.current = TCPlayer(videoId, {
+                sources: [
+                    {
+                        src: videoSrc // 播放地址
+                    }
+                ],
+                licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+                controls: false,
+                autoplay: false,
+                loop: false,
+                muted: true,
+                preload: 'meta',
+                posterImage: false,
+                bigPlayButton: true
+            });
         }
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
-        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
-        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
-        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
-        return () => {
-            var _a, _b, _c, _d;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
-            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
-        };
-    }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
+        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
+        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
+        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('loadeddata', handLoadeddata);
+        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('pause', handlePause);
+        (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.on('ended', handleEnded);
+    }, [handleCanplay, handlePlaying, rec.video, handLoadeddata, index, handlePause, handleEnded, videoId]);
     React.useEffect(() => {
         var _a;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -12243,19 +12236,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 right: 0
             } },
             React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
-                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: {
+                React.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
                         width: '100%',
                         height: '100%',
-                        objectFit: 'contain'
+                        objectFit: 'contain',
+                        backgroundColor: 'transparent',
+                        pointerEvents: 'none'
                     } }),
                 React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
-        renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+        renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
             position: 'relative',
             width: '100%',
             height,
             overflow: 'hidden'
-        } },
-        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 }),
+        }, onClick: handleClickVideo() },
+        React.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
+                backgroundColor: 'transparent',
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                pointerEvents: 'none'
+            } }),
         renderPoster,
         React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
 };