deepsea-components 5.17.32 → 5.17.34

package/dist/components/HlsPlayer.cjs

@@ -40,25 +40,29 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const external_hls_js_namespaceObject = require("hls.js");
 var external_hls_js_default = /*#__PURE__*/ __webpack_require__.n(external_hls_js_namespaceObject);
-const HlsPlayer = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
-    const { src, ...rest } = props;
+const HlsPlayer = ({ ref, src, ...rest })=>{
     const video = (0, external_react_namespaceObject.useRef)(null);
     (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>video.current, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const { current: player } = video;
         if (!player || !src) return;
-        if (player.canPlayType("application/vnd.apple.mpegurl")) {
-            player.src = src;
-            return;
-        }
+        let hls = null;
         if (external_hls_js_default().isSupported()) {
-            const hls = new (external_hls_js_default())();
+            hls = new (external_hls_js_default())();
             hls.loadSource(src);
             hls.attachMedia(player);
-            return ()=>{
-                hls.destroy();
-            };
-        }
+            hls.on(external_hls_js_default().Events.ERROR, (event, data)=>{
+                console.log(event);
+                console.log(data);
+            });
+        } else if (player.canPlayType("application/vnd.apple.mpegurl")) player.src = src;
+        return ()=>{
+            if (hls) hls.destroy();
+            if (player) {
+                player.src = "";
+                player.load();
+            }
+        };
     }, [
         src
     ]);
@@ -66,7 +70,7 @@ const HlsPlayer = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((
         ref: video,
         ...rest
     });
-});
+};
 exports.HlsPlayer = __webpack_exports__.HlsPlayer;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "HlsPlayer"

package/dist/components/HlsPlayer.d.ts

@@ -1,5 +1,5 @@
-import { MediaHTMLAttributes } from "react";
-export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
+import { ComponentProps, FC } from "react";
+export interface HlsPlayerProps extends Omit<ComponentProps<"video">, "src" | "children"> {
     src: string;
 }
-export declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;
+export declare const HlsPlayer: FC<HlsPlayerProps>;

package/dist/components/HlsPlayer.js

@@ -1,26 +1,30 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useEffect, useImperativeHandle, useRef } from "react";
 import hls_0 from "hls.js";
-const HlsPlayer = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { src, ...rest } = props;
+const HlsPlayer = ({ ref, src, ...rest })=>{
     const video = useRef(null);
     useImperativeHandle(ref, ()=>video.current, []);
     useEffect(()=>{
         const { current: player } = video;
         if (!player || !src) return;
-        if (player.canPlayType("application/vnd.apple.mpegurl")) {
-            player.src = src;
-            return;
-        }
+        let hls = null;
         if (hls_0.isSupported()) {
-            const hls = new hls_0();
+            hls = new hls_0();
             hls.loadSource(src);
             hls.attachMedia(player);
-            return ()=>{
-                hls.destroy();
-            };
-        }
+            hls.on(hls_0.Events.ERROR, (event, data)=>{
+                console.log(event);
+                console.log(data);
+            });
+        } else if (player.canPlayType("application/vnd.apple.mpegurl")) player.src = src;
+        return ()=>{
+            if (hls) hls.destroy();
+            if (player) {
+                player.src = "";
+                player.load();
+            }
+        };
     }, [
         src
     ]);
@@ -28,5 +32,5 @@ const HlsPlayer = /*#__PURE__*/ forwardRef((props, ref)=>{
         ref: video,
         ...rest
     });
-});
+};
 export { HlsPlayer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.17.32",
+  "version": "5.17.34",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -41,8 +41,8 @@
     "hls.js": "^1.6.13",
     "smooth-scrollbar": "^8.8.4",
     "stable-hash": "^0.0.6",
-    "deepsea-tools": "5.47.8",
-    "soda-hooks": "6.16.21"
+    "deepsea-tools": "5.47.9",
+    "soda-hooks": "6.16.22"
   },
   "devDependencies": {
     "typescript": ">=5.8.3"

package/src/components/HlsPlayer.tsx

@@ -1,15 +1,14 @@
 "use client"
 
-import { forwardRef, MediaHTMLAttributes, useEffect, useImperativeHandle, useRef } from "react"
+import { ComponentProps, FC, useEffect, useImperativeHandle, useRef } from "react"
 
 import Hls from "hls.js"
 
-export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
+export interface HlsPlayerProps extends Omit<ComponentProps<"video">, "src" | "children"> {
     src: string
 }
 
-export const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
-    const { src, ...rest } = props
+export const HlsPlayer: FC<HlsPlayerProps> = ({ ref, src, ...rest }) => {
     const video = useRef<HTMLVideoElement>(null)
 
     useImperativeHandle(ref, () => video.current!, [])
@@ -18,20 +17,35 @@ export const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, re
         const { current: player } = video
         if (!player || !src) return
 
-        if (player.canPlayType("application/vnd.apple.mpegurl")) {
-            player.src = src
-            return
-        }
+        let hls: Hls | null = null
 
+        // 1. 优先检查是否支持 hls.js (MSE 模式)
+        // 这将覆盖 Chrome, Firefox, Edge 等现代浏览器，绕过它们不成熟或过于严格的原生 HLS 引擎
         if (Hls.isSupported()) {
-            const hls = new Hls()
+            hls = new Hls()
             hls.loadSource(src)
             hls.attachMedia(player)
-            return () => {
-                hls.destroy()
+
+            // 绑定错误监听以便调试
+            hls.on(Hls.Events.ERROR, (event, data) => {
+                console.log(event)
+                console.log(data)
+            })
+        }
+
+        // 2. 只有在 hls.js 不可用时，才尝试原生播放 (主要针对 iOS Safari 和 macOS Safari)
+        else if (player.canPlayType("application/vnd.apple.mpegurl")) player.src = src
+
+        return () => {
+            if (hls) hls.destroy()
+
+            // 清理原生 src，防止切换地址时内存泄漏
+            if (player) {
+                player.src = ""
+                player.load()
             }
         }
     }, [src])
 
     return <video ref={video} {...rest} />
-})
+}