pb-sxp-ui 1.0.63 → 1.0.64

package/dist/index.js

@@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3';
 import { css } from '@emotion/css';
 import { BetaSchemaForm } from '@ant-design/pro-components';
 import * as ReactDOM from 'react-dom';
-import Hls from 'hls.js';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -8369,7 +8368,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-17 16:53:11
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
  *
  */
@@ -8381,10 +8380,32 @@ const FormatImage = forwardRef((props, ref) => {
             setImgSrc(v);
         }
     }));
+    // useEffect(() => {
+    //   setImgSrc(src);
+    // }, [src]);
+    const imgRef = useRef(null);
     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` }),
@@ -12291,6 +12312,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');
@@ -12298,7 +12320,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);
@@ -13371,8 +13392,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);
                 }