avbridge 2.3.0 → 2.6.0

package/src/convert/transcode.ts

@@ -16,6 +16,8 @@
 import { probe } from "../probe/index.js";
 import { buildMediabunnySourceFromInput } from "../probe/mediabunny.js";
 import { createOutputFormat, mimeForFormat, generateFilename } from "./remux.js";
+import { isLibavTranscodeContainer, transcodeViaLibav } from "./transcode-libav.js";
+import { AvbridgeError, ERR_CONTAINER_NOT_SUPPORTED } from "../errors.js";
 import type {
   MediaInput,
   MediaContext,
@@ -54,11 +56,17 @@ export async function transcode(
   const ctx = await probe(source);
   options.signal?.throwIfAborted();
 
+  // AVI/ASF/FLV → the libav-demux-backed pipeline (Phase 1: MP4 output only).
+  if (isLibavTranscodeContainer(ctx.container)) {
+    return transcodeViaLibav(ctx, options);
+  }
+
   if (!MEDIABUNNY_CONTAINERS.has(ctx.container)) {
-    throw new Error(
-      `Cannot transcode "${ctx.container}" sources in v1. ` +
-      `transcode() only supports inputs that mediabunny can read (MP4, MKV, WebM, OGG, MP3, FLAC, WAV, MOV). ` +
-      `For AVI/ASF/FLV sources, use the player's playback strategies instead.`,
+    throw new AvbridgeError(
+      ERR_CONTAINER_NOT_SUPPORTED,
+      `Cannot transcode "${ctx.container}" sources. ` +
+      `transcode() supports mediabunny-readable containers (MP4, MKV, WebM, OGG, MP3, FLAC, WAV, MOV) and legacy containers via the libav path (AVI, ASF, FLV).`,
+      `If this is a legacy container we don't yet support, use createPlayer() to play it. Transcode support for more containers is on the roadmap.`,
     );
   }
 

package/src/element/avbridge-player.ts

@@ -23,6 +23,7 @@ import {
   ICON_FULLSCREEN, ICON_FULLSCREEN_EXIT,
   ICON_REPLAY_10, ICON_FORWARD_10,
 } from "./player-icons.js";
+import type { AvbridgeVideoElementEventMap } from "../types.js";
 
 // ── Helpers ──────────────────────────────────────────────────────────────
 
@@ -291,6 +292,38 @@ export class AvbridgePlayerElement extends HTMLElement {
     on(container, "pointerup", (e) => this._onPointerUp(e as PointerEvent));
     on(container, "pointercancel", () => this._cancelHold());
 
+    // Drag-and-drop file input. Drop a video file onto the player area
+    // and it loads + plays. Files of non-video types are rejected silently
+    // (no MIME sniffing — we let probe() decide). The dragover listener
+    // calls preventDefault so the drop event actually fires.
+    on(container, "dragenter", (e) => {
+      e.preventDefault();
+      const dt = (e as DragEvent).dataTransfer;
+      if (!dt || !Array.from(dt.types).includes("Files")) return;
+      (container as HTMLElement).classList.add("avp-dragover");
+    });
+    on(container, "dragover", (e) => {
+      e.preventDefault();
+      const dt = (e as DragEvent).dataTransfer;
+      if (dt) dt.dropEffect = "copy";
+    });
+    on(container, "dragleave", (e) => {
+      // dragleave fires on every child — only clear when we leave the container.
+      if ((e as DragEvent).target === container) {
+        (container as HTMLElement).classList.remove("avp-dragover");
+      }
+    });
+    on(container, "drop", (e) => {
+      e.preventDefault();
+      (container as HTMLElement).classList.remove("avp-dragover");
+      const file = (e as DragEvent).dataTransfer?.files?.[0];
+      if (!file) return;
+      // Reuse the existing source-assignment path. play() errors are
+      // reported via the normal error event; don't swallow here.
+      (this._video as unknown as { source: unknown }).source = file;
+      void this._video.play().catch(() => { /* error event already fired */ });
+    });
+
     // Keyboard
     on(this, "keydown", (e) => this._onKeydown(e as KeyboardEvent));
 
@@ -824,6 +857,22 @@ export class AvbridgePlayerElement extends HTMLElement {
   get strategyClass(): string | undefined { return this._video.strategyClass ?? undefined; }
   get audioTracks(): unknown[] { return this._video.audioTracks ?? []; }
   get subtitleTracks(): unknown[] { return this._video.subtitleTracks ?? []; }
+
+  /**
+   * External subtitle files to attach when the source loads. Forwarded
+   * to the inner <avbridge-video>. Takes effect on next bootstrap.
+   */
+  get subtitles(): unknown {
+    return (this._video as unknown as { subtitles: unknown }).subtitles;
+  }
+  set subtitles(value: unknown) {
+    (this._video as unknown as { subtitles: unknown }).subtitles = value;
+  }
+
+  /** Attach a subtitle track to the current playback without a reload. */
+  async addSubtitle(subtitle: { url: string; language?: string; format?: "vtt" | "srt" }): Promise<void> {
+    return (this._video as unknown as { addSubtitle: (s: unknown) => Promise<void> }).addSubtitle(subtitle);
+  }
   get player(): unknown { return this._video.player; }
   get videoElement(): HTMLVideoElement { return this._video.videoElement; }
 
@@ -842,4 +891,55 @@ export class AvbridgePlayerElement extends HTMLElement {
   async setSubtitleTrack(id: number | null): Promise<void> { return this._video.setSubtitleTrack(id); }
   getDiagnostics(): unknown { return this._video.getDiagnostics(); }
   canPlayType(mime: string): string { return this._video.canPlayType(mime); }
+
+  // ── Typed addEventListener / removeEventListener overloads ────────────
+  // Forwarded events from the inner <avbridge-video> preserve their
+  // typed CustomEvent detail. Standard HTMLMediaElement events retain
+  // their native typing via HTMLElementEventMap.
+
+  override addEventListener<K extends keyof AvbridgeVideoElementEventMap>(
+    type: K,
+    listener: (this: AvbridgePlayerElement, ev: AvbridgeVideoElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  override addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: AvbridgePlayerElement, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  override addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  override addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    super.addEventListener(type, listener, options);
+  }
+
+  override removeEventListener<K extends keyof AvbridgeVideoElementEventMap>(
+    type: K,
+    listener: (this: AvbridgePlayerElement, ev: AvbridgeVideoElementEventMap[K]) => unknown,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  override removeEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: AvbridgePlayerElement, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  override removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  override removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void {
+    super.removeEventListener(type, listener, options);
+  }
 }

package/src/element/avbridge-video.ts

@@ -24,6 +24,7 @@ import type {
   AudioTrackInfo,
   SubtitleTrackInfo,
   DiagnosticsSnapshot,
+  AvbridgeVideoElementEventMap,
 } from "../types.js";
 
 /** Strategy preference passed via the `preferstrategy` attribute. */
@@ -145,7 +146,21 @@ export class AvbridgeVideoElement extends HTMLElementCtor {
   private _strategy: StrategyName | null = null;
   private _strategyClass: StrategyClass | null = null;
   private _audioTracks: AudioTrackInfo[] = [];
+  /** Subtitle tracks reported by the active UnifiedPlayer (options.subtitles
+   *  + embedded container tracks + programmatic addSubtitle calls). */
   private _subtitleTracks: SubtitleTrackInfo[] = [];
+  /** Subtitle tracks derived from light-DOM `<track>` children. Maintained
+   *  by _syncTextTracks on every mutation. Merged into the public
+   *  `subtitleTracks` getter so the player's settings menu sees them. */
+  private _htmlTrackInfo: SubtitleTrackInfo[] = [];
+
+  /**
+   * External subtitle list forwarded to `createPlayer()` on the next
+   * bootstrap. Setting this after bootstrap queues it for the next
+   * source change; consumers that need to swap subtitles mid-playback
+   * should set `source` to reload.
+   */
+  private _subtitles: Array<{ url: string; language?: string; format?: "vtt" | "srt" }> | null = null;
 
   /**
    * Initial strategy preference. `"auto"` means "let the classifier decide";
@@ -298,13 +313,33 @@ export class AvbridgeVideoElement extends HTMLElementCtor {
     // Remove existing shadow tracks.
     const existing = this._videoEl.querySelectorAll("track");
     for (const t of Array.from(existing)) t.remove();
-    // Clone every <track> light-DOM child into the shadow video.
+    // Clone every <track> light-DOM child into the shadow video, and
+    // rebuild the HTML-derived subtitle info list so the `<avbridge-player>`
+    // settings menu can render them alongside options-sourced tracks.
+    // HTML tracks are assigned high, stable IDs (10000+index) to avoid
+    // colliding with container-embedded ids (typically < 32).
+    this._htmlTrackInfo = [];
+    let htmlIdx = 0;
     for (const child of Array.from(this.children)) {
       if (child.tagName === "TRACK") {
-        const clone = child.cloneNode(true) as HTMLTrackElement;
+        const track = child as HTMLTrackElement;
+        const clone = track.cloneNode(true) as HTMLTrackElement;
         this._videoEl.appendChild(clone);
+        const src = track.getAttribute("src") ?? undefined;
+        const format = src?.toLowerCase().endsWith(".srt") ? "srt" : "vtt";
+        this._htmlTrackInfo.push({
+          id: 10000 + htmlIdx,
+          format,
+          language: track.srclang || track.getAttribute("label") || undefined,
+          sidecarUrl: src,
+        });
+        htmlIdx++;
       }
     }
+    this._dispatch("trackschange", {
+      audioTracks: this._audioTracks,
+      subtitleTracks: this.subtitleTracks,
+    });
   }
 
   /** Internal src setter — separate from the property setter so the
@@ -358,6 +393,7 @@ export class AvbridgeVideoElement extends HTMLElementCtor {
         ...(this._preferredStrategy !== "auto"
           ? { initialStrategy: this._preferredStrategy }
           : {}),
+        ...(this._subtitles ? { subtitles: this._subtitles } : {}),
       });
     } catch (err) {
       // Stale or destroyed — silently abandon.
@@ -706,7 +742,58 @@ export class AvbridgeVideoElement extends HTMLElementCtor {
   }
 
   get subtitleTracks(): SubtitleTrackInfo[] {
-    return this._subtitleTracks;
+    // Merge player-sourced tracks with light-DOM `<track>` children.
+    // Both sources coexist: options.subtitles + embedded-in-container
+    // tracks contribute to _subtitleTracks; HTML `<track>` children
+    // contribute _htmlTrackInfo with ids in the 10000+ range.
+    return this._htmlTrackInfo.length === 0
+      ? this._subtitleTracks
+      : [...this._subtitleTracks, ...this._htmlTrackInfo];
+  }
+
+  /**
+   * External subtitle files to attach when the source loads. Takes effect
+   * on the next bootstrap — set before assigning `source`, or reload via
+   * `load()` after changing. For dynamic post-bootstrap addition, use
+   * `addSubtitle()` instead.
+   *
+   * @example
+   * el.subtitles = [{ url: "/en.srt", format: "srt", language: "en" }];
+   * el.src = "/movie.mp4";
+   */
+  get subtitles(): Array<{ url: string; language?: string; format?: "vtt" | "srt" }> | null {
+    return this._subtitles;
+  }
+
+  set subtitles(value: Array<{ url: string; language?: string; format?: "vtt" | "srt" }> | null) {
+    this._subtitles = value;
+  }
+
+  /**
+   * Attach a subtitle track to the current playback without rebuilding
+   * the player. Works while the element is playing — converts SRT to
+   * VTT if needed, adds a `<track>` to the inner `<video>`. Canvas
+   * strategies pick up the new track via their textTracks watcher.
+   */
+  async addSubtitle(subtitle: { url: string; language?: string; format?: "vtt" | "srt" }): Promise<void> {
+    const { attachSubtitleTracks } = await import("../subtitles/index.js");
+    const format = subtitle.format ?? (subtitle.url.endsWith(".srt") ? "srt" : "vtt");
+    const track = {
+      id: this._subtitleTracks.length,
+      format,
+      language: subtitle.language,
+      sidecarUrl: subtitle.url,
+    };
+    this._subtitleTracks.push(track);
+    await attachSubtitleTracks(
+      this._videoEl,
+      this._subtitleTracks,
+      undefined,
+      (err, t) => {
+        // eslint-disable-next-line no-console
+        console.warn(`[avbridge] subtitle ${t.id} failed: ${err.message}`);
+      },
+    );
   }
 
   // ── Public methods ─────────────────────────────────────────────────────
@@ -763,6 +850,56 @@ export class AvbridgeVideoElement extends HTMLElementCtor {
     return this._player?.getDiagnostics() ?? null;
   }
 
+  // ── Typed addEventListener / removeEventListener overloads ────────────
+  // Consumers using avbridge-specific events get a typed CustomEvent
+  // payload; standard HTMLMediaElement events retain their native types.
+
+  override addEventListener<K extends keyof AvbridgeVideoElementEventMap>(
+    type: K,
+    listener: (this: AvbridgeVideoElement, ev: AvbridgeVideoElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  override addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: AvbridgeVideoElement, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  override addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  override addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    super.addEventListener(type, listener, options);
+  }
+
+  override removeEventListener<K extends keyof AvbridgeVideoElementEventMap>(
+    type: K,
+    listener: (this: AvbridgeVideoElement, ev: AvbridgeVideoElementEventMap[K]) => unknown,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  override removeEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: AvbridgeVideoElement, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  override removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  override removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void {
+    super.removeEventListener(type, listener, options);
+  }
+
   // ── Event helpers ──────────────────────────────────────────────────────
 
   private _dispatch<T>(name: string, detail: T): void {

package/src/element/player-styles.ts

@@ -38,6 +38,18 @@ export const PLAYER_STYLES = /* css */ `
   height: 100%;
 }
 
+/* Drag-and-drop file target highlight. */
+.avp.avp-dragover::after {
+  content: "";
+  position: absolute;
+  inset: 8px;
+  border: 2px dashed rgba(255, 255, 255, 0.75);
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+  z-index: 10;
+}
+
 /* ── Center overlay ───────────────────────────────────────────────────── */
 
 .avp-overlay {

package/src/errors.ts

@@ -45,3 +45,9 @@ export const ERR_LIBAV_NOT_REACHABLE = "ERR_AVBRIDGE_LIBAV_NOT_REACHABLE";
 // MSE
 export const ERR_MSE_NOT_SUPPORTED = "ERR_AVBRIDGE_MSE_NOT_SUPPORTED";
 export const ERR_MSE_CODEC_NOT_SUPPORTED = "ERR_AVBRIDGE_MSE_CODEC_NOT_SUPPORTED";
+
+// Transcode
+export const ERR_TRANSCODE_ABORTED = "ERR_AVBRIDGE_TRANSCODE_ABORTED";
+export const ERR_TRANSCODE_UNSUPPORTED_COMBO = "ERR_AVBRIDGE_TRANSCODE_UNSUPPORTED_COMBO";
+export const ERR_TRANSCODE_DECODE = "ERR_AVBRIDGE_TRANSCODE_DECODE";
+export const ERR_CONTAINER_NOT_SUPPORTED = "ERR_AVBRIDGE_CONTAINER_NOT_SUPPORTED";

package/src/player.ts

@@ -147,22 +147,21 @@ export class UnifiedPlayer {
       // Try the primary strategy, falling through the chain on failure
       await this.startSession(decision.strategy, decision.reason);
 
-      // Apply subtitles for non-canvas strategies. Per-track failures are
-      // caught inside attachSubtitleTracks and logged via console.warn —
-      // subtitles are not load-bearing, so a bad sidecar must not break
-      // bootstrap.
-      if (this.session!.strategy !== "fallback" && this.session!.strategy !== "hybrid") {
-        await attachSubtitleTracks(
-          this.options.target,
-          ctx.subtitleTracks,
-          this.subtitleResources,
-          (err, track) => {
-            // eslint-disable-next-line no-console
-            console.warn(`[avbridge] subtitle ${track.id} failed: ${err.message}`);
-          },
-          this.transport,
-        );
-      }
+      // Apply subtitles for all strategies. Native/remux render them via
+      // the inner <video>'s native text-track engine. Hybrid/fallback
+      // hide the <video> and render cues into the canvas overlay — see
+      // each session's SubtitleOverlay wiring. The <track> elements are
+      // attached in both cases so cues are parsed by the browser.
+      await attachSubtitleTracks(
+        this.options.target,
+        ctx.subtitleTracks,
+        this.subtitleResources,
+        (err, track) => {
+          // eslint-disable-next-line no-console
+          console.warn(`[avbridge] subtitle ${track.id} failed: ${err.message}`);
+        },
+        this.transport,
+      );
 
       this.emitter.emitSticky("tracks", {
         video: ctx.videoTracks,