pb-sxp-ui 1.0.32 → 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);
@@ -569,7 +569,7 @@
                 fromKName = 'imagePage';
             }
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
+                eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', relatedContentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', relatedProductId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
             });
         }, [bffEventReport, isFromHashtag]);
         React.useEffect(() => {
@@ -8142,8 +8142,8 @@
                     fromKPage: location === null || location === void 0 ? void 0 : location.href,
                     contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
                     position: position + '',
-                    contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
-                    ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
+                    relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
+                    relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
                     traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
                 }
             });
@@ -8167,8 +8167,8 @@
                     fromKPage: location === null || location === void 0 ? void 0 : location.href,
                     contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
                     position: position + '',
-                    contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
-                    ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
+                    relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                    relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
                     traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
                     timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
                     eventSubject: 'productView',
@@ -11786,7 +11786,7 @@ Made in Italy` })));
             }
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
-                    contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                    relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
                     position: cacheActiveIndex + '',
                     contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
                     traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
@@ -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 })))));
     };
@@ -12557,7 +12559,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-23 15:48:32
+     * @LastEditTime: 2024-04-18 19:27:03
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -12639,8 +12641,8 @@ Made in Italy` })));
         //         sessionDuration: Math.floor(((new Date() as any) - curTime) / 1000) + '',
         //         eventSubject: 'sessionCompleted',
         //         eventDescription: 'Session completed',
-        //         contentId: item?.video?.itemId,
-        //         productId: item?.product?.itemId,
+        //         relatedContentId: item?.video?.itemId,
+        //         relatedProductId: item?.product?.itemId,
         //         position: item?.position
         //       }
         //     });
@@ -12684,12 +12686,12 @@ Made in Italy` })));
                             sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
                             eventSubject: 'sessionCompleted',
                             eventDescription: 'Session completed',
-                            contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
-                            productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
+                            relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
+                            relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
                             position: activeIndex + '',
                             fromKName,
                             fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                            ctatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
+                            relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
                         }
                     });
                 }
@@ -12823,8 +12825,8 @@ Made in Italy` })));
                     eventInfo: {
                         eventSubject: 'scrollDown',
                         eventDescription: 'User scroll down',
-                        contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
-                        productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                        relatedContentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
+                        relatedProductId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
                         requestId: null
                     }
                 });
@@ -12836,8 +12838,8 @@ Made in Italy` })));
                     eventInfo: {
                         eventSubject: 'scrollUp',
                         eventDescription: 'User scroll up',
-                        contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
-                        productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                        relatedContentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
+                        relatedProductId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
                         requestId: null
                     }
                 });