refactor(video): migrate to jassub for subtitle handling

Signed-off-by: MadDogOwner <xiaoran@xrgzs.top>

Author: xrgzs

package.json

@@ -37,7 +37,6 @@
   "license": "MIT",
   "devDependencies": {
     "@crowdin/cli": "^4.14.1",
-    "@hrgui/libass-wasm-ts": "^1.0.3",
     "@types/bencode": "^2.0.4",
     "@types/crypto-js": "^4.2.2",
     "@types/mark.js": "^8.11.12",
@@ -92,9 +91,9 @@
     "highlight.js": "^11.11.1",
     "hls.js": "^1.6.15",
     "ini": "^6.0.0",
+    "jassub": "^2.4.1",
     "just-once": "^2.2.0",
     "katex": "^0.16.28",
-    "libass-wasm": "^4.1.0",
     "libheif-js": "^1.19.8",
     "lightgallery": "^2.9.0",
     "mark.js": "^8.11.1",

pnpm-lock.yaml

@@ -0,0 +1,37 @@
+import type Artplayer from "artplayer"
+import type { JASSUBOptions } from "jassub"
+import JASSUB from "jassub"
+// import modernWasmUrl from "jassub/dist/wasm/jassub-worker-modern.wasm?url"
+// import wasmUrl from "jassub/dist/wasm/jassub-worker.wasm?url"
+
+type SubtitleSourceOption =
+  | { subUrl: string; subContent?: string }
+  | { subUrl?: string; subContent: string }
+
+type ArtplayerPluginAssOptions = Omit<
+  JASSUBOptions,
+  "video" | "canvas" | "subUrl" | "subContent"
+> &
+  SubtitleSourceOption
+
+export default function artplayerPluginAss(option: ArtplayerPluginAssOptions) {
+  return (art: Artplayer) => {
+    const instance = new JASSUB({
+      video: art.video,
+      debug: import.meta.env.DEV,
+      ...option,
+    } satisfies JASSUBOptions)
+
+    instance._canvasParent?.style &&
+      (instance._canvasParent.style.zIndex = "20")
+
+    art.on("destroy", () => {
+      instance.destroy()
+    })
+
+    return {
+      name: "artplayerPluginAss",
+      instance,
+    }
+  }
+}

src/components/artplayer-plugin-ass/fonts/SourceHanSansCN-Bold.woff2

@@ -47,26 +47,12 @@ export const useCDN = () => {
       : `${static_path}/libheif`
   }
 
-  const libAssPath = () => {
-    return import.meta.env.VITE_LITE === "true"
-      ? npm(packageJson.name, packageJson.version, "dist/static/libass-wasm")
-      : `${static_path}/libass-wasm`
-  }
-
-  const fontsPath = () => {
-    return import.meta.env.VITE_LITE === "true"
-      ? npm(packageJson.name, packageJson.version, "dist/static/fonts")
-      : `${static_path}/fonts`
-  }
-
   return {
     npm,
     monacoPath,
     katexCSSPath,
     mermaidJSPath,
     ruffleJSPath,
     libHeifPath,
-    libAssPath,
-    fontsPath,
   }
 }

src/components/artplayer-plugin-ass/fonts/TimesNewRoman.ttf

@@ -5,9 +5,9 @@ import { getMainColor, getSettingBool, objStore, password } from "~/store"
 import { ObjType, PResp } from "~/types"
 import { ext, handleResp, notify, r, pathDir, pathJoin } from "~/utils"
 import Artplayer from "artplayer"
-import { type Option } from "artplayer/types/option"
-import { type Setting } from "artplayer/types/setting"
-import { type Events } from "artplayer/types/events"
+import { type Option } from "artplayer"
+import { type Setting } from "artplayer"
+import { type Events } from "artplayer"
 import artplayerPluginDanmuku from "artplayer-plugin-danmuku"
 import { type Option as DanmukuOption } from "artplayer-plugin-danmuku"
 import artplayerPluginAss from "~/components/artplayer-plugin-ass"
@@ -180,7 +180,6 @@ const Preview = () => {
       isEnhanceAssMode = true
       option.plugins?.push(
         artplayerPluginAss({
-          // debug: true,
           subUrl: proxyLink(defaultSubtitle, true),
         }),
       )

src/components/artplayer-plugin-ass/index.d.ts

@@ -5,9 +5,9 @@ import { getMainColor, getSettingBool, objStore } from "~/store"
 import { ObjType } from "~/types"
 import { ext, pathDir, pathJoin } from "~/utils"
 import Artplayer from "artplayer"
-import { type Option } from "artplayer/types/option"
-import { type Setting } from "artplayer/types/setting"
-import { type Events } from "artplayer/types/events"
+import { type Option } from "artplayer"
+import { type Setting } from "artplayer"
+import { type Events } from "artplayer"
 import artplayerPluginDanmuku from "artplayer-plugin-danmuku"
 import { type Option as DanmukuOption } from "artplayer-plugin-danmuku"
 import artplayerPluginAss from "~/components/artplayer-plugin-ass"
@@ -170,7 +170,6 @@ const Preview = () => {
       isEnhanceAssMode = true
       option.plugins?.push(
         artplayerPluginAss({
-          // debug: true,
           subUrl: proxyLink(defaultSubtitle, true),
         }),
       )