fix: auto reconn stream danmu

auto-imports.d.ts

@@ -5,5 +5,5 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
 }

src/plugins/danmu.ts

@@ -1,17 +1,21 @@
-type Danmu = string | {
-    text: string;
-    opacity?: number;
-    color?: string;
-    border?: boolean;
-    style?: {}
-}
+import { ElMessage } from "element-plus";
+
+type Danmu =
+  | string
+  | {
+      text: string;
+      opacity?: number;
+      color?: string;
+      border?: boolean;
+      style?: {};
+    };
 
 export function sendDanmu(msg: Danmu, art?: Artplayer) {
   if (!art || !art.plugins.artplayerPluginDanmuku) return;
   if (typeof msg === "string") {
     art.plugins.artplayerPluginDanmuku.emit({
       direct: true,
-      text: msg,
+      text: msg
     });
   } else {
     art.plugins.artplayerPluginDanmuku.emit({
@@ -20,7 +24,7 @@ export function sendDanmu(msg: Danmu, art?: Artplayer) {
       color: msg.color,
       opacity: msg.opacity,
       border: msg.border,
-      style: msg.style,
+      style: msg.style
     });
   }
 }
@@ -29,16 +33,38 @@ export function sendDanmu(msg: Danmu, art?: Artplayer) {
 export function artplayerStreamDanmu(streamURL: string) {
   return (art: Artplayer) => {
     let eventSource: EventSource | null = null;
-    art.once("video:canplay", () => {
+    let reconnectTimeout: number | null = null;
+
+    const connect = () => {
       eventSource = new EventSource(streamURL);
       eventSource.addEventListener("danmu", (event) => {
         sendDanmu(event.data, art);
       });
-      eventSource.onerror = (event) => {
-        console.error(event);
-      };
+      eventSource.addEventListener("error", (event) => {
+        console.error(`获取实时弹幕错误！${event}`);
+        if (eventSource?.readyState !== EventSource.CLOSED) {
+          return;
+        }
+
+        // 3秒后尝试重连
+        if (!reconnectTimeout) {
+          reconnectTimeout = window.setTimeout(() => {
+            ElMessage.warning("正在尝试重新连接弹幕服务器...");
+            connect();
+            reconnectTimeout = null;
+          }, 3000);
+        }
+      });
+    };
+
+    art.once("video:canplay", () => {
+      connect();
     });
+
     art.once("destroy", () => {
+      if (reconnectTimeout) {
+        clearTimeout(reconnectTimeout);
+      }
       eventSource?.close();
     });
   };