pb-sxp-ui 1.0.71 → 1.0.72

package/dist/index.js

@@ -6,7 +6,6 @@ import qs from 'qs';
 import EventEmitter from 'eventemitter3';
 import { css } from '@emotion/css';
 import * as ReactDOM from 'react-dom';
-import Hls from 'hls.js';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -423,7 +422,7 @@ var DataSourceType;
     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] = useState([]);
     const [tagList, setTagList] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -585,7 +584,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     // 获取 Tag
     const bffGetTagList = 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) => {
@@ -598,7 +597,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         catch (e) {
             console.log('e', e);
         }
-    }), [bffFetch, utmVal]);
+    }), [bffFetch, utmVal, isShowTag]);
     const ctaEvent = 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;
@@ -8424,7 +8423,7 @@ var ExpandableText$1 = memo(ExpandableText);
  * @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
  *
  */
@@ -8439,6 +8438,30 @@ const FormatImage = forwardRef((props, ref) => {
     useEffect(() => {
         setImgSrc(src);
     }, [src]);
+    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` }),
@@ -12219,17 +12242,17 @@ const LikeButton = (_a) => {
         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
                 }
             });
             // 如果接口调用失败，则回滚状态
@@ -12244,12 +12267,12 @@ const LikeButton = (_a) => {
                 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) {
@@ -12327,15 +12350,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
                 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);
@@ -12425,15 +12448,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
                 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
                 }
             });
         }
@@ -12441,9 +12464,10 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
     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');
@@ -12451,7 +12475,6 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         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);
@@ -12532,10 +12555,10 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
             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: {
@@ -12550,7 +12573,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
             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,
@@ -12907,7 +12930,7 @@ var Tagbar$1 = memo(Tagbar);
  * @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
  *
  */
@@ -12967,23 +12990,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     };
     const firstRef = useRef();
     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]);
     useEffect(() => {
         if (!isInit)
             handleH5EnterLink();
@@ -13038,7 +13067,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 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) {
@@ -13063,7 +13092,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                         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 : ''
                     }
                 });
             }
@@ -13101,11 +13130,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     }, [globalConfig]);
     const renderContent = 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) => {
@@ -13146,16 +13175,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     }, [isShowMore]);
     const renderBottom = 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;
     }, [
@@ -13179,7 +13208,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         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
@@ -13189,21 +13218,21 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     }, [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
                 }
             });
         }
@@ -13219,8 +13248,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 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
                 }
             });
@@ -13232,7 +13261,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 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
                 }
@@ -13271,13 +13300,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 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({
@@ -13423,15 +13452,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 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);
@@ -13480,15 +13509,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 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
                 }
             });
         }
@@ -13525,10 +13554,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             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);
                 }
@@ -13556,7 +13585,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             (_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 = useMemo(() => {
         if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
             return null;
@@ -13583,10 +13612,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             }
             : {};
     }, [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,
@@ -13611,7 +13640,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                         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,
@@ -13642,11 +13671,11 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
     }, [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) {
@@ -13680,15 +13709,15 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
     };
     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;
     };
@@ -13702,7 +13731,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
         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
@@ -13814,7 +13843,7 @@ const Popup = () => {
  * @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
  *
  */
@@ -13831,14 +13860,14 @@ Object.values(_materials_).forEach((v) => {
     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 = 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 })),