akarisub 0.2.2 → 1.0.0

package/src/ts/akarisub.ts

@@ -1,1272 +0,0 @@
-/**
- * Main AkariSub class - TypeScript implementation.
- * High-level ASS/SSA subtitle renderer for web browsers using libass.
- */
-
-import type {
-  AkariSubOptions,
-  ASSEvent,
-  ASSStyle,
-  PerformanceStats,
-  RenderImage,
-  RenderTimes,
-  VideoFrameCallbackMetadata,
-  SubtitleColorSpace,
-  WebYCbCrColorSpace
-} from './types'
-import type { EncryptedSubtitleContent } from './types'
-import {
-  webYCbCrMap,
-  colorMatrixConversionMap,
-  computeCanvasSize,
-  getVideoPosition,
-  fixAlpha,
-  getAlphaBug,
-  getBitmapBug
-} from './utils'
-import { WebGPURenderer, isWebGPUSupported } from './webgpu-renderer'
-import { WebGL2Renderer, isWebGL2Supported } from './webgl2-renderer'
-
-type AnyGPURenderer = WebGPURenderer | WebGL2Renderer
-
-const DEFAULT_RENDER_AHEAD = 0.008
-const DEFAULT_PIPELINE_LATENCY_MS = DEFAULT_RENDER_AHEAD * 1000
-const DEFAULT_WEBKIT_PIPELINE_LATENCY_MS = 16
-
-const isLikelyWebKit = (): boolean => {
-  if (typeof navigator === 'undefined') return false
-
-  const userAgent = navigator.userAgent || ''
-  const vendor = navigator.vendor || ''
-  const isIOSWebKit = /\b(iPhone|iPad|iPod)\b/i.test(userAgent)
-
-  if (!/AppleWebKit/i.test(userAgent)) return false
-  if (isIOSWebKit) return true
-
-  if (/\b(Chrome|Chromium|Edg|OPR|SamsungBrowser|Firefox)\b/i.test(userAgent)) {
-    return false
-  }
-
-  return vendor.includes('Apple')
-}
-
-/**
- * AkariSub - JavaScript ASS/SSA Subtitle Renderer
- *
- * Renders ASS/SSA subtitles on an HTML5 video element using libass compiled to WebAssembly.
- *
- * @example
- * ```typescript
- * const renderer = new AkariSub({
- *   video: document.querySelector('video'),
- *   subUrl: '/subtitles/example.ass',
- *   workerUrl: '/akarisub-worker.js'
- * });
- *
- * // Later, cleanup
- * renderer.destroy();
- * ```
- */
-export default class AkariSub extends EventTarget {
-  private static readonly MAX_PENDING_DEMANDS = 3
-
-  // Feature detection cache (static)
-  private static _hasAlphaBug: boolean | null = null
-  private static _hasBitmapBug: boolean | null = null
-
-  // Instance properties
-  private _loaded: Promise<void>
-  private _init!: () => void
-  private _onDemandRender: boolean
-  private _offscreenRender: boolean
-  private _video?: HTMLVideoElement
-  private _videoWidth: number = 0
-  private _videoHeight: number = 0
-  private _videoColorSpace: WebYCbCrColorSpace | null = null
-  private _canvas!: HTMLCanvasElement
-  private _canvasParent?: HTMLDivElement
-  private _bufferCanvas: HTMLCanvasElement
-  private _bufferCtx: CanvasRenderingContext2D
-  private _canvasctrl!: HTMLCanvasElement | OffscreenCanvas
-  private _ctx: CanvasRenderingContext2D | false | null = null
-  private _lastRenderTime: number = 0
-  private _playstate: boolean = true
-  private _destroyed: boolean = false
-  private _workerReady: boolean = false
-  private _ro?: ResizeObserver
-  private _worker: Worker
-  private _pendingDemandTimes: Array<{ mediaTime: number; width: number; height: number }> = []
-  private readonly _isLikelyWebKit: boolean
-  private _activeDemandStartedAt: number = 0
-  private _smoothedDemandLatencyMs: number
-
-  // Bound methods for event listeners
-  private _boundResize: () => void
-  private _boundTimeUpdate: (e: Event) => void
-  private _boundSetRate: () => void
-  private _boundUpdateColorSpace: () => void
-  private _boundHandleRVFC: (now: number, metadata: VideoFrameCallbackMetadata) => void
-
-  // GPU renderer (WebGPU or WebGL2 – whichever initialises first in the fallback chain)
-  private _gpuRenderer: AnyGPURenderer | null = null
-  private _rendererType: 'webgpu' | 'webgl2' | 'canvas2d' = 'canvas2d'
-  private _onCanvasFallback?: () => void
-
-  // Cached render data to reduce allocations
-  private _lastRenderWidth: number = 0
-  private _lastRenderHeight: number = 0
-  private _gpuBitmapImages: Array<{ image: ImageBitmap; x: number; y: number }> = []
-
-  // Public properties
-  public timeOffset: number
-  public debug: boolean
-  public prescaleFactor: number
-  public prescaleHeightLimit: number
-  public maxRenderHeight: number
-  public busy: boolean = false
-  public renderAhead: number
-
-  constructor(options: AkariSubOptions) {
-    super()
-
-    if (!globalThis.Worker) {
-      throw this.destroy(new Error('Worker not supported'))
-    }
-    if (!options) {
-      throw this.destroy(new Error('No options provided'))
-    }
-
-    this._loaded = new Promise((resolve) => {
-      this._init = resolve
-    })
-
-    this._isLikelyWebKit = isLikelyWebKit()
-    this._smoothedDemandLatencyMs = this._isLikelyWebKit
-      ? DEFAULT_WEBKIT_PIPELINE_LATENCY_MS
-      : DEFAULT_PIPELINE_LATENCY_MS
-
-    // Run feature tests
-    const test = AkariSub._test()
-
-    this._onDemandRender = 'requestVideoFrameCallback' in HTMLVideoElement.prototype && (options.onDemandRender ?? true)
-
-    this._onCanvasFallback = options.onCanvasFallback
-
-    const canUseGPURenderer = !this._isLikelyWebKit && !options.canvas && (isWebGPUSupported() || isWebGL2Supported())
-    const shouldUseAsyncRender =
-      typeof createImageBitmap !== 'undefined' && (options.asyncRender ?? (!this._isLikelyWebKit && !canUseGPURenderer))
-
-    // Don't support offscreen rendering on custom canvases
-    this._offscreenRender =
-      'transferControlToOffscreen' in HTMLCanvasElement.prototype &&
-      !options.canvas &&
-      !canUseGPURenderer &&
-      (options.offscreenRender ?? true)
-
-    this.timeOffset = options.timeOffset || 0
-    this._video = options.video
-    this._canvas = options.canvas!
-
-    if (this._video && !this._canvas) {
-      this._canvasParent = document.createElement('div')
-      this._canvasParent.className = 'AkariSub'
-      this._canvasParent.style.position = 'relative'
-      this._canvas = this._createCanvas()
-      this._video.insertAdjacentElement('afterend', this._canvasParent)
-    } else if (!this._canvas) {
-      throw this.destroy(new Error("Don't know where to render: you should give video or canvas in options."))
-    }
-
-    this._bufferCanvas = document.createElement('canvas')
-    const bufferCtx = this._bufferCanvas.getContext('2d')
-    if (!bufferCtx) throw this.destroy(new Error('Canvas rendering not supported'))
-    this._bufferCtx = bufferCtx
-
-    // Try GPU renderers first (WebGPU → WebGL2 → Canvas2D)
-    if (canUseGPURenderer) {
-      this._initGPURenderer()
-    } else if (!this._offscreenRender) {
-      this._ctx = this._canvas.getContext('2d', { alpha: true, desynchronized: true })
-    }
-
-    this._canvasctrl = this._offscreenRender
-      ? (
-        this._canvas as HTMLCanvasElement & { transferControlToOffscreen(): OffscreenCanvas }
-      ).transferControlToOffscreen()
-      : this._canvas
-
-    this._lastRenderTime = 0
-    this.debug = !!options.debug
-    this.prescaleFactor = options.prescaleFactor || 1.0
-    this.prescaleHeightLimit = options.prescaleHeightLimit || 1080
-    this.maxRenderHeight = options.maxRenderHeight || 0
-    this.renderAhead = options.renderAhead ?? DEFAULT_RENDER_AHEAD
-
-    // Bind methods
-    this._boundResize = this.resize.bind(this)
-    this._boundTimeUpdate = this._timeupdate.bind(this)
-    this._boundSetRate = () => this.setRate((this._video as HTMLVideoElement).playbackRate)
-    this._boundUpdateColorSpace = this._updateColorSpace.bind(this)
-    this._boundHandleRVFC = this._handleRVFC.bind(this)
-
-    if (this._video) {
-      this.setVideo(this._video)
-    }
-
-    if (this._onDemandRender) {
-      this.busy = false
-      this._pendingDemandTimes.length = 0
-    }
-
-    // Create worker
-    this._worker = new Worker(options.workerUrl || 'akarisub-worker.js')
-    this._worker.onmessage = (e) => this._onmessage(e)
-    this._worker.onerror = (e) => this._error(e)
-
-    // Initialize worker after feature tests complete
-    test.then(() => {
-      const initMessage = {
-        target: 'init',
-        wasmUrl: options.wasmUrl ?? 'akarisub-worker.wasm',
-        asyncRender: shouldUseAsyncRender,
-        fullTrackWarmup: options.fullTrackWarmup ?? false,
-        onDemandRender: this._onDemandRender,
-        initialTime: (this._video?.currentTime ?? 0) + this.timeOffset,
-        width: this._canvasctrl.width || 0,
-        height: this._canvasctrl.height || 0,
-        blendMode: options.blendMode ?? 'wasm',
-        subUrl: options.subUrl,
-        subContent: options.subContent || null,
-        encryptedSubContent: options.encryptedSubContent || null,
-        fonts: options.fonts || [],
-        availableFonts: options.availableFonts || { 'liberation sans': './default.woff2' },
-        fallbackFonts: options.fallbackFonts || ['liberation sans'],
-        debug: this.debug,
-        targetFps: options.targetFps || 24,
-        dropAllAnimations: options.dropAllAnimations,
-        dropAllBlur: options.dropAllBlur,
-        clampPos: options.clampPos,
-        libassMemoryLimit: options.libassMemoryLimit ?? 128,
-        libassGlyphLimit: options.libassGlyphLimit ?? 2048,
-        useLocalFonts: typeof (globalThis as any).queryLocalFonts !== 'undefined' && (options.useLocalFonts ?? true),
-        hasBitmapBug: AkariSub._hasBitmapBug
-      }
-
-      this._worker.postMessage(initMessage, AkariSub._getSubtitleTransfers(options.subContent, options.encryptedSubContent))
-
-      if (this._offscreenRender) {
-        this.sendMessage('offscreenCanvas', {}, [this._canvasctrl as OffscreenCanvas])
-      }
-    })
-  }
-
-  // ==========================================================================
-  // Static Methods
-  // ==========================================================================
-
-  private static async _testImageBugs(): Promise<void> {
-    if (AkariSub._hasBitmapBug !== null) return
-
-    const canvas1 = document.createElement('canvas')
-    const ctx1 = canvas1.getContext('2d', { willReadFrequently: true })
-    if (!ctx1) throw new Error('Canvas rendering not supported')
-
-    // Test ImageData constructor
-    if (typeof ImageData.prototype.constructor === 'function') {
-      try {
-        new ImageData(new Uint8ClampedArray([0, 0, 0, 0]), 1, 1)
-      } catch {
-        console.log('Detected that ImageData is not constructable despite browser saying so')
-      }
-    }
-
-    const canvas2 = document.createElement('canvas')
-    const ctx2 = canvas2.getContext('2d', { willReadFrequently: true })
-    if (!ctx2) throw new Error('Canvas rendering not supported')
-
-    canvas1.width = canvas2.width = 1
-    canvas1.height = canvas2.height = 1
-    ctx1.clearRect(0, 0, 1, 1)
-    ctx2.clearRect(0, 0, 1, 1)
-
-    const prePut = ctx2.getImageData(0, 0, 1, 1).data
-    ctx1.putImageData(new ImageData(new Uint8ClampedArray([0, 255, 0, 0]), 1, 1), 0, 0)
-    ctx2.drawImage(canvas1, 0, 0)
-    const postPut = ctx2.getImageData(0, 0, 1, 1).data
-
-    AkariSub._hasAlphaBug = prePut[1] !== postPut[1]
-    if (AkariSub._hasAlphaBug) {
-      console.log('Detected a browser having issue with transparent pixels, applying workaround')
-    }
-
-    if (typeof createImageBitmap !== 'undefined') {
-      const subarray = new Uint8ClampedArray([255, 0, 255, 0, 255]).subarray(1, 5)
-      ctx2.drawImage(await createImageBitmap(new ImageData(subarray, 1)), 0, 0)
-      const { data } = ctx2.getImageData(0, 0, 1, 1)
-      AkariSub._hasBitmapBug = false
-
-      for (let i = 0; i < data.length; i++) {
-        if (Math.abs(subarray[i] - data[i]) > 15) {
-          AkariSub._hasBitmapBug = true
-          console.log('Detected a browser having issue with partial bitmaps, applying workaround')
-          break
-        }
-      }
-    } else {
-      AkariSub._hasBitmapBug = false
-    }
-
-    canvas1.remove()
-    canvas2.remove()
-  }
-
-  private static async _test(): Promise<void> {
-    await AkariSub._testImageBugs()
-  }
-
-  private static _getSubtitleTransfers(
-    subContent?: string | Uint8Array | ArrayBuffer,
-    encryptedSubContent?: EncryptedSubtitleContent
-  ): Transferable[] {
-    const transfers: Transferable[] = []
-
-    if (subContent instanceof ArrayBuffer) {
-      transfers.push(subContent)
-    } else if (subContent instanceof Uint8Array) {
-      transfers.push(subContent.buffer)
-    }
-
-    if (encryptedSubContent?.encrypted) {
-      transfers.push(encryptedSubContent.encrypted)
-    }
-
-    for (const chunk of encryptedSubContent?.encryptedChunks || []) {
-      transfers.push(chunk)
-    }
-
-    return transfers
-  }
-
-  // ==========================================================================
-  // GPU Renderer Management (WebGPU → WebGL2 → Canvas2D fallback)
-  // ==========================================================================
-
-  /**
-   * Attempt to initialise the best available GPU renderer.
-   */
-  private async _initGPURenderer(): Promise<void> {
-    if (isWebGPUSupported()) {
-      try {
-        const renderer = new WebGPURenderer()
-        await renderer.init()
-        if (!this._canvas) return
-        await renderer.setCanvas(this._canvas, Math.max(1, this._canvas.width || 1), Math.max(1, this._canvas.height || 1))
-        this._gpuRenderer = renderer
-        this._rendererType = 'webgpu'
-        console.log('[AkariSub] Using WebGPU renderer')
-        return
-      } catch (error) {
-        console.warn('[AkariSub] WebGPU init failed, trying WebGL2:', error)
-      }
-    }
-
-    if (isWebGL2Supported()) {
-      try {
-        const renderer = new WebGL2Renderer()
-        await renderer.init()
-        if (!this._canvas) return
-        await renderer.setCanvas(this._canvas, Math.max(1, this._canvas.width || 1), Math.max(1, this._canvas.height || 1))
-        this._gpuRenderer = renderer
-        this._rendererType = 'webgl2'
-        console.log('[AkariSub] Using WebGL2 renderer')
-        return
-      } catch (error) {
-        console.warn('[AkariSub] WebGL2 init failed, falling back to Canvas2D:', error)
-      }
-    }
-
-    this._rendererType = 'canvas2d'
-    if (!this._offscreenRender && !this._ctx) {
-      this._ctx = this._canvas.getContext('2d', { alpha: true, desynchronized: true })
-    }
-    this.sendMessage('setAsyncRender', { value: false })
-    this._onCanvasFallback?.()
-  }
-
-  /** Returns which renderer backend is currently active. */
-  get rendererType(): 'webgpu' | 'webgl2' | 'canvas2d' {
-    return this._rendererType
-  }
-
-  /** @deprecated Use rendererType === 'webgpu' */
-  get isUsingWebGPU(): boolean {
-    return this._rendererType === 'webgpu'
-  }
-
-  /** Returns true when a hardware-accelerated GPU renderer is active. */
-  get isUsingGPURenderer(): boolean {
-    return this._gpuRenderer !== null
-  }
-
-  // ==========================================================================
-  // Canvas Management
-  // ==========================================================================
-
-  private _createCanvas(): HTMLCanvasElement {
-    this._canvas = document.createElement('canvas')
-    this._canvas.style.display = 'block'
-    this._canvas.style.position = 'absolute'
-    this._canvas.style.pointerEvents = 'none'
-    this._canvasParent!.appendChild(this._canvas)
-    return this._canvas
-  }
-
-  /**
-   * Resize the canvas to given parameters. Auto-generated if values are omitted.
-   */
-  resize(
-    width: number = 0,
-    height: number = 0,
-    top: number = 0,
-    left: number = 0,
-    force: boolean = this._video?.paused ?? false
-  ): void {
-    if ((!width || !height) && this._video) {
-      const videoSize = getVideoPosition(this._video)
-      let renderSize: { width: number; height: number }
-
-      if (this._videoWidth) {
-        const widthRatio = this._video.videoWidth / this._videoWidth
-        const heightRatio = this._video.videoHeight / this._videoHeight
-        renderSize = computeCanvasSize(
-          (videoSize.width || 0) / widthRatio,
-          (videoSize.height || 0) / heightRatio,
-          this.prescaleFactor,
-          this.prescaleHeightLimit,
-          this.maxRenderHeight
-        )
-      } else {
-        renderSize = computeCanvasSize(
-          videoSize.width || 0,
-          videoSize.height || 0,
-          this.prescaleFactor,
-          this.prescaleHeightLimit,
-          this.maxRenderHeight
-        )
-      }
-
-      width = renderSize.width
-      height = renderSize.height
-
-      if (this._canvasParent) {
-        top = videoSize.y - (this._canvasParent.getBoundingClientRect().top - this._video.getBoundingClientRect().top)
-        left = videoSize.x
-      }
-
-      this._canvas.style.width = videoSize.width + 'px'
-      this._canvas.style.height = videoSize.height + 'px'
-    }
-
-    this._canvas.style.top = top + 'px'
-    this._canvas.style.left = left + 'px'
-
-    if (width > 0 && height > 0) {
-      this._canvasctrl.width = width
-      this._canvasctrl.height = height
-    }
-
-    // Update GPU renderer size if using a GPU renderer
-    if (this._gpuRenderer && width > 0 && height > 0) {
-      this._gpuRenderer.updateSize(width, height)
-    }
-
-    if (force && this.busy === false) {
-      this.busy = true
-    } else {
-      force = false
-    }
-
-    this.sendMessage('canvas', {
-      width,
-      height,
-      videoWidth: this._videoWidth || this._video?.videoWidth || 0,
-      videoHeight: this._videoHeight || this._video?.videoHeight || 0,
-      force
-    })
-  }
-
-  // ==========================================================================
-  // Video Management
-  // ==========================================================================
-
-  private _timeupdate(event: Event): void {
-    const eventmap: Record<string, boolean> = {
-      seeking: true,
-      waiting: true,
-      playing: false
-    }
-    const playing = eventmap[event.type]
-    if (playing != null) this._playstate = playing
-    this.setCurrentTime(this._video!.paused || this._playstate, this._video!.currentTime + this.timeOffset)
-  }
-
-  /**
-   * Change the video to use as target for event listeners.
-   */
-  setVideo(video: HTMLVideoElement): void {
-    if (video instanceof HTMLVideoElement) {
-      this._removeListeners()
-      this._video = video
-
-      if (this._onDemandRender) {
-        if (!this._destroyed && this._video === video) {
-          ;(video as any).requestVideoFrameCallback(this._boundHandleRVFC)
-        }
-      } else {
-        this._playstate = video.paused
-
-        video.addEventListener('timeupdate', this._boundTimeUpdate, false)
-        video.addEventListener('progress', this._boundTimeUpdate, false)
-        video.addEventListener('waiting', this._boundTimeUpdate, false)
-        video.addEventListener('seeking', this._boundTimeUpdate, false)
-        video.addEventListener('playing', this._boundTimeUpdate, false)
-        video.addEventListener('ratechange', this._boundSetRate, false)
-        video.addEventListener('resize', this._boundResize, false)
-      }
-
-      if ('VideoFrame' in window) {
-        video.addEventListener('loadedmetadata', this._boundUpdateColorSpace, false)
-        if (video.readyState > 2) this._updateColorSpace()
-      }
-
-      if (video.videoWidth > 0) this.resize()
-
-      if (typeof ResizeObserver !== 'undefined') {
-        if (!this._ro) this._ro = new ResizeObserver(() => this.resize())
-        this._ro.observe(video)
-      }
-    } else {
-      this._error(new Error('Video element invalid!'))
-    }
-  }
-
-  // ==========================================================================
-  // Track Management
-  // ==========================================================================
-
-  /**
-   * Overwrites the current subtitle content by URL.
-   */
-  setTrackByUrl(url: string): void {
-    this.sendMessage('setTrackByUrl', { url })
-    this._reAttachOffscreen()
-    if (this._ctx) this._ctx.filter = 'none'
-  }
-
-  /**
-   * Overwrites the current subtitle content.
-   */
-  setTrack(content: string | Uint8Array | ArrayBuffer): void {
-    this.sendMessage('setTrack', { content }, AkariSub._getSubtitleTransfers(content))
-    this._reAttachOffscreen()
-    if (this._ctx) this._ctx.filter = 'none'
-  }
-
-  /**
-   * Overwrites the current subtitle content with encrypted v2 payloads.
-   * Decryption happens inside the AkariSub worker so plaintext ASS text is not
-   * materialized in the main thread.
-   */
-  setEncryptedTrack(content: EncryptedSubtitleContent): void {
-    this.sendMessage('setEncryptedTrack', { content }, AkariSub._getSubtitleTransfers(undefined, content))
-    this._reAttachOffscreen()
-    if (this._ctx) this._ctx.filter = 'none'
-  }
-
-  /**
-   * Free currently used subtitle track.
-   */
-  freeTrack(): void {
-    this.sendMessage('freeTrack')
-  }
-
-  // ==========================================================================
-  // Playback Control
-  // ==========================================================================
-
-  /**
-   * Sets the playback state of the media.
-   */
-  setIsPaused(isPaused: boolean): void {
-    this.sendMessage('video', { isPaused })
-  }
-
-  /**
-   * Sets the playback rate of the media.
-   */
-  setRate(rate: number): void {
-    this.sendMessage('video', { rate })
-  }
-
-  /**
-   * Sets the current time, playback state and rate of the subtitles.
-   */
-  setCurrentTime(isPaused?: boolean, currentTime?: number, rate?: number): void {
-    this.sendMessage('video', {
-      isPaused,
-      currentTime,
-      rate,
-      colorSpace: this._videoColorSpace
-    })
-  }
-
-  // ==========================================================================
-  // Event Management
-  // ==========================================================================
-
-  /**
-   * Create a new ASS event directly.
-   */
-  createEvent(event: Partial<ASSEvent>): void {
-    this.sendMessage('createEvent', { event })
-  }
-
-  /**
-   * Overwrite the data of the event with the specified index.
-   */
-  setEvent(event: Partial<ASSEvent>, index: number): void {
-    this.sendMessage('setEvent', { event, index })
-  }
-
-  /**
-   * Remove the event with the specified index.
-   */
-  removeEvent(index: number): void {
-    this.sendMessage('removeEvent', { index })
-  }
-
-  /**
-   * Get all ASS events.
-   */
-  async getEvents(): Promise<ASSEvent[]> {
-    const data = await this._fetchFromWorker<{ events: ASSEvent[] }>({ target: 'getEvents' })
-    return data.events ?? []
-  }
-
-  // ==========================================================================
-  // Style Management
-  // ==========================================================================
-
-  /**
-   * Set a style override.
-   */
-  styleOverride(style: Partial<ASSStyle>): void {
-    this.sendMessage('styleOverride', { style })
-  }
-
-  /**
-   * Disable style override.
-   */
-  disableStyleOverride(): void {
-    this.sendMessage('disableStyleOverride')
-  }
-
-  /**
-   * Create a new ASS style directly.
-   */
-  createStyle(style: Partial<ASSStyle>): void {
-    this.sendMessage('createStyle', { style })
-  }
-
-  /**
-   * Overwrite the data of the style with the specified index.
-   */
-  setStyle(style: Partial<ASSStyle>, index: number): void {
-    this.sendMessage('setStyle', { style, index })
-  }
-
-  /**
-   * Remove the style with the specified index.
-   */
-  removeStyle(index: number): void {
-    this.sendMessage('removeStyle', { index })
-  }
-
-  /**
-   * Get all ASS styles.
-   */
-  async getStyles(): Promise<ASSStyle[]> {
-    const data = await this._fetchFromWorker<{ styles: ASSStyle[] }>({ target: 'getStyles' })
-    return data.styles ?? []
-  }
-
-  // ==========================================================================
-  // Font Management
-  // ==========================================================================
-
-  /**
-   * Adds a font to the renderer.
-   */
-  addFont(font: string | Uint8Array): void {
-    this.sendMessage('addFont', { font })
-  }
-
-  /**
-   * Changes the font family of the default font.
-   */
-  setDefaultFont(font: string): void {
-    this.sendMessage('defaultFont', { font })
-  }
-
-  // ==========================================================================
-  // Performance Stats
-  // ==========================================================================
-
-  /**
-   * Get real-time performance statistics.
-   */
-  async getStats(): Promise<PerformanceStats> {
-    const data = await this._fetchFromWorker<{ stats: Partial<PerformanceStats> }>({ target: 'getStats' })
-    const stats = data.stats
-    return {
-      framesRendered: stats.framesRendered ?? 0,
-      framesDropped: stats.framesDropped ?? 0,
-      avgRenderTime: stats.avgRenderTime ?? 0,
-      maxRenderTime: stats.maxRenderTime ?? 0,
-      minRenderTime: stats.minRenderTime ?? 0,
-      lastRenderTime: stats.lastRenderTime ?? 0,
-      pendingRenders: stats.pendingRenders ?? 0,
-      totalEvents: stats.totalEvents ?? 0,
-      cacheHits: stats.cacheHits ?? 0,
-      cacheMisses: stats.cacheMisses ?? 0,
-      renderFps: stats.avgRenderTime && stats.avgRenderTime > 0 ? Math.round(1000 / stats.avgRenderTime) : 0,
-      usingWorker: true,
-      offscreenRender: this._offscreenRender,
-      onDemandRender: this._onDemandRender
-    }
-  }
-
-  /**
-   * Reset performance statistics counters.
-   */
-  async resetStats(): Promise<void> {
-    await this._fetchFromWorker({ target: 'resetStats' })
-  }
-
-  /**
-   * Get event count
-   */
-  async getEventCount(): Promise<number> {
-    const data = await this._fetchFromWorker<{ count: number }>({ target: 'getEventCount' })
-    return data.count
-  }
-
-  /**
-   * Get style count
-   */
-  async getStyleCount(): Promise<number> {
-    const data = await this._fetchFromWorker<{ count: number }>({ target: 'getStyleCount' })
-    return data.count
-  }
-
-  // ==========================================================================
-  // Private Methods
-  // ==========================================================================
-
-  private _sendLocalFont(name: string): void {
-    try {
-      ; (globalThis as any).queryLocalFonts().then((fontData: any[]) => {
-        const font = fontData?.find((obj: any) => obj.fullName.toLowerCase() === name)
-        if (font) {
-          font.blob().then((blob: Blob) => {
-            blob.arrayBuffer().then((buffer: ArrayBuffer) => {
-              this.addFont(new Uint8Array(buffer))
-            })
-          })
-        }
-      })
-    } catch (e) {
-      console.warn('Local fonts API:', e)
-    }
-  }
-
-  private _getLocalFont(data: { font: string }): void {
-    try {
-      if (navigator?.permissions?.query) {
-        ; (navigator.permissions.query as any)({ name: 'local-fonts' }).then((permission: any) => {
-          if (permission.state === 'granted') {
-            this._sendLocalFont(data.font)
-          }
-        })
-      } else {
-        this._sendLocalFont(data.font)
-      }
-    } catch (e) {
-      console.warn('Local fonts API:', e)
-    }
-  }
-
-  private _unbusy(): void {
-    this._observeDemandCompletion()
-
-    if (this._pendingDemandTimes.length > 0) {
-      if (this._pendingDemandTimes.length > 1) {
-        const latestDemand = this._pendingDemandTimes[this._pendingDemandTimes.length - 1]
-        this._pendingDemandTimes.length = 0
-        this._pendingDemandTimes.push(latestDemand)
-      }
-
-      const nextDemand = this._pendingDemandTimes.shift()
-      if (nextDemand) {
-        this._demandRender(nextDemand)
-        return
-      }
-    }
-
-    this.busy = false
-  }
-
-  private _markDemandDispatched(): void {
-    if (!this._onDemandRender) return
-    this._activeDemandStartedAt = performance.now()
-  }
-
-  private _observeDemandCompletion(): void {
-    if (!this._onDemandRender || this._activeDemandStartedAt === 0) return
-
-    const elapsed = performance.now() - this._activeDemandStartedAt
-    this._activeDemandStartedAt = 0
-
-    if (!Number.isFinite(elapsed) || elapsed <= 0) return
-
-    this._smoothedDemandLatencyMs = this._smoothedDemandLatencyMs <= 0
-      ? elapsed
-      : this._smoothedDemandLatencyMs * 0.75 + elapsed * 0.25
-  }
-
-  private _getDemandPipelineLeadSeconds(now: number, metadata: VideoFrameCallbackMetadata): number {
-    const expectedDisplayTime = metadata.expectedDisplayTime ?? metadata.presentationTime ?? now
-    const displayLeadSeconds = Math.max(0, expectedDisplayTime - now) / 1000
-
-    return Math.max(0, this._smoothedDemandLatencyMs / 1000 - displayLeadSeconds)
-  }
-
-  private _enqueueDemand(metadata: { mediaTime: number; width: number; height: number }): void {
-    const queue = this._pendingDemandTimes
-
-    if (queue.length > 0) {
-      const lastQueued = queue[queue.length - 1]
-      if (Math.abs(lastQueued.mediaTime - metadata.mediaTime) > 0.25) {
-        queue.length = 0
-      }
-    }
-
-    if (queue.length >= AkariSub.MAX_PENDING_DEMANDS) {
-      queue.shift()
-    }
-
-    queue.push(metadata)
-  }
-
-  private _handleRVFC(now: number, metadata: VideoFrameCallbackMetadata): void {
-    if (this._destroyed) return
-
-    // Get the video's playback rate to correctly scale time offsets
-    const playbackRate = this._video?.playbackRate ?? 1
-    const pipelineLeadSeconds = this._getDemandPipelineLeadSeconds(now, metadata)
-    const renderTime = metadata.mediaTime + (pipelineLeadSeconds + this.renderAhead) * playbackRate
-
-    const demandData = {
-      mediaTime: renderTime,
-      width: metadata.width,
-      height: metadata.height
-    }
-
-    if (!this._workerReady) {
-      this._enqueueDemand(demandData)
-      ; (this._video as any).requestVideoFrameCallback(this._boundHandleRVFC)
-      return
-    }
-
-    if (this.busy) {
-      this._enqueueDemand(demandData)
-    } else {
-      this.busy = true
-      this._demandRender(demandData)
-    }
-
-    ; (this._video as any).requestVideoFrameCallback(this._boundHandleRVFC)
-  }
-
-  private _demandRender(metadata: { mediaTime: number; width: number; height: number }): void {
-    if (metadata.width !== this._videoWidth || metadata.height !== this._videoHeight) {
-      this._videoWidth = metadata.width
-      this._videoHeight = metadata.height
-      this.resize()
-    }
-
-    this._markDemandDispatched()
-    this.sendMessage('demand', { time: metadata.mediaTime + this.timeOffset })
-  }
-
-  private _detachOffscreen(): void {
-    if (!this._offscreenRender || this._ctx) return
-
-    this._canvas.remove()
-    this._createCanvas()
-    this._canvasctrl = this._canvas
-    this._ctx = this._canvasctrl.getContext('2d', { alpha: true, desynchronized: true })
-    this.sendMessage('detachOffscreen')
-    this.busy = false
-    this._activeDemandStartedAt = 0
-    this._pendingDemandTimes.length = 0
-    this.resize(0, 0, 0, 0, true)
-  }
-
-  private _reAttachOffscreen(): void {
-    if (!this._offscreenRender || !this._ctx) return
-
-    this._canvas.remove()
-    this._createCanvas()
-    this._canvasctrl = (this._canvas as any).transferControlToOffscreen()
-    this._ctx = false
-    this.sendMessage('offscreenCanvas', {}, [this._canvasctrl as OffscreenCanvas])
-    this.resize(0, 0, 0, 0, true)
-  }
-
-  private _updateColorSpace(): void {
-    ; (this._video as any).requestVideoFrameCallback(() => {
-      try {
-        const frame = new (globalThis as any).VideoFrame(this._video)
-        this._videoColorSpace = webYCbCrMap[frame.colorSpace.matrix] ?? null
-        frame.close()
-        this.sendMessage('getColorSpace')
-      } catch (e) {
-        console.warn(e)
-      }
-    })
-  }
-
-  private _verifyColorSpace(data: {
-    subtitleColorSpace: SubtitleColorSpace
-    videoColorSpace?: WebYCbCrColorSpace | null
-  }): void {
-    const { subtitleColorSpace, videoColorSpace = this._videoColorSpace } = data
-
-    if (!subtitleColorSpace || !videoColorSpace) return
-    if (subtitleColorSpace === videoColorSpace) return
-
-    this._detachOffscreen()
-
-    const matrix = colorMatrixConversionMap[subtitleColorSpace]?.[videoColorSpace]
-    if (matrix && this._ctx) {
-      this._ctx.filter = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='${matrix} 0 0 0 0 0 1 0'/></filter></svg>#f")`
-    }
-  }
-
-  private _render(data: {
-    images: RenderImage[]
-    asyncRender: boolean
-    times: RenderTimes
-    width: number
-    height: number
-    colorSpace: SubtitleColorSpace
-  }): void {
-    try {
-      const dataWidth = data.width
-      const dataHeight = data.height
-
-      if (this.debug) {
-        data.times.IPCTime = Date.now() - (data.times.JSRenderTime || 0)
-      }
-
-      // Check if canvas size changed
-      const sizeChanged = this._canvasctrl.width !== dataWidth || this._canvasctrl.height !== dataHeight
-      if (sizeChanged) {
-        this._canvasctrl.width = dataWidth
-        this._canvasctrl.height = dataHeight
-        this._lastRenderWidth = dataWidth
-        this._lastRenderHeight = dataHeight
-
-        // Update GPU renderer size if canvas size changed
-        if (this._gpuRenderer) {
-          this._gpuRenderer.updateSize(dataWidth, dataHeight)
-        }
-
-        this._verifyColorSpace({ subtitleColorSpace: data.colorSpace })
-      }
-
-      // Use GPU renderer (WebGPU or WebGL2) if available
-      if (this._gpuRenderer) {
-        this._renderGPU(data)
-        return
-      }
-
-      if (!this._ctx) return
-
-      const ctx = this._ctx
-      const images = data.images
-      const imageCount = images.length
-
-      ctx.clearRect(0, 0, dataWidth, dataHeight)
-
-      if (data.asyncRender) {
-        for (let i = 0; i < imageCount; i++) {
-          const image = images[i]
-          if (image.image) {
-            ctx.drawImage(image.image as ImageBitmap, image.x, image.y)
-            ;(image.image as ImageBitmap).close()
-          }
-        }
-      } else {
-        const hasAlphaBug = AkariSub._hasAlphaBug ?? false
-
-        for (let i = 0; i < imageCount; i++) {
-          const image = images[i]
-          if (image.image) {
-            const imgW = image.w
-            const imgH = image.h
-
-            const rawImage = image.image
-            const rawData = rawImage instanceof Uint8ClampedArray
-              ? rawImage
-              : rawImage instanceof Uint8Array
-                ? new Uint8ClampedArray(rawImage.buffer, rawImage.byteOffset, rawImage.byteLength)
-                : new Uint8ClampedArray(rawImage as ArrayBuffer)
-            const fixedData = fixAlpha(rawData, hasAlphaBug)
-            ctx.putImageData(new ImageData(fixedData as Uint8ClampedArray<ArrayBuffer>, imgW, imgH), image.x, image.y)
-          }
-        }
-      }
-
-      if (this.debug) {
-        data.times.JSRenderTime = Date.now() - (data.times.JSRenderTime || 0) - (data.times.IPCTime || 0)
-        let total = 0
-        const count = data.times.bitmaps || imageCount
-        delete data.times.bitmaps
-
-        for (const key in data.times) {
-          total += (data.times as any)[key] || 0
-        }
-
-        console.log('Bitmaps: ' + count + ' Total: ' + (total | 0) + 'ms', data.times)
-      }
-    } finally {
-      this._unbusy()
-    }
-  }
-
-  private _renderGPU(data: { images: RenderImage[]; asyncRender: boolean; times: RenderTimes }): void {
-    const renderer = this._gpuRenderer
-    if (!renderer) return
-
-    if (data.images.length === 0) {
-      renderer.clear()
-      return
-    }
-
-    if (data.asyncRender) {
-      // For async render mode with ImageBitmaps
-      const bitmapImages = this._gpuBitmapImages
-      let bitmapCount = 0
-
-      for (let i = 0; i < data.images.length; i++) {
-        const img = data.images[i]
-        if (!(img.image instanceof ImageBitmap)) continue
-
-        const target = bitmapImages[bitmapCount] || (bitmapImages[bitmapCount] = { image: img.image, x: 0, y: 0 })
-        target.image = img.image
-        target.x = img.x
-        target.y = img.y
-        bitmapCount++
-      }
-
-      bitmapImages.length = bitmapCount
-
-      renderer.renderBitmaps(bitmapImages, this._canvasctrl.width, this._canvasctrl.height)
-
-      // Close ImageBitmaps after rendering
-      for (const img of data.images) {
-        if (img.image instanceof ImageBitmap) {
-          img.image.close()
-        }
-      }
-    } else {
-      // For non-async render mode with ArrayBuffer data
-      renderer.render(data.images, this._canvasctrl.width, this._canvasctrl.height)
-    }
-
-    if (this.debug) {
-      data.times.JSRenderTime = Date.now() - (data.times.JSRenderTime || 0) - (data.times.IPCTime || 0)
-      let total = 0
-      const count = (data.times as any).bitmaps || data.images.length
-      delete (data.times as any).bitmaps
-
-      for (const key in data.times) {
-        total += (data.times as any)[key] || 0
-      }
-
-      console.log(`[${this._rendererType.toUpperCase()}] Bitmaps: ` + count + ' Total: ' + (total | 0) + 'ms', data.times)
-    }
-  }
-
-  private _ready(): void {
-    this._workerReady = true
-    this._init()
-
-    if (this._onDemandRender && this._video) {
-      this.setCurrentTime(this._video.paused, this._video.currentTime + this.timeOffset, this._video.playbackRate)
-
-      const pending = this._pendingDemandTimes.length > 0
-        ? this._pendingDemandTimes[this._pendingDemandTimes.length - 1]
-        : {
-          mediaTime: this._video.currentTime + this.renderAhead * (this._video.playbackRate || 1),
-          width: this._video.videoWidth,
-          height: this._video.videoHeight
-        }
-
-      this._pendingDemandTimes.length = 0
-      this.busy = true
-      this._demandRender(pending)
-    }
-
-    this.dispatchEvent(new CustomEvent('ready'))
-  }
-
-  /**
-   * Handler for partial_ready message from worker.
-   * Emitted early for large subtitle files to allow playback to start
-   * while font loading and track parsing continues.
-   */
-  private _partial_ready(): void {
-    this.dispatchEvent(new CustomEvent('partial_ready'))
-  }
-
-  private _trackReady(): void {
-    this.dispatchEvent(new CustomEvent('trackReady'))
-  }
-
-  /**
-   * Send data and execute function in the worker.
-   */
-  async sendMessage(target: string, data: Record<string, any> = {}, transferable?: Transferable[]): Promise<void> {
-    await this._loaded
-
-    if (transferable) {
-      this._worker.postMessage({ target, transferable, ...data }, [...transferable])
-    } else {
-      this._worker.postMessage({ target, ...data })
-    }
-  }
-
-  private _fetchFromWorker<T = any>(workerOptions: { target: string }): Promise<T> {
-    return new Promise((resolve, reject) => {
-      try {
-        const target = workerOptions.target
-
-        const timeout = setTimeout(() => {
-          cleanup()
-          reject(new Error('Error: Timeout while trying to fetch ' + target))
-        }, 5000)
-
-        const handleMessage = (event: MessageEvent) => {
-          if (event.data.target === target) {
-            cleanup()
-            resolve(event.data as T)
-          }
-        }
-
-        const handleError = (event: ErrorEvent | Error) => {
-          cleanup()
-          reject(event instanceof Error ? event : event.error || new Error('Worker error'))
-        }
-
-        const cleanup = () => {
-          this._worker.removeEventListener('message', handleMessage)
-          this._worker.removeEventListener('error', handleError as any)
-          clearTimeout(timeout)
-        }
-
-        this._worker.addEventListener('message', handleMessage)
-        this._worker.addEventListener('error', handleError as any)
-
-        this._worker.postMessage(workerOptions)
-      } catch (error) {
-        reject(error)
-      }
-    })
-  }
-
-  private _console(data: { content: string; command: string }): void {
-    ; (console as any)[data.command].apply(console, JSON.parse(data.content))
-  }
-
-  private _onmessage(event: MessageEvent): void {
-    const target = event.data.target
-    if (target === 'error') {
-      this._error(event.data.error || 'Unknown worker error')
-      return
-    }
-    const handler = (this as any)['_' + target]
-    if (handler) {
-      handler.call(this, event.data)
-    }
-  }
-
-  private _error(err: Error | ErrorEvent | string): Error {
-    const error =
-      err instanceof Error
-        ? err
-        : err instanceof ErrorEvent
-          ? err.error || new Error(err.message)
-          : new Error(String(err))
-
-    const event = err instanceof Event ? new ErrorEvent(err.type, err) : new ErrorEvent('error', { error })
-
-    this.dispatchEvent(event)
-    console.error(error)
-
-    return error
-  }
-
-  private _removeListeners(): void {
-    if (this._video) {
-      if (this._ro) this._ro.unobserve(this._video)
-      if (this._ctx) this._ctx.filter = 'none'
-
-      this._video.removeEventListener('timeupdate', this._boundTimeUpdate)
-      this._video.removeEventListener('progress', this._boundTimeUpdate)
-      this._video.removeEventListener('waiting', this._boundTimeUpdate)
-      this._video.removeEventListener('seeking', this._boundTimeUpdate)
-      this._video.removeEventListener('playing', this._boundTimeUpdate)
-      this._video.removeEventListener('ratechange', this._boundSetRate)
-      this._video.removeEventListener('resize', this._boundResize)
-      this._video.removeEventListener('loadedmetadata', this._boundUpdateColorSpace)
-    }
-  }
-
-  /**
-   * Destroy the object, worker, listeners and all data.
-   */
-  destroy(err?: Error | string): Error | undefined {
-    const error = err ? this._error(err) : undefined
-
-    if (this._video && this._canvasParent) {
-      this._video.parentNode?.removeChild(this._canvasParent)
-    }
-
-    // Clean up GPU renderer
-    if (this._gpuRenderer) {
-      this._gpuRenderer.destroy()
-      this._gpuRenderer = null
-      this._rendererType = 'canvas2d'
-    }
-
-    this._destroyed = true
-    this._removeListeners()
-    this.sendMessage('destroy')
-    this._worker?.terminate()
-
-    return error
-  }
-}