pb-sxp-ui 1.0.63 → 1.0.64

package/dist/index.cjs

@@ -11,7 +11,6 @@ var EventEmitter = require('eventemitter3');
 var css = require('@emotion/css');
 var proComponents = require('@ant-design/pro-components');
 var ReactDOM = require('react-dom');
-var Hls = require('hls.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -8392,7 +8391,7 @@ var ExpandableText$1 = React.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-17 16:53:11
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
  *
  */
@@ -8404,10 +8403,32 @@ const FormatImage = React.forwardRef((props, ref) => {
             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` }),
@@ -12314,6 +12335,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         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');
@@ -12321,7 +12343,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);
@@ -13394,8 +13415,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         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);
                 }