From 557102f6a438f00426bec043d2e6c7209dcf598c Mon Sep 17 00:00:00 2001
From: 123485k <1758961307@qq.com>
Date: Sat, 11 Jun 2022 20:12:35 +0800
Subject: [PATCH] feat: add danmuku support

---
 package.json                     |  1 +
 src/pages/list/preview/video.tsx | 35 +++++++++++++++++++++++++++++++-
 yarn.lock                        |  5 +++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8e27a50..90cebc1 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@monaco-editor/react": "^4.4.4",
     "@xhofe/react-viewer": "^3.2.3",
     "artplayer": "^4.4.3",
+    "artplayer-plugin-danmuku": "^4.4.6",
     "axios": "^0.26.0",
     "flv.js": "^1.6.2",
     "framer-motion": "^5.5.6",
diff --git a/src/pages/list/preview/video.tsx b/src/pages/list/preview/video.tsx
index ccbb3e8..ad32c04 100644
--- a/src/pages/list/preview/video.tsx
+++ b/src/pages/list/preview/video.tsx
@@ -23,7 +23,7 @@ import { BsCardList } from "react-icons/bs";
 import useFileUrl from "../../../hooks/useFileUrl";
 import { isMobile, userAgent } from "../../../utils/compatibility";
 import Hls from "hls.js";
-
+import artplayerPluginDanmuku from "artplayer-plugin-danmuku"
 export const type = 3;
 export const exts = ["m3u8"];
 // const DirectDrivers = ["Native", "GoogleDrive"];
@@ -141,6 +141,39 @@ const Video = ({ file }: FileProps) => {
         },
       };
     }
+    const danmu = lastFiles.find((f) => {
+      const fName = f.name;
+      if (!fName.startsWith(filename)) {
+        return false;
+      }
+      for (const ext of ["xml"]) {
+        if (fName.endsWith(ext)) {
+          return true;
+        }
+      }
+      return false;
+    });
+    if (danmu) {
+      options.plugins = [
+        artplayerPluginDanmuku({
+          danmuku: fileUrl(danmu),
+          speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+          opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+          fontSize: 25, // 字体大小，支持数字和百分比
+          color: '#FFFFFF', // 默认字体颜色
+          mode: 0, // 默认模式，0-滚动，1-静止
+          margin: [0, '0%'], // 弹幕上下边距，支持数字和百分比
+          antiOverlap: false, // 是否防重叠
+          useWorker: true, // 是否使用 web worker
+          synchronousPlayback: false, // 是否同步到播放速度
+          lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+          maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+          minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+          maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+          theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+        })
+      ]
+    }
     art = new Artplayer(options);
     art.on("video:ended", () => {
       const index = videoFiles.findIndex((f) => f.name === file.name);
diff --git a/yarn.lock b/yarn.lock
index 89b687f..e07170c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1214,6 +1214,11 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^1.0.0"
 
+artplayer-plugin-danmuku@^4.4.6:
+  version "4.4.6"
+  resolved "https://registry.npmmirror.com/artplayer-plugin-danmuku/-/artplayer-plugin-danmuku-4.4.6.tgz#3f01a60f71992d8779b3bb028e93929da7a4dcd7"
+  integrity sha512-Q5LWMwzdtFF/SmRQzjD8itMG6v/VghOmHiUe0WM3mnuKRZCS6H4wWsE3dCp95UTPY9GxaRmq0t5T2miVc6/1oQ==
+
 artplayer@^4.4.3:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/artplayer/-/artplayer-4.4.3.tgz#9387d30ecac836f4918d6c083a6cb66d97932ed3"