pb-sxp-ui 1.0.100 → 1.0.102

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

@@ -48,6 +48,8 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
                 wordBreak: 'break-word'
             }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
         React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
-        text && isPost && isShow && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
+        text && isPost && isShow && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
+                __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
+            } }))));
 };
 export default memo(ExpandableText);

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

@@ -17,6 +17,8 @@ interface IProps {
             fontSize: number;
             fontStyle: string;
             textAlign: string;
+            ['fontFamily-cn']?: string;
+            ['fontFamily-en']?: string;
         };
     };
 }

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

@@ -1,6 +1,7 @@
+import { setFontForText } from '../../../../core/utils/tool';
 import React from 'react';
 const Nudge = ({ nudge }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     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,
@@ -9,6 +10,8 @@ const Nudge = ({ nudge }) => {
             borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
         } },
         (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (React.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
-        React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
+        React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }), dangerouslySetInnerHTML: {
+                __html: setFontForText(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
+            } })))));
 };
 export default Nudge;

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

@@ -2,6 +2,7 @@ import React from 'react';
 interface IProps {
     tagList?: string[];
     setActiveIndex?: React.Dispatch<React.SetStateAction<number>>;
+    style?: any;
 }
 declare const _default: React.NamedExoticComponent<IProps>;
 export default _default;

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

@@ -3,7 +3,7 @@ import { useSxpDataSource } from '../../../core/hooks';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
 import { useEventReport } from '../../../core/hooks/useEventReport';
 import { DEFAULT_TAG } from '../../../core/context/SxpDataSourceProvider';
-const Tagbar = ({ tagList = [], setActiveIndex }) => {
+const Tagbar = ({ tagList = [], setActiveIndex, style }) => {
     const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport, selectTag, setSelectTag } = useSxpDataSource();
     const { backMainFeed } = useEventReport();
     const realTagList = useMemo(() => {
@@ -44,7 +44,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
     };
     if (waterFallData || tagList.length <= 0)
         return null;
-    return (React.createElement("div", { className: 'clc-sxp-tagbar' },
+    return (React.createElement("div", { className: 'clc-sxp-tagbar', style: style },
         React.createElement("ul", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
             return (React.createElement("li", { className: `clc-sxp-tagbar-list-item ${tag === selectTag ? 'clc-sxp-tagbar-list-item-active' : ''}`, key: tag, onClick: handleSelectTag(tag) }, tag));
         }))));

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

@@ -0,0 +1 @@
+export declare const mountVideoPlayerAtNode: ((domNode: any) => Element | null | undefined) | undefined;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+export const mountVideoPlayerAtNode = (() => {
+    if (typeof document === 'undefined')
+        return;
+    const playerContainer = document.createElement('div');
+    const dom = ReactDOM.render(React.createElement("video", { id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', preload: 'auto', controls: false, muted: true, style: {
+            backgroundColor: 'transparent',
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            pointerEvents: 'none'
+        } }), playerContainer);
+    return (domNode) => {
+        if (!domNode)
+            return;
+        domNode.innerHTML = '';
+        domNode.appendChild(dom);
+        const videoPlayerWrapperNode = document.querySelector(`#player-container-id`);
+        return videoPlayerWrapperNode;
+    };
+})();

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

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

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

@@ -5,7 +5,8 @@ import FormatImage from '../FormatImage';
 import { useSxpDataSource } from '../../../../core/hooks';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
 import loading_gif from './loading.gif';
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef, videoPlayIcon }) => {
+import { mountVideoPlayerAtNode } from './VideoPlayer';
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
     const [isPauseVideo, setIsPauseVideo] = useState(false);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
     const videoStartTime = useRef(0);
@@ -15,6 +16,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const canvasRef = useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = useState('');
     const [waiting, setWaiting] = useState(false);
+    const videoRef = useRef();
     const videoId = `pb-cache-video-${index}`;
     const videoEleRef = useRef(null);
     const blur = useMemo(() => {
@@ -45,56 +47,57 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
     }, [videoPostConfig, isBgColor]);
     useEffect(() => {
-        if (!videoRef)
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
-        videoRef.muted = muted;
-    }, [muted, videoRef]);
+        videoRef.current.muted = muted;
+    }, [muted, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
     const handlePlay = useCallback(() => {
-        if (!videoRef)
+        var _a;
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
-    }, [videoRef]);
+        (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+    }, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
     const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
     const handlePlaying = useCallback(() => {
-        if (!videoRef)
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
         setWaiting(false);
         setIsLoadFinish(true);
     }, []);
     const handleStartPlay = useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (!videoRef)
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
         setIsPauseVideo(false);
         const item = data[index];
-        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);
+        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 === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+            const videoCurrentTime = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : 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: {
                     eventSubject: 'playVideo',
                     eventDescription: 'User played the video',
-                    contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
-                    contentName: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
+                    contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                    contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
                     playType,
                     startTime: videoCurrentTime,
                     videoDuration,
-                    contentTags: JSON.stringify((_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
+                    contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
                     position: index + '',
                     contentFormat: 'video',
-                    traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
+                    traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
                 }
             });
             setIsFirstPlay(false);
         }
-    }, [bffEventReport, data, index, isFirstPlay, videoRef]);
+    }, [bffEventReport, data, index, isFirstPlay, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
     const handLoadeddata = useCallback(() => {
         var _a;
-        if (!videoRef || firstFrameSrc || !blur)
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
             return;
-        videoRef.style.objectFit = 'contain';
+        videoRef.current.style.objectFit = 'contain';
         if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !canvasRef.current || isBgColor)
             return;
         const setFrameImg = () => {
@@ -104,155 +107,160 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             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(videoRef, 0, 0, canvas.width, canvas.height);
+            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
             setFirstFrameSrc(canvas.toDataURL());
         };
         setFrameImg();
         setTimeout(() => {
             setFrameImg();
         }, 500);
-    }, [videoRef, isBgColor, rec, firstFrameSrc, blur]);
+    }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur]);
     const handleLoadedmetadata = useCallback(() => {
-        if (!videoRef)
+        if (!videoRef.current)
             return;
         handleStartPlay();
         handLoadeddata();
-    }, [videoRef, handLoadeddata, handleStartPlay]);
+    }, [videoRef.current, handLoadeddata, handleStartPlay]);
     const handleClickVideo = useCallback((type) => () => {
-        if (!videoRef)
+        var _a, _b, _c, _d, _e;
+        if (!videoRef.current)
             return;
         if (!isLoadFinish)
             return;
-        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
+        const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         switch (type) {
             case 'start':
                 if (!isPause)
                     return;
-                videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+                (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
                 setIsPauseVideo(false);
                 break;
             case 'pause':
                 if (isPause)
                     return;
-                videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
+                (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
                 setIsPauseVideo(true);
                 break;
             default:
                 if (isPause) {
-                    videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+                    (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
                 }
                 else {
-                    videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
+                    (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
                 }
                 setIsPauseVideo(!isPause);
                 break;
         }
-    }, [isLoadFinish, videoRef]);
+    }, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
     const handlePause = useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (!videoRef)
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
         if (activeIndex !== index)
             return;
         const item = data[index];
-        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);
+        const videoDuration = ((_b = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+        const videoCurrentTime = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : 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',
                     eventDescription: 'User finished playing the video',
-                    contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
-                    contentName: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
+                    contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                    contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
                     endTime: videoCurrentTime,
                     videoDuration,
                     playDuration,
-                    contentTags: JSON.stringify((_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
+                    contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
                     position: index + '',
                     contentFormat: 'video',
-                    traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
+                    traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
                 }
             });
         }
-    }, [data, index, bffEventReport, videoRef, activeIndex]);
+    }, [data, index, bffEventReport, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current, activeIndex]);
     const handleWaiting = useCallback(() => {
         setWaiting(true);
     }, []);
     useEffect(() => {
-        if (!isActive || !videoRef)
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (!isActive)
             return;
         const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
         if (!videoSrc)
             return;
+        const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
+        if (!videoPlayerWrapperNode)
+            return;
+        videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
+            return;
         const Hls = window === null || window === void 0 ? void 0 : window.Hls;
         let hls = null;
         if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
             hls = new Hls();
             hls.loadSource(videoSrc);
-            hls.attachMedia(videoRef);
+            hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
             hls.on(Hls.Events.MANIFEST_PARSED, function () {
-                videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+                var _a;
+                (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
             });
         }
         else {
-            videoRef.src = videoSrc;
+            videoRef.current.src = videoSrc;
         }
-        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.setAttribute('x5-playsinline', 'true');
-        videoRef.setAttribute('webkit-playsinline', 'true');
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('play', handleStartPlay);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('waiting', handleWaiting);
+        (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('x5-playsinline', 'true');
+        (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.setAttribute('webkit-playsinline', 'true');
+        (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('loadedmetadata', handleLoadedmetadata);
+        (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
+        (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
+        (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
+        (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
+        (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
+        (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
+        (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
         return () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (hls)
                 hls === null || hls === void 0 ? void 0 : hls.destroy();
             setIsLoadFinish(false);
-            dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('play', handleStartPlay);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
+            (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedmetadata);
+            (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadeddata', handLoadeddata);
+            (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('play', handleStartPlay);
+            (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('playing', handlePlaying);
+            (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('pause', handlePause);
+            (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('ended', handlePlay);
+            (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('canplay', handlePlay);
+            (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('waiting', handleWaiting);
         };
-    }, [isActive, videoId, rec, videoRef]);
+    }, [isActive, videoId, rec]);
     useEffect(() => {
-        if (!videoRef || !isLoadFinish)
+        var _a, _b;
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
             return;
         if (isActive) {
             bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
                 eventName: 'ViewContent'
             });
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+            (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
         }
         else {
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
+            (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
         }
-    }, [isActive, isLoadFinish, videoRef]);
+    }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
     useEffect(() => {
-        if (!isActive || !videoRef)
+        var _a, _b, _c;
+        if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
-        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
+        const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         if (!isPause && openHashtag) {
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
+            (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
         }
         else if (!openHashtag) {
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+            (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
         }
-    }, [openHashtag, isActive, videoRef]);
+    }, [openHashtag, isActive, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
     useEffect(() => {
         if (!isActive)
             return;
@@ -299,11 +307,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             }, src: loading_gif, alt: 'placeholder image' }));
     }, [waiting, isLoadFinish]);
     useEffect(() => {
-        if (!videoRef)
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
         const handleBeforeUnload = () => {
             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) {
+            if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && !isPauseVideo) {
                 handleClickVideo('pause')();
             }
         };
@@ -311,7 +319,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         return () => {
             window.removeEventListener('beforeunload', handleBeforeUnload);
         };
-    }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
+    }, [activeIndex, index, rec, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current, handleClickVideo, isPauseVideo]);
     if (!(rec === null || rec === void 0 ? void 0 : rec.video)) {
         return null;
     }

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

@@ -26,14 +26,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const { schema } = useEditor();
     const [activeIndex, setActiveIndex] = useState(0);
     const viewImageStartTime = useRef(0);
-    const [isInit, setIsInit] = useState(false);
     const [isMuted, setIsMuted] = useState(true);
     const viewTime = useRef();
     const [isLoadMore, setIsLoadMore] = useState(false);
     const [isShowMore, setIsShowMore] = useState(false);
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = useSxpDataSource();
     const { backMainFeed } = useEventReport();
-    const videoRef = useRef();
     const { productView } = useEventReport();
     const isShowFingerTip = useMemo(() => {
         return data.length > 0 && !loading && getFeUserId();
@@ -61,16 +59,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             });
         }
     }, [data.length, bffFbReport, h5EnterLink]);
-    const firstRef = useRef();
-    useEffect(() => {
-        var _a, _b, _c, _d;
-        if (!firstRef.current && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
-            firstRef.current = true;
-            if ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) {
-                videoRef.current.src = (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url;
-            }
-        }
-    }, [videoRef, data]);
     useEffect(() => {
         var _a;
         const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -168,11 +156,14 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
         return h;
     }, [tagList, waterFallData]);
-    const height = useMemo(() => {
+    const minusHeight = 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;
         }
+        return minusHeight;
+    }, []);
+    const height = useMemo(() => {
         return containerHeight - minusHeight - tagHeight;
     }, [globalConfig, containerHeight, tagHeight]);
     const renderLogo = useMemo(() => {
@@ -185,7 +176,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = useCallback((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec === null || rec === void 0 ? void 0 : 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, videoRef: videoRef.current, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
+            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, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
         }
         if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
             return (React.createElement(PictureGroup, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : 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 }));
@@ -211,8 +202,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         viewTime,
         tipText,
         resolver,
-        schema,
-        videoRef.current
+        schema
     ]);
     const onExpandableChange = useCallback((v) => {
         setIsShowMore(v);
@@ -405,7 +395,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
             } })),
         renderLogo,
-        React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex }),
+        React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
+                top: minusHeight
+            } }),
         isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
         React.createElement(Swiper, { style: {
                 marginTop: tagHeight
@@ -438,15 +430,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
                 }, 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({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
-        React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
-            React.createElement("video", { ref: videoRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', preload: 'auto', controls: false, muted: true, style: {
-                    backgroundColor: 'transparent',
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    pointerEvents: 'none'
-                } }),
-            React.createElement("div", { id: 'player-container-id-copy' }))));
+        React.createElement(WaterFall, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
 };
 export default SxpPageRender;

package/es/materials/sxp/popup/AppointForm/settingRender.js

@@ -18,12 +18,12 @@ export default [
                 child: [
                     {
                         type: 'Select',
-                        name: ['testStyle', 'fontFamily-cn'],
+                        name: ['textStyle', 'fontFamily-cn'],
                         bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        name: ['testStyle', 'fontFamily-en'],
+                        name: ['textStyle', 'fontFamily-en'],
                         bottomText: '英文/其他字体'
                     }
                 ]

package/es/materials/sxp/popup/CommodityDetail/index.js

@@ -81,9 +81,10 @@ const CommodityDetail = (_a) => {
     };
     const renderBtn = () => {
         var _a, _b;
-        return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle, dangerouslySetInnerHTML: {
-                __html: setFontForText((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
-            } }))));
+        return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
+            React.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: setFontForText((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
+                } })))));
     };
     const getStyle = useCallback((style) => {
         if (style === null || style === void 0 ? void 0 : style.lineClamp) {

package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -156,9 +156,10 @@ Made in Italy` })));
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
                                 __html: setFontForText((_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                             } }))),
-                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle, dangerouslySetInnerHTML: {
-                        __html: setFontForText((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
-                    } })),
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
+                    React.createElement("span", { dangerouslySetInnerHTML: {
+                            __html: setFontForText((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
+                        } }))),
                 productInfoText({ isPost }))),
         React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
 };

package/es/materials/sxp/popup/Prompt/index.d.ts

@@ -10,6 +10,7 @@ export interface IPromptProps {
     onClose?: () => void;
     onClick?: () => void;
     submitButtonStyle?: CSSProperties;
+    contentStyle?: CSSProperties;
 }
 declare const _default: React.NamedExoticComponent<IPromptProps>;
 export default _default;