pb-sxp-ui 1.0.29 → 1.0.31

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

@@ -1,5 +1,6 @@
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSwiperSlide } from 'swiper/react';
+import Hls from 'hls.js';
 import { useIconLink } from '../useIconLink';
 import FormatImage from '../FormatImage';
 import { useSxpDataSource } from '../../../../core/hooks';
@@ -140,7 +141,22 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         setIsPauseVideo(false);
         if (!videoRef.current.src) {
             const videoSrc = rec.video.url;
-            videoRef.current.src = videoSrc;
+            if (videoSrc.includes('.m3u8')) {
+                if (Hls.isSupported()) {
+                    const hls = new Hls();
+                    hls.loadSource(videoSrc);
+                    hls.attachMedia(videoRef.current);
+                }
+                else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
+                    videoRef.current.src = videoSrc;
+                }
+                else {
+                    videoRef.current.src = videoSrc;
+                }
+            }
+            else {
+                videoRef.current.src = videoSrc;
+            }
             videoRef.current.setAttribute('x5-playsinline', 'true');
             videoRef.current.setAttribute('webkit-playsinline', 'true');
         }
@@ -231,16 +247,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         React.createElement("div", { style: {
                 position: 'absolute',
                 width: '100%',
-                height: 'auto',
+                height: '100%',
                 top: '50%',
                 transform: translateY,
                 left: 0,
                 right: 0
             } },
-            React.createElement("div", { style: { position: 'relative' } },
+            React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                 React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
                         width: '100%',
-                        height: 'auto',
+                        height: '100%',
                         objectFit: 'contain'
                     } }),
                 React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("swiper/react");
+const hls_js_1 = tslib_1.__importDefault(require("hls.js"));
 const useIconLink_1 = require("../useIconLink");
 const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const hooks_1 = require("../../../../core/hooks");
@@ -143,7 +144,22 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         setIsPauseVideo(false);
         if (!videoRef.current.src) {
             const videoSrc = rec.video.url;
-            videoRef.current.src = videoSrc;
+            if (videoSrc.includes('.m3u8')) {
+                if (hls_js_1.default.isSupported()) {
+                    const hls = new hls_js_1.default();
+                    hls.loadSource(videoSrc);
+                    hls.attachMedia(videoRef.current);
+                }
+                else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
+                    videoRef.current.src = videoSrc;
+                }
+                else {
+                    videoRef.current.src = videoSrc;
+                }
+            }
+            else {
+                videoRef.current.src = videoSrc;
+            }
             videoRef.current.setAttribute('x5-playsinline', 'true');
             videoRef.current.setAttribute('webkit-playsinline', 'true');
         }
@@ -234,16 +250,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         react_1.default.createElement("div", { style: {
                 position: 'absolute',
                 width: '100%',
-                height: 'auto',
+                height: '100%',
                 top: '50%',
                 transform: translateY,
                 left: 0,
                 right: 0
             } },
-            react_1.default.createElement("div", { style: { position: 'relative' } },
+            react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                 react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
                         width: '100%',
-                        height: 'auto',
+                        height: '100%',
                         objectFit: 'contain'
                     } }),
                 react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -42,6 +42,7 @@
     "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",