pb-sxp-ui 1.0.41 → 1.0.43

package/dist/pb-ui.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('@emotion/css'), require('@ant-design/pro-components'), require('react-dom'), require('eventemitter3'), require('hls.js')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', '@emotion/css', '@ant-design/pro-components', 'react-dom', 'eventemitter3', 'hls.js'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.css, global.proComponents, global.ReactDOM, global.EventEmitter, global.Hls));
-})(this, (function (exports, lodash, uuid$1, pako, React, qs, css, proComponents, ReactDOM, EventEmitter, Hls) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('@emotion/css'), require('@ant-design/pro-components'), require('react-dom'), require('eventemitter3')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', '@emotion/css', '@ant-design/pro-components', 'react-dom', 'eventemitter3'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.css, global.proComponents, global.ReactDOM, global.EventEmitter));
+})(this, (function (exports, lodash, uuid$1, pako, React, qs, css, proComponents, ReactDOM, EventEmitter) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -442,6 +442,7 @@
         const [cacheRtcList, setCacheRtcList] = React.useState([]);
         const [cacheActiveIndex, setCacheActiveIndex] = React.useState(0);
         const [isFromHashtag, setIsFromHashtag] = React.useState(false);
+        const [videoRef, setVideoRef] = React.useState(null);
         React.useEffect(() => {
             setOpenHashtag(isOpenHashTag);
         }, [isOpenHashTag]);
@@ -569,7 +570,7 @@
                 fromKName = 'imagePage';
             }
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
+                eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', relatedContentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', relatedProductId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
             });
         }, [bffEventReport, isFromHashtag]);
         React.useEffect(() => {
@@ -630,7 +631,9 @@
                 appDomain,
                 hashTagSize,
                 loadingImage: loadingImage !== null && loadingImage !== void 0 ? loadingImage : defaultLoadingImage,
-                isOpenHashTag
+                isOpenHashTag,
+                videoRef,
+                setVideoRef
             } }, render({ rtcList, mutateLike: bffMutateLike, mutateUnlike: bffMutateUnlike, submitForm: bffSubmitForm })));
     };
     var SxpDataSourceProvider$1 = React.memo(SxpDataSourceProvider);
@@ -856,7 +859,7 @@
             React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
     });
 
-    var index$2 = /*#__PURE__*/Object.freeze({
+    var index$1 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         EditorCore: EditorCore
     });
@@ -8142,8 +8145,8 @@
                     fromKPage: location === null || location === void 0 ? void 0 : location.href,
                     contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
                     position: position + '',
-                    contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
-                    ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
+                    relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
+                    relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
                     traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
                 }
             });
@@ -8167,8 +8170,8 @@
                     fromKPage: location === null || location === void 0 ? void 0 : location.href,
                     contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
                     position: position + '',
-                    contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
-                    ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
+                    relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                    relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
                     traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
                     timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
                     eventSubject: 'productView',
@@ -8331,7 +8334,7 @@
     var FormatImage$1 = React.memo(FormatImage);
 
     const CommodityDetail$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _b, _c, _d, _e, _f, _g, _h, _j;
         var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
         const { sxpParameter } = useSxpDataSource();
         const { popupDetailData, bffEventReport, isPreview, waterFallData } = useSxpDataSource();
@@ -8372,7 +8375,7 @@
                 return '$7,000';
             }
         }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-        const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
+        const width = isPreview ? 375 : window.innerWidth;
         const renderContent = ({ isPost }) => {
             var _a, _b, _c;
             return (React.createElement("div", null,
@@ -8392,7 +8395,7 @@
         };
         return (React.createElement("div", { className: 'pb-commondity' },
             React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
-                product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
+                product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
                         clickable: true,
                         bulletActiveClass: 'swipe-item-active-bullet',
                         clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -8400,7 +8403,7 @@
                             : 'commondityDetail-swiper-clickable-center'
                     }, loop: true, autoplay: {
                         delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                    } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
+                    } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
                     return (React.createElement(SwiperSlide, { key: src },
                         React.createElement("div", { style: {
                                 overflow: 'hidden',
@@ -8409,7 +8412,7 @@
                             } },
                             React.createElement(FormatImage$1, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
                 }))),
-                !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css.css({
+                !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css.css({
                         position: 'relative',
                         height: 0,
                         width: '100%',
@@ -8422,7 +8425,7 @@
                             top: 0,
                             objectFit: 'cover',
                             width: '100%'
-                        }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
+                        }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
                 React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
             renderBtn(),
             React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) },
@@ -8782,7 +8785,7 @@
     ];
 
     const CommodityDetailDiroNew$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
         React.useState(true);
         const { sxpParameter } = useSxpDataSource();
@@ -8830,7 +8833,7 @@
                 return '£102,300.00';
             }
         }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-        const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
+        const width = isPreview ? 375 : window.innerWidth;
         const productInfoText = ({ isPost }) => {
             return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
                 React.createElement(ExpandableText$1, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
@@ -8839,7 +8842,7 @@ Made in Italy` })));
         };
         return (React.createElement("div", { className: 'pb-commondityDiroNew' },
             React.createElement("div", Object.assign({ ref: scrollRef, className: css.css(Object.assign({}, style)) }, props),
-                product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
+                product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
                         clickable: true,
                         bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
                         clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -8847,7 +8850,7 @@ Made in Italy` })));
                             : 'commondityDiroNew-swiper-clickable-center'
                     }, loop: true, autoplay: {
                         delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                    } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
+                    } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
                     return (React.createElement(SwiperSlide, { key: src },
                         React.createElement("div", { style: {
                                 overflow: 'hidden',
@@ -8856,7 +8859,7 @@ Made in Italy` })));
                             } },
                             React.createElement(FormatImage$1, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
                 }))),
-                !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css.css({
+                !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css.css({
                         position: 'relative',
                         height: 0,
                         width: '100%',
@@ -8869,16 +8872,16 @@ Made in Italy` })));
                             top: 0,
                             objectFit: 'cover',
                             width: '100%'
-                        }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
+                        }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
                 React.createElement("div", { className: 'pb-commondityDiroNew-content' },
                     React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
-                            React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours Bag'),
+                            React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
-                            React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
-                    (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now')),
+                            React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
+                    (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
                     productInfoText({ isPost }))),
             React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
     };
@@ -11786,7 +11789,7 @@ Made in Italy` })));
             }
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
-                    contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                    relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
                     position: cacheActiveIndex + '',
                     contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
                     traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
@@ -11919,14 +11922,14 @@ Made in Italy` })));
         Prompt: Prompt
     });
 
-    const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-    const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+    const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+    const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
     const LikeButton = (_a) => {
         var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
         const { mutateLike, mutateUnlike, bffEventReport } = useSxpDataSource();
         const [state, setState] = React.useState(active);
-        const likeIcon = useIconLink(defaultLikeIconPath$1);
-        const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
+        const likeIcon = useIconLink(defaultLikeIconPath);
+        const unlikeIcon = useIconLink(defaultUnLikeIconPath);
         const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
             var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
             if (state) {
@@ -11982,9 +11985,8 @@ Made in Italy` })));
         SXP_EVENT_TYPE["PAGE_DID_HIDE"] = "pageDidHide";
     })(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
 
-    const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
+    const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
         const [isPauseVideo, setIsPauseVideo] = React.useState(false);
-        const videoRef = React.useRef(null);
         const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
         const videoStartTime = React.useRef(0);
         const [isLoadFinish, setIsLoadFinish] = React.useState(false);
@@ -11992,99 +11994,118 @@ Made in Italy` })));
         const { isActive } = useSwiperSlide();
         const canvasRef = React.useRef(null);
         const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
+        const videoId = `pb-cache-video-${index}`;
+        const videoEleRef = React.useRef(null);
         React.useEffect(() => {
-            if (!videoRef.current)
+            if (!videoRef)
                 return;
-            videoRef.current.muted = muted;
-        }, [muted]);
-        const handleVideoStart = React.useCallback(() => {
-            var _a;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-        }, []);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.muted(muted);
+        }, [muted, videoRef]);
+        const handleEnded = React.useCallback(() => {
+            if (!videoRef)
+                return;
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+        }, [videoRef]);
         const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
         const handlePlaying = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (!videoRef)
+                return;
             setIsPauseVideo(false);
             const item = data[index];
-            if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
-                videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
-                const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-                const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
+            if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration())) {
+                videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) || 0;
+                const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
+                const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
                 const playType = isFirstPlay ? '0' : '1';
                 bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                     eventInfo: {
                         eventSubject: 'playVideo',
                         eventDescription: 'User played the video',
-                        contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                        contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
+                        contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                        contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
                         playType,
                         startTime: videoCurrentTime,
                         videoDuration,
-                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                        contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
                         position: index + '',
                         contentFormat: 'video',
-                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                        traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
                     }
                 });
                 setIsFirstPlay(false);
             }
-        }, [bffEventReport, data, index, isFirstPlay]);
-        const handleLoadedMetadata = React.useCallback(() => {
+        }, [bffEventReport, data, index, isFirstPlay, videoRef]);
+        const handleLoadedmetadata = React.useCallback(() => {
+            if (!videoRef)
+                return;
+            if (activeIndex !== index) {
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
+            }
+            setIsLoadFinish(true);
+        }, [activeIndex, index, videoRef]);
+        const handleCanplay = React.useCallback(() => {
             setIsLoadFinish(true);
         }, []);
         const handleClickVideo = React.useCallback((type) => () => {
-            var _a, _b, _c, _d, _e;
+            if (!videoRef)
+                return;
             if (!isLoadFinish)
                 return;
-            const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+            const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
             switch (type) {
                 case 'start':
                     if (!isPause)
                         return;
-                    (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
+                    videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
                     setIsPauseVideo(false);
                     break;
                 case 'pause':
                     if (isPause)
                         return;
-                    (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+                    videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
                     setIsPauseVideo(true);
                     break;
                 default:
                     if (isPause) {
-                        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+                        videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
                     }
                     else {
-                        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
+                        videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
                     }
                     setIsPauseVideo(!isPause);
                     break;
             }
-        }, [isLoadFinish]);
-        const onPause = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        }, [isLoadFinish, videoRef]);
+        const handlePause = React.useCallback(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (!videoRef)
+                return;
+            if (activeIndex !== index)
+                return;
             const item = data[index];
-            const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-            const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-            if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
-                const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
+            const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
+            const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+            if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) {
+                const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) - videoStartTime.current).toFixed(2);
                 bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                     eventInfo: {
                         eventSubject: 'playOverVideo',
                         eventDescription: 'User finished playing the video',
-                        contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                        contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
+                        contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                        contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
                         endTime: videoCurrentTime,
                         videoDuration,
                         playDuration,
-                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                        contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
                         position: index + '',
                         contentFormat: 'video',
-                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                        traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
                     }
                 });
             }
-        }, [data, index, bffEventReport]);
+        }, [data, index, bffEventReport, videoRef]);
         const blur = React.useMemo(() => {
             return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
         }, [videoPostConfig]);
@@ -12099,82 +12120,82 @@ Made in Italy` })));
             return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
         }, [firstFrameSrc, rec]);
         const handLoadeddata = React.useCallback(() => {
-            if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
+            var _a;
+            if (!videoRef)
                 return;
-            const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
-            const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
-            const ctx = canvas.getContext('2d');
-            const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
-            const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
-            canvas.height = targetHeight;
-            canvas.width = targetWidth;
-            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-            setFirstFrameSrc(canvas.toDataURL());
-        }, []);
+            const videoDomRef = document.getElementById(`${videoId}_html5_api`);
+            if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
+                return;
+            const setFrameImg = () => {
+                const video = videoDomRef;
+                const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
+                const ctx = canvas.getContext('2d');
+                const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
+                const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+                canvas.height = targetHeight;
+                canvas.width = targetWidth;
+                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                setFirstFrameSrc(canvas.toDataURL());
+            };
+            setFrameImg();
+            setTimeout(() => {
+                setFrameImg();
+            }, 500);
+        }, [videoRef]);
         React.useEffect(() => {
-            var _a, _b, _c, _d;
-            if (!videoRef.current)
+            if (!isActive || !videoRef)
+                return;
+            const videoSrc = rec.video.url;
+            if (!videoSrc)
                 return;
             setIsPauseVideo(false);
-            if (!videoRef.current.src) {
-                const videoSrc = rec.video.url;
-                // if (videoSrc.includes('.m3u8')) {
-                //   if (Hls.isSupported()) {
-                //     const hls = new Hls();
-                //     hls.loadSource(videoSrc);
-                //     hls.attachMedia(videoRef.current);
-                //     hls.on(Hls.Events.MANIFEST_PARSED, function () {
-                //       videoRef?.current?.play();
-                //     });
-                //   } else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
-                //     videoRef.current.src = videoSrc;
-                //   } else {
-                //     videoRef.current.src = videoSrc;
-                //   }
-                // } else {
-                videoRef.current.src = videoSrc;
-                // }
-                videoRef.current.setAttribute('x5-playsinline', 'true');
-                videoRef.current.setAttribute('webkit-playsinline', 'true');
-            }
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
-            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
+            const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
+            const dom = document.querySelector('#player-container-id');
+            const dom2 = document.querySelector('#player-container-id-copy');
+            if (!dom && !dom2)
+                return;
+            videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('canplay', handleCanplay);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('pause', handlePause);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('ended', handleEnded);
             return () => {
-                var _a, _b, _c, _d;
-                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
-                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
-                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
-                (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
+                dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadedmetadata', handleLoadedmetadata);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadeddata', handLoadeddata);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('canplay', handleCanplay);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('playing', handlePlaying);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('pause', handlePause);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('ended', handleEnded);
             };
-        }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
+        }, [isActive, videoId, rec, videoRef]);
         React.useEffect(() => {
-            var _a;
-            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
+            if (!videoRef || !isLoadFinish)
                 return;
             if (isActive) {
-                videoRef.current.play();
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
             }
             else {
-                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
             }
-        }, [isActive, isLoadFinish]);
+        }, [isActive, isLoadFinish, videoRef]);
         /*
         打开/关闭hashtag暂停/播放视频
         */
         React.useEffect(() => {
-            var _a, _b, _c;
-            if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
+            if (!isActive || !videoRef)
                 return;
-            const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+            const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
             if (!isPause && openHashtag) {
-                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
             }
             else if (!openHashtag) {
-                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
             }
-        }, [openHashtag, isActive]);
+        }, [openHashtag, isActive, videoRef]);
         React.useEffect(() => {
             if (!isActive)
                 return;
@@ -12194,9 +12215,11 @@ Made in Italy` })));
             return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
         }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
         React.useEffect(() => {
+            if (!videoRef)
+                return;
             const handleBeforeUnload = () => {
-                var _a, _b;
-                if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
+                var _a;
+                if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && videoRef && !isPauseVideo) {
                     handleClickVideo('pause')();
                 }
             };
@@ -12234,23 +12257,19 @@ Made in Italy` })));
                     right: 0
                 } },
                 React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
-                    React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
-                            width: '100%',
-                            height: '100%',
-                            objectFit: 'contain'
-                        } }),
+                    React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
                     React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
-            renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+            renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
                 position: 'relative',
                 width: '100%',
                 height,
                 overflow: 'hidden'
-            } },
-            React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
+            }, onClick: handleClickVideo() },
+            React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
             renderPoster,
             React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
     };
-    var VideoWidget$3 = React.memo(VideoWidget$2);
+    var VideoWidget$1 = React.memo(VideoWidget);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -12350,7 +12369,7 @@ Made in Italy` })));
      * @LastEditTime: 2024-04-18 19:56:22
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
      */
-    const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
+    const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
         var _a;
         const ref = React.useRef();
         const { isActive } = useSwiperSlide();
@@ -12379,7 +12398,7 @@ Made in Italy` })));
                 React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
         })));
     };
-    var PictureGroup$3 = React.memo(PictureGroup$2);
+    var PictureGroup$1 = React.memo(PictureGroup);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -12558,7 +12577,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-23 15:48:32
+     * @LastEditTime: 2024-04-29 15:48:42
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -12574,6 +12593,8 @@ Made in Italy` })));
         const [isLoadMore, setIsLoadMore] = React.useState(false);
         const [isShowMore, setIsShowMore] = React.useState(false);
         const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = useSxpDataSource();
+        const [videoRef, setVideoRef] = React.useState(null);
+        const playerRef = React.useRef();
         const { productView } = useEventReport();
         const isShowFingerTip = React.useMemo(() => {
             return data.length > 0 && !loading && getFeUserId();
@@ -12611,6 +12632,25 @@ Made in Italy` })));
             viewTime.current = new Date();
             refreshFeSessionId();
         };
+        const firstRef = React.useRef();
+        React.useEffect(() => {
+            if (!firstRef.current && !videoRef) {
+                firstRef.current = true;
+                const player = TCPlayer('player-container-id', {
+                    licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+                    controls: false,
+                    autoplay: false,
+                    loop: false,
+                    muted: true,
+                    preload: 'auto',
+                    posterImage: false,
+                    bigPlayButton: true
+                });
+                player === null || player === void 0 ? void 0 : player.ready(() => {
+                    setVideoRef(player);
+                });
+            }
+        }, [videoRef]);
         React.useEffect(() => {
             if (!isInit)
                 handleH5EnterLink();
@@ -12640,8 +12680,8 @@ Made in Italy` })));
         //         sessionDuration: Math.floor(((new Date() as any) - curTime) / 1000) + '',
         //         eventSubject: 'sessionCompleted',
         //         eventDescription: 'Session completed',
-        //         contentId: item?.video?.itemId,
-        //         productId: item?.product?.itemId,
+        //         relatedContentId: item?.video?.itemId,
+        //         relatedProductId: item?.product?.itemId,
         //         position: item?.position
         //       }
         //     });
@@ -12685,12 +12725,12 @@ Made in Italy` })));
                             sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
                             eventSubject: 'sessionCompleted',
                             eventDescription: 'Session completed',
-                            contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
-                            productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
+                            relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
+                            relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
                             position: activeIndex + '',
                             fromKName,
                             fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                            ctatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
+                            relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
                         }
                     });
                 }
@@ -12719,10 +12759,10 @@ Made in Italy` })));
         const renderContent = React.useCallback((rec, index) => {
             var _a, _b, _c, _d;
             if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-                return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
+                return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
             }
             if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
-                return (React.createElement(PictureGroup$3, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+                return (React.createElement(PictureGroup$1, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
             }
             if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
                 return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
@@ -12734,7 +12774,19 @@ Made in Italy` })));
                 });
             }
             return null;
-        }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
+        }, [
+            containerWidth,
+            data,
+            height,
+            isMuted,
+            activeIndex,
+            globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost,
+            viewTime,
+            tipText,
+            resolver,
+            schema,
+            videoRef
+        ]);
         const onExpandableChange = React.useCallback((v) => {
             setIsShowMore(v);
         }, []);
@@ -12824,8 +12876,8 @@ Made in Italy` })));
                     eventInfo: {
                         eventSubject: 'scrollDown',
                         eventDescription: 'User scroll down',
-                        contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
-                        productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                        relatedContentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
+                        relatedProductId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
                         requestId: null
                     }
                 });
@@ -12837,8 +12889,8 @@ Made in Italy` })));
                     eventInfo: {
                         eventSubject: 'scrollUp',
                         eventDescription: 'User scroll up',
-                        contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
-                        productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                        relatedContentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
+                        relatedProductId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
                         requestId: null
                     }
                 });
@@ -12919,7 +12971,12 @@ Made in Italy` })));
                 } })),
             renderLogo,
             isShowFingerTip ? React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
-            React.createElement(Swiper, { ref: swiperRef, onActiveIndexChange: (swiper) => {
+            React.createElement(Swiper, { ref: swiperRef, onSlideChange: () => {
+                    swiperRef.current.swiper.allowTouchMove = false;
+                    setTimeout(() => {
+                        swiperRef.current.swiper.allowTouchMove = true;
+                    }, 500);
+                }, onActiveIndexChange: (swiper) => {
                     setActiveIndex(swiper.activeIndex);
                     if (openHashtag)
                         return;
@@ -12936,6 +12993,9 @@ Made in Italy` })));
                         }
                     }
                 }, 
+                // style={{
+                //   pointerEvents: canSwiper ? 'auto' : 'none'
+                // }}
                 // onReachEnd={() => {
                 //   // 由hashtaglist跳转过来时不执行下面的方法
                 //   if (waterFallData) return;
@@ -12958,353 +13018,17 @@ Made in Italy` })));
                         zIndex: 999
                     }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
                 renderView),
-            React.createElement(WaterFall$1, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props))));
-    };
-
-    const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
-        return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
-            return (React.createElement(SwiperSlide, { key: url },
-                React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
-        })));
-    };
-    var PictureGroup$1 = React.memo(PictureGroup);
-
-    const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
-        const [isPauseVideo, setIsPauseVideo] = React.useState(false);
-        const videoRef = React.useRef(null);
-        const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
-        const videoStartTime = React.useRef(0);
-        const [isLoadFinish, setIsLoadFinish] = React.useState(false);
-        const [isFirstPlay, setIsFirstPlay] = React.useState(true);
-        const canvasRef = React.useRef(null);
-        const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
-        React.useEffect(() => {
-            if (!videoRef.current)
-                return;
-            videoRef.current.muted = muted;
-        }, [muted]);
-        const handleVideoStart = React.useCallback(() => {
-            var _a;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-        }, []);
-        const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
-        const handlePlaying = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            setIsPauseVideo(false);
-            const item = data[index];
-            if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
-                videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
-                const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-                const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-                const playType = isFirstPlay ? '0' : '1';
-                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                    eventInfo: {
-                        eventSubject: 'playVideo',
-                        eventDescription: 'User played the video',
-                        contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                        contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                        playType,
-                        startTime: videoCurrentTime,
-                        videoDuration,
-                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                        position: index + '',
-                        contentFormat: 'video',
-                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
-                    }
-                });
-                setIsFirstPlay(false);
-            }
-        }, [bffEventReport, data, index, isFirstPlay]);
-        const handleLoadedMetadata = React.useCallback(() => {
-            setIsLoadFinish(true);
-        }, []);
-        const handleClickVideo = React.useCallback((type) => () => {
-            var _a, _b, _c, _d, _e;
-            if (!isLoadFinish)
-                return;
-            const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
-            switch (type) {
-                case 'start':
-                    if (!isPause)
-                        return;
-                    (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
-                    setIsPauseVideo(false);
-                    break;
-                case 'pause':
-                    if (isPause)
-                        return;
-                    (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
-                    setIsPauseVideo(true);
-                    break;
-                default:
-                    if (isPause) {
-                        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
-                    }
-                    else {
-                        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
-                    }
-                    setIsPauseVideo(!isPause);
-                    break;
-            }
-        }, [isLoadFinish]);
-        const onPause = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            const item = data[index];
-            const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-            const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-            if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
-                const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
-                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                    eventInfo: {
-                        eventSubject: 'playOverVideo',
-                        eventDescription: 'User finished playing the video',
-                        contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                        contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                        endTime: videoCurrentTime,
-                        videoDuration,
-                        playDuration,
-                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                        position: index + '',
-                        contentFormat: 'video',
-                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
-                    }
-                });
-            }
-        }, [data, index, bffEventReport]);
-        const blur = React.useMemo(() => {
-            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
-        }, [videoPostConfig]);
-        const translateY = React.useMemo(() => {
-            var _a;
-            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
-                ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
-                : 'translateY(-50%)';
-        }, [videoPostConfig]);
-        const blurBgSrc = React.useMemo(() => {
-            var _a;
-            return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
-        }, [firstFrameSrc, rec]);
-        const handLoadeddata = React.useCallback(() => {
-            if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
-                return;
-            const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
-            const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
-            const ctx = canvas.getContext('2d');
-            const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
-            const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
-            canvas.height = targetHeight;
-            canvas.width = targetWidth;
-            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-            setFirstFrameSrc(canvas.toDataURL());
-        }, []);
-        React.useEffect(() => {
-            var _a, _b, _c, _d;
-            if (!videoRef.current)
-                return;
-            setIsPauseVideo(false);
-            if (!videoRef.current.src) {
-                const videoSrc = rec.video.url;
-                if (videoSrc.includes('.m3u8')) {
-                    if (Hls.isSupported()) {
-                        const hls = new Hls();
-                        hls.loadSource(videoSrc);
-                        hls.attachMedia(videoRef.current);
-                    }
-                    else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
-                        videoRef.current.src = videoSrc;
-                    }
-                    else {
-                        videoRef.current.src = videoSrc;
-                    }
-                }
-                else {
-                    videoRef.current.src = videoSrc;
-                }
-                videoRef.current.setAttribute('x5-playsinline', 'true');
-                videoRef.current.setAttribute('webkit-playsinline', 'true');
-            }
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
-            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
-            return () => {
-                var _a, _b, _c, _d;
-                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
-                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
-                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
-                (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
-            };
-        }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
-        const renderPoster = React.useMemo(() => {
-            if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
-                return null;
-            }
-            return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
-        }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
-        React.useEffect(() => {
-            const handleBeforeUnload = () => {
-                var _a, _b;
-                if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
-                    handleClickVideo('pause')();
-                }
-            };
-            window.addEventListener('beforeunload', handleBeforeUnload);
-            return () => {
-                window.removeEventListener('beforeunload', handleBeforeUnload);
-            };
-        }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
-        const blurStyle = React.useMemo(() => {
-            return blur
-                ? {
-                    filter: 'blur(10px)',
-                    transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
-                }
-                : {};
-        }, [blur]);
-        if (!rec.video) {
-            return null;
-        }
-        return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
-                position: 'relative',
-                width,
-                height,
-                overflow: 'hidden'
-            } },
-            React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height,
-                    width, objectFit: 'cover' }, blurStyle) }),
-            React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
-            React.createElement("div", { style: {
-                    position: 'absolute',
-                    width,
-                    height,
-                    top: '50%',
-                    transform: translateY,
-                    left: 0,
-                    right: 0
-                } },
-                React.createElement("div", { style: { position: 'relative', width, height: '100%' } },
-                    React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
-                            width: '100%',
-                            height,
-                            objectFit: 'contain'
-                        } }),
-                    React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
-            renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
-                position: 'relative',
-                width,
-                height,
-                overflow: 'hidden'
-            } },
-            React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
-            renderPoster,
-            React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
-    };
-    var VideoWidget$1 = React.memo(VideoWidget);
-
-    const RESOLVER$1 = {};
-    Object.values(_materials_).forEach((v) => {
-        RESOLVER$1[v.extend.type] = v;
-    });
-    const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-    const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
-    const DiyPortalPreview = ({ data, globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain }) => {
-        const height = React.useMemo(() => {
-            return (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo) ? containerHeight - 45 : containerHeight;
-        }, [globalConfig, containerHeight]);
-        const renderContent = (rec, index) => {
-            var _a, _b, _c, _d;
-            if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-                return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
-            }
-            if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
-                return (React.createElement(PictureGroup$1, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
-            }
-            if (rec.product) {
-                if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                    return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
-                        var _a, _b, _c, _d, _e, _f, _g, _h;
-                        const t = RESOLVER$1[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
-                        const Component = withBindDataSource(t);
-                        const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
-                        return (React.createElement(Component, Object.assign({ key: `${index}${idx}`, textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle), bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {}, 
-                            // schema={schema}
-                            id: value === null || value === void 0 ? void 0 : value.id, 
-                            // viewTime={viewTime.current}
-                            rec: rec, isPost: true, tipText: tipText, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.style), { width: containerWidth, height, overflow: 'auto' }), index: index })));
-                    });
-                }
-            }
-        };
-        const renderLogo = React.useMemo(() => {
-            if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
-                return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
-                    React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
-            }
-            return null;
-        }, [globalConfig]);
-        const renderBottom = (rec, index) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            if (rec.video) {
-                return (React.createElement(React.Fragment, null,
-                    ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
-                    React.createElement("div", { className: 'clc-sxp-bottom' },
-                        React.createElement(Nudge, { nudge: nudge }),
-                        React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                            React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })),
-                        React.createElement("div", null,
-                            React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }) })),
-                        React.createElement(Hashtag$1, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
-            }
-            return null;
-        };
-        const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
-        const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
-        const renderLikeButton = (rec, index) => {
-            var _a, _b, _c, _d;
-            if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
-                return;
-            let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
-            if (top < 40) {
-                top += 40;
-            }
-            if (rec.video) {
-                return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
-                        top,
-                        right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0
-                    } }));
-            }
-            return null;
-        };
-        const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
-        const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
-        const renderView = (rec, index) => {
-            var _a, _b, _c, _d;
-            return (React.createElement("div", { style: { position: 'relative' } },
-                renderLogo,
-                React.createElement(ToggleButton$1, { style: {
-                        position: 'absolute',
-                        right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
-                        visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
-                        bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
-                        zIndex: 999
-                    }, defaultValue: true, 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 }),
-                renderContent(rec, index),
-                renderBottom(rec, index),
-                renderLikeButton(rec, index)));
-        };
-        return (React.createElement("div", { style: {
-                width: '100%',
-                height: containerHeight,
-                display: 'flex',
-                boxSizing: 'border-box',
-                gap: 16,
-                pointerEvents: 'none',
-                userSelect: 'none'
-            } }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
-            return renderView(rec, index);
-        })));
+            React.createElement(WaterFall$1, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props)),
+            React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
+                React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
+                        backgroundColor: 'transparent',
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        pointerEvents: 'none'
+                    } }),
+                React.createElement("div", { id: 'player-container-id-copy' }))));
     };
-    var index$1 = React.memo(DiyPortalPreview);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -13446,13 +13170,12 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\index.ts
      */
 
-    exports.DiyPortalPreview = index$1;
     exports.EditorDataProvider = EditorDataProvider;
     exports.Modal = Modal$1;
     exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
     exports.SxpPageCore = index;
     exports.SxpPageRender = SxpPageRender;
-    exports.core = index$2;
+    exports.core = index$1;
     exports.default = Pagebuilder;
     exports.defaultSetting = defaultSetting;
     exports.materials = _materials_;
@@ -13461,4 +13184,3 @@ Made in Italy` })));
     Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
-//# sourceMappingURL=pb-ui.js.map