pb-sxp-ui 1.0.63 → 1.0.64

package/es/core/components/DiyPortalPreview/VideoWidget.js

@@ -1,5 +1,4 @@
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Hls from 'hls.js';
 import { useIconLink } from '../SxpPageRender/useIconLink';
 import FormatImage from '../SxpPageRender/FormatImage';
 import { useSxpDataSource } from '../../../core/hooks';
@@ -139,8 +138,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);
                 }

package/es/core/components/SxpPageRender/FormatImage.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 const FormatImage = forwardRef((props, ref) => {
     const { src, onLoad, style, className, loading } = props;
     const [imgSrc, setImgSrc] = useState();
@@ -7,10 +7,28 @@ const FormatImage = forwardRef((props, ref) => {
             setImgSrc(v);
         }
     }));
+    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` }),

package/es/core/components/SxpPageRender/VideoWidget/index.js

@@ -181,6 +181,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         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');
@@ -188,7 +189,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         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 === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);

package/lib/core/components/DiyPortalPreview/VideoWidget.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const hls_js_1 = tslib_1.__importDefault(require("hls.js"));
 const useIconLink_1 = require("../SxpPageRender/useIconLink");
 const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
 const hooks_1 = require("../../../core/hooks");
@@ -142,8 +141,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_js_1.default.isSupported()) {
-                    const hls = new hls_js_1.default();
+                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);
                 }

package/lib/core/components/SxpPageRender/FormatImage.js

@@ -10,10 +10,28 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
             setImgSrc(v);
         }
     }));
+    const imgRef = (0, react_1.useRef)(null);
     (0, react_1.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_1.default.createElement(react_1.default.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
+    return (react_1.default.createElement("div", { ref: imgRef }, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
         react_1.default.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
         react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
         react_1.default.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),

package/lib/core/components/SxpPageRender/VideoWidget/index.js

@@ -184,6 +184,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         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');
@@ -191,7 +192,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         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 === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -42,7 +42,6 @@
     "antd": "^5.15.3",
     "eslint": "^8.48.0",
     "eventemitter3": "^5.0.1",
-    "hls.js": "^1.5.8",
     "less": "^4.2.0",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",