lzc-video-player 0.0.0

package/src/components/Video/components/LzcOverlay/useOctopusRenderer.ts

@@ -0,0 +1,230 @@
+import octopusScriptUrl from "libass-wasm/dist/js/subtitles-octopus.js?url"
+import octopusWorkerScriptUrl from "libass-wasm/dist/js/subtitles-octopus-worker.js?url"
+import octopusWorkerWasmUrl from "libass-wasm/dist/js/subtitles-octopus-worker.wasm?url"
+import octopusLegacyWorkerScriptUrl from "libass-wasm/dist/js/subtitles-octopus-worker-legacy.js?url"
+
+let octopusScriptPromise: Promise<void> | null = null
+let octopusWorkerBlobUrl: string | null = null
+let octopusLegacyWorkerBlobUrl: string | null = null
+const assContentCache = new Map<string, string>()
+
+function resolveBundledAssetUrl(url: string): string {
+  if (/^(https?:)?\/\//i.test(url) || /^(blob:|data:)/i.test(url)) {
+    return url
+  }
+  if (typeof window === "undefined") {
+    return url
+  }
+  return new URL(url, window.location.href).toString()
+}
+
+function createClassicWorkerBlobUrl(source: string): string {
+  return URL.createObjectURL(
+    new Blob([source], {
+      type: "text/javascript",
+    }),
+  )
+}
+
+function getOctopusWorkerUrl(): string {
+  if (octopusWorkerBlobUrl) {
+    return octopusWorkerBlobUrl
+  }
+  const workerScriptUrl = resolveBundledAssetUrl(octopusWorkerScriptUrl)
+  const workerWasmUrl = resolveBundledAssetUrl(octopusWorkerWasmUrl)
+  octopusWorkerBlobUrl = createClassicWorkerBlobUrl(`
+    var __octopusLocateFile = self.Module && self.Module.locateFile;
+    self.Module = Object.assign({}, self.Module || {}, {
+      locateFile: function (path, scriptDirectory) {
+        if (path === "subtitles-octopus-worker.wasm") {
+          return ${JSON.stringify(workerWasmUrl)};
+        }
+        if (typeof __octopusLocateFile === "function") {
+          return __octopusLocateFile(path, scriptDirectory);
+        }
+        return scriptDirectory + path;
+      }
+    });
+    importScripts(${JSON.stringify(workerScriptUrl)});
+  `)
+  return octopusWorkerBlobUrl
+}
+
+function getOctopusLegacyWorkerUrl(): string {
+  if (octopusLegacyWorkerBlobUrl) {
+    return octopusLegacyWorkerBlobUrl
+  }
+  const legacyWorkerScriptUrl = resolveBundledAssetUrl(
+    octopusLegacyWorkerScriptUrl,
+  )
+  octopusLegacyWorkerBlobUrl = createClassicWorkerBlobUrl(`
+    importScripts(${JSON.stringify(legacyWorkerScriptUrl)});
+  `)
+  return octopusLegacyWorkerBlobUrl
+}
+
+function normalizeOctopusAssetUrl(input: string): string {
+  const raw = (input || "").trim()
+  if (!raw) return ""
+  if (/^(blob:|data:)/i.test(raw)) return raw
+  const encoded = encodeURI(raw)
+  return resolveBundledAssetUrl(
+    encoded.replace(/\[/g, "%5B").replace(/\]/g, "%5D"),
+  )
+}
+
+async function loadAssContent(url: string): Promise<string> {
+  const cached = assContentCache.get(url)
+  if (cached !== undefined) {
+    return cached
+  }
+  const response = await fetch(url, {
+    method: "GET",
+    credentials: "include",
+    cache: "force-cache",
+  })
+  if (!response.ok) {
+    throw new Error(`failed to fetch ass subtitle: ${response.status}`)
+  }
+  const content = await response.text()
+  if (!content.trim()) {
+    throw new Error("ass subtitle is empty")
+  }
+  assContentCache.set(url, content)
+  return content
+}
+
+function loadOctopusScript(): Promise<void> {
+  if (typeof window === "undefined") {
+    return Promise.reject(new Error("window is not available"))
+  }
+  if (typeof (window as any).SubtitlesOctopus === "function") {
+    return Promise.resolve()
+  }
+  if (octopusScriptPromise) {
+    return octopusScriptPromise
+  }
+  octopusScriptPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script")
+    script.src = resolveBundledAssetUrl(octopusScriptUrl)
+    script.async = true
+    script.onload = () => resolve()
+    script.onerror = () =>
+      reject(new Error("failed to load subtitles-octopus script"))
+    document.head.appendChild(script)
+  })
+  return octopusScriptPromise
+}
+
+export interface OctopusTrackOptions {
+  assUrl: string
+  fonts: string[]
+  onError?: (err: unknown) => void
+}
+
+export function useOctopusRenderer(video: HTMLVideoElement) {
+  let instance: any = null
+  let trackKey = ""
+  let disposed = false
+
+  const destroy = () => {
+    if (!instance) return
+    try {
+      instance.dispose?.()
+    } catch (err) {
+      if (
+        err instanceof TypeError &&
+        String(err.message || err).includes("postMessage")
+      ) {
+        console.warn("Octopus instance was already torn down")
+      } else {
+        console.error("Failed to dispose octopus instance", err)
+      }
+    } finally {
+      instance = null
+      trackKey = ""
+    }
+  }
+
+  const attach = async (options: OctopusTrackOptions): Promise<boolean> => {
+    if (disposed) {
+      return false
+    }
+    const assUrl = normalizeOctopusAssetUrl(options.assUrl || "")
+    if (!assUrl) {
+      destroy()
+      return false
+    }
+    const fonts = (options.fonts || [])
+      .map((item) => normalizeOctopusAssetUrl(item))
+      .filter((item) => !!item)
+    if (fonts.length === 0) {
+      destroy()
+      return false
+    }
+    const nextKey = JSON.stringify([assUrl, [...fonts].sort()])
+    if (instance && nextKey === trackKey) {
+      return true
+    }
+
+    let assContent = ""
+    try {
+      assContent = await loadAssContent(assUrl)
+    } catch (err) {
+      console.error("Failed to load ass subtitle content", err)
+      options.onError?.(err)
+      destroy()
+      return false
+    }
+
+    try {
+      await loadOctopusScript()
+    } catch (err) {
+      console.error("Failed to load octopus script", err)
+      options.onError?.(err)
+      destroy()
+      return false
+    }
+
+    const SubtitlesOctopus = (window as any).SubtitlesOctopus
+    if (typeof SubtitlesOctopus !== "function") {
+      options.onError?.(new Error("SubtitlesOctopus is not available"))
+      destroy()
+      return false
+    }
+
+    destroy()
+    try {
+      instance = new SubtitlesOctopus({
+        video,
+        subContent: assContent,
+        fonts,
+        fallbackFont: fonts[0],
+        workerUrl: getOctopusWorkerUrl(),
+        legacyWorkerUrl: getOctopusLegacyWorkerUrl(),
+        onError: (err: unknown) => {
+          options.onError?.(err)
+        },
+      })
+      trackKey = nextKey
+      return true
+    } catch (err) {
+      console.error("Failed to initialize octopus", err)
+      options.onError?.(err)
+      destroy()
+      return false
+    }
+  }
+
+  const dispose = () => {
+    disposed = true
+    destroy()
+  }
+
+  return {
+    attach,
+    destroy,
+    dispose,
+    isAttached: () => !!instance,
+  }
+}

package/src/components/Video/components/LzcOverlay/useSubtitleRenderEngine.ts

@@ -0,0 +1,79 @@
+import type { LzcPlayer } from "@/components/Video/player"
+import type { Subtitle } from "@/model"
+import { ref } from "vue"
+import { useOctopusRenderer } from "./useOctopusRenderer"
+
+export type SubtitleRenderMode = "none" | "vtt" | "ass-octopus"
+
+export function useSubtitleRenderEngine(player: LzcPlayer) {
+  const mode = ref<SubtitleRenderMode>("none")
+  const octopus = useOctopusRenderer(player.$video())
+  let activeRequestId = 0
+
+  const reset = () => {
+    activeRequestId += 1
+    octopus.destroy()
+    mode.value = "none"
+  }
+
+  const selectMode = async (
+    subtitle: Subtitle | undefined,
+    hidden: boolean,
+  ): Promise<SubtitleRenderMode> => {
+    const requestId = ++activeRequestId
+
+    if (!subtitle || hidden) {
+      octopus.destroy()
+      mode.value = "none"
+      return mode.value
+    }
+
+    const assUrl = (subtitle.ass_url || "").trim()
+    const assFonts = (subtitle.ass_fonts || []).filter((item) => !!item?.trim())
+    const assRenderable = subtitle.ass_renderable === true
+    const allowOctopus = assRenderable && !!assUrl && assFonts.length > 0
+    if (allowOctopus) {
+      const ok = await octopus.attach({
+        assUrl,
+        fonts: assFonts,
+        onError: (err) => {
+          console.error("Octopus render failed, fallback to VTT", err)
+        },
+      })
+      if (requestId !== activeRequestId) {
+        octopus.destroy()
+        return "none"
+      }
+      if (ok) {
+        mode.value = "ass-octopus"
+        return mode.value
+      }
+    }
+
+    if (requestId !== activeRequestId) {
+      octopus.destroy()
+      return "none"
+    }
+
+    octopus.destroy()
+    if ((subtitle.vtt_url || "").trim()) {
+      mode.value = "vtt"
+    } else {
+      mode.value = "none"
+    }
+    return mode.value
+  }
+
+  const dispose = () => {
+    activeRequestId += 1
+    octopus.dispose()
+    mode.value = "none"
+  }
+
+  return {
+    mode,
+    reset,
+    selectMode,
+    dispose,
+  }
+}

package/src/components/Video/components/LzcOverlay/useSubtitleTrack.ts

@@ -0,0 +1,139 @@
+export interface SubtitleCue {
+  start: number
+  end: number
+  text: string
+}
+
+const cueCache = new Map<string, Promise<SubtitleCue[]>>()
+
+function parseTimeToken(token: string): number {
+  const normalized = token.trim().replace(",", ".")
+  const parts = normalized.split(":")
+  if (parts.length < 2 || parts.length > 3) return Number.NaN
+
+  const seg = parts.map((part) => Number(part))
+  if (seg.some((v) => !Number.isFinite(v))) return Number.NaN
+
+  if (parts.length === 2) {
+    const [mm, ss] = seg
+    return mm * 60 + ss
+  }
+
+  const [hh, mm, ss] = seg
+  return hh * 3600 + mm * 60 + ss
+}
+
+function decodeEntities(text: string): string {
+  return text
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+}
+
+function normalizeCueText(text: string): string {
+  const withoutTags = text
+    .replace(/<\/?c(\.[^>]*)?>/gi, "")
+    .replace(/<\/?(i|b|u|ruby|rt|v(\s+[^>]*)?)>/gi, "")
+    .replace(/<[^>]+>/g, "")
+  return decodeEntities(withoutTags).trim()
+}
+
+export function parseWebVtt(content: string): SubtitleCue[] {
+  const text = content.replace(/^\uFEFF/, "")
+  const lines = text.split(/\r?\n/)
+  const cues: SubtitleCue[] = []
+
+  let i = 0
+  while (i < lines.length) {
+    let line = lines[i].trim()
+
+    if (!line) {
+      i += 1
+      continue
+    }
+
+    if (line.startsWith("WEBVTT")) {
+      i += 1
+      continue
+    }
+
+    if (line.startsWith("NOTE")) {
+      i += 1
+      while (i < lines.length && lines[i].trim()) {
+        i += 1
+      }
+      continue
+    }
+
+    let timingLine = line
+    if (!timingLine.includes("-->")) {
+      i += 1
+      if (i >= lines.length) break
+      timingLine = lines[i].trim()
+    }
+
+    if (!timingLine.includes("-->")) {
+      i += 1
+      continue
+    }
+
+    const [startRaw, endRaw] = timingLine.split("-->")
+    const start = parseTimeToken(startRaw)
+    const end = parseTimeToken((endRaw || "").trim().split(/\s+/)[0] || "")
+
+    i += 1
+    const payload: string[] = []
+    while (i < lines.length && lines[i].trim()) {
+      payload.push(lines[i])
+      i += 1
+    }
+
+    if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start) {
+      continue
+    }
+
+    const parsed = normalizeCueText(payload.join("\n"))
+    if (!parsed) {
+      continue
+    }
+
+    cues.push({
+      start,
+      end,
+      text: parsed,
+    })
+  }
+
+  return cues
+}
+
+export function fetchSubtitleCues(url: string): Promise<SubtitleCue[]> {
+  const normalized = url.trim()
+  if (!normalized) {
+    return Promise.resolve([])
+  }
+
+  const cached = cueCache.get(normalized)
+  if (cached) {
+    return cached
+  }
+
+  const request = fetch(normalized)
+    .then((resp) => {
+      if (!resp.ok) {
+        throw new Error(`Http Status: ${resp.status}`)
+      }
+      return resp.text()
+    })
+    .then((content) => parseWebVtt(content))
+    .catch((err) => {
+      console.error("Failed to load subtitle vtt", err)
+      cueCache.delete(normalized)
+      return []
+    })
+
+  cueCache.set(normalized, request)
+  return request
+}

package/src/components/Video/components/useLzcCommon.ts

@@ -0,0 +1,16 @@
+export function formatTime(second: number): string {
+  if (second) {
+    const result = new Date(second * 1000).toISOString().substring(11, 19)
+    if (result.startsWith("00:")) {
+      return result.substring(3)
+    }
+    return result
+  }
+  return "00:00"
+}
+
+export function remHeight(rem: number, pixelRatio?: false): number {
+  const result =
+    rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
+  return pixelRatio ? window.devicePixelRatio * result : result
+}