pb-sxp-ui 1.0.71 → 1.0.72

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('eventemitter3'), require('@emotion/css'), require('react-dom'), require('hls.js')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', 'react-dom', '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.EventEmitter, global.css, global.ReactDOM, global.Hls));
-})(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, ReactDOM, Hls) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('eventemitter3'), require('@emotion/css'), require('react-dom')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', 'react-dom'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.EventEmitter, global.css, global.ReactDOM));
+})(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, ReactDOM) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -438,7 +438,7 @@
         DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
     })(DataSourceType || (DataSourceType = {}));
     const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
-    const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false }) => {
+    const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, isShowTag = true }) => {
         const [rtcList, setRtcList] = React.useState([]);
         const [tagList, setTagList] = React.useState([]);
         const [loading, setLoading] = React.useState(false);
@@ -600,7 +600,7 @@
         // 获取 Tag
         const bffGetTagList = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
             var _h, _j, _k, _l, _m;
-            if (!utmVal)
+            if (!utmVal || !isShowTag)
                 return;
             try {
                 const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
@@ -613,7 +613,7 @@
             catch (e) {
                 console.log('e', e);
             }
-        }), [bffFetch, utmVal]);
+        }), [bffFetch, utmVal, isShowTag]);
         const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             const cta = product === null || product === void 0 ? void 0 : product.bindCta;
@@ -8439,7 +8439,7 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-19 14:12:55
+     * @LastEditTime: 2024-05-20 15:53:04
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
      *
      */
@@ -8454,6 +8454,30 @@
         React.useEffect(() => {
             setImgSrc(src);
         }, [src]);
+        React.useRef(null);
+        // useEffect(() => {
+        //   let observer: any = null;
+        //   const { current } = imgRef;
+        //   if (current) {
+        //     observer = new IntersectionObserver(
+        //       (entries) => {
+        //         entries.forEach((entry) => {
+        //           if (entry.isIntersecting) {
+        //             setImgSrc(src);
+        //             observer.unobserve(current);
+        //           }
+        //         });
+        //       },
+        //       { threshold: 0.1 } // 触发阈值，可根据需要调整
+        //     );
+        //     observer.observe(current);
+        //   }
+        //   return () => {
+        //     if (observer && current) {
+        //       observer.unobserve(current);
+        //     }
+        //   };
+        // }, [src]);
         return (React.createElement(React.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
             React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
             React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
@@ -12234,17 +12258,17 @@ Made in Italy` })));
             if (state) {
                 // 先设置状态
                 setState(false);
-                const result = (_d = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_c = (_b = recData.video) === null || _b === void 0 ? void 0 : _b.itemId) !== null && _c !== void 0 ? _c : '' })))) !== null && _d !== void 0 ? _d : false;
+                const result = (_d = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.itemId) !== null && _c !== void 0 ? _c : '' })))) !== null && _d !== void 0 ? _d : false;
                 bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                     eventInfo: {
                         eventSubject: 'favoriteContentCanceled',
                         eventDescription: 'This content was unfavorite by the user',
-                        contentId: (_f = (_e = recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
-                        contentName: (_h = (_g = recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
-                        contentTags: JSON.stringify((_k = (_j = recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
+                        contentId: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
+                        contentName: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
+                        contentTags: JSON.stringify((_k = (_j = recData === null || recData === void 0 ? void 0 : recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
                         position: position + '',
-                        contentFormat: ((_l = recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
-                        traceInfo: (_m = recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
+                        contentFormat: ((_l = recData === null || recData === void 0 ? void 0 : recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
+                        traceInfo: (_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
                     }
                 });
                 // 如果接口调用失败，则回滚状态
@@ -12259,12 +12283,12 @@ Made in Italy` })));
                     eventInfo: {
                         eventSubject: 'favoriteContent',
                         eventDescription: 'This content was favorite by the user',
-                        contentId: (_q = (_p = recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
-                        contentName: (_s = (_r = recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
-                        contentTags: JSON.stringify((_u = (_t = recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
+                        contentId: (_q = (_p = recData === null || recData === void 0 ? void 0 : recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
+                        contentName: (_s = (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
+                        contentTags: JSON.stringify((_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
                         position: position + '',
-                        contentFormat: ((_v = recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
-                        traceInfo: (_w = recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
+                        contentFormat: ((_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
+                        traceInfo: (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
                     }
                 });
                 if (!result) {
@@ -12342,15 +12366,15 @@ Made in Italy` })));
                     eventInfo: {
                         eventSubject: 'playVideo',
                         eventDescription: 'User played the video',
-                        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 : '',
+                        contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                        contentName: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
                         playType,
                         startTime: videoCurrentTime,
                         videoDuration,
-                        contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
+                        contentTags: JSON.stringify((_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
                         position: index + '',
                         contentFormat: 'video',
-                        traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
+                        traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
                     }
                 });
                 setIsFirstPlay(false);
@@ -12440,15 +12464,15 @@ Made in Italy` })));
                     eventInfo: {
                         eventSubject: 'playOverVideo',
                         eventDescription: 'User finished playing the video',
-                        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 : '',
+                        contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                        contentName: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
                         endTime: videoCurrentTime,
                         videoDuration,
                         playDuration,
-                        contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
+                        contentTags: JSON.stringify((_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
                         position: index + '',
                         contentFormat: 'video',
-                        traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
+                        traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
                     }
                 });
             }
@@ -12456,9 +12480,10 @@ Made in Italy` })));
         React.useEffect(() => {
             if (!isActive || !videoRef)
                 return;
-            const videoSrc = rec.video.url;
+            const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
             if (!videoSrc)
                 return;
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
             setIsPauseVideo(false);
             const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
             const dom = document.querySelector('#player-container-id');
@@ -12466,7 +12491,6 @@ Made in Italy` })));
             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?.on('canplay', handleCanplay);
@@ -12547,10 +12571,10 @@ Made in Italy` })));
                 window.removeEventListener('beforeunload', handleBeforeUnload);
             };
         }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
-        if (!rec.video) {
+        if (!(rec === null || rec === void 0 ? void 0 : rec.video)) {
             return null;
         }
-        return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
+        return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
             !isBgColor && (React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
             React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
             React.createElement("div", { style: {
@@ -12565,7 +12589,7 @@ Made in Italy` })));
                 React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                     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, style: {
+            renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
                 position: 'relative',
                 width: '100%',
                 height,
@@ -12922,7 +12946,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-23 10:41:27
+     * @LastEditTime: 2024-05-24 16:32:06
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -12982,23 +13006,29 @@ Made in Italy` })));
         };
         const firstRef = React.useRef();
         React.useEffect(() => {
-            if (!firstRef.current && !videoRef) {
+            var _a, _b, _c;
+            if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
                 firstRef.current = true;
                 const player = TCPlayer('player-container-id', {
                     licenseUrl, // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
                     controls: false,
-                    autoplay: false,
                     loop: false,
+                    autoplay: true,
                     muted: true,
                     preload: 'auto',
                     posterImage: false,
-                    bigPlayButton: true
+                    bigPlayButton: true,
+                    sources: [
+                        {
+                            src: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : ''
+                        }
+                    ]
                 });
                 player === null || player === void 0 ? void 0 : player.ready(() => {
                     setVideoRef(player);
                 });
             }
-        }, [videoRef, licenseUrl]);
+        }, [videoRef, licenseUrl, data]);
         React.useEffect(() => {
             if (!isInit)
                 handleH5EnterLink();
@@ -13053,7 +13083,7 @@ Made in Italy` })));
                     if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
                         fromKName = 'pdpPage';
                     }
-                    else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
+                    else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
                         fromKName = 'formPage';
                     }
                     else if (isFromHashtag) {
@@ -13078,7 +13108,7 @@ Made in Italy` })));
                             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 : ''
+                            ctatId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
                         }
                     });
                 }
@@ -13116,11 +13146,11 @@ Made in Italy` })));
         }, [globalConfig]);
         const renderContent = React.useCallback((rec, index) => {
             var _a, _b, _c, _d;
-            if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
+            if ((_a = rec === null || rec === void 0 ? void 0 : 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, 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 }));
+            if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.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, 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) => {
@@ -13161,16 +13191,16 @@ Made in Italy` })));
         }, [isShowMore]);
         const renderBottom = React.useCallback((rec, index) => {
             var _a, _b, _c, _d, _e, _f, _g;
-            if (rec.video) {
+            if (rec === null || rec === void 0 ? void 0 : rec.video) {
                 return (React.createElement(React.Fragment, null,
-                    ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
+                    ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
                     React.createElement("div", { className: 'clc-sxp-bottom' },
                         React.createElement(Nudge, { nudge: nudge }),
                         (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
                             React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
                         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' }), onChange: onExpandableChange }),
-                            React.createElement(Hashtag$1, { index: activeIndex, 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 })))));
+                            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 === null || rec === void 0 ? void 0 : 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' }), onChange: onExpandableChange }),
+                            React.createElement(Hashtag$1, { index: activeIndex, 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 === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
             }
             return null;
         }, [
@@ -13194,7 +13224,7 @@ Made in Italy` })));
             if (waterFallData && top < 40) {
                 top += 40;
             }
-            if (rec.video) {
+            if (rec === null || rec === void 0 ? void 0 : rec.video) {
                 return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
                         [(_b = globalConfig.likeIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig.likeIconX) !== null && _c !== void 0 ? _c : 0,
                         [(_d = globalConfig.likeIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top
@@ -13204,21 +13234,21 @@ Made in Italy` })));
         }, [globalConfig, waterFallData]);
         const handleReportViewImageEnd = (item) => {
             var _a, _b, _c, _d, _e, _f;
-            if (!((_a = item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
+            if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
                 const endTime = Date.now();
                 const duration = (endTime - viewImageStartTime.current) / 1000;
                 bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                     eventInfo: {
                         eventSubject: 'viewImageCarouselEnd',
                         eventDescription: 'User end view the image carousel',
-                        contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
-                        contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
+                        contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                        contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
                         imageEndTime: `${endTime}`,
                         playDuration: `${duration}`,
-                        contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
+                        contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
                         position: activeIndex + '',
                         contentFormat: 'image',
-                        traceInfo: item.video.traceInfo
+                        traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
                     }
                 });
             }
@@ -13234,8 +13264,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 : '',
+                        contentId: (_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
+                        productId: (_d = (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
                         requestId: null
                     }
                 });
@@ -13247,7 +13277,7 @@ 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 : '',
+                        contentId: (_f = (_e = item === null || item === void 0 ? void 0 : 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 : '',
                         requestId: null
                     }
@@ -13286,13 +13316,13 @@ Made in Italy` })));
                     eventInfo: {
                         eventSubject: 'viewImageCarouselStart',
                         eventDescription: 'User start view the image carousel',
-                        contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
-                        contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
+                        contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                        contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
                         imageStartTime: `${startTime}`,
-                        contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
+                        contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
                         position: activeIndex + '',
                         contentFormat: 'image',
-                        traceInfo: item.video.traceInfo
+                        traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
                     }
                 });
                 bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
@@ -13438,15 +13468,15 @@ Made in Italy` })));
                     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: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                        contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
                         playType,
                         startTime: videoCurrentTime,
                         videoDuration,
-                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                        contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
                         position: index + '',
                         contentFormat: 'video',
-                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                        traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
                     }
                 });
                 setIsFirstPlay(false);
@@ -13495,15 +13525,15 @@ Made in Italy` })));
                     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: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                        contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
                         endTime: videoCurrentTime,
                         videoDuration,
                         playDuration,
-                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                        contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
                         position: index + '',
                         contentFormat: 'video',
-                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                        traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
                     }
                 });
             }
@@ -13540,10 +13570,10 @@ Made in Italy` })));
                 return;
             setIsPauseVideo(false);
             if (!videoRef.current.src) {
-                const videoSrc = rec.video.url;
+                const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
                 if (videoSrc.includes('.m3u8')) {
-                    if (Hls.isSupported()) {
-                        const hls = new Hls();
+                    if (typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.Hls.isSupported())) {
+                        const hls = new window.Hls();
                         hls.loadSource(videoSrc);
                         hls.attachMedia(videoRef.current);
                     }
@@ -13571,7 +13601,7 @@ Made in Italy` })));
                 (_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]);
+        }, [handleLoadedMetadata, handlePlaying, rec === null || rec === void 0 ? void 0 : rec.video, handLoadeddata]);
         const renderPoster = React.useMemo(() => {
             if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
                 return null;
@@ -13598,10 +13628,10 @@ Made in Italy` })));
                 }
                 : {};
         }, [blur]);
-        if (!rec.video) {
+        if (!(rec === null || rec === void 0 ? void 0 : rec.video)) {
             return null;
         }
-        return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+        return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
                 position: 'relative',
                 width,
                 height,
@@ -13626,7 +13656,7 @@ Made in Italy` })));
                             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: {
+            renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
                 position: 'relative',
                 width,
                 height,
@@ -13657,11 +13687,11 @@ Made in Italy` })));
         }, [globalConfig, containerHeight, tagList]);
         const renderContent = (rec, index) => {
             var _a, _b, _c, _d;
-            if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
+            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 }));
             }
-            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 ((_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 }));
             }
             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) {
@@ -13695,15 +13725,15 @@ Made in Italy` })));
         };
         const renderBottom = (rec, index) => {
             var _a, _b, _c, _d, _e, _f, _g;
-            if (rec.video) {
+            if (rec === null || rec === void 0 ? void 0 : 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' }),
+                    ((_a = rec === null || rec === void 0 ? void 0 : 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 }),
                         CTA(rec, index),
                         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 }))));
+                            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 === null || rec === void 0 ? void 0 : 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 === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
             }
             return null;
         };
@@ -13717,7 +13747,7 @@ Made in Italy` })));
             if (top < 40) {
                 top += 40;
             }
-            if (rec.video) {
+            if (rec === null || rec === void 0 ? void 0 : 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
@@ -13829,7 +13859,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-06 17:26:37
+     * @LastEditTime: 2024-05-17 18:41:05
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
      *
      */
@@ -13846,14 +13876,14 @@ Made in Italy` })));
         RESOLVER[v.extend.type] = v;
     });
     const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl, enabledMetaConversionApi }) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const utmVal = React.useMemo(() => {
             var _a;
             const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
             return searchParams;
         }, []);
         return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
-            React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, render: ({ rtcList, tagList }) => {
+            React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, isShowTag: (_j = (_h = (_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.sxpPageConf) === null || _h === void 0 ? void 0 : _h.globalConfig) === null || _j === void 0 ? void 0 : _j.isShowTag, render: ({ rtcList, tagList }) => {
                     var _a;
                     return (React.createElement(React.Fragment, null,
                         React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),