pb-sxp-ui 1.0.32 → 1.0.33

package/dist/index.css

@@ -1413,12 +1413,6 @@ button.swiper-pagination-bullet {
   -webkit-transform: translate3d(0px, 0px, 0px);
           transform: translate3d(0px, 0px, 0px);
 }
-.video-container video {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
 .modal-bg {
   position: fixed;
   left: 0;

package/dist/index.js

@@ -6,7 +6,6 @@ import qs from 'qs';
 import { css } from '@emotion/css';
 import { BetaSchemaForm } from '@ant-design/pro-components';
 import * as ReactDOM from 'react-dom';
-import Hls from 'hls.js';
 import EventEmitter from 'eventemitter3';
 
 /******************************************************************************
@@ -555,7 +554,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             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]);
     useEffect(() => {
@@ -8128,8 +8127,8 @@ function useEventReport() {
                 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 : ''
             }
         });
@@ -8153,8 +8152,8 @@ function useEventReport() {
                 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',
@@ -11772,7 +11771,7 @@ const WaterFall = (props) => {
         }
         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,
@@ -11978,12 +11977,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const { isActive } = useSwiperSlide();
     const canvasRef = useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = useState('');
+    const videoId = `pb-video-${index}`;
     useEffect(() => {
         if (!videoRef.current)
             return;
-        videoRef.current.muted = muted;
+        videoRef.current.muted(muted);
     }, [muted]);
-    const handleVideoStart = useCallback(() => {
+    const handleEnded = useCallback(() => {
         var _a;
         (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
     }, []);
@@ -11992,10 +11992,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: {
@@ -12015,14 +12015,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             setIsFirstPlay(false);
         }
     }, [bffEventReport, data, index, isFirstPlay]);
-    const handleLoadedMetadata = useCallback(() => {
+    const handleCanplay = useCallback(() => {
         setIsLoadFinish(true);
     }, []);
     const handleClickVideo = 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)
@@ -12047,13 +12047,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 break;
         }
     }, [isLoadFinish]);
-    const onPause = useCallback(() => {
+    const handlePause = 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',
@@ -12085,9 +12085,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 = 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;
@@ -12098,43 +12099,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         setFirstFrameSrc(canvas.toDataURL());
     }, []);
     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]);
     useEffect(() => {
         var _a;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -12220,19 +12213,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 })))));
 };
@@ -12543,7 +12544,7 @@ const Nudge = ({ nudge }) => {
  * @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
  *
  */
@@ -12625,8 +12626,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     //         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
     //       }
     //     });
@@ -12670,12 +12671,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                         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 : ''
                     }
                 });
             }
@@ -12809,8 +12810,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 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
                 }
             });
@@ -12822,8 +12823,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 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
                 }
             });