pb-sxp-ui 1.0.90 → 1.0.92

package/dist/index.cjs

@@ -10,7 +10,6 @@ var qs = require('qs');
 var EventEmitter = require('eventemitter3');
 var css = require('@emotion/css');
 var ReactDOM = require('react-dom');
-var Hls = require('hls.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -9684,7 +9683,7 @@ function useOnScreen(ref) {
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-16 14:50:13
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-21 11:59:25
+ * @LastEditTime: 2024-06-21 16:34:48
  * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
  *
  */
@@ -9700,9 +9699,12 @@ const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
             }, rec, item, index);
         }
     }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
+    const imgSrc = React.useMemo(() => {
+        return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/40`;
+    }, [src]);
     return (React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
         React.createElement("div", { ref: ref, hidden: !src, className: css.css({ width: '100%', height: '100%' }) },
-            React.createElement(FormatImage$1, { className: css.css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: `${src}?imrquality/rquality/40` }))));
+            React.createElement(FormatImage$1, { className: css.css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: imgSrc }))));
 };
 var Img$1 = React.memo(Img);
 
@@ -12905,7 +12907,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
             return;
         videoRef.muted = muted;
     }, [muted, videoRef]);
-    const handleEnded = React.useCallback(() => {
+    const handlePlay = React.useCallback(() => {
         if (!videoRef)
             return;
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
@@ -13032,15 +13034,14 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
         if (!videoSrc)
             return;
-        if (videoSrc.includes('.m3u8')) {
-            if (Hls.isSupported()) {
-                const hls = new Hls();
-                hls.loadSource(videoSrc);
-                hls.attachMedia(videoRef);
-            }
-            else {
-                videoRef.src = videoSrc;
-            }
+        const Hls = window === null || window === void 0 ? void 0 : window.Hls;
+        if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
+            const hls = new Hls();
+            hls.loadSource(videoSrc);
+            hls.attachMedia(videoRef);
+            hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
+            });
         }
         else {
             videoRef.src = videoSrc;
@@ -13058,14 +13059,16 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
         videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handleEnded);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
         return () => {
             dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handleEnded);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
         };
     }, [isActive, videoId, rec, videoRef]);
     React.useEffect(() => {
@@ -13530,7 +13533,7 @@ var Tagbar$1 = React.memo(Tagbar);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-21 08:56:05
+ * @LastEditTime: 2024-06-21 15:53:06
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */