pb-sxp-ui 1.15.12-alpha.8 → 1.15.13-alpha.1

package/dist/pb-ui.js

@@ -37,7 +37,7 @@
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol */
+    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
     function __rest(s, e) {
@@ -740,12 +740,8 @@
             // Beacon API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。
             if (options.type === 'beacon' && navigator.sendBeacon) {
                 return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
-                    JSON.stringify({
-                        body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
-                    })
-                ], {
-                    type: 'application/json;charset=UTF-8'
-                }));
+                    JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
+                ], { type: 'application/json;charset=UTF-8' }));
             }
             return window
                 .fetch(`${url}/api/${path}`, {
@@ -906,7 +902,7 @@
             console.log('userInfo:', userInfo);
             console.log('eventInfo:', ef);
             console.log('========= 结束 =========');
-            return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/cld/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
+            return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/CLD/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}`, {
                 method: 'POST',
                 body: { userInfo: realUserInfo, eventInfo: realEventInfo },
                 type: 'beacon'
@@ -922,7 +918,7 @@
             bffDataSource
         ]);
         const bffFbReport = React.useCallback(({ eventName, product }) => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f;
             if (!enableReportEvent ||
                 !enabledMetaConversionApi ||
                 (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
@@ -986,15 +982,7 @@
                 }
             };
             getEventParams(jsonParams);
-            const params = {};
-            const queryString = location.search.slice(1);
-            (_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
-                const key = val.split('=')[0];
-                const value = val.split('=')[1];
-                params[key] = value;
-            });
-            const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
-            return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_g = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _g === void 0 ? void 0 : _g['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
+            return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/FB/${(_f = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _f === void 0 ? void 0 : _f['x-app-id']}/${eventName}`, {
                 method: 'POST',
                 body: jsonParams,
                 type: 'beacon'
@@ -1491,7 +1479,7 @@
             React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
     });
 
-    var index$2 = /*#__PURE__*/Object.freeze({
+    var index$3 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         EditorCore: EditorCore
     });
@@ -17573,15 +17561,15 @@ Made in Italy` })));
         Swipe: Swipe
     });
 
-    const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-    const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+    const defaultUnLikeIconPath$2 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+    const defaultLikeIconPath$2 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
     const LikeButton = (_a) => {
         var _b;
         var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
         const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
         const [state, setState] = React.useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
-        const likeIcon = useIconLink(defaultLikeIconPath$1);
-        const unlikeIcon = useIconLink(defaultUnLikeIconPath$1);
+        const likeIcon = useIconLink(defaultLikeIconPath$2);
+        const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
         const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
             var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
             if (state) {
@@ -17672,7 +17660,7 @@ Made in Italy` })));
         };
     })();
 
-    const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
+    const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
         const [isPauseVideo, setIsPauseVideo] = React.useState(false);
         const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
         const videoStartTime = React.useRef(0);
@@ -18017,7 +18005,7 @@ Made in Italy` })));
             renderLoading,
             isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
     };
-    var VideoWidget$3 = React.memo(VideoWidget$2);
+    var VideoWidget$5 = React.memo(VideoWidget$4);
 
     const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
         const [isTrue, setIsTure] = React.useState(defaultValue);
@@ -18106,7 +18094,7 @@ Made in Italy` })));
                 }, onLoad: onShowFirstImage }))));
     };
 
-    const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
+    const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
         var _a, _b;
         const { isActive } = useSwiperSlide();
         const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -18200,7 +18188,7 @@ Made in Italy` })));
                     React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
             }))));
     };
-    var PictureGroup$3 = React.memo(PictureGroup$2);
+    var PictureGroup$5 = React.memo(PictureGroup$4);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -18710,10 +18698,10 @@ Made in Italy` })));
                 return (React.createElement(MultiPosts$2, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
             }
             if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
-                return (React.createElement(VideoWidget$3, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
+                return (React.createElement(VideoWidget$5, { key: isReload, rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
             }
             if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
-                return (React.createElement(PictureGroup$3, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+                return (React.createElement(PictureGroup$5, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, 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) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
                 return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
@@ -19083,7 +19071,7 @@ Made in Italy` })));
     };
     var SxpPageRender$1 = React.memo(SxpPageRender);
 
-    const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
+    const PictureGroup$2 = ({ 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',
@@ -19093,9 +19081,9 @@ Made in Italy` })));
                 React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
         })));
     };
-    var PictureGroup$1 = React.memo(PictureGroup);
+    var PictureGroup$3 = React.memo(PictureGroup$2);
 
-    const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
+    const VideoWidget$2 = ({ 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();
@@ -19325,14 +19313,14 @@ Made in Italy` })));
             renderPoster,
             React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
     };
-    var VideoWidget$1 = React.memo(VideoWidget);
+    var VideoWidget$3 = React.memo(VideoWidget$2);
 
-    const RESOLVER$1 = {};
+    const RESOLVER$2 = {};
     Object.values(_materials_).forEach((v) => {
-        RESOLVER$1[v.extend.type] = v;
+        RESOLVER$2[v.extend.type] = v;
     });
-    const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-    const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+    const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+    const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
     const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
         const height = React.useMemo(() => {
             let minusHeight = 0;
@@ -19347,16 +19335,16 @@ Made in Italy` })));
         const renderContent = (rec, index) => {
             var _a, _b, _c, _d;
             if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-                return (React.createElement(VideoWidget$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 }));
+                return (React.createElement(VideoWidget$3, { 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 === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
-                return (React.createElement(PictureGroup$1, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+                return (React.createElement(PictureGroup$3, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, 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 t = RESOLVER$2[(_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) || {}, 
@@ -19378,7 +19366,7 @@ Made in Italy` })));
         const CTA = (rec, index) => {
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
                 return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                    React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
+                    React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$2 })));
             }
             return null;
         };
@@ -19396,8 +19384,8 @@ Made in Italy` })));
             }
             return null;
         };
-        const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
-        const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
+        const likeIcon = useIconLink(defaultLikeIconPath$1, appDomain);
+        const unlikeIcon = useIconLink(defaultUnLikeIconPath$1, appDomain);
         const renderLikeButton = (rec, index) => {
             var _a, _b, _c, _d;
             if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
@@ -19445,7 +19433,319 @@ Made in Italy` })));
             return renderView(rec, index);
         })));
     };
-    var index$1 = React.memo(DiyPortalPreview);
+    var index$2 = React.memo(DiyPortalPreview);
+
+    const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
+        const { isActive } = useSwiperSlide();
+        const [isload, setIsLoad] = React.useState(false);
+        React.useEffect(() => {
+            if (isActive && isload && loopPlay) {
+                setTimeout(() => {
+                    var _a, _b, _c, _d;
+                    if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
+                        (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
+                    }
+                    else {
+                        const i = (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.activeIndex;
+                        (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
+                    }
+                }, 3000);
+            }
+        }, [isActive, isload, data, index, swiperRef, loopPlay]);
+        const loadFinishImage = () => {
+            setIsLoad(true);
+        };
+        return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
+                clickable: true,
+                bulletActiveClass: 'swipe-item-active-bullet',
+                bulletElement: 'button'
+            }, 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, onShowFirstImage: loadFinishImage })));
+        })));
+    };
+    var PictureGroup$1 = React.memo(PictureGroup);
+
+    const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
+        const { isActive } = useSwiperSlide();
+        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('');
+        const videoId = `pb-cache-video-${index}`;
+        const hlsRef = React.useRef(null);
+        React.useEffect(() => {
+            if (!videoRef.current)
+                return;
+            videoRef.current.muted = muted;
+        }, [muted]);
+        React.useCallback(() => {
+            var _a;
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+        }, []);
+        useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
+        const handlePlaying = React.useCallback(() => {
+            var _a, _b, _c, _d, _e, _f;
+            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;
+                ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+                ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
+                setIsFirstPlay(false);
+            }
+        }, [bffEventReport, data, index, isFirstPlay]);
+        const handleLoadedMetadata = React.useCallback(() => {
+            var _a;
+            (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            setIsLoadFinish(true);
+        }, []);
+        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]);
+        React.useCallback(() => {
+            var _a, _b, _c, _d, _e, _f;
+            data[index];
+            ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+            ((_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) {
+                (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
+            }
+        }, [data, index, bffEventReport]);
+        const blur = React.useMemo(() => {
+            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
+        }, [videoPostConfig]);
+        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 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());
+        }, []);
+        const handleTimeUpload = React.useCallback(() => {
+            var _a, _b, _c;
+            if (!videoRef.current)
+                return;
+            if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
+                (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+            }
+        }, []);
+        const handlePause = () => {
+            var _a, _b, _c, _d, _e, _f;
+            if (!loopPlay)
+                return;
+            if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
+                (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
+            }
+            else {
+                const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
+                (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
+            }
+        };
+        // useEffect(() => {
+        //   if (!isActive) return;
+        //   if (!loopPlay) {
+        //     videoRef?.current?.pause();
+        //   } else {
+        //     videoRef?.current?.play();
+        //   }
+        // }, [loopPlay, isActive]);
+        React.useEffect(() => {
+            var _a, _b, _c;
+            if (!isActive)
+                return;
+            const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
+            if (!videoSrc)
+                return;
+            setIsPauseVideo(false);
+            const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
+            if (!videoPlayerWrapperNode)
+                return;
+            videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
+            videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
+            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
+                return;
+            const Hls = window === null || window === void 0 ? void 0 : window.Hls;
+            let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
+            if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
+                hls = new Hls();
+                hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
+                hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
+                hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                    var _a;
+                    (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+                });
+            }
+            else {
+                videoRef.current.src = videoSrc;
+            }
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
+            // videoRef.current?.addEventListener('playing', handlePlaying);
+            // videoRef.current?.addEventListener('loadeddata', handLoadeddata);
+            (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
+            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('timeupdate', handleTimeUpload);
+            return () => {
+                var _a, _b, _c, _d;
+                if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
+                    (_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+                setIsLoadFinish(false);
+                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
+                // videoRef.current?.removeEventListener('playing', handlePlaying);
+                // videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
+                (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
+            };
+        }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive]);
+        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, alt: 'video poster' }));
+        }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+        React.useMemo(() => {
+            return blur
+                ? {
+                    filter: 'blur(10px)',
+                    transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+                }
+                : {};
+        }, [blur]);
+        if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
+            return null;
+        }
+        return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
+                position: 'relative',
+                width: '100%',
+                height,
+                overflow: 'hidden',
+                pointerEvents: 'none'
+            } },
+            React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })));
+    };
+    var VideoWidget$1 = React.memo(VideoWidget);
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2025-03-25 13:54:27
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2025-03-26 15:01:42
+     * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
+     *
+     */
+    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 DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false }) => {
+        const swiperRef = React.useRef(null);
+        React.useMemo(() => {
+            let minusHeight = 0;
+            if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
+                minusHeight += 45;
+            }
+            if (tagList.length > 0) {
+                minusHeight += 45;
+            }
+            return containerHeight - minusHeight;
+        }, [globalConfig, containerHeight, tagList]);
+        // 判断是否是视频
+        const isVideoUrl = (url) => {
+            if (url && url !== '' && typeof url === 'string') {
+                const imageExtensions = ['.mp4', '.m3u8'];
+                const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
+                return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
+            }
+            else {
+                return false;
+            }
+        };
+        const renderContent = (rec, index) => {
+            const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
+            if (isVideo) {
+                return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay: loopPlay }));
+            }
+            else {
+                return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlay }));
+            }
+        };
+        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]);
+        useIconLink(defaultLikeIconPath, appDomain);
+        useIconLink(defaultUnLikeIconPath, appDomain);
+        useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
+        useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
+        const renderView = (rec, index) => {
+            return (React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } }, renderContent(rec, index)));
+        };
+        React.useEffect(() => {
+            var _a, _b;
+            if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
+                return;
+            (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(activeIndex);
+        }, [activeIndex]);
+        React.useEffect(() => {
+            var _a, _b;
+            if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
+                return;
+            (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
+        }, [loopPlay]);
+        return (React.createElement(Swiper, { ref: swiperRef, allowTouchMove: false, onActiveIndexChange: (swiper) => {
+                // setActiveIndex(swiper.activeIndex);
+                onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
+            }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight } }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
+            return renderView(rec, index);
+        })));
+    };
+    var index$1 = React.memo(DiyStoryPreview);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -19584,17 +19884,18 @@ Made in Italy` })));
      * @Author       : haocanweng@chatlabs.cn
      * @Date         : 2023-08-21 16:31:58
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-25 11:37:48
+     * @LastEditTime: 2025-03-25 14:31:53
      * @FilePath: \pb-sxp-ui\src\index.ts
      */
 
-    exports.DiyPortalPreview = index$1;
+    exports.DiyPortalPreview = index$2;
+    exports.DiyStoryPreview = index$1;
     exports.EditorDataProvider = EditorDataProvider;
     exports.Modal = Modal$1;
     exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
     exports.SxpPageCore = index;
     exports.SxpPageRender = SxpPageRender$1;
-    exports.core = index$2;
+    exports.core = index$3;
     exports.default = Pagebuilder;
     exports.materials = _materials_;
     exports.useEditorDataProvider = useEditorDataProvider;