pb-sxp-ui 1.0.101 → 1.0.103

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, marginTop: 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/PictureGroup/index.js

@@ -3,8 +3,9 @@ import { Autoplay, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
 import Picture from './Picture';
 import { useSxpDataSource } from '../../../../core/hooks';
+import { css } from '@emotion/css';
 const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
-    var _a;
+    var _a, _b;
     const ref = useRef();
     const { isActive } = useSwiperSlide();
     const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -28,7 +29,14 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
             setIsLoad(true);
         }
     }, [isLoad]);
-    return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
+    return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
+            clickable: true,
+            bulletActiveClass: 'swipe-item-active-bullet'
+        }, className: css(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
+            '.swiper-pagination': {
+                bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0
+            }
+        }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
         return (React.createElement(SwiperSlide, { key: index },
             React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
     })));

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.d.ts

@@ -7,6 +7,7 @@ export type postConfigType = {
     delay?: number;
     bgWay?: '1' | '2';
     bgColor?: string;
+    marginBottom?: number;
 };
 export interface ISxpPageRenderProps {
     globalConfig?: {

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) => {
@@ -188,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 }));
@@ -214,8 +202,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         viewTime,
         tipText,
         resolver,
-        schema,
-        videoRef.current
+        schema
     ]);
     const onExpandableChange = useCallback((v) => {
         setIsShowMore(v);
@@ -443,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/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;

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

@@ -8,7 +8,7 @@ import { useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 import { setFontForText } from '../../../../core/utils/tool';
 const Prompt = (_a) => {
-    var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle"]);
+    var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle"]);
     const { popupDetailData } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
     const iconSrc = typeof icon === 'string' ? icon : getMediaValueByMode(icon);
@@ -29,7 +29,9 @@ const Prompt = (_a) => {
     return (React.createElement("div", Object.assign({ className: `pb-prompt ${css(Object.assign({}, style))}` }, props),
         React.createElement("div", { className: 'pb-prompt-icon' },
             React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : success, alt: 'success image' })),
-        React.createElement("div", { className: 'pb-prompt-content' }, content),
+        React.createElement("div", { className: 'pb-prompt-content', style: contentStyle, dangerouslySetInnerHTML: {
+                __html: setFontForText(content, contentStyle)
+            } }),
         React.createElement("button", { "aria-label": btnText, className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk, dangerouslySetInnerHTML: {
                 __html: setFontForText(btnText, submitButtonStyle)
             } })));

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

@@ -6,12 +6,14 @@ declare const _default: {
         name: string[];
         mediaType: string;
         child?: undefined;
+        initialValue?: undefined;
     } | {
         type: string;
         label: string;
         name: string[];
         mediaType?: undefined;
         child?: undefined;
+        initialValue?: undefined;
     } | {
         type: string;
         label: string;
@@ -22,6 +24,7 @@ declare const _default: {
         }[];
         name?: undefined;
         mediaType?: undefined;
+        initialValue?: undefined;
     } | {
         type: string;
         label: string;
@@ -38,12 +41,21 @@ declare const _default: {
         })[];
         name?: undefined;
         mediaType?: undefined;
+        initialValue?: undefined;
     } | {
         type: string;
         name: string[];
         label?: undefined;
         mediaType?: undefined;
         child?: undefined;
+        initialValue?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        initialValue: string;
+        mediaType?: undefined;
+        child?: undefined;
     })[];
 }[];
 export default _default;