支持 ASS 字幕原样渲染与字幕显示设置

web/src/utils/subtitleASS.ts

@@ -0,0 +1,32 @@
+export type SubtitleChineseConverter = (text: string) => string
+
+function commaIndexAtField(line: string, fieldCount: number): number {
+  let index = -1
+  for (let field = 0; field < fieldCount; field += 1) {
+    index = line.indexOf(',', index + 1)
+    if (index < 0) return -1
+  }
+  return index
+}
+
+/**
+ * Convert only the Text column of ASS/SSA Dialogue lines. ASS styling tags,
+ * drawings, timing and positioning metadata are bytes-for-bytes preserved so
+ * the event can still be rendered by libass after a Chinese conversion.
+ */
+export function convertASSContent(
+  content: string,
+  convert: SubtitleChineseConverter,
+): string {
+  return content
+    .replace(/^\uFEFF/, '')
+    .split(/\r?\n/)
+    .map((line) => {
+      const lower = line.toLowerCase()
+      if (!lower.startsWith('dialogue:')) return line
+      const textIndex = commaIndexAtField(line, 9)
+      if (textIndex < 0) return line
+      return `${line.slice(0, textIndex + 1)}${convert(line.slice(textIndex + 1))}`
+    })
+    .join('\n')
+}

web/src/utils/subtitleDisplay.ts

@@ -0,0 +1,99 @@
+import type { CSSProperties } from 'react'
+
+export type SubtitlePosition = 'auto' | 'bottom' | 'lower' | 'middle' | 'top'
+export type SubtitleStylePreset = 'shadow' | 'outline' | 'box'
+
+export const SUBTITLE_POSITION_OPTIONS: Array<[SubtitlePosition, string]> = [
+  ['auto', '默认位置'],
+  ['bottom', '贴底'],
+  ['lower', '下方'],
+  ['middle', '居中'],
+  ['top', '顶部'],
+]
+
+export const SUBTITLE_STYLE_OPTIONS: Array<[SubtitleStylePreset, string]> = [
+  ['shadow', '柔和阴影'],
+  ['outline', '黑边描边'],
+  ['box', '半透明底衬'],
+]
+
+const POSITION_KEY = 'mebox.subtitle.position'
+const STYLE_KEY = 'mebox.subtitle.style'
+
+export function normalizeSubtitlePosition(value: unknown): SubtitlePosition {
+  return value === 'bottom' || value === 'lower' || value === 'middle' || value === 'top'
+    ? value
+    : 'auto'
+}
+
+export function normalizeSubtitleStyle(value: unknown): SubtitleStylePreset {
+  return value === 'outline' || value === 'box' ? value : 'shadow'
+}
+
+export function loadSubtitlePosition(): SubtitlePosition {
+  if (typeof window === 'undefined') return 'auto'
+  try {
+    return normalizeSubtitlePosition(window.localStorage.getItem(POSITION_KEY))
+  } catch {
+    return 'auto'
+  }
+}
+
+export function loadSubtitleStyle(): SubtitleStylePreset {
+  if (typeof window === 'undefined') return 'shadow'
+  try {
+    return normalizeSubtitleStyle(window.localStorage.getItem(STYLE_KEY))
+  } catch {
+    return 'shadow'
+  }
+}
+
+export function saveSubtitlePosition(position: SubtitlePosition): void {
+  try {
+    window.localStorage.setItem(POSITION_KEY, position)
+  } catch {
+    // localStorage may be unavailable in private mode; the player still works.
+  }
+}
+
+export function saveSubtitleStyle(style: SubtitleStylePreset): void {
+  try {
+    window.localStorage.setItem(STYLE_KEY, style)
+  } catch {
+    // localStorage may be unavailable in private mode; the player still works.
+  }
+}
+
+export function subtitleTextStyle(style: SubtitleStylePreset): CSSProperties {
+  if (style === 'outline') {
+    return {
+      fontWeight: 700,
+      textShadow: [
+        '-1.5px 0 #000',
+        '1.5px 0 #000',
+        '0 -1.5px #000',
+        '0 1.5px #000',
+        '-1px -1px #000',
+        '1px -1px #000',
+        '-1px 1px #000',
+        '1px 1px #000',
+      ].join(', '),
+    }
+  }
+  if (style === 'box') {
+    return {
+      fontWeight: 600,
+      background: 'rgba(0, 0, 0, 0.72)',
+      padding: '0.16em 0.5em',
+      borderRadius: '0.24em',
+      boxDecorationBreak: 'clone',
+      WebkitBoxDecorationBreak: 'clone',
+      textShadow: '0 1px 2px rgba(0, 0, 0, 0.85)',
+    }
+  }
+  return {
+    fontWeight: 500,
+    textShadow:
+      '0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 0, 0, 0.65)',
+  }
+}

web/src/utils/subtitleVTT.ts

@@ -0,0 +1,94 @@
+export type SubtitleCueAlignment = 'start' | 'center' | 'end' | 'left' | 'right'
+export type SubtitleCueVertical = 'rl' | 'lr'
+export type SubtitleCuePositionAlignment = SubtitleCueAlignment | 'line-left' | 'line-right' | 'auto'
+
+export type SubtitleCueSettings = {
+  align?: SubtitleCueAlignment
+  line?: string
+  lineAlign?: SubtitleCueAlignment
+  position?: number
+  positionAlign?: SubtitleCuePositionAlignment
+  size?: number
+  vertical?: SubtitleCueVertical
+}
+
+export type SubtitleCue = {
+  startTime: number
+  endTime: number
+  text: string
+  settings: SubtitleCueSettings
+}
+
+function parseVTTTimestamp(value: string): number {
+  const parts = value.trim().replace(',', '.').split(':')
+  if (parts.length !== 2 && parts.length !== 3) return Number.NaN
+  const seconds = Number(parts.pop())
+  const minutes = Number(parts.pop())
+  const hours = parts.length > 0 ? Number(parts.pop()) : 0
+  if (![hours, minutes, seconds].every(Number.isFinite)) return Number.NaN
+  return hours * 3600 + minutes * 60 + seconds
+}
+
+function parseCueSettings(tokens: string[]): SubtitleCueSettings {
+  const settings: SubtitleCueSettings = {}
+  for (const token of tokens) {
+    const colon = token.indexOf(':')
+    if (colon <= 0) continue
+    const key = token.slice(0, colon).toLowerCase()
+    const value = token.slice(colon + 1)
+    if (key === 'align') {
+      if (['start', 'center', 'end', 'left', 'right'].includes(value)) {
+        settings.align = value as SubtitleCueAlignment
+      }
+    } else if (key === 'line') {
+      settings.line = value
+    } else if (key === 'linealign') {
+      if (['start', 'center', 'end'].includes(value)) {
+        settings.lineAlign = value as SubtitleCueAlignment
+      }
+    } else if (key === 'position') {
+      const position = Number.parseFloat(value)
+      if (Number.isFinite(position)) settings.position = Math.min(100, Math.max(0, position))
+    } else if (key === 'positionalign') {
+      if (['start', 'center', 'end', 'line-left', 'line-right', 'auto'].includes(value)) {
+        settings.positionAlign = value as SubtitleCuePositionAlignment
+      }
+    } else if (key === 'size') {
+      const size = Number.parseFloat(value)
+      if (Number.isFinite(size)) settings.size = Math.min(100, Math.max(0, size))
+    } else if (key === 'vertical') {
+      if (value === 'rl' || value === 'lr') settings.vertical = value
+    }
+  }
+  return settings
+}
+
+export function parseWebVTTCues(body: string): SubtitleCue[] {
+  const blocks = body
+    .replace(/^\uFEFF/, '')
+    .replace(/\r\n?/g, '\n')
+    .split(/\n{2,}/)
+  const cues: SubtitleCue[] = []
+
+  for (const block of blocks) {
+    const lines = block.split('\n')
+    const timingIndex = lines.findIndex((line) => line.includes('-->'))
+    if (timingIndex < 0) continue
+
+    const [rawStart, rawRest] = lines[timingIndex].split('-->', 2)
+    const rest = rawRest.trim().split(/\s+/)
+    const startTime = parseVTTTimestamp(rawStart)
+    const endTime = parseVTTTimestamp(rest[0] || '')
+    const text = lines.slice(timingIndex + 1).join('\n').trim()
+    if (Number.isFinite(startTime) && Number.isFinite(endTime) && endTime >= startTime && text) {
+      cues.push({
+        startTime,
+        endTime,
+        text,
+        settings: parseCueSettings(rest.slice(1)),
+      })
+    }
+  }
+
+  return cues
+}