pb-sxp-ui 1.0.63 → 1.0.65

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('@ant-design/pro-components'), require('react-dom'), require('hls.js')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', '@ant-design/pro-components', '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.proComponents, global.ReactDOM, global.Hls));
-})(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, proComponents, 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('@ant-design/pro-components'), require('react-dom')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', '@ant-design/pro-components', '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.proComponents, global.ReactDOM));
+})(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, proComponents, 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);
@@ -592,7 +592,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) => {
@@ -605,7 +605,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;
@@ -8383,7 +8383,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-17 16:53:11
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
      *
      */
@@ -8395,10 +8395,32 @@
                 setImgSrc(v);
             }
         }));
+        // useEffect(() => {
+        //   setImgSrc(src);
+        // }, [src]);
+        const imgRef = React.useRef(null);
         React.useEffect(() => {
-            setImgSrc(src);
+            let observer = 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,
+        return (React.createElement("div", { ref: imgRef }, (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` }),
             React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
@@ -12305,6 +12327,7 @@ Made in Italy` })));
             const videoSrc = 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');
@@ -12312,7 +12335,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);
@@ -12768,7 +12790,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-09 16:23:59
+     * @LastEditTime: 2024-05-20 10:04:39
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -12828,7 +12850,7 @@ Made in Italy` })));
         };
         const firstRef = React.useRef();
         React.useEffect(() => {
-            if (!firstRef.current && !videoRef) {
+            if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current)) {
                 firstRef.current = true;
                 const player = TCPlayer('player-container-id', {
                     licenseUrl, // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
@@ -13385,8 +13407,8 @@ Made in Italy` })));
             if (!videoRef.current.src) {
                 const videoSrc = 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);
                     }
@@ -13672,7 +13694,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
      *
      */
@@ -13689,14 +13711,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 })),