pb-sxp-ui 1.0.100 → 1.0.102

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;

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

@@ -14,9 +14,37 @@ export default [
                 name: ['props', 'content']
             },
             {
-                type: 'Text',
-                label: '按钮文案',
-                name: ['props', 'btnText']
+                type: 'Group',
+                label: '内容字体',
+                child: [
+                    {
+                        type: 'Select',
+                        name: ['props', 'contentStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
+                    },
+                    {
+                        type: 'Select',
+                        name: ['props', 'contentStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'contentStyle', 'color'],
+                        initialValue: '#000'
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'contentStyle', 'fontSize'],
+                        addonAfter: 'px',
+                        initialValue: 14
+                    }
+                ]
             },
             {
                 type: 'Group',
@@ -62,7 +90,8 @@ export default [
             {
                 label: '提交按钮颜色',
                 type: 'Color',
-                name: ['props', 'submitButtonStyle', 'backgroundColor']
+                name: ['props', 'submitButtonStyle', 'backgroundColor'],
+                initialValue: '#000'
             }
         ]
     }

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

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

package/lib/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/lib/core/components/SxpPageRender/Nudge/index.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const tool_1 = require("../../../../core/utils/tool");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Nudge = ({ nudge }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     return (react_1.default.createElement(react_1.default.Fragment, null, (nudge === null || nudge === void 0 ? void 0 : nudge.isOpen) && (react_1.default.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,
@@ -12,6 +13,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_1.default.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
-        react_1.default.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_1.default.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: (0, tool_1.setFontForText)(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
+            } })))));
 };
 exports.default = Nudge;

package/lib/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/lib/core/components/SxpPageRender/Tagbar.js

@@ -6,7 +6,7 @@ const hooks_1 = require("../../../core/hooks");
 const event_1 = tslib_1.__importStar(require("../../../core/utils/event"));
 const useEventReport_1 = require("../../../core/hooks/useEventReport");
 const SxpDataSourceProvider_1 = require("../../../core/context/SxpDataSourceProvider");
-const Tagbar = ({ tagList = [], setActiveIndex }) => {
+const Tagbar = ({ tagList = [], setActiveIndex, style }) => {
     const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport, selectTag, setSelectTag } = (0, hooks_1.useSxpDataSource)();
     const { backMainFeed } = (0, useEventReport_1.useEventReport)();
     const realTagList = (0, react_1.useMemo)(() => {
@@ -47,7 +47,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
     };
     if (waterFallData || tagList.length <= 0)
         return null;
-    return (react_1.default.createElement("div", { className: 'clc-sxp-tagbar' },
+    return (react_1.default.createElement("div", { className: 'clc-sxp-tagbar', style: style },
         react_1.default.createElement("ul", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
             return (react_1.default.createElement("li", { className: `clc-sxp-tagbar-list-item ${tag === selectTag ? 'clc-sxp-tagbar-list-item-active' : ''}`, key: tag, onClick: handleSelectTag(tag) }, tag));
         }))));

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mountVideoPlayerAtNode = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+exports.mountVideoPlayerAtNode = (() => {
+    if (typeof document === 'undefined')
+        return;
+    const playerContainer = document.createElement('div');
+    const dom = react_dom_1.default.render(react_1.default.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/lib/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/lib/core/components/SxpPageRender/VideoWidget/index.js

@@ -8,7 +8,8 @@ const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const hooks_1 = require("../../../../core/hooks");
 const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
 const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef, videoPlayIcon }) => {
+const VideoPlayer_1 = require("./VideoPlayer");
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
     const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
     const videoStartTime = (0, react_1.useRef)(0);
@@ -18,6 +19,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const canvasRef = (0, react_1.useRef)(null);
     const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
     const [waiting, setWaiting] = (0, react_1.useState)(false);
+    const videoRef = (0, react_1.useRef)();
     const videoId = `pb-cache-video-${index}`;
     const videoEleRef = (0, react_1.useRef)(null);
     const blur = (0, react_1.useMemo)(() => {
@@ -48,56 +50,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]);
     (0, react_1.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 = (0, react_1.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 = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
     const handlePlaying = (0, react_1.useCallback)(() => {
-        if (!videoRef)
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
         setWaiting(false);
         setIsLoadFinish(true);
     }, []);
     const handleStartPlay = (0, react_1.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 = (0, react_1.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 = () => {
@@ -107,155 +110,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 = (0, react_1.useCallback)(() => {
-        if (!videoRef)
+        if (!videoRef.current)
             return;
         handleStartPlay();
         handLoadeddata();
-    }, [videoRef, handLoadeddata, handleStartPlay]);
+    }, [videoRef.current, handLoadeddata, handleStartPlay]);
     const handleClickVideo = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
         setWaiting(true);
     }, []);
     (0, react_1.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 = VideoPlayer_1.mountVideoPlayerAtNode === null || VideoPlayer_1.mountVideoPlayerAtNode === void 0 ? void 0 : (0, VideoPlayer_1.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]);
     (0, react_1.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]);
     (0, react_1.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]);
     (0, react_1.useEffect)(() => {
         if (!isActive)
             return;
@@ -302,11 +310,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             }, src: loading_gif_1.default, alt: 'placeholder image' }));
     }, [waiting, isLoadFinish]);
     (0, react_1.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')();
             }
         };
@@ -314,7 +322,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;
     }