feat: add danmuku support for video preview page (#4)

Now video preview page can autoload .xml file matching video file name
as danmu.

package.json

@@ -47,6 +47,7 @@
     "@stitches/core": "^1.2.8",
     "aplayer": "^1.10.1",
     "artplayer": "^4.5.4",
+    "artplayer-plugin-danmuku": "^4.4.8",
     "axios": "^0.27.2",
     "copy-to-clipboard": "^3.3.2",
     "flv.js": "^1.6.2",

pnpm-lock.yaml

@@ -13,6 +13,7 @@ specifiers:
   '@vitejs/plugin-legacy': ^2.0.1
   aplayer: ^1.10.1
   artplayer: ^4.5.4
+  artplayer-plugin-danmuku: ^4.4.8
   axios: ^0.27.2
   copy-to-clipboard: ^3.3.2
   flv.js: ^1.6.2
@@ -35,13 +36,14 @@ specifiers:
 
 dependencies:
   '@hope-ui/solid': 0.6.2_sszzskbueur5rfztas6oehtsky
-  '@monaco-editor/loader': 1.3.2
+  '@monaco-editor/loader': 1.3.2_monaco-editor@0.34.0
   '@motionone/solid': 10.14.1_solid-js@1.4.8
   '@solid-primitives/i18n': 1.1.0_solid-js@1.4.8
   '@solid-primitives/storage': 1.3.1_solid-js@1.4.8
   '@stitches/core': 1.2.8
   aplayer: 1.10.1
   artplayer: 4.5.4
+  artplayer-plugin-danmuku: 4.4.8
   axios: 0.27.2
   copy-to-clipboard: 3.3.2
   flv.js: 1.6.2
@@ -479,11 +481,12 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
-  /@monaco-editor/loader/1.3.2:
+  /@monaco-editor/loader/1.3.2_monaco-editor@0.34.0:
     resolution: {integrity: sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==}
     peerDependencies:
       monaco-editor: '>= 0.21.0 < 1'
     dependencies:
+      monaco-editor: 0.34.0
       state-local: 1.0.7
     dev: false
 
@@ -662,6 +665,10 @@ packages:
       smoothscroll: 0.4.0
     dev: false
 
+  /artplayer-plugin-danmuku/4.4.8:
+    resolution: {integrity: sha512-l7a20i19emzHP//R1UQ4lbkmCbVBEbBazCtHSxUq3H7Pj32Rfft9Tc5afrG5uJEvtkxDKDSBdBavrmwh5aM64w==}
+    dev: false
+
   /artplayer/4.5.4:
     resolution: {integrity: sha512-3dw9m6aDPsHwFHzN0Yj8zlPdKbKzxlPcaNgvl1XTbLiPaHY2Lt5BbP1qz/NR2VHmSgaMxmfs/ha1ufZjSbwsEg==}
     dependencies:
@@ -1846,6 +1853,10 @@ packages:
       minimist: 1.2.6
     dev: true
 
+  /monaco-editor/0.34.0:
+    resolution: {integrity: sha512-VF+S5zG8wxfinLKLrWcl4WUizMx+LeJrG4PM/M78OhcwocpV0jiyhX/pG6Q9jIOhrb/ckYi6nHnaR5OojlOZCQ==}
+    dev: false
+
   /mri/1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}

src/pages/home/previews/video.tsx

@@ -5,6 +5,7 @@ import { getSettingBool, objStore } from "~/store";
 import { ObjType } from "~/types";
 import { convertURL, ext } from "~/utils";
 import Artplayer from "artplayer";
+import artplayerPluginDanmuku from "artplayer-plugin-danmuku"
 import flvjs from "flv.js";
 import Hls from "hls.js";
 import { currentLang } from "~/app/i18n";
@@ -111,12 +112,41 @@ const Preview = () => {
     }
     return false;
   });
+  const danmu = objStore.related.find((obj) => {
+    for (const ext of [".xml"]) {
+      if (obj.name.endsWith(ext)) {
+        return true;
+      }
+    }
+    return false;
+  });
   if (subtitle) {
     option.subtitle = {
       url: proxyLink(subtitle, true),
       type: ext(subtitle.name) as any,
     };
   }
+  if (danmu) {
+    option.plugins = [
+      artplayerPluginDanmuku({
+        danmuku: proxyLink(danmu, true),
+        speed: 5,
+        opacity: 1,
+        fontSize: 25,
+        color: '#FFFFFF',
+        mode: 0,
+        margin: [0, '0%'],
+        antiOverlap: false,
+        useWorker: true,
+        synchronousPlayback: false,
+        lockTime: 5,
+        maxLength: 100,
+        minWidth: 200,
+        maxWidth: 400,
+        theme: 'dark',
+      })
+    ]
+  }
   onMount(() => {
     player = new Artplayer(option);
     player.on("video:ended", () => {