pb-sxp-ui 1.0.42 → 1.0.43

package/es/core/components/SxpPageCore/index.js

@@ -16,10 +16,10 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
         return searchParams;
     }, []);
     return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
-        React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, render: ({ rtcList, tagList }) => {
+        React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, render: ({ rtcList }) => {
                 var _a;
                 return (React.createElement(React.Fragment, null,
-                    React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
+                    React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { data: rtcList, resolver: RESOLVER })),
                     React.createElement(Popup, null)));
             } })));
 };

package/es/core/components/SxpPageRender/Nudge/index.js

@@ -1,14 +1,13 @@
 import React from 'react';
 const Nudge = ({ nudge }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
     return (React.createElement(React.Fragment, null, (nudge === null || nudge === void 0 ? void 0 : nudge.isOpen) && (React.createElement("div", { className: 'clc-sxp-bottom-nudge', style: {
-            marginBottom: (_a = nudge === null || nudge === void 0 ? void 0 : nudge.marginBottom) !== null && _a !== void 0 ? _a : 5,
-            width: (_c = (_b = nudge === null || nudge === void 0 ? void 0 : nudge.size) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 212,
-            height: (_e = (_d = nudge === null || nudge === void 0 ? void 0 : nudge.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 38,
+            marginBottom: nudge === null || nudge === void 0 ? void 0 : nudge.marginBottom,
+            width: nudge === null || nudge === void 0 ? void 0 : nudge.size.width,
+            height: nudge === null || nudge === void 0 ? void 0 : nudge.size.height,
             backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
-            borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
+            borderRadius: nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius
         } },
         (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover' } }) : null,
-        React.createElement("p", { style: Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
+        React.createElement("p", { style: Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle) }, nudge === null || nudge === void 0 ? void 0 : nudge.content)))));
 };
 export default Nudge;

package/es/core/components/SxpPageRender/VideoWidget/index.d.ts

@@ -9,6 +9,7 @@ interface IVideoWidgetProps {
     muted: boolean;
     activeIndex?: number;
     videoPostConfig?: postConfigType;
+    videoRef?: any;
 }
 declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
 export default _default;

package/es/core/components/SxpPageRender/VideoWidget/index.js

@@ -4,9 +4,8 @@ import { useIconLink } from '../useIconLink';
 import FormatImage from '../FormatImage';
 import { useSxpDataSource } from '../../../../core/hooks';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
     const [isPauseVideo, setIsPauseVideo] = useState(false);
-    const videoRef = useRef(null);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
     const videoStartTime = useRef(0);
     const [isLoadFinish, setIsLoadFinish] = useState(false);
@@ -14,99 +13,118 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const { isActive } = useSwiperSlide();
     const canvasRef = useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = useState('');
+    const videoId = `pb-cache-video-${index}`;
+    const videoEleRef = useRef(null);
     useEffect(() => {
-        if (!videoRef.current)
+        if (!videoRef)
             return;
-        videoRef.current.muted = muted;
-    }, [muted]);
-    const handleVideoStart = useCallback(() => {
-        var _a;
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-    }, []);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.muted(muted);
+    }, [muted, videoRef]);
+    const handleEnded = useCallback(() => {
+        if (!videoRef)
+            return;
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+    }, [videoRef]);
     const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
     const handlePlaying = useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (!videoRef)
+            return;
         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 && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration())) {
+            videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) || 0;
+            const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
+            const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
             const playType = isFirstPlay ? '0' : '1';
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'playVideo',
                     eventDescription: 'User played the video',
-                    contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                    contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
+                    contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                    contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
                     playType,
                     startTime: videoCurrentTime,
                     videoDuration,
-                    contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                    contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
                     position: index + '',
                     contentFormat: 'video',
-                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                    traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
                 }
             });
             setIsFirstPlay(false);
         }
-    }, [bffEventReport, data, index, isFirstPlay]);
-    const handleLoadedMetadata = useCallback(() => {
+    }, [bffEventReport, data, index, isFirstPlay, videoRef]);
+    const handleLoadedmetadata = useCallback(() => {
+        if (!videoRef)
+            return;
+        if (activeIndex !== index) {
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
+        }
+        setIsLoadFinish(true);
+    }, [activeIndex, index, videoRef]);
+    const handleCanplay = useCallback(() => {
         setIsLoadFinish(true);
     }, []);
     const handleClickVideo = useCallback((type) => () => {
-        var _a, _b, _c, _d, _e;
+        if (!videoRef)
+            return;
         if (!isLoadFinish)
             return;
-        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
         switch (type) {
             case 'start':
                 if (!isPause)
                     return;
-                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
                 setIsPauseVideo(false);
                 break;
             case 'pause':
                 if (isPause)
                     return;
-                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
                 setIsPauseVideo(true);
                 break;
             default:
                 if (isPause) {
-                    (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+                    videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
                 }
                 else {
-                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
+                    videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
                 }
                 setIsPauseVideo(!isPause);
                 break;
         }
-    }, [isLoadFinish]);
-    const onPause = useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    }, [isLoadFinish, videoRef]);
+    const handlePause = useCallback(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (!videoRef)
+            return;
+        if (activeIndex !== index)
+            return;
         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 = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
+        const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+        if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) {
+            const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) - videoStartTime.current).toFixed(2);
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'playOverVideo',
                     eventDescription: 'User finished playing the video',
-                    contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                    contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
+                    contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                    contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
                     endTime: videoCurrentTime,
                     videoDuration,
                     playDuration,
-                    contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                    contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
                     position: index + '',
                     contentFormat: 'video',
-                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                    traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
                 }
             });
         }
-    }, [data, index, bffEventReport]);
+    }, [data, index, bffEventReport, videoRef]);
     const blur = useMemo(() => {
         return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
     }, [videoPostConfig]);
@@ -121,64 +139,79 @@ 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)
+        var _a;
+        if (!videoRef)
             return;
-        const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
-        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;
-        const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
-        canvas.height = targetHeight;
-        canvas.width = targetWidth;
-        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        setFirstFrameSrc(canvas.toDataURL());
-    }, []);
+        const videoDomRef = document.getElementById(`${videoId}_html5_api`);
+        if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
+            return;
+        const setFrameImg = () => {
+            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;
+            const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+            canvas.height = targetHeight;
+            canvas.width = targetWidth;
+            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            setFirstFrameSrc(canvas.toDataURL());
+        };
+        setFrameImg();
+        setTimeout(() => {
+            setFrameImg();
+        }, 500);
+    }, [videoRef]);
     useEffect(() => {
-        var _a, _b, _c, _d;
-        if (!videoRef.current)
+        if (!isActive || !videoRef)
+            return;
+        const videoSrc = rec.video.url;
+        if (!videoSrc)
             return;
         setIsPauseVideo(false);
-        if (!videoRef.current.src) {
-            const videoSrc = rec.video.url;
-            videoRef.current.src = videoSrc;
-            videoRef.current.setAttribute('x5-playsinline', 'true');
-            videoRef.current.setAttribute('webkit-playsinline', '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);
+        const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
+        const dom = document.querySelector('#player-container-id');
+        const dom2 = document.querySelector('#player-container-id-copy');
+        if (!dom && !dom2)
+            return;
+        videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('canplay', handleCanplay);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('pause', handlePause);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('ended', handleEnded);
         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);
+            dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadedmetadata', handleLoadedmetadata);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadeddata', handLoadeddata);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('canplay', handleCanplay);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('playing', handlePlaying);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('pause', handlePause);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('ended', handleEnded);
         };
-    }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
+    }, [isActive, videoId, rec, videoRef]);
     useEffect(() => {
-        var _a;
-        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
+        if (!videoRef || !isLoadFinish)
             return;
         if (isActive) {
-            videoRef.current.play();
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
         }
         else {
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
         }
-    }, [isActive, isLoadFinish]);
+    }, [isActive, isLoadFinish, videoRef]);
     useEffect(() => {
-        var _a, _b, _c;
-        if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
+        if (!isActive || !videoRef)
             return;
-        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
         if (!isPause && openHashtag) {
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
         }
         else if (!openHashtag) {
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
         }
-    }, [openHashtag, isActive]);
+    }, [openHashtag, isActive, videoRef]);
     useEffect(() => {
         if (!isActive)
             return;
@@ -198,9 +231,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
     }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
     useEffect(() => {
+        if (!videoRef)
+            return;
         const handleBeforeUnload = () => {
-            var _a, _b;
-            if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
+            var _a;
+            if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && videoRef && !isPauseVideo) {
                 handleClickVideo('pause')();
             }
         };
@@ -238,19 +273,15 @@ 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: {
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'contain'
-                    } }),
+                React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
                 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("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
         React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
 };

package/es/core/components/SxpPageRender/WaterFall/index.js

@@ -63,7 +63,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,

package/es/core/components/SxpPageRender/index.d.ts

@@ -9,7 +9,6 @@ export type postConfigType = {
 export interface ISxpPageRenderProps {
     globalConfig?: {
         isShowLogo?: boolean;
-        isShowCTA?: boolean;
         logoUrl?: string;
         muteIcon?: string;
         unMuteIcon?: string;
@@ -56,7 +55,6 @@ export interface ISxpPageRenderProps {
     containerWidth?: number;
     tempMap?: Record<string, any>;
     data?: RecItemType[];
-    tagList?: string[];
     resolver: any;
     ctaType?: string;
     _schema?: any;

package/es/core/components/SxpPageRender/index.js

@@ -21,8 +21,7 @@ import './index.less';
 import { useEventReport } from '../../../core/hooks/useEventReport';
 import withBindDataSource from '../../../core/hoc/withBindDataSource';
 import { getFeUserId } from '../../../core/utils/localStore';
-import Tagbar from './Tagbar';
-const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [] }) => {
+const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const { schema } = useEditor();
     const [activeIndex, setActiveIndex] = useState(0);
@@ -34,6 +33,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const [isLoadMore, setIsLoadMore] = useState(false);
     const [isShowMore, setIsShowMore] = useState(false);
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = useSxpDataSource();
+    const [videoRef, setVideoRef] = useState(null);
+    const playerRef = useRef();
     const { productView } = useEventReport();
     const isShowFingerTip = useMemo(() => {
         return data.length > 0 && !loading && getFeUserId();
@@ -69,6 +70,25 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         viewTime.current = new Date();
         refreshFeSessionId();
     };
+    const firstRef = useRef();
+    useEffect(() => {
+        if (!firstRef.current && !videoRef) {
+            firstRef.current = true;
+            const player = TCPlayer('player-container-id', {
+                licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
+                controls: false,
+                autoplay: false,
+                loop: false,
+                muted: true,
+                preload: 'auto',
+                posterImage: false,
+                bigPlayButton: true
+            });
+            player === null || player === void 0 ? void 0 : player.ready(() => {
+                setVideoRef(player);
+            });
+        }
+    }, [videoRef]);
     useEffect(() => {
         if (!isInit)
             handleH5EnterLink();
@@ -121,12 +141,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 : ''
                     }
                 });
             }
@@ -142,15 +162,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         };
     }, [activeIndex, bffEventReport, curTime, data, handleH5EnterLink, popupDetailData, isFromHashtag, tempMap]);
     const height = useMemo(() => {
-        let minusHeight = 0;
-        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
-            minusHeight += 45;
-        }
-        if (tagList.length > 0) {
-            minusHeight += 45;
-        }
-        return containerHeight - minusHeight;
-    }, [globalConfig, containerHeight, tagList]);
+        return (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo) ? containerHeight - 45 : containerHeight;
+    }, [globalConfig, containerHeight]);
     const renderLogo = useMemo(() => {
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
             return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
@@ -161,7 +174,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = useCallback((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
+            return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
         }
         if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
             return (React.createElement(PictureGroup, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -176,7 +189,19 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             });
         }
         return null;
-    }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
+    }, [
+        containerWidth,
+        data,
+        height,
+        isMuted,
+        activeIndex,
+        globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost,
+        viewTime,
+        tipText,
+        resolver,
+        schema,
+        videoRef
+    ]);
     const onExpandableChange = useCallback((v) => {
         setIsShowMore(v);
     }, []);
@@ -198,8 +223,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
                 React.createElement("div", { className: 'clc-sxp-bottom' },
                     React.createElement(Nudge, { nudge: nudge }),
-                    (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
+                    React.createElement("div", { className: 'clc-sxp-bottom-card' },
+                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
                     React.createElement("div", null,
                         React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
                         React.createElement(Hashtag, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
@@ -266,8 +291,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
                 }
             });
@@ -278,8 +303,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
                 }
             });
@@ -356,9 +381,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
             } })),
         renderLogo,
-        React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex }),
         isShowFingerTip ? React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
-        React.createElement(Swiper, { ref: swiperRef, onActiveIndexChange: (swiper) => {
+        React.createElement(Swiper, { ref: swiperRef, onSlideChange: () => {
+                swiperRef.current.swiper.allowTouchMove = false;
+                setTimeout(() => {
+                    swiperRef.current.swiper.allowTouchMove = true;
+                }, 500);
+            }, onActiveIndexChange: (swiper) => {
                 setActiveIndex(swiper.activeIndex);
                 if (openHashtag)
                     return;
@@ -382,6 +411,15 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     zIndex: 999
                 }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
             renderView),
-        React.createElement(WaterFall, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props))));
+        React.createElement(WaterFall, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props)),
+        React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
+            React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
+                    backgroundColor: 'transparent',
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    pointerEvents: 'none'
+                } }),
+            React.createElement("div", { id: 'player-container-id-copy' }))));
 };
 export default SxpPageRender;

package/es/core/context/SxpDataSourceProvider.d.ts

@@ -60,15 +60,14 @@ export interface ISxpDataSourceContext {
     hashTagSize?: number;
     loadingImage?: string;
     isOpenHashTag?: boolean;
-    tagList: string[];
-    setLoading?: React.Dispatch<React.SetStateAction<boolean>>;
+    videoRef?: any;
+    setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
 }
 export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
 export interface SxpDataSourceProviderProps {
     dataSources?: DataSource[];
     render: (data: {
         rtcList: RecItemType[];
-        tagList: string[];
         submitForm: (body: {
             attributes: Array<{
                 name: string;