deepsea-components 5.18.13 → 5.18.14

package/dist/components/HlsPlayer.cjs

@@ -42,30 +42,48 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_hls_js_namespaceObject = require("hls.js");
 var external_hls_js_default = /*#__PURE__*/ __webpack_require__.n(external_hls_js_namespaceObject);
-const HlsPlayer = ({ ref, src, ...rest })=>{
+const HlsPlayer = ({ ref, src: source, onHlsError, onHlsUnsupported, ...rest })=>{
     const video = (0, external_react_namespaceObject.useRef)(null);
     (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>video.current, []);
+    const src = null == source ? void 0 : source.trim();
+    const onHlsErrorLatest = (0, external_react_namespaceObject.useEffectEvent)((0, external_deepsea_tools_namespaceObject.optionalFn)(onHlsError));
+    const onHlsUnsupportedLatest = (0, external_react_namespaceObject.useEffectEvent)((0, external_deepsea_tools_namespaceObject.optionalFn)(onHlsUnsupported));
     (0, external_react_namespaceObject.useEffect)(()=>{
         const { current: player } = video;
         if (!player || !src) return;
         let hls = null;
         if (external_hls_js_default().isSupported()) {
-            hls = new (external_hls_js_default())();
-            hls.loadSource(src);
-            hls.attachMedia(player);
-            hls.on(external_hls_js_default().Events.ERROR, (event, data)=>{
-                console.log(event);
-                console.log(data);
+            const instance = new (external_hls_js_default())();
+            let hasRetriedNetworkError = false;
+            let hasRecoveredMediaError = false;
+            hls = instance;
+            instance.loadSource(src);
+            instance.attachMedia(player);
+            instance.on(external_hls_js_default().Events.ERROR, (_event, data)=>{
+                onHlsErrorLatest(data);
+                if (!data.fatal) return;
+                if (data.type === external_hls_js_namespaceObject.ErrorTypes.NETWORK_ERROR && !hasRetriedNetworkError) {
+                    hasRetriedNetworkError = true;
+                    instance.startLoad();
+                    return;
+                }
+                if (data.type === external_hls_js_namespaceObject.ErrorTypes.MEDIA_ERROR && !hasRecoveredMediaError) {
+                    hasRecoveredMediaError = true;
+                    instance.recoverMediaError();
+                    return;
+                }
+                instance.destroy();
+                if (hls === instance) hls = null;
             });
         } else if (player.canPlayType("application/vnd.apple.mpegurl")) player.src = src;
+        else onHlsUnsupportedLatest();
         return ()=>{
-            if (hls) hls.destroy();
-            if (player) {
-                player.src = "";
-                player.load();
-            }
+            null == hls || hls.destroy();
+            player.removeAttribute("src");
+            player.load();
         };
     }, [
         src

package/dist/components/HlsPlayer.d.ts

@@ -1,5 +1,7 @@
 import { type ComponentProps, type FC } from "react";
-export interface HlsPlayerProps extends Omit<ComponentProps<"video">, "src" | "children"> {
-    src: string;
+import { type ErrorData } from "hls.js";
+export interface HlsPlayerProps extends Omit<ComponentProps<"video">, "children"> {
+    onHlsError?: (data: ErrorData) => void;
+    onHlsUnsupported?: () => void;
 }
 export declare const HlsPlayer: FC<HlsPlayerProps>;

package/dist/components/HlsPlayer.js

@@ -1,29 +1,47 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useRef } from "react";
-import hls_0 from "hls.js";
-const HlsPlayer = ({ ref, src, ...rest })=>{
+import { useEffect, useEffectEvent, useImperativeHandle, useRef } from "react";
+import { optionalFn } from "deepsea-tools";
+import hls_0, { ErrorTypes } from "hls.js";
+const HlsPlayer = ({ ref, src: source, onHlsError, onHlsUnsupported, ...rest })=>{
     const video = useRef(null);
     useImperativeHandle(ref, ()=>video.current, []);
+    const src = null == source ? void 0 : source.trim();
+    const onHlsErrorLatest = useEffectEvent(optionalFn(onHlsError));
+    const onHlsUnsupportedLatest = useEffectEvent(optionalFn(onHlsUnsupported));
     useEffect(()=>{
         const { current: player } = video;
         if (!player || !src) return;
         let hls = null;
         if (hls_0.isSupported()) {
-            hls = new hls_0();
-            hls.loadSource(src);
-            hls.attachMedia(player);
-            hls.on(hls_0.Events.ERROR, (event, data)=>{
-                console.log(event);
-                console.log(data);
+            const instance = new hls_0();
+            let hasRetriedNetworkError = false;
+            let hasRecoveredMediaError = false;
+            hls = instance;
+            instance.loadSource(src);
+            instance.attachMedia(player);
+            instance.on(hls_0.Events.ERROR, (_event, data)=>{
+                onHlsErrorLatest(data);
+                if (!data.fatal) return;
+                if (data.type === ErrorTypes.NETWORK_ERROR && !hasRetriedNetworkError) {
+                    hasRetriedNetworkError = true;
+                    instance.startLoad();
+                    return;
+                }
+                if (data.type === ErrorTypes.MEDIA_ERROR && !hasRecoveredMediaError) {
+                    hasRecoveredMediaError = true;
+                    instance.recoverMediaError();
+                    return;
+                }
+                instance.destroy();
+                if (hls === instance) hls = null;
             });
         } else if (player.canPlayType("application/vnd.apple.mpegurl")) player.src = src;
+        else onHlsUnsupportedLatest();
         return ()=>{
-            if (hls) hls.destroy();
-            if (player) {
-                player.src = "";
-                player.load();
-            }
+            null == hls || hls.destroy();
+            player.removeAttribute("src");
+            player.load();
         };
     }, [
         src

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.18.13",
+  "version": "5.18.14",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {

package/src/components/HlsPlayer.tsx

@@ -1,49 +1,65 @@
 "use client"
 
-import { type ComponentProps, type FC, useEffect, useImperativeHandle, useRef } from "react"
+import { type ComponentProps, type FC, useEffect, useEffectEvent, useImperativeHandle, useRef } from "react"
 
-import Hls from "hls.js"
+import { optionalFn } from "deepsea-tools"
+import Hls, { type ErrorData, ErrorTypes } from "hls.js"
 
-export interface HlsPlayerProps extends Omit<ComponentProps<"video">, "src" | "children"> {
-    src: string
+export interface HlsPlayerProps extends Omit<ComponentProps<"video">, "children"> {
+    onHlsError?: (data: ErrorData) => void
+    onHlsUnsupported?: () => void
 }
 
-export const HlsPlayer: FC<HlsPlayerProps> = ({ ref, src, ...rest }) => {
+export const HlsPlayer: FC<HlsPlayerProps> = ({ ref, src: source, onHlsError, onHlsUnsupported, ...rest }) => {
     const video = useRef<HTMLVideoElement>(null)
 
     useImperativeHandle(ref, () => video.current!, [])
 
+    const src = source?.trim()
+    const onHlsErrorLatest = useEffectEvent(optionalFn(onHlsError))
+    const onHlsUnsupportedLatest = useEffectEvent(optionalFn(onHlsUnsupported))
+
     useEffect(() => {
         const { current: player } = video
         if (!player || !src) return
 
         let hls: Hls | null = null
 
-        // 1. 优先检查是否支持 hls.js (MSE 模式)
-        // 这将覆盖 Chrome, Firefox, Edge 等现代浏览器，绕过它们不成熟或过于严格的原生 HLS 引擎
         if (Hls.isSupported()) {
-            hls = new Hls()
-            hls.loadSource(src)
-            hls.attachMedia(player)
-
-            // 绑定错误监听以便调试
-            hls.on(Hls.Events.ERROR, (event, data) => {
-                console.log(event)
-                console.log(data)
-            })
-        }
+            const instance = new Hls()
+            let hasRetriedNetworkError = false
+            let hasRecoveredMediaError = false
 
-        // 2. 只有在 hls.js 不可用时，才尝试原生播放 (主要针对 iOS Safari 和 macOS Safari)
-        else if (player.canPlayType("application/vnd.apple.mpegurl")) player.src = src
+            hls = instance
+            instance.loadSource(src)
+            instance.attachMedia(player)
 
-        return () => {
-            if (hls) hls.destroy()
+            instance.on(Hls.Events.ERROR, (_event, data) => {
+                onHlsErrorLatest(data)
+                if (!data.fatal) return
+
+                if (data.type === ErrorTypes.NETWORK_ERROR && !hasRetriedNetworkError) {
+                    hasRetriedNetworkError = true
+                    instance.startLoad()
+                    return
+                }
 
-            // 清理原生 src，防止切换地址时内存泄漏
-            if (player) {
-                player.src = ""
-                player.load()
-            }
+                if (data.type === ErrorTypes.MEDIA_ERROR && !hasRecoveredMediaError) {
+                    hasRecoveredMediaError = true
+                    instance.recoverMediaError()
+                    return
+                }
+
+                instance.destroy()
+                if (hls === instance) hls = null
+            })
+        } else if (player.canPlayType("application/vnd.apple.mpegurl")) player.src = src
+        else onHlsUnsupportedLatest()
+
+        return () => {
+            hls?.destroy()
+            player.removeAttribute("src")
+            player.load()
         }
     }, [src])