pb-sxp-ui 1.0.31 → 1.0.33

package/dist/pb-ui.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('@emotion/css'), require('@ant-design/pro-components'), require('react-dom'), require('hls.js'), require('eventemitter3')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', '@emotion/css', '@ant-design/pro-components', 'react-dom', 'hls.js', 'eventemitter3'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.css, global.proComponents, global.ReactDOM, global.Hls, global.EventEmitter));
-})(this, (function (exports, lodash, uuid$1, pako, React, qs, css, proComponents, ReactDOM, Hls, EventEmitter) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('@emotion/css'), require('@ant-design/pro-components'), require('react-dom'), require('eventemitter3')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', '@emotion/css', '@ant-design/pro-components', 'react-dom', 'eventemitter3'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.css, global.proComponents, global.ReactDOM, global.EventEmitter));
+})(this, (function (exports, lodash, uuid$1, pako, React, qs, css, proComponents, ReactDOM, EventEmitter) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -11992,12 +11992,13 @@ Made in Italy` })));
         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();
         }, []);
@@ -12006,10 +12007,10 @@ Made in Italy` })));
             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: {
@@ -12029,14 +12030,14 @@ Made in Italy` })));
                 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)
@@ -12061,13 +12062,13 @@ Made in Italy` })));
                     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',
@@ -12099,9 +12100,10 @@ Made in Italy` })));
             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;
@@ -12112,43 +12114,35 @@ Made in Italy` })));
             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)
@@ -12234,19 +12228,27 @@ Made in Italy` })));
                     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 })))));
     };