From 115f3359255389b84f59b2a36eb50bf05c33cb0d Mon Sep 17 00:00:00 2001
From: David <wdavid12@gmail.com>
Date: Mon, 22 Dec 2025 12:20:28 -0500
Subject: [PATCH 1/5] feat: mse support

---
 js/hang-demo/src/index.html            |    1 +
 js/hang-demo/src/mse/moq-client.ts     |  181 ++++
 js/hang-demo/src/mse/moq-mse-player.ts | 1240 ++++++++++++++++++++++++
 js/hang-demo/src/watch-mse.html        |  105 ++
 js/hang-demo/src/watch-mse.ts          |   12 +
 js/hang-demo/vite.config.ts            |    1 +
 justfile                               |   17 +
 rs/hang-cli/src/publish.rs             |   25 +-
 rs/hang/src/import/fmp4.rs             |  259 ++++-
 9 files changed, 1834 insertions(+), 7 deletions(-)
 create mode 100644 js/hang-demo/src/mse/moq-client.ts
 create mode 100644 js/hang-demo/src/mse/moq-mse-player.ts
 create mode 100644 js/hang-demo/src/watch-mse.html
 create mode 100644 js/hang-demo/src/watch-mse.ts

diff --git a/js/hang-demo/src/index.html b/js/hang-demo/src/index.html
index 65333acbd..50f28778b 100644
--- a/js/hang-demo/src/index.html
+++ b/js/hang-demo/src/index.html
@@ -37,6 +37,7 @@
 
 	<h3>Other demos:</h3>
 	<ul>
+		<li><a href="watch-mse.html">Watch with MSE player (native video).</a></li>
 		<li><a href="publish.html">Publish a broadcast.</a></li>
 		<li><a href="meet.html">Watch a room of broadcasts.</a></li>
 		<li><a href="support.html">Check browser support.</a></li>
diff --git a/js/hang-demo/src/mse/moq-client.ts b/js/hang-demo/src/mse/moq-client.ts
new file mode 100644
index 000000000..a810ff05d
--- /dev/null
+++ b/js/hang-demo/src/mse/moq-client.ts
@@ -0,0 +1,181 @@
+import * as Moq from "@moq/lite";
+import * as Catalog from "@moq/hang/catalog";
+
+export interface MoqClientConfig {
+  relayUrl: string;
+  broadcastName: string;
+  onData?: (data: Uint8Array, trackType: "video" | "audio") => void;
+  onCatalog?: (catalog: Catalog.Root) => void;
+  onError?: (error: Error) => void;
+  onConnected?: () => void;
+  onDisconnected?: () => void;
+}
+
+export class MoqClient {
+  private connection: Moq.Connection.Established | null = null;
+  private broadcast: Moq.Broadcast | null = null;
+  private config: MoqClientConfig;
+  private isRunning = false;
+
+  constructor(config: MoqClientConfig) {
+    this.config = config;
+  }
+
+  async connect(): Promise<void> {
+    try {
+      this.isRunning = true;
+
+      // Connect to relay using @moq/lite
+      this.connection = await Moq.Connection.connect(new URL(this.config.relayUrl));
+      console.log("[MoqClient] Connected to relay:", this.config.relayUrl);
+
+      this.config.onConnected?.();
+
+      // Subscribe to broadcast
+      this.broadcast = this.connection.consume(Moq.Path.from(this.config.broadcastName));
+      console.log("[MoqClient] Subscribed to broadcast:", this.config.broadcastName);
+
+      // First, fetch the catalog to get track names
+      const catalog = await this.fetchCatalog();
+
+      if (!catalog) {
+        console.warn("[MoqClient] No catalog received, using default track names");
+        // Fallback to default names
+        await this.subscribeToTracks("video0", "audio1");
+      } else {
+        this.config.onCatalog?.(catalog);
+
+        // Get track names from catalog
+        const videoTrackName = this.getVideoTrackName(catalog);
+        const audioTrackName = this.getAudioTrackName(catalog);
+
+        console.log("[MoqClient] Using tracks from catalog:", { videoTrackName, audioTrackName });
+
+        await this.subscribeToTracks(videoTrackName, audioTrackName);
+      }
+    } catch (error) {
+      console.error("[MoqClient] Connection error:", error);
+      this.config.onError?.(error as Error);
+      throw error;
+    }
+  }
+
+  private async fetchCatalog(): Promise<Catalog.Root | null> {
+    if (!this.broadcast) return null;
+
+    console.log("[MoqClient] Fetching catalog.json...");
+    const catalogTrack = this.broadcast.subscribe("catalog.json", 100);
+
+    try {
+      // Wait for catalog with timeout
+      const frame = await Promise.race([
+        catalogTrack.readFrame(),
+        new Promise<null>((resolve) => setTimeout(() => resolve(null), 5000))
+      ]);
+
+      if (!frame) {
+        console.warn("[MoqClient] Catalog fetch timed out");
+        return null;
+      }
+
+      // Use the catalog decode function from @moq/hang
+      const catalog = Catalog.decode(frame);
+      console.log("[MoqClient] Received catalog:", catalog);
+
+      return catalog;
+    } catch (error) {
+      console.warn("[MoqClient] Error fetching catalog:", error);
+      return null;
+    }
+  }
+
+  private getVideoTrackName(catalog: Catalog.Root): string | null {
+    if (!catalog.video?.renditions) return null;
+
+    // The rendition key (e.g., "video0") IS the track name
+    const renditionKeys = Object.keys(catalog.video.renditions);
+    if (renditionKeys.length > 0) {
+      return renditionKeys[0];
+    }
+    return null;
+  }
+
+  private getAudioTrackName(catalog: Catalog.Root): string | null {
+    if (!catalog.audio?.renditions) return null;
+
+    // The rendition key (e.g., "audio1") IS the track name
+    const renditionKeys = Object.keys(catalog.audio.renditions);
+    if (renditionKeys.length > 0) {
+      return renditionKeys[0];
+    }
+    return null;
+  }
+
+  private async subscribeToTracks(
+    videoTrackName: string | null,
+    audioTrackName: string | null
+  ): Promise<void> {
+    if (!this.broadcast) return;
+
+    const promises: Promise<void>[] = [];
+
+    if (videoTrackName) {
+      const videoTrack = this.broadcast.subscribe(videoTrackName, 2);
+      console.log("[MoqClient] Subscribed to video track:", videoTrackName);
+      promises.push(this.processTrack(videoTrack, "video"));
+    }
+
+    if (audioTrackName) {
+      const audioTrack = this.broadcast.subscribe(audioTrackName, 2);
+      console.log("[MoqClient] Subscribed to audio track:", audioTrackName);
+      promises.push(this.processTrack(audioTrack, "audio"));
+    }
+
+    await Promise.all(promises);
+  }
+
+  private async processTrack(
+    track: Moq.Track,
+    trackType: "video" | "audio"
+  ): Promise<void> {
+    console.log(`[MoqClient] Processing ${trackType} track:`, track.name);
+
+    try {
+      while (this.isRunning) {
+        const group = await track.nextGroup();
+        if (!group) {
+          console.log(`[MoqClient] ${trackType} track ended`);
+          break;
+        }
+
+        while (this.isRunning) {
+          const frame = await group.readFrame();
+          if (!frame) break;
+
+          // For segment mode, the frame IS the complete fMP4 segment
+          // No timestamp stripping needed
+          this.config.onData?.(frame, trackType);
+        }
+      }
+    } catch (error) {
+      if (this.isRunning) {
+        console.error(`[MoqClient] Error processing ${trackType} track:`, error);
+        this.config.onError?.(error as Error);
+      }
+    }
+  }
+
+  disconnect(): void {
+    this.isRunning = false;
+    if (this.broadcast) {
+      this.broadcast.close();
+      this.broadcast = null;
+    }
+    if (this.connection) {
+      this.connection.close();
+      this.connection = null;
+    }
+    this.config.onDisconnected?.();
+    console.log("[MoqClient] Disconnected");
+  }
+}
diff --git a/js/hang-demo/src/mse/moq-mse-player.ts b/js/hang-demo/src/mse/moq-mse-player.ts
new file mode 100644
index 000000000..f6701c62e
--- /dev/null
+++ b/js/hang-demo/src/mse/moq-mse-player.ts
@@ -0,0 +1,1240 @@
+import { MoqClient } from "./moq-client";
+import * as Catalog from "@moq/hang/catalog";
+
+/**
+ * MSE-based video player for MOQ streams.
+ *
+ * Uses MediaSource Extensions for native <video> playback with HLS.js-style
+ * live sync strategies (catch-up, hard seek, buffer management).
+ *
+ * @example
+ * ```html
+ * <moq-mse-player url="http://localhost:4443/anon" path="bbb" debug></moq-mse-player>
+ * ```
+ */
+export class MoqMsePlayer extends HTMLElement {
+  private video: HTMLVideoElement;
+  private mediaSource: MediaSource | null = null;
+  private videoSourceBuffer: SourceBuffer | null = null;
+  private audioSourceBuffer: SourceBuffer | null = null;
+  private client: MoqClient | null = null;
+  private videoQueue: { data: Uint8Array; trackType: "video" }[] = [];
+  private audioQueue: { data: Uint8Array; trackType: "audio" }[] = [];
+  private isVideoProcessing = false;
+  private isAudioProcessing = false;
+  private lastVideoProcessTime = 0;
+  private lastAudioProcessTime = 0;
+  private userPaused = false;
+  private monitorInterval: number | null = null;
+  private connectionState = "disconnected";
+  private reconnectTimer: number | null = null;
+  private catalogReceived = false;
+  private videoInitReceived = false;
+  private audioInitReceived = false;
+
+  // Audio-Video Synchronization State
+  private firstVideoTimestamp: number | null = null;  // In timescale units
+  private firstAudioTimestamp: number | null = null;  // In timescale units
+  private videoTimescale: number = 24000;             // Default, updated from init segment
+  private audioTimescale: number = 44100;             // Default, updated from init segment
+  private syncApplied = false;                        // True after offset is set
+
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+
+    // Create styles
+    const style = document.createElement("style");
+    style.textContent = `
+      :host {
+        display: block;
+        position: relative;
+        background: #000;
+      }
+      video {
+        width: 100%;
+        height: auto;
+        display: block;
+      }
+      .debug-overlay {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background: rgba(0, 0, 0, 0.7);
+        color: #0f0;
+        font-family: monospace;
+        font-size: 12px;
+        padding: 8px;
+        pointer-events: none;
+        z-index: 100;
+        border-radius: 4px;
+      }
+      .debug-overlay div {
+        white-space: nowrap;
+      }
+    `;
+
+    // Create video element
+    this.video = document.createElement("video");
+    this.video.controls = true;
+    this.video.autoplay = true;
+    this.video.muted = true; // Enable muted autoplay to bypass browser policies
+    this.video.playsInline = true;
+
+    this.video.addEventListener("play", () => {
+      this.userPaused = false;
+    });
+
+    this.video.addEventListener("pause", () => {
+      this.userPaused = true;
+    });
+
+    // Handle buffer underruns - try to resume when buffer refills
+    this.video.addEventListener("waiting", () => {
+      console.log("[MoqMsePlayer] Video waiting for data...");
+    });
+
+    this.video.addEventListener("stalled", () => {
+      console.log("[MoqMsePlayer] Video stalled, attempting to recover...");
+      // Try to seek to current position to unstick
+      if (this.videoSourceBuffer && this.videoSourceBuffer.buffered.length > 0) {
+        const bufferedEnd = this.videoSourceBuffer.buffered.end(0);
+        if (bufferedEnd > this.video.currentTime + 0.5) {
+          console.log("[MoqMsePlayer] Buffer ahead, seeking to resume");
+          this.video.currentTime = this.video.currentTime + 0.1;
+        }
+      }
+    });
+
+    this.video.addEventListener("canplay", () => {
+      if (!this.userPaused && this.video.paused) {
+        console.log("[MoqMsePlayer] Can play, resuming...");
+        this.video.play().catch((e) => console.error("[MoqMsePlayer] Resume failed:", e));
+      }
+    });
+
+    const shadowRoot = this.shadowRoot;
+    if (shadowRoot) {
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(this.video);
+    }
+  }
+
+  static get observedAttributes() {
+    return ["url", "path", "debug", "latency"];
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (oldValue !== newValue && newValue !== null) {
+      if (name === "url" || name === "path") {
+        this.reconnect();
+      }
+    }
+  }
+
+  connectedCallback() {
+    this.connect();
+  }
+
+  disconnectedCallback() {
+    this.disconnect();
+  }
+
+  private reconnect() {
+    if (this.client) {
+      this.disconnect();
+      this.connect();
+    }
+  }
+
+  private async connect() {
+    // Start periodic status logging
+    setInterval(() => {
+        if (!this.video) return;
+        const vBuf = this.videoSourceBuffer?.buffered.length ? `${this.videoSourceBuffer.buffered.start(0).toFixed(2)}-${this.videoSourceBuffer.buffered.end(this.videoSourceBuffer.buffered.length-1).toFixed(2)}` : "empty";
+        const aBuf = this.audioSourceBuffer?.buffered.length ? `${this.audioSourceBuffer.buffered.start(0).toFixed(2)}-${this.audioSourceBuffer.buffered.end(this.audioSourceBuffer.buffered.length-1).toFixed(2)}` : "empty";
+        console.log(`[MoqMsePlayer Status] Time: ${this.video.currentTime.toFixed(3)}s, State: ${this.video.readyState}, Paused: ${this.video.paused}, V-Buf: ${vBuf}, A-Buf: ${aBuf}`);
+    }, 1000);
+
+    const url = this.getAttribute("url");
+    const path = this.getAttribute("path");
+
+    if (!url || !path) {
+      console.error("[MoqMsePlayer] Missing url or path attributes");
+      return;
+    }
+
+    try {
+      // Initialize MediaSource but DON'T create SourceBuffer yet
+      // Wait for catalog to get the correct codec
+      await this.initMediaSource();
+
+      // Connect to MoQ
+      this.client = new MoqClient({
+        relayUrl: url,
+        broadcastName: path,
+        onCatalog: (catalog) => this.handleCatalog(catalog),
+        onData: (data, trackType) => this.handleData(data, trackType),
+        onError: (error) => {
+          console.error("[MoqMsePlayer] Error:", error);
+          this.connectionState = "error";
+          this.scheduleReconnect();
+        },
+        onConnected: () => {
+          console.log("[MoqMsePlayer] Connected");
+          this.connectionState = "connected";
+        },
+        onDisconnected: () => {
+          console.log("[MoqMsePlayer] Disconnected");
+          this.connectionState = "disconnected";
+        },
+      });
+
+      this.connectionState = "connecting";
+      await this.client.connect();
+
+      // Start monitoring playback
+      if (this.monitorInterval) clearInterval(this.monitorInterval);
+      this.monitorInterval = window.setInterval(() => this.checkLiveEdge(), 1000);
+    } catch (error) {
+      console.error("[MoqMsePlayer] Connection failed:", error);
+      this.scheduleReconnect();
+    }
+  }
+
+  private scheduleReconnect() {
+    if (this.reconnectTimer) return;
+    console.log("[MoqMsePlayer] Scheduling reconnect in 2s...");
+    this.reconnectTimer = window.setTimeout(() => {
+      this.reconnectTimer = null;
+      this.disconnect();
+      this.connect();
+    }, 2000);
+  }
+
+  private disconnect() {
+    if (this.monitorInterval) {
+      clearInterval(this.monitorInterval);
+      this.monitorInterval = null;
+    }
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.client) {
+      this.client.disconnect();
+      this.client = null;
+    }
+
+    // Reset MediaSource and SourceBuffer
+    if (this.mediaSource) {
+      try {
+        if (this.mediaSource.readyState === "open") {
+          this.mediaSource.endOfStream();
+        }
+      } catch {
+        // Ignore error if already closed
+      }
+      this.mediaSource = null;
+    }
+    this.videoSourceBuffer = null;
+    this.audioSourceBuffer = null;
+    this.videoQueue = [];
+    this.audioQueue = [];
+    this.isVideoProcessing = false;
+    this.isAudioProcessing = false;
+    this.catalogReceived = false;
+    this.videoInitReceived = false;
+    this.audioInitReceived = false;
+
+    // Detach video source
+    this.video.pause();
+    this.video.removeAttribute("src");
+    this.video.load();
+  }
+
+  private async initMediaSource(): Promise<void> {
+    return new Promise((resolve) => {
+      this.mediaSource = new MediaSource();
+      this.video.src = URL.createObjectURL(this.mediaSource);
+
+      this.mediaSource.addEventListener("sourceopen", () => {
+        console.log("[MoqMsePlayer] MediaSource opened, waiting for catalog...");
+        resolve();
+      });
+    });
+  }
+
+  private handleCatalog(catalog: Catalog.Root) {
+    console.log("[MoqMsePlayer] Received catalog:", catalog);
+
+    if (!this.mediaSource || this.mediaSource.readyState !== "open") {
+      console.error("[MoqMsePlayer] MediaSource not open");
+      return;
+    }
+
+    if (this.catalogReceived) {
+      console.log("[MoqMsePlayer] Catalog already processed, skipping");
+      return;
+    }
+
+    // Build codec string from catalog
+    const videoCodec = this.getVideoCodec(catalog);
+    const audioCodec = this.getAudioCodec(catalog);
+
+    if (!videoCodec && !audioCodec) {
+      console.error("[MoqMsePlayer] No codecs found in catalog");
+      return;
+    }
+
+    // Build combined codec string for multiplexed fMP4
+    const codecs: string[] = [];
+    if (videoCodec) codecs.push(videoCodec);
+    if (audioCodec) codecs.push(audioCodec);
+
+    const mimeType = `video/mp4; codecs="${codecs.join(", ")}"`;
+    console.log("[MoqMsePlayer] Using codec from catalog:", mimeType, "- Supported:", MediaSource.isTypeSupported(mimeType));
+
+    if (!MediaSource.isTypeSupported(mimeType)) {
+      console.error("[MoqMsePlayer] Codec not supported:", mimeType);
+      return;
+    }
+
+    try {
+      // Create separate SourceBuffers for video and audio
+      const videoMimeType = `video/mp4; codecs="${videoCodec}"`;
+      const audioMimeType = `audio/mp4; codecs="${audioCodec}"`;
+
+      console.log("[MoqMsePlayer] Creating video SourceBuffer:", videoMimeType);
+      this.videoSourceBuffer = this.mediaSource.addSourceBuffer(videoMimeType);
+      this.videoSourceBuffer.mode = "sequence";
+      this.videoSourceBuffer.addEventListener("updateend", () => {
+        this.processVideoQueue();
+        this.checkLiveEdge();
+      });
+      this.videoSourceBuffer.addEventListener("error", (e) => {
+        console.error("[MoqMsePlayer] Video SourceBuffer error:", e);
+      });
+
+      console.log("[MoqMsePlayer] Creating audio SourceBuffer:", audioMimeType);
+      this.audioSourceBuffer = this.mediaSource.addSourceBuffer(audioMimeType);
+      this.audioSourceBuffer.mode = "sequence";
+      this.audioSourceBuffer.addEventListener("updateend", () => {
+        this.processAudioQueue();
+      });
+      this.audioSourceBuffer.addEventListener("error", (e) => {
+        const sb = this.audioSourceBuffer;
+        console.error("[MoqMsePlayer] Audio SourceBuffer error:", e, {
+          updating: sb?.updating,
+          mediaSourceState: this.mediaSource?.readyState
+        });
+      });
+
+      this.catalogReceived = true;
+      console.log("[MoqMsePlayer] SourceBuffers created, waiting for init segments...");
+
+      // Process any queued data
+      this.processVideoQueue();
+      this.processAudioQueue();
+    } catch (error) {
+      console.error("[MoqMsePlayer] Failed to create SourceBuffer:", error);
+    }
+  }
+
+  private getVideoCodec(catalog: Catalog.Root): string | null {
+    if (!catalog.video?.renditions) return null;
+
+    const renditionKeys = Object.keys(catalog.video.renditions);
+    if (renditionKeys.length === 0) return null;
+
+    const firstRendition = catalog.video.renditions[renditionKeys[0]];
+    return firstRendition?.codec || null;
+  }
+
+  private getAudioCodec(catalog: Catalog.Root): string | null {
+    if (!catalog.audio?.renditions) return null;
+
+    const renditionKeys = Object.keys(catalog.audio.renditions);
+    if (renditionKeys.length === 0) return null;
+
+    const firstRendition = catalog.audio.renditions[renditionKeys[0]];
+    return firstRendition?.codec || null;
+  }
+
+  private log(msg: string, ...args: unknown[]) {
+    if (this.hasAttribute("debug")) {
+      console.log(msg, ...args);
+    }
+  }
+
+  /**
+   * Strip the QUIC VarInt timestamp prefix from frame data.
+   * The hang server prepends a QUIC VarInt-encoded timestamp to each frame.
+   * QUIC VarInt format: first 2 bits indicate length (1, 2, 4, or 8 bytes).
+   * We need to remove this before passing to MSE.
+   */
+  private stripTimestampPrefix(data: Uint8Array): Uint8Array {
+    if (data.byteLength < 1) return data;
+
+    // QUIC VarInt: first 2 bits of first byte indicate length
+    const firstByte = data[0];
+    const lengthBits = (firstByte >> 6) & 0x03;
+
+    let varintLength: number;
+    switch (lengthBits) {
+      case 0: varintLength = 1; break;  // 00 = 1 byte
+      case 1: varintLength = 2; break;  // 01 = 2 bytes
+      case 2: varintLength = 4; break;  // 10 = 4 bytes
+      case 3: varintLength = 8; break;  // 11 = 8 bytes
+      default: varintLength = 1; break;
+    }
+
+    if (data.byteLength < varintLength) {
+      console.error("[MoqMsePlayer] Data too short for QUIC VarInt");
+      return data;
+    }
+
+    // Return the data without the timestamp prefix
+    this.log(`[MoqMsePlayer] Stripped ${varintLength} byte QUIC VarInt timestamp`);
+    return data.slice(varintLength);
+  }
+
+  /**
+   * Check if data is an init segment (starts with ftyp box)
+   */
+  private isInitSegment(data: Uint8Array): boolean {
+    if (data.byteLength < 8) return false;
+    // Check for 'ftyp' fourcc at offset 4
+    const fourcc = String.fromCharCode(data[4], data[5], data[6], data[7]);
+    return fourcc === "ftyp";
+  }
+
+  /**
+   * Check if data is a media segment (starts with moof or styp)
+   */
+  private isMediaSegment(data: Uint8Array): boolean {
+    if (data.byteLength < 8) return false;
+    const fourcc = String.fromCharCode(data[4], data[5], data[6], data[7]);
+    return fourcc === "moof" || fourcc === "styp";
+  }
+
+  /**
+   * Debug helper: Log all MP4 boxes in a segment
+   */
+  private logMp4Boxes(data: Uint8Array, trackType: string) {
+    let offset = 0;
+    const boxes: string[] = [];
+    const dv = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+    while (offset + 8 <= data.byteLength) {
+      const boxSize = dv.getUint32(offset);
+      const fourcc = String.fromCharCode(
+        data[offset + 4], data[offset + 5], data[offset + 6], data[offset + 7]
+      );
+
+      if (boxSize === 0) break; // End of boxes
+      if (boxSize < 8 || offset + boxSize > data.byteLength) {
+        boxes.push(`INVALID(size=${boxSize})`);
+        break;
+      }
+
+      boxes.push(`${fourcc}(${boxSize})`);
+      offset += boxSize;
+    }
+
+    console.log(`[MoqMsePlayer] ${trackType} init boxes:`, boxes.join(', '));
+
+    // Log first 64 bytes as hex for debugging
+    const hexBytes = Array.from(data.slice(0, Math.min(64, data.byteLength)))
+      .map(b => b.toString(16).padStart(2, '0'))
+      .join(' ');
+    console.log(`[MoqMsePlayer] ${trackType} init first 64 bytes:`, hexBytes);
+  }
+
+  /**
+   * Split a combined init+media segment into separate parts.
+   * The server sends ftyp + moov + moof + mdat combined.
+   * We need ftyp + moov as init segment, and moof + mdat as media segment.
+   */
+  private splitInitAndMedia(data: Uint8Array): { initSegment: Uint8Array | null; mediaSegment: Uint8Array | null } {
+    let offset = 0;
+    let initEnd = 0;
+    const dv = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+    // Find the end of init segment (after ftyp and moov boxes)
+    while (offset + 8 <= data.byteLength) {
+      const boxSize = dv.getUint32(offset);
+      const fourcc = String.fromCharCode(
+        data[offset + 4], data[offset + 5], data[offset + 6], data[offset + 7]
+      );
+
+      if (boxSize === 0 || boxSize < 8 || offset + boxSize > data.byteLength) {
+        break;
+      }
+
+      // ftyp and moov are part of init segment
+      if (fourcc === 'ftyp' || fourcc === 'moov') {
+        initEnd = offset + boxSize;
+        offset += boxSize;
+      } else {
+        // This is where media segment starts (moof, mdat, etc)
+        break;
+      }
+    }
+
+    const initSegment = initEnd > 0 ? data.slice(0, initEnd) : null;
+    const mediaSegment = offset < data.byteLength ? data.slice(offset) : null;
+
+    return { initSegment, mediaSegment };
+  }
+
+  private handleData(rawData: Uint8Array, trackType: "video" | "audio") {
+    // Strip the varint timestamp prefix that hang adds to each frame
+    const data = this.stripTimestampPrefix(rawData);
+
+    // Log first 8 bytes to see what we're getting
+    if (data.byteLength >= 8) {
+      const fourcc = String.fromCharCode(data[4], data[5], data[6], data[7]);
+      const size = new DataView(data.buffer, data.byteOffset, 4).getUint32(0);
+      console.log(`[MoqMsePlayer] Received ${trackType} segment: fourcc='${fourcc}', size=${data.byteLength}, boxSize=${size}`);
+    }
+
+    // Check if this is an init segment
+    if (this.isInitSegment(data)) {
+      let processInit = true; // Flag to pass to split logic
+      if (trackType === "video") {
+        if (this.videoInitReceived) {
+          this.log(`[MoqMsePlayer] Skipping duplicate video INIT segment: ${data.byteLength} bytes. Continuing to check for media...`);
+          processInit = false; // Mark init as handled/skipped so we don't re-append it
+        } else {
+            console.log(`[MoqMsePlayer] Received VIDEO INIT segment: ${data.byteLength} bytes`);
+            this.videoInitReceived = true;
+        }
+      } else {
+        if (this.audioInitReceived) {
+          this.log(`[MoqMsePlayer] Skipping duplicate audio INIT segment: ${data.byteLength} bytes. Continuing to check for media...`);
+          processInit = false;
+        } else {
+            console.log(`[MoqMsePlayer] Received AUDIO INIT segment: ${data.byteLength} bytes`);
+            this.audioInitReceived = true;
+        }
+      }
+
+      // Debug: Parse and log all boxes in the init segment
+      this.logMp4Boxes(data, trackType);
+
+      // The server sends ftyp + moov + moof + mdat combined!
+      // We need to split this: only ftyp + moov should be the init segment
+      // The moof + mdat should be queued as the first media segment
+      const { initSegment, mediaSegment } = this.splitInitAndMedia(data);
+
+      if (initSegment && processInit) { // Only process init if it wasn't marked as duplicate
+        console.log(`[MoqMsePlayer] Extracted ${trackType} init segment (ftyp+moov): ${initSegment.byteLength} bytes`);
+        this.patchInitSegment(initSegment);
+        if (trackType === "video") this.videoQueue.push({ data: initSegment, trackType });
+        else this.audioQueue.push({ data: initSegment, trackType });
+      }
+
+      if (mediaSegment) {
+        console.log(`[MoqMsePlayer] Extracted ${trackType} first media segment (moof+mdat): ${mediaSegment.byteLength} bytes`);
+        const timestamp = this.inspectMP4(mediaSegment, trackType + " Media");
+
+        // Capture first timestamp for sync calculation
+        if (trackType === "video" && this.firstVideoTimestamp === null && timestamp !== null) {
+          this.firstVideoTimestamp = timestamp;
+          console.log(`[Sync] First video timestamp: ${timestamp} (timescale: ${this.videoTimescale})`);
+        }
+        if (trackType === "audio" && this.firstAudioTimestamp === null && timestamp !== null) {
+          this.firstAudioTimestamp = timestamp;
+          console.log(`[Sync] First audio timestamp: ${timestamp} (timescale: ${this.audioTimescale})`);
+        }
+
+        if (trackType === "video") this.videoQueue.push({ data: mediaSegment, trackType });
+        else this.audioQueue.push({ data: mediaSegment, trackType });
+      }
+
+      if (trackType === "video") this.processVideoQueue();
+      else this.processAudioQueue();
+      return;
+    }
+
+    // Inspect regular media segments and capture timestamp for sync
+    const timestamp = this.inspectMP4(data, trackType + " Media");
+
+    // Capture first timestamp for sync calculation (for non-bundled segments)
+    if (trackType === "video" && this.firstVideoTimestamp === null && timestamp !== null) {
+      this.firstVideoTimestamp = timestamp;
+      console.log(`[Sync] First video timestamp: ${timestamp} (timescale: ${this.videoTimescale})`);
+    }
+    if (trackType === "audio" && this.firstAudioTimestamp === null && timestamp !== null) {
+      this.firstAudioTimestamp = timestamp;
+      console.log(`[Sync] First audio timestamp: ${timestamp} (timescale: ${this.audioTimescale})`);
+    }
+
+    // If we haven't received the init segment for this track type, drop its data
+    if (trackType === "video" && !this.videoInitReceived) {
+      this.log(`[MoqMsePlayer] Dropping video segment (waiting for video init)`);
+      return;
+    }
+    if (trackType === "audio" && !this.audioInitReceived) {
+      this.log(`[MoqMsePlayer] Dropping audio segment (waiting for audio init)`);
+      return;
+    }
+
+    // Safety check: if queue is too large, drop old data
+    if (this.videoQueue.length > 1000) {
+      console.warn("[MoqMsePlayer] Video queue too large, clearing.");
+      this.videoQueue = [];
+    }
+    if (this.audioQueue.length > 1000) {
+        console.warn("[MoqMsePlayer] Audio queue too large, clearing.");
+        this.audioQueue = [];
+    }
+
+    if (trackType === "video") {
+      // console.log(`[MoqMsePlayer] Enqueuing video segment. Queue size: ${this.videoQueue.length+1}`);
+      this.videoQueue.push({ data, trackType });
+      this.processVideoQueue();
+    } else {
+      this.audioQueue.push({ data, trackType });
+      this.processAudioQueue();
+    }
+  }
+
+  private async processVideoQueue() {
+    if (!this.videoSourceBuffer || !this.catalogReceived || !this.videoInitReceived) return;
+
+    if (this.isVideoProcessing) {
+        if (Date.now() - this.lastVideoProcessTime > 2000) {
+            console.warn("[MoqMsePlayer] Video process loop stuck, forcing reset.");
+            this.isVideoProcessing = false;
+        } else {
+            return;
+        }
+    }
+
+    this.isVideoProcessing = true;
+    this.lastVideoProcessTime = Date.now();
+
+    try {
+        while (this.videoQueue.length > 0) {
+            const targetBuffer = this.videoSourceBuffer;
+
+            // Wait if buffer is updating
+            if (targetBuffer.updating) {
+                await new Promise<void>((resolve) => {
+                    const onEnd = () => {
+                        targetBuffer.removeEventListener("updateend", onEnd);
+                        resolve();
+                    };
+                    targetBuffer.addEventListener("updateend", onEnd);
+                });
+            }
+
+            if (this.videoQueue.length === 0) break;
+            const item = this.videoQueue[0];
+
+            try {
+                const start = performance.now();
+                await this.appendToBuffer(item.data, "video");
+                const duration = performance.now() - start;
+                if (duration > 50) {
+                   console.warn(`[MoqMsePlayer] Slow video append: ${duration.toFixed(1)}ms`);
+                }
+                this.videoQueue.shift(); // remove only after success
+            } catch (e) {
+                const error = e as Error;
+                if (error.name === "QuotaExceededError") {
+                    console.warn("[MoqMsePlayer] Video QuotaExceededError. Cleaning up.");
+                    this.cleanupBuffer(true);
+                    // Don't shift, retry next time
+                    break;
+                } else {
+                    console.error("[MoqMsePlayer] Error appending video:", error);
+                    this.videoQueue.shift(); // Drop problematic segment
+                }
+            }
+        }
+    } catch (e) {
+        console.error("[MoqMsePlayer] Fatal error in processVideoQueue:", e);
+    } finally {
+        this.isVideoProcessing = false;
+        // this.log("[MoqMsePlayer] Exiting processVideoQueue");
+    }
+  }
+
+  private async processAudioQueue() {
+    if (!this.audioSourceBuffer || !this.catalogReceived || !this.audioInitReceived) return;
+
+    if (this.isAudioProcessing) {
+        if (Date.now() - this.lastAudioProcessTime > 2000) {
+            console.warn("[MoqMsePlayer] Audio process loop stuck, forcing reset.");
+            this.isAudioProcessing = false;
+        } else {
+            return;
+        }
+    }
+
+    this.isAudioProcessing = true;
+    this.lastAudioProcessTime = Date.now();
+
+    // SYNC GATE: Apply offset once when both first timestamps are available
+    if (!this.syncApplied && this.firstVideoTimestamp !== null && this.firstAudioTimestamp !== null) {
+      this.applySyncOffset();
+    }
+
+    try {
+        while (this.audioQueue.length > 0) {
+            const targetBuffer = this.audioSourceBuffer;
+
+            // Wait if buffer is updating
+            if (targetBuffer.updating) {
+                await new Promise<void>((resolve) => {
+                    const onEnd = () => {
+                        targetBuffer.removeEventListener("updateend", onEnd);
+                        resolve();
+                    };
+                    targetBuffer.addEventListener("updateend", onEnd);
+                });
+            }
+
+            if (this.audioQueue.length === 0) break;
+            const item = this.audioQueue[0];
+
+            try {
+                await this.appendToBuffer(item.data, "audio");
+                this.audioQueue.shift(); // remove only after success
+            } catch (e) {
+                const error = e as Error;
+                if (error.name === "QuotaExceededError") {
+                    console.warn("[MoqMsePlayer] Audio QuotaExceededError. Cleaning up.");
+                    this.cleanupBuffer(true);
+                    // Don't shift, retry next time
+                    break;
+                } else {
+                    console.error("[MoqMsePlayer] Error appending audio:", error);
+                    this.audioQueue.shift(); // Drop problematic segment
+                }
+            }
+        }
+    } catch (e) {
+        console.error("[MoqMsePlayer] Fatal error in processAudioQueue:", e);
+    } finally {
+        this.isAudioProcessing = false;
+    }
+  }
+
+  /**
+   * Calculate and apply the audio timestamp offset to synchronize with video.
+   * This is called once when both first video and audio timestamps are available.
+   */
+  private applySyncOffset() {
+    if (this.firstVideoTimestamp === null || this.firstAudioTimestamp === null) return;
+    if (this.syncApplied) return;
+    if (!this.audioSourceBuffer) return;
+
+    // Convert both to seconds using their respective timescales
+    const videoStartSec = this.firstVideoTimestamp / this.videoTimescale;
+    const audioStartSec = this.firstAudioTimestamp / this.audioTimescale;
+
+    // Calculate offset: we want audio to start when video starts
+    const offset = videoStartSec - audioStartSec;
+
+    console.log(`[Sync] Video starts at ${videoStartSec.toFixed(3)}s (${this.firstVideoTimestamp}/${this.videoTimescale})`);
+    console.log(`[Sync] Audio starts at ${audioStartSec.toFixed(3)}s (${this.firstAudioTimestamp}/${this.audioTimescale})`);
+    console.log(`[Sync] Calculated offset: ${offset.toFixed(3)}s (NOT applying - sequence mode starts both at 0)`);
+
+    // In sequence mode, both tracks start at 0 regardless of original media timestamps.
+    // Applying an offset would break sync by delaying one track.
+    // The real fix for audio/video timestamp mismatch is on the server/encoder side.
+    this.syncApplied = true;
+  }
+
+  private async appendToBuffer(data: Uint8Array, trackType: "video" | "audio"): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const targetBuffer = trackType === "video" ? this.videoSourceBuffer : this.audioSourceBuffer;
+      if (!targetBuffer) {
+        reject(new Error(`No ${trackType} SourceBuffer`));
+        return;
+      }
+
+      // Check if MediaSource is still open
+      if (!this.mediaSource || this.mediaSource.readyState !== "open") {
+        reject(new Error(`MediaSource not open (state: ${this.mediaSource?.readyState})`));
+        return;
+      }
+
+      // Check if buffer is still updating
+      if (targetBuffer.updating) {
+        reject(new Error(`${trackType} SourceBuffer still updating`));
+        return;
+      }
+
+      const isInit = this.isInitSegment(data);
+      const isMedia = this.isMediaSegment(data);
+
+      if (isInit) {
+        console.log(`[MoqMsePlayer] Appending ${trackType} INIT segment, size:`, data.byteLength);
+      } else if (isMedia) {
+        this.log(`[MoqMsePlayer] Appending ${trackType} media segment, size:`, data.byteLength);
+      } else {
+        console.warn(`[MoqMsePlayer] Unknown ${trackType} segment type, first bytes:`,
+          Array.from(data.slice(0, 16)).map(b => b.toString(16).padStart(2, '0')).join(' '));
+      }
+
+      try {
+        // Cast to BufferSource to handle TypeScript lib compatibility
+        targetBuffer.appendBuffer(data as unknown as BufferSource);
+      } catch (e: unknown) {
+        const error = e as Error;
+        console.error(`[MoqMsePlayer] ${trackType} appendBuffer failed:`, error.name, error.message);
+        reject(error);
+        return;
+      }
+
+      const onUpdateEnd = () => {
+        targetBuffer.removeEventListener("updateend", onUpdateEnd);
+
+        if (targetBuffer.buffered.length > 0) {
+            const start = targetBuffer.buffered.start(0);
+            const end = targetBuffer.buffered.end(targetBuffer.buffered.length - 1);
+            // Diagnostic log - log frequently for now to debug "only 1 segment" issue
+             console.log(`[MoqMsePlayer] ${trackType} UpdateEnd. Range: ${start.toFixed(3)}-${end.toFixed(3)} (Ranges: ${targetBuffer.buffered.length})`);
+        }
+        resolve();
+      };
+
+      targetBuffer.addEventListener("updateend", onUpdateEnd);
+    });
+  }
+
+  private cleanupBuffer(aggressive = false) {
+    const currentTime = this.video.currentTime;
+    const keepDuration = aggressive ? 5 : 60;
+
+    // Cleanup both buffers
+    for (const buffer of [this.videoSourceBuffer, this.audioSourceBuffer]) {
+      if (!buffer || buffer.updating) continue;
+
+      const buffered = buffer.buffered;
+      for (let i = 0; i < buffered.length; i++) {
+        const start = buffered.start(i);
+        const end = buffered.end(i);
+
+        if (end < currentTime - keepDuration) {
+          this.log(`[MoqMsePlayer] Cleaning up buffer: ${start.toFixed(2)}-${end.toFixed(2)}`);
+          buffer.remove(start, end);
+          return;
+        } else if (start < currentTime - keepDuration) {
+          this.log(`[MoqMsePlayer] Cleaning up buffer: ${start.toFixed(2)}-${(currentTime - keepDuration).toFixed(2)}`);
+          buffer.remove(start, currentTime - keepDuration);
+          return;
+        }
+      }
+    }
+  }
+
+  private checkLiveEdge() {
+    if (!this.videoSourceBuffer) return;
+    try {
+      const buffered = this.videoSourceBuffer?.buffered;
+      if (!buffered || buffered.length === 0) {
+         // this.log(`[MoqMsePlayer] Buffer empty. Time: ${this.video.currentTime.toFixed(2)}`);
+         return;
+      }
+
+      // Log fragmentation if > 1 range
+      if (buffered.length > 1) {
+         const ranges = [];
+         for(let i=0; i<buffered.length; i++) ranges.push(`${buffered.start(i).toFixed(3)}-${buffered.end(i).toFixed(3)}`);
+         console.warn(`[MoqMsePlayer] Fragmented Buffer: ${ranges.join(", ")}`);
+      }
+
+      const bufferedEnd = buffered.end(buffered.length - 1);
+      const bufferedStart = buffered.start(0);
+      const currentTime = this.video.currentTime;
+      const paused = this.video.paused;
+
+      if (paused) {
+        if (this.userPaused) return;
+
+        const bufferDuration = bufferedEnd - bufferedStart;
+        this.log(`[MoqMsePlayer] Paused. Buffer: ${bufferDuration.toFixed(2)}s (${bufferedStart.toFixed(2)}-${bufferedEnd.toFixed(2)})`);
+
+        // Check if we need to start playing
+        // If we are way behind the buffer start (e.g. at 0 while buffer is at 500), seek immediately
+        const isOutOfSync = currentTime < bufferedStart - 0.5;
+
+        // console.log(`[MoqMsePlayer] Autoplay Check: autoplay=${this.video.autoplay}, bufferDuration=${bufferDuration.toFixed(3)}, isOutOfSync=${isOutOfSync}, currentTime=${currentTime.toFixed(3)}, bufferedStart=${bufferedStart.toFixed(3)}`);
+
+        // Relaxed condition: If out of sync, try to recover even if buffer is tiny (it might grow)
+        if (this.video.autoplay && (bufferDuration > 0.1 || isOutOfSync)) {
+          // Seek to live edge before playing
+          if (currentTime < bufferedStart || currentTime > bufferedEnd) {
+            const targetTime = Math.max(bufferedStart, bufferedEnd - 1.0);
+            console.log(`[MoqMsePlayer] Seeking to live edge: ${targetTime.toFixed(2)}s (was at ${currentTime.toFixed(2)}s) range=${bufferedStart.toFixed(2)}-${bufferedEnd.toFixed(2)}`);
+            this.video.currentTime = targetTime;
+          }
+          this.log("[MoqMsePlayer] Attempting autoplay...");
+          this.video.play().catch((e) => console.error("[MoqMsePlayer] Autoplay failed:", e));
+        }
+        return;
+      }
+
+      // HLS.js-style Live Sync
+      const targetLatency = 2.0;
+      const latency = bufferedEnd - currentTime;
+
+      // Hard Seek if too far behind
+      const isOutOfSync = currentTime < bufferedStart - 0.5;
+      if (latency > 5.0 || isOutOfSync) {
+        // Ensure we don't seek before the actual buffer start
+        const safeTarget = Math.max(bufferedStart, bufferedEnd - targetLatency);
+
+        this.log(`[MoqMsePlayer] Sync adjustment: latency=${latency.toFixed(2)}s, outOfSync=${isOutOfSync}, seeking to ${safeTarget.toFixed(2)}s coverage=${bufferedStart.toFixed(2)}-${bufferedEnd.toFixed(2)}`);
+
+        if (Math.abs(currentTime - safeTarget) > 0.5) {
+             this.video.currentTime = safeTarget;
+        }
+        return;
+      }
+
+      // Catch-up via Playback Rate
+      if (latency > 3.0) {
+        if (this.video.playbackRate !== 1.1) {
+          this.log(`[MoqMsePlayer] Catching up (latency ${latency.toFixed(2)}s), rate -> 1.1x`);
+          this.video.playbackRate = 1.1;
+        }
+      } else if (latency < 2.0 && latency > -0.5) {
+        if (this.video.playbackRate !== 1.0) {
+          this.log(`[MoqMsePlayer] Latency good (${latency.toFixed(2)}s), rate -> 1.0x`);
+          this.video.playbackRate = 1.0;
+        }
+      } else if (latency <= -0.5) {
+        const targetPos = Math.max(0, bufferedEnd - 0.1);
+        this.log(`[MoqMsePlayer] Ahead of buffer (${latency.toFixed(2)}s), seeking to ${targetPos.toFixed(2)}s`);
+        this.video.pause();
+        this.video.currentTime = targetPos;
+      }
+
+      // Update Debug Overlay
+      if (this.hasAttribute("debug")) {
+        this.updateDebugOverlay(latency, bufferedStart, bufferedEnd);
+      }
+
+      // Regular buffer cleanup
+      this.cleanupBuffer();
+    } catch (e) {
+      // console.error("[MoqMsePlayer] checkLiveEdge error:", e);
+    }
+  }
+
+  private updateDebugOverlay(latency: number, bufferedStart: number, bufferedEnd: number) {
+    try {
+        let debugEl = this.shadowRoot?.querySelector(".debug-overlay") as HTMLDivElement | null;
+        if (!debugEl) {
+          debugEl = document.createElement("div");
+          debugEl.className = "debug-overlay";
+          this.shadowRoot?.appendChild(debugEl);
+        }
+
+        const quality = this.video.getVideoPlaybackQuality?.() ?? null;
+        const dropped = quality?.droppedVideoFrames ?? 0;
+        const total = quality?.totalVideoFrames ?? 0;
+        const vRanges = this.videoSourceBuffer?.buffered.length ?? 0;
+        const aRanges = this.audioSourceBuffer?.buffered.length ?? 0;
+        const vQ = this.videoQueue.length;
+        const aQ = this.audioQueue.length;
+
+        debugEl.innerHTML = `
+        <div>Latency: ${latency.toFixed(3)}s</div>
+        <div>Buffer: ${bufferedStart.toFixed(2)} - ${bufferedEnd.toFixed(2)}s (${(bufferedEnd - bufferedStart).toFixed(2)}s)</div>
+        <div>Ranges: V=${vRanges} A=${aRanges}</div>
+        <div>Rate: ${this.video.playbackRate.toFixed(2)}x</div>
+        <div>Res: ${this.video.videoWidth}x${this.video.videoHeight}</div>
+        <div>Time: ${this.video.currentTime.toFixed(2)}s</div>
+        <div>State: ${this.connectionState}</div>
+        <div>Queue: V=${vQ} A=${aQ}</div>
+        <div>Init: V=${this.videoInitReceived ? "\u2713" : "..."} A=${this.audioInitReceived ? "\u2713" : "..."}</div>
+        <div>Ready: ${this.video.readyState} | Net: ${this.video.networkState}</div>
+        <div>Dropped: ${dropped} / ${total}</div>
+        `;
+    } catch (e) {
+        console.error("Debug overlay error:", e);
+    }
+  }
+
+  // --- MP4 Patching for Missing Durations ---
+
+  private patchInitSegment(data: Uint8Array) {
+    try {
+      this.log(`[MP4 Patch] Scanning Init Segment (${data.byteLength} bytes)...`);
+      const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+      // Step 1: Map Track IDs to Types and Timescales
+      const tracks = new Map<number, { type: string, timescale: number }>();
+
+      // Find MOOV
+      const moov = this.findBox(view, 0, 'moov');
+      if (!moov) {
+         this.log("[MP4 Patch] No moov box found!");
+         return;
+      }
+
+      // Iterate MOOV children to find TRAKs
+      let offset = moov.start + 8;
+      while (offset < moov.end) {
+        const box = this.readBoxHeader(view, offset);
+        if (box.size === 0) break;
+
+        if (box.type === 'trak') {
+            const info = this.parseTrak(view, box.start, box.end);
+            if (info) {
+                tracks.set(info.id, info);
+                this.log(`[MP4 Patch] Found Track ID=${info.id} Type=${info.type} Timescale=${info.timescale}`);
+                // Store timescales for sync calculation
+                if (info.type === 'vide') this.videoTimescale = info.timescale;
+                if (info.type === 'soun') this.audioTimescale = info.timescale;
+            }
+        }
+        offset += box.size;
+      }
+
+      // Step 2: Update TREX boxes in MVEX
+      const mvex = this.findBox(view, moov.start + 8, 'mvex', moov.end);
+      if (mvex) {
+          let inner = mvex.start + 8;
+          while (inner < mvex.end) {
+              const box = this.readBoxHeader(view, inner);
+              if (box.type === 'trex') {
+                  this.updateTrex(view, inner, tracks);
+              }
+              inner += box.size;
+          }
+      }
+
+    } catch (e) {
+      console.error("[MoqMsePlayer] Error patching init segment:", e);
+    }
+  }
+
+  private findBox(view: DataView, start: number, type: string, max: number = -1): { start: number, end: number, size: number } | null {
+      let offset = start;
+      const limit = max > 0 ? max : view.byteLength;
+      while (offset + 8 <= limit) {
+          const size = view.getUint32(offset);
+          const name = String.fromCharCode(view.getUint8(offset+4), view.getUint8(offset+5), view.getUint8(offset+6), view.getUint8(offset+7));
+          if (name === type) {
+              return { start: offset, end: offset + size, size };
+          }
+          if (size <= 0 || offset + size > limit) break; // Invalid
+
+          // Container boxes to recurse? No, simple linear scan for now, caller handles hierarchy
+          // If we receive a max, we assume we are scanning siblings
+          offset += size;
+      }
+      return null;
+  }
+
+  private readBoxHeader(view: DataView, offset: number) {
+      const size = view.getUint32(offset);
+      const type = String.fromCharCode(view.getUint8(offset+4), view.getUint8(offset+5), view.getUint8(offset+6), view.getUint8(offset+7));
+      return { size, type, start: offset, end: offset + size };
+  }
+
+  private parseTrak(view: DataView, start: number, end: number): { id: number, type: string, timescale: number } | null {
+      let id = 0;
+      let type = 'unknown';
+      let timescale = 0;
+
+      // Scan children: tkhd, mdia
+      let offset = start + 8;
+
+      // Find TKHD
+      const tkhd = this.findBox(view, offset, 'tkhd', end);
+      if (tkhd) {
+          const version = view.getUint8(tkhd.start + 8);
+          // Version(1)+Flags(3) = 4.
+          // Creation(4/8) + Mod(4/8)
+          let ptr = tkhd.start + 12;
+          if (version === 1) ptr += 16; else ptr += 8;
+          id = view.getUint32(ptr);
+      }
+
+      // Find MDIA
+      const mdia = this.findBox(view, offset, 'mdia', end);
+      if (mdia) {
+          // Find MDHD inside MDIA
+          const mdhd = this.findBox(view, mdia.start + 8, 'mdhd', mdia.end);
+          if (mdhd) {
+              const version = view.getUint8(mdhd.start + 8);
+              let ptr = mdhd.start + 12;
+              if (version === 1) ptr += 16; else ptr += 8; // Skip stamps
+              timescale = view.getUint32(ptr);
+          }
+          // Find HDLR inside MDIA
+          const hdlr = this.findBox(view, mdia.start + 8, 'hdlr', mdia.end);
+          if (hdlr) {
+             // Ver(4), Pre(4), Type(4)
+             const typeOffset = hdlr.start + 16;
+             type = String.fromCharCode(view.getUint8(typeOffset), view.getUint8(typeOffset+1), view.getUint8(typeOffset+2), view.getUint8(typeOffset+3));
+          }
+      }
+
+      if (id && timescale) return { id, type, timescale };
+      return null;
+  }
+
+  private updateTrex(view: DataView, offset: number, tracks: Map<number, { type: string, timescale: number }>) {
+      // trek: Size(4), Type(4), VerFlags(4), TrackID(4), DefDescIdx(4), DefDur(4)...
+      const trackId = view.getUint32(offset + 12);
+      const info = tracks.get(trackId);
+
+      const currentDuration = view.getUint32(offset + 20);
+
+      if (info && currentDuration === 0) {
+          let newDuration = 0;
+          if (info.type === 'vide') {
+              // Assume 30fps if unknown
+              newDuration = Math.floor(info.timescale / 30);
+          } else if (info.type === 'soun') {
+              // AAC default is 1024 samples
+              newDuration = 1024;
+          }
+
+          if (newDuration > 0) {
+              this.log(`[MP4 Patch] Overwriting TREX duration for Track ${trackId} (${info.type}). Old=${currentDuration}, New=${newDuration}`);
+              view.setUint32(offset + 20, newDuration); // Big Endian default
+          }
+      } else {
+          // this.log(`[MP4 Patch] TREX Track ${trackId} has duration ${currentDuration} (Type: ${info?.type})`);
+      }
+  }
+
+  // Debug: Inspect MP4 atoms to find timescale/duration issues
+  private inspectLogCount = 0;
+
+  private inspectMP4(data: Uint8Array, label: string): number | null {
+    // Rate limit logging, but ALWAYS parse audio if we need its first timestamp for sync
+    const isAudio = label.includes("audio");
+    const needAudioTimestamp = isAudio && this.firstAudioTimestamp === null;
+
+    if (this.inspectLogCount > 10 && label.includes("Media") && !label.includes("video") && !needAudioTimestamp) {
+      return null; // Limit spam, but allow video and first audio timestamp capture
+    }
+    if (label.includes("Media")) this.inspectLogCount++;
+
+    let foundTimestamp: number | null = null;
+
+    try {
+      let offset = 0;
+      const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+      this.log(`[MP4 Debug] Inspecting ${label} (${data.byteLength} bytes)`);
+
+      let iter = 0;
+      while (offset < data.byteLength && iter < 50) {
+        iter++;
+        if (offset + 8 > data.byteLength) break;
+        const size = view.getUint32(offset);
+        const type = String.fromCharCode(
+          view.getUint8(offset + 4),
+          view.getUint8(offset + 5),
+          view.getUint8(offset + 6),
+          view.getUint8(offset + 7)
+        );
+
+        const boxSize = size === 0 ? data.byteLength - offset : size;
+        this.log(`  Box: ${type}, Size: ${boxSize} (Offset: ${offset})`);
+
+        if (type === 'mdhd') {
+           this.parseMdhd(view, offset + 8);
+        }
+        if (type === 'trun') {
+           this.parseTrun(view, offset + 8);
+        }
+        if (type === 'tfdt') {
+            foundTimestamp = this.parseTfdt(view, offset + 8);
+        }
+
+        if (['moov', 'trak', 'mdia', 'minf', 'stbl', 'mvex', 'moof', 'traf'].includes(type)) {
+            offset += 8; // Enter container
+        } else {
+            offset += boxSize; // Skip leaf
+        }
+      }
+    } catch (e) {
+      this.log(`[MP4 Debug] Error inspecting: ${e}`);
+    }
+
+    return foundTimestamp;
+  }
+
+  private parseTfdt(view: DataView, offset: number): number {
+      // Version(1), Flags(3), BaseMediaDecodeTime(4 or 8)
+      const version = view.getUint8(offset);
+      let baseMediaDecodeTime = 0;
+      if (version === 1) {
+          // 64-bit: high 32, low 32. JS only supports reading 32 safely or BigInt.
+          // Let's assume high 32 is 0 or use BigInt if possible, but logging simple number
+          const high = view.getUint32(offset + 4);
+          const low = view.getUint32(offset + 8);
+          // If high is > 0 this might be inaccurate as number, but fine for debug logs usually
+          baseMediaDecodeTime = high * 4294967296 + low;
+           this.log(`    [tfdt] BaseMediaDecodeTime (64-bit): ${baseMediaDecodeTime}`);
+      } else {
+          baseMediaDecodeTime = view.getUint32(offset + 4);
+           this.log(`    [tfdt] BaseMediaDecodeTime (32-bit): ${baseMediaDecodeTime}`);
+      }
+      return baseMediaDecodeTime;
+  }
+
+  private parseMdhd(view: DataView, offset: number) {
+      if (offset + 24 > view.byteLength) return;
+      const version = view.getUint8(offset);
+      let ptr = offset + 4;
+      if (version === 1) {
+          ptr += 16;
+      } else {
+          ptr += 8;
+      }
+      if (ptr + 4 <= view.byteLength) {
+        const timescale = view.getUint32(ptr);
+        this.log(`    [mdhd] Version: ${version}, Timescale: ${timescale}`);
+      }
+  }
+
+  private parseTrun(view: DataView, offset: number) {
+      if (offset + 12 > view.byteLength) return;
+      const fullFlags = view.getUint32(offset);
+      const flags = fullFlags & 0xFFFFFF;
+      const sampleCount = view.getUint32(offset + 4);
+
+      const durationPresent = (flags & 0x100) !== 0;
+
+      this.log(`    [trun] SampleCount: ${sampleCount}, DurationPresent: ${durationPresent}`);
+
+      if (durationPresent && sampleCount > 0) {
+          let ptr = offset + 8;
+          if (flags & 0x01) ptr += 4;
+          if (flags & 0x04) ptr += 4;
+
+          if (ptr + 4 <= view.byteLength) {
+            const firstDuration = view.getUint32(ptr);
+            this.log(`    [trun] First Sample Duration: ${firstDuration}`);
+          }
+      } else {
+        this.log(`    [trun] No duration present in samples.`);
+      }
+  }
+}
+
+// Register the custom element
+customElements.define("moq-mse-player", MoqMsePlayer);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "moq-mse-player": MoqMsePlayer;
+  }
+}
diff --git a/js/hang-demo/src/watch-mse.html b/js/hang-demo/src/watch-mse.html
new file mode 100644
index 000000000..d18b983da
--- /dev/null
+++ b/js/hang-demo/src/watch-mse.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en" class="dark">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>MoQ MSE Player Demo</title>
+
+	<link rel="stylesheet" href="index.css">
+	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+</head>
+
+<body class="dark:bg-black p-4">
+	<h1 class="text-2xl font-bold mb-4">MSE Player Demo</h1>
+
+	<p class="mb-4">
+		This demo uses <strong>MediaSource Extensions</strong> for native <code>&lt;video&gt;</code> playback.
+		It requires publishing with <code>fmp4-mse</code> mode (complete fMP4 segments).
+	</p>
+
+	<!--
+		MSE-based video player component.
+
+		Unlike the WebCodecs-based <hang-watch>, this uses a native <video> element.
+
+		Attributes:
+		- url: The relay URL (with path like /anon or with JWT auth)
+		- path: The broadcast name (e.g., "bbb")
+		- debug: Show debug overlay with latency, buffer, and playback stats
+	-->
+	<moq-mse-player
+		url="%VITE_RELAY_URL%"
+		path="bbb"
+		debug>
+	</moq-mse-player>
+
+	<h3 class="text-lg font-semibold mt-6 mb-2">How to Use</h3>
+	<p class="mb-2">
+		You must publish using the MSE-compatible segment mode:
+	</p>
+	<pre class="bg-gray-800 text-green-400 p-4 rounded mb-4"><code class="language-bash"># Publish with MSE mode (fMP4 segments)
+just pub-mse bbb
+
+# Or manually:
+ffmpeg -i input.mp4 -c copy -f mp4 \
+  -movflags cmaf+separate_moof+delay_moov+skip_trailer+frag_every_frame \
+  - | cargo run --bin hang -- publish --url "http://localhost:4443/anon" --name "bbb" fmp4-mse</code></pre>
+
+	<h3 class="text-lg font-semibold mt-6 mb-2">Live Sync Strategies</h3>
+	<p class="mb-2">
+		This player implements HLS.js-style live sync:
+	</p>
+	<ul class="list-disc list-inside mb-4">
+		<li><strong>Target latency:</strong> ~2 seconds behind live edge</li>
+		<li><strong>Catch-up:</strong> Speeds up to 1.1x when latency &gt; 3s</li>
+		<li><strong>Hard seek:</strong> Jumps to live edge when latency &gt; 5s</li>
+		<li><strong>Buffer cleanup:</strong> Removes old data after 60s (5s if quota exceeded)</li>
+	</ul>
+
+	<h3 class="text-lg font-semibold mt-6 mb-2">WebCodecs vs MSE</h3>
+	<table class="table-auto border-collapse border border-gray-600 mb-4">
+		<thead>
+			<tr class="bg-gray-800">
+				<th class="border border-gray-600 px-4 py-2">Feature</th>
+				<th class="border border-gray-600 px-4 py-2">WebCodecs (<a href="index.html">&lt;hang-watch&gt;</a>)</th>
+				<th class="border border-gray-600 px-4 py-2">MSE (&lt;moq-mse-player&gt;)</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td class="border border-gray-600 px-4 py-2">Render Target</td>
+				<td class="border border-gray-600 px-4 py-2">&lt;canvas&gt;</td>
+				<td class="border border-gray-600 px-4 py-2">&lt;video&gt;</td>
+			</tr>
+			<tr>
+				<td class="border border-gray-600 px-4 py-2">Native Controls</td>
+				<td class="border border-gray-600 px-4 py-2">❌ Custom</td>
+				<td class="border border-gray-600 px-4 py-2">✅ Built-in</td>
+			</tr>
+			<tr>
+				<td class="border border-gray-600 px-4 py-2">Latency</td>
+				<td class="border border-gray-600 px-4 py-2">⚡ Ultra-low</td>
+				<td class="border border-gray-600 px-4 py-2">📊 ~2s target</td>
+			</tr>
+			<tr>
+				<td class="border border-gray-600 px-4 py-2">Browser Support</td>
+				<td class="border border-gray-600 px-4 py-2">Chrome, Edge</td>
+				<td class="border border-gray-600 px-4 py-2">All modern</td>
+			</tr>
+			<tr>
+				<td class="border border-gray-600 px-4 py-2">Publish Mode</td>
+				<td class="border border-gray-600 px-4 py-2"><code>just pub bbb</code></td>
+				<td class="border border-gray-600 px-4 py-2"><code>just pub-mse bbb</code></td>
+			</tr>
+		</tbody>
+	</table>
+
+	<p>
+		<a href="index.html" class="text-blue-400 hover:underline">← Back to WebCodecs demo</a>
+	</p>
+</body>
+
+<script type="module" src="watch-mse.ts"></script>
+
+</html>
diff --git a/js/hang-demo/src/watch-mse.ts b/js/hang-demo/src/watch-mse.ts
new file mode 100644
index 000000000..40f89f884
--- /dev/null
+++ b/js/hang-demo/src/watch-mse.ts
@@ -0,0 +1,12 @@
+import "./highlight";
+import "./mse/moq-mse-player";
+
+// Allow overriding broadcast path via query parameter
+const player = document.querySelector("moq-mse-player");
+if (player) {
+	const urlParams = new URLSearchParams(window.location.search);
+	const path = urlParams.get("path");
+	if (path) {
+		player.setAttribute("path", path);
+	}
+}
diff --git a/js/hang-demo/vite.config.ts b/js/hang-demo/vite.config.ts
index a64e72788..ed276e9b4 100644
--- a/js/hang-demo/vite.config.ts
+++ b/js/hang-demo/vite.config.ts
@@ -11,6 +11,7 @@ export default defineConfig({
 		rollupOptions: {
 			input: {
 				watch: "index.html",
+				"watch-mse": "watch-mse.html",
 				publish: "publish.html",
 				support: "support.html",
 				meet: "meet.html",
diff --git a/justfile b/justfile
index 6bce2cb33..a99c2be00 100644
--- a/justfile
+++ b/justfile
@@ -146,6 +146,23 @@ pub name url="http://localhost:4443/anon" *args:
 		-f mp4 -movflags cmaf+separate_moof+delay_moov+skip_trailer+frag_every_frame \
 		- | cargo run --bin hang -- publish --url "{{url}}" --name "{{name}}" fmp4 {{args}}
 
+# Publish a video using MSE-compatible fMP4 segments (for browser MSE playback)
+# This sends complete moof+mdat segments instead of individual frames.
+pub-mse name url="http://localhost:4443/anon" *args:
+	# Download the sample media.
+	just download "{{name}}"
+
+	# Pre-build the binary so we don't queue media while compiling.
+	cargo build --bin hang
+
+	# Run ffmpeg and pipe the output to hang with MSE segment mode
+	ffmpeg -hide_banner -v quiet \
+		-stream_loop -1 -re \
+		-i "dev/{{name}}.fmp4" \
+		-c copy \
+		-f mp4 -movflags cmaf+separate_moof+delay_moov+skip_trailer+frag_every_frame \
+		- | cargo run --bin hang -- publish --url "{{url}}" --name "{{name}}" fmp4-mse {{args}}
+
 # Generate and ingest an HLS stream from a video file.
 pub-hls name relay="http://localhost:4443/anon":
 	#!/usr/bin/env bash
diff --git a/rs/hang-cli/src/publish.rs b/rs/hang-cli/src/publish.rs
index eb12d8771..536e0b63f 100644
--- a/rs/hang-cli/src/publish.rs
+++ b/rs/hang-cli/src/publish.rs
@@ -1,7 +1,7 @@
 use bytes::BytesMut;
 use clap::Subcommand;
 use hang::{
-	import::{Decoder, DecoderFormat},
+	import::{Decoder, DecoderFormat, Fmp4, ImportMode},
 	moq_lite::BroadcastConsumer,
 	BroadcastProducer,
 };
@@ -10,7 +10,10 @@ use tokio::io::AsyncReadExt;
 #[derive(Subcommand, Clone)]
 pub enum PublishFormat {
 	Avc3,
+	/// fMP4 format for WebCodecs (frame-by-frame)
 	Fmp4,
+	/// fMP4 format for MSE (complete segments)
+	Fmp4Mse,
 	// NOTE: No aac support because it needs framing.
 	Hls {
 		/// URL or file path of an HLS playlist to ingest.
@@ -21,6 +24,7 @@ pub enum PublishFormat {
 
 enum PublishDecoder {
 	Decoder(Box<hang::import::Decoder>),
+	Fmp4(Box<hang::import::Fmp4>),
 	Hls(Box<hang::import::Hls>),
 }
 
@@ -45,6 +49,11 @@ impl Publish {
 				let stream = Decoder::new(broadcast.clone(), format);
 				PublishDecoder::Decoder(Box::new(stream))
 			}
+			PublishFormat::Fmp4Mse => {
+				// Use Fmp4 directly with Segments mode for MSE
+				let fmp4 = Fmp4::with_mode(broadcast.clone(), ImportMode::Segments);
+				PublishDecoder::Fmp4(Box::new(fmp4))
+			}
 			PublishFormat::Hls { playlist } => {
 				let hls = hang::import::Hls::new(
 					broadcast.clone(),
@@ -79,6 +88,13 @@ impl Publish {
 					decoder.decode_stream(&mut self.buffer)?;
 				}
 			}
+			PublishDecoder::Fmp4(decoder) => {
+				let mut input = tokio::io::stdin();
+
+				while !decoder.is_initialized() && input.read_buf(&mut self.buffer).await? > 0 {
+					decoder.decode(&mut self.buffer)?;
+				}
+			}
 			PublishDecoder::Hls(decoder) => decoder.init().await?,
 		}
 
@@ -94,6 +110,13 @@ impl Publish {
 					decoder.decode_stream(&mut self.buffer)?;
 				}
 			}
+			PublishDecoder::Fmp4(decoder) => {
+				let mut input = tokio::io::stdin();
+
+				while input.read_buf(&mut self.buffer).await? > 0 {
+					decoder.decode(&mut self.buffer)?;
+				}
+			}
 			PublishDecoder::Hls(decoder) => decoder.run().await?,
 		}
 
diff --git a/rs/hang/src/import/fmp4.rs b/rs/hang/src/import/fmp4.rs
index 96d5f9432..d13fff149 100644
--- a/rs/hang/src/import/fmp4.rs
+++ b/rs/hang/src/import/fmp4.rs
@@ -6,6 +6,27 @@ use moq_lite as moq;
 use mp4_atom::{Any, Atom, DecodeMaybe, Mdat, Moof, Moov, Trak};
 use std::collections::HashMap;
 
+/// Mode for importing fMP4 content.
+///
+/// This determines how frames are transmitted over MOQ:
+/// - `Frames`: Individual frames for WebCodecs (lower latency)
+/// - `Segments`: Complete fMP4 segments for MSE (broader compatibility)
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
+pub enum ImportMode {
+	/// Extract individual frames from segments (default, for WebCodecs).
+	///
+	/// Each frame is sent separately with a timestamp header.
+	/// This provides the lowest latency but requires WebCodecs on the client.
+	#[default]
+	Frames,
+
+	/// Send complete fMP4 segments (moof+mdat) for MSE.
+	///
+	/// Init segment (ftyp+moov) is sent at each keyframe.
+	/// This is compatible with MSE-based players but has slightly higher latency.
+	Segments,
+}
+
 /// Converts fMP4/CMAF files into hang broadcast streams.
 ///
 /// This struct processes fragmented MP4 (fMP4) files and converts them into hang broadcasts.
@@ -23,6 +44,11 @@ use std::collections::HashMap;
 /// **Audio:**
 /// - AAC (MP4A)
 /// - Opus
+///
+/// ## Import Modes
+///
+/// - [`ImportMode::Frames`]: Extract individual frames (for WebCodecs)
+/// - [`ImportMode::Segments`]: Send complete fMP4 segments (for MSE)
 pub struct Fmp4 {
 	// The broadcast being produced
 	// This `hang` variant includes a catalog.
@@ -44,6 +70,20 @@ pub struct Fmp4 {
 	// The latest moof header
 	moof: Option<Moof>,
 	moof_size: usize,
+
+	// --- MSE Segment Mode fields ---
+	// Import mode (frames vs segments)
+	mode: ImportMode,
+
+	// Buffer to accumulate raw moof bytes (for Segments mode)
+	moof_buffer: BytesMut,
+
+	// Buffer to store ftyp box for init segment
+	ftyp_buffer: BytesMut,
+
+	// Per-track init segments (ftyp + moov with single track) for MSE mode
+	// Key is track_id, value is complete init segment bytes
+	track_init_segments: HashMap<u32, Bytes>,
 }
 
 impl Fmp4 {
@@ -51,7 +91,22 @@ impl Fmp4 {
 	///
 	/// The broadcast will be populated with tracks as they're discovered in the
 	/// fMP4 file. The catalog from the `hang::BroadcastProducer` is used automatically.
+	///
+	/// Uses [`ImportMode::Frames`] by default (for WebCodecs).
+	/// Use [`Self::with_mode`] to specify a different mode.
 	pub fn new(broadcast: hang::BroadcastProducer) -> Self {
+		Self::with_mode(broadcast, ImportMode::default())
+	}
+
+	/// Create a new CMAF importer with a specific import mode.
+	///
+	/// # Arguments
+	///
+	/// * `broadcast` - The broadcast to write tracks to
+	/// * `mode` - The import mode:
+	///   - [`ImportMode::Frames`]: Extract individual frames (for WebCodecs)
+	///   - [`ImportMode::Segments`]: Send complete fMP4 segments (for MSE)
+	pub fn with_mode(broadcast: hang::BroadcastProducer, mode: ImportMode) -> Self {
 		let catalog = broadcast.catalog.clone();
 		Self {
 			broadcast,
@@ -61,6 +116,10 @@ impl Fmp4 {
 			moov: None,
 			moof: None,
 			moof_size: 0,
+			mode,
+			moof_buffer: BytesMut::new(),
+			ftyp_buffer: BytesMut::new(),
+			track_init_segments: HashMap::default(),
 		}
 	}
 
@@ -71,15 +130,26 @@ impl Fmp4 {
 		while let Some(atom) = mp4_atom::Any::decode_maybe(&mut cursor)? {
 			// Process the parsed atom.
 			let size = cursor.position() as usize - position;
+			let atom_start = position;
 			position = cursor.position() as usize;
 
 			match atom {
 				Any::Ftyp(_) | Any::Styp(_) => {
-					// Skip
+					// In Segments mode, capture ftyp bytes for init segment
+					if self.mode == ImportMode::Segments && self.ftyp_buffer.is_empty() {
+						let data = cursor.get_ref().as_ref();
+						self.ftyp_buffer.extend_from_slice(&data[atom_start..position]);
+						tracing::debug!("Captured ftyp/styp box: {} bytes", size);
+					}
 				}
 				Any::Moov(moov) => {
-					// Create the broadcast.
-					self.init(moov)?;
+					// Create the broadcast first
+					self.init(moov.clone())?;
+
+					// In Segments mode, create per-track init segments
+					if self.mode == ImportMode::Segments && self.track_init_segments.is_empty() {
+						self.create_per_track_init_segments(&moov)?;
+					}
 				}
 				Any::Moof(moof) => {
 					if self.moof.is_some() {
@@ -87,13 +157,23 @@ impl Fmp4 {
 						anyhow::bail!("duplicate moof box");
 					}
 
+					// In Segments mode, capture moof bytes
+					if self.mode == ImportMode::Segments {
+						self.moof_buffer.clear();
+						let data = cursor.get_ref().as_ref();
+						self.moof_buffer.extend_from_slice(&data[atom_start..position]);
+					}
+
 					self.moof = Some(moof);
 					self.moof_size = size;
 				}
 				Any::Mdat(mdat) => {
 					// Extract the samples from the mdat atom.
 					let header_size = size - mdat.data.len();
-					self.extract(mdat, header_size)?;
+					match self.mode {
+						ImportMode::Frames => self.extract(mdat, header_size)?,
+						ImportMode::Segments => self.extract_segment(mdat, header_size)?,
+					}
 				}
 				_ => {
 					// Skip unknown atoms
@@ -142,13 +222,13 @@ impl Fmp4 {
 
 					let track = moq::Track {
 						name: self.broadcast.track_name("audio"),
-						priority: 2,
+						priority: 1,
 					};
 
 					tracing::debug!(name = ?track.name, ?config, "starting track");
 
 					let audio = catalog.insert_audio(track.name.clone(), config);
-					audio.priority = 2;
+					audio.priority = 1;
 
 					let track = track.produce();
 					self.broadcast.insert_track(track.consumer);
@@ -166,6 +246,46 @@ impl Fmp4 {
 		Ok(())
 	}
 
+	/// Create per-track init segments for MSE mode.
+	/// Each track needs its own ftyp + moov with only that track's info.
+	fn create_per_track_init_segments(&mut self, moov: &Moov) -> anyhow::Result<()> {
+		use mp4_atom::Encode;
+
+		for trak in &moov.trak {
+			let track_id = trak.tkhd.track_id;
+
+			// Create a new moov with only this track
+			let single_track_moov = Moov {
+				mvhd: moov.mvhd.clone(),
+				mvex: moov.mvex.clone(),
+				trak: vec![trak.clone()],
+				udta: moov.udta.clone(),
+				meta: moov.meta.clone(),
+			};
+
+			// Encode the single-track moov to bytes
+			let mut moov_bytes = BytesMut::new();
+			single_track_moov.encode(&mut moov_bytes)?;
+
+			// Create the complete init segment: ftyp + moov
+			let mut init_segment = BytesMut::new();
+			init_segment.extend_from_slice(&self.ftyp_buffer);
+			init_segment.extend_from_slice(&moov_bytes);
+
+			tracing::debug!(
+				"Created init segment for track {}: {} bytes (ftyp: {}, moov: {})",
+				track_id,
+				init_segment.len(),
+				self.ftyp_buffer.len(),
+				moov_bytes.len()
+			);
+
+			self.track_init_segments.insert(track_id, init_segment.freeze());
+		}
+
+		Ok(())
+	}
+
 	fn init_video(trak: &Trak) -> anyhow::Result<VideoConfig> {
 		let stsd = &trak.mdia.minf.stbl.stsd;
 
@@ -491,6 +611,133 @@ impl Fmp4 {
 
 		Ok(())
 	}
+
+	/// Extract complete fMP4 segment (moof + mdat) as a single frame.
+	///
+	/// Used when [`ImportMode::Segments`] is selected for MSE compatibility.
+	fn extract_segment(&mut self, mdat: Mdat, _header_size: usize) -> anyhow::Result<()> {
+		let mdat_data = Bytes::from(mdat.data);
+		let moov = self.moov.as_ref().context("missing moov box")?;
+		let moof = self.moof.take().context("missing moof box")?;
+
+		// Loop over ALL tracks in moof
+		for traf in &moof.traf {
+			let track_id = traf.tfhd.track_id;
+			let track = match self.tracks.get_mut(&track_id) {
+				Some(t) => t,
+				None => {
+					tracing::warn!("Unknown track_id: {}, skipping", track_id);
+					continue;
+				}
+			};
+
+			// Find the track information in the moov
+			let trak = moov
+				.trak
+				.iter()
+				.find(|trak| trak.tkhd.track_id == track_id)
+				.context("unknown track")?;
+
+			let tfdt = traf.tfdt.as_ref().context("missing tfdt box")?;
+			let dts = tfdt.base_media_decode_time;
+			let timescale = trak.mdia.mdhd.timescale as u64;
+
+			// Calculate timestamp from DTS
+			let micros = (dts as u128 * 1_000_000 / timescale as u128) as u64;
+			let timestamp = hang::Timestamp::from_micros(micros)?;
+
+			// Check if this is a keyframe segment by looking at first sample flags
+			let keyframe = if let Some(trun) = traf.trun.first() {
+				if let Some(entry) = trun.entries.first() {
+					let trex = moov
+						.mvex
+						.as_ref()
+						.and_then(|mvex| mvex.trex.iter().find(|trex| trex.track_id == track_id));
+					let default_sample_flags = trex.map(|trex| trex.default_sample_flags).unwrap_or_default();
+
+					let flags = entry
+						.flags
+						.unwrap_or(traf.tfhd.default_sample_flags.unwrap_or(default_sample_flags));
+
+					if trak.mdia.hdlr.handler == b"vide".into() {
+						let is_keyframe = (flags >> 24) & 0x3 == 0x2; // kSampleDependsOnNoOther
+						let non_sync = (flags >> 16) & 0x1 == 0x1; // kSampleIsNonSyncSample
+
+						if is_keyframe && !non_sync {
+							// Force audio keyframe when video has a keyframe (for sync)
+							for audio in moov.trak.iter().filter(|t| t.mdia.hdlr.handler == b"soun".into()) {
+								self.last_keyframe.remove(&audio.tkhd.track_id);
+							}
+							true
+						} else {
+							false
+						}
+					} else {
+						// Audio - check if it's been 10 seconds since last keyframe
+						// OR if video just had a keyframe (last_keyframe was cleared)
+						match self.last_keyframe.get(&track_id) {
+							Some(prev) => timestamp - *prev > Timestamp::from_secs(10).unwrap(),
+							None => true, // No previous keyframe = force one now
+						}
+					}
+				} else {
+					false
+				}
+			} else {
+				false
+			};
+
+			if keyframe {
+				self.last_keyframe.insert(track_id, timestamp);
+			}
+
+			// Create complete fMP4 segment
+			let mut segment_data = BytesMut::new();
+
+			// For keyframes, prepend the per-track init segment to make each
+			// keyframe self-contained. Each track has its own init segment with
+			// only that track's moov info - this is required for MSE with separate
+			// SourceBuffers.
+			if keyframe {
+				if let Some(init_segment) = self.track_init_segments.get(&track_id) {
+					segment_data.extend_from_slice(init_segment);
+					tracing::debug!(
+						"Prepending per-track init segment to keyframe for track {}: {} bytes",
+						track_id,
+						init_segment.len()
+					);
+				}
+			}
+
+			// Add the captured moof bytes
+			segment_data.extend_from_slice(&self.moof_buffer);
+
+			// Add mdat box: size (4 bytes) + 'mdat' fourcc (4 bytes) + data
+			let mdat_size = (8 + mdat_data.len()) as u32;
+			segment_data.extend_from_slice(&mdat_size.to_be_bytes());
+			segment_data.extend_from_slice(b"mdat");
+			segment_data.extend_from_slice(&mdat_data);
+
+			tracing::debug!(
+				"Sending fMP4 segment: {} bytes (moof: {}, mdat: {}), keyframe: {}, timestamp: {:?}",
+				segment_data.len(),
+				self.moof_buffer.len(),
+				mdat_size,
+				keyframe,
+				timestamp
+			);
+
+			let frame = hang::Frame {
+				timestamp,
+				keyframe,
+				payload: segment_data.freeze().into(),
+			};
+
+			track.write(frame)?;
+		}
+
+		Ok(())
+	}
 }
 
 impl Drop for Fmp4 {

From 1f40f8b3d069838d6a989364dcab3394f038d248 Mon Sep 17 00:00:00 2001
From: David <wdavid12@gmail.com>
Date: Mon, 22 Dec 2025 18:42:07 -0500
Subject: [PATCH 2/5] fix: improve MSE player status interval management

---
 js/hang-demo/src/mse/moq-mse-player.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/js/hang-demo/src/mse/moq-mse-player.ts b/js/hang-demo/src/mse/moq-mse-player.ts
index f6701c62e..e9184c0ae 100644
--- a/js/hang-demo/src/mse/moq-mse-player.ts
+++ b/js/hang-demo/src/mse/moq-mse-player.ts
@@ -26,6 +26,7 @@ export class MoqMsePlayer extends HTMLElement {
   private lastAudioProcessTime = 0;
   private userPaused = false;
   private monitorInterval: number | null = null;
+  private statusIntervalId: number | null = null;
   private connectionState = "disconnected";
   private reconnectTimer: number | null = null;
   private catalogReceived = false;
@@ -149,8 +150,14 @@ export class MoqMsePlayer extends HTMLElement {
   }
 
   private async connect() {
+    // Clear any existing status interval before creating a new one
+    if (this.statusIntervalId !== null) {
+      clearInterval(this.statusIntervalId);
+      this.statusIntervalId = null;
+    }
+
     // Start periodic status logging
-    setInterval(() => {
+    this.statusIntervalId = window.setInterval(() => {
         if (!this.video) return;
         const vBuf = this.videoSourceBuffer?.buffered.length ? `${this.videoSourceBuffer.buffered.start(0).toFixed(2)}-${this.videoSourceBuffer.buffered.end(this.videoSourceBuffer.buffered.length-1).toFixed(2)}` : "empty";
         const aBuf = this.audioSourceBuffer?.buffered.length ? `${this.audioSourceBuffer.buffered.start(0).toFixed(2)}-${this.audioSourceBuffer.buffered.end(this.audioSourceBuffer.buffered.length-1).toFixed(2)}` : "empty";
@@ -214,6 +221,10 @@ export class MoqMsePlayer extends HTMLElement {
   }
 
   private disconnect() {
+    if (this.statusIntervalId !== null) {
+      clearInterval(this.statusIntervalId);
+      this.statusIntervalId = null;
+    }
     if (this.monitorInterval) {
       clearInterval(this.monitorInterval);
       this.monitorInterval = null;

From 4f3b834791031b9e9f544bde7e89d23f528ce9bc Mon Sep 17 00:00:00 2001
From: David <wdavid12@gmail.com>
Date: Mon, 22 Dec 2025 18:54:06 -0500
Subject: [PATCH 3/5] fix: Implement per-track fMP4 segment generation for
 demuxed MSE SourceBuffers.

---
 rs/hang/src/import/fmp4.rs | 401 +++++++++++++++++++++++++++++++++++--
 1 file changed, 385 insertions(+), 16 deletions(-)

diff --git a/rs/hang/src/import/fmp4.rs b/rs/hang/src/import/fmp4.rs
index d13fff149..205d6680a 100644
--- a/rs/hang/src/import/fmp4.rs
+++ b/rs/hang/src/import/fmp4.rs
@@ -623,13 +623,12 @@ impl Fmp4 {
 		// Loop over ALL tracks in moof
 		for traf in &moof.traf {
 			let track_id = traf.tfhd.track_id;
-			let track = match self.tracks.get_mut(&track_id) {
-				Some(t) => t,
-				None => {
-					tracing::warn!("Unknown track_id: {}, skipping", track_id);
-					continue;
-				}
-			};
+
+			// Check if the track exists (immutable borrow)
+			if !self.tracks.contains_key(&track_id) {
+				tracing::warn!("Unknown track_id: {}, skipping", track_id);
+				continue;
+			}
 
 			// Find the track information in the moov
 			let trak = moov
@@ -709,20 +708,19 @@ impl Fmp4 {
 				}
 			}
 
-			// Add the captured moof bytes
-			segment_data.extend_from_slice(&self.moof_buffer);
+			// Build per-track moof and mdat containing only this track's data.
+			// This is required for MSE with demuxed SourceBuffers.
+			let (per_track_moof_bytes, per_track_mdat_bytes) =
+				self.build_per_track_segment(&moof.mfhd, traf, &mdat_data)?;
 
-			// Add mdat box: size (4 bytes) + 'mdat' fourcc (4 bytes) + data
-			let mdat_size = (8 + mdat_data.len()) as u32;
-			segment_data.extend_from_slice(&mdat_size.to_be_bytes());
-			segment_data.extend_from_slice(b"mdat");
-			segment_data.extend_from_slice(&mdat_data);
+			segment_data.extend_from_slice(&per_track_moof_bytes);
+			segment_data.extend_from_slice(&per_track_mdat_bytes);
 
 			tracing::debug!(
 				"Sending fMP4 segment: {} bytes (moof: {}, mdat: {}), keyframe: {}, timestamp: {:?}",
 				segment_data.len(),
-				self.moof_buffer.len(),
-				mdat_size,
+				per_track_moof_bytes.len(),
+				per_track_mdat_bytes.len(),
 				keyframe,
 				timestamp
 			);
@@ -733,11 +731,117 @@ impl Fmp4 {
 				payload: segment_data.freeze().into(),
 			};
 
+			// Now get mutable reference to write the frame
+			let track = self.tracks.get_mut(&track_id).context("track disappeared")?;
 			track.write(frame)?;
 		}
 
 		Ok(())
 	}
+
+	/// Build a per-track moof and mdat pair containing only the specified track's data.
+	///
+	/// This is required for MSE with demuxed SourceBuffers, where each buffer
+	/// expects to receive data for only its track.
+	fn build_per_track_segment(
+		&self,
+		mfhd: &mp4_atom::Mfhd,
+		traf: &mp4_atom::Traf,
+		global_mdat: &Bytes,
+	) -> anyhow::Result<(Bytes, Bytes)> {
+		use mp4_atom::Encode;
+
+		let moov = self.moov.as_ref().context("missing moov box")?;
+		let track_id = traf.tfhd.track_id;
+		let trex = moov
+			.mvex
+			.as_ref()
+			.and_then(|mvex| mvex.trex.iter().find(|trex| trex.track_id == track_id));
+		let default_sample_size = trex.map(|trex| trex.default_sample_size).unwrap_or_default();
+
+		// First, extract all sample data for this track from the global mdat
+		let mut track_mdat_data = BytesMut::new();
+		let mut offset = traf.tfhd.base_data_offset.unwrap_or_default() as usize;
+
+		for trun in &traf.trun {
+			if let Some(data_offset) = trun.data_offset {
+				let base_offset = traf.tfhd.base_data_offset.unwrap_or_default() as usize;
+				// data_offset is relative to the start of the moof
+				let data_offset_usize: usize = data_offset.try_into().context("invalid data offset")?;
+				if data_offset_usize < self.moof_size {
+					anyhow::bail!("invalid data offset: {} < moof_size {}", data_offset_usize, self.moof_size);
+				}
+				// Calculate offset into mdat (moof_size is subtracted, and we also need to
+				// account for the 8-byte mdat header that was stripped when parsing)
+				offset = base_offset + data_offset_usize - self.moof_size - 8;
+			}
+
+			for entry in &trun.entries {
+				let size = entry
+					.size
+					.unwrap_or(traf.tfhd.default_sample_size.unwrap_or(default_sample_size)) as usize;
+
+				if offset + size > global_mdat.len() {
+					anyhow::bail!(
+						"invalid sample offset: {} + {} > {}",
+						offset,
+						size,
+						global_mdat.len()
+					);
+				}
+
+				track_mdat_data.extend_from_slice(&global_mdat[offset..offset + size]);
+				offset += size;
+			}
+		}
+
+		// Now build the per-track moof with updated trun data_offsets
+		// Clone traf and update trun data_offsets
+		let mut new_traf = traf.clone();
+
+		// Create a temporary moof to calculate its size
+		let temp_moof = Moof {
+			mfhd: mfhd.clone(),
+			traf: vec![new_traf.clone()],
+		};
+		let mut temp_moof_bytes = BytesMut::new();
+		temp_moof.encode(&mut temp_moof_bytes)?;
+		let new_moof_size = temp_moof_bytes.len();
+
+		// Now update the trun data_offsets to point into the new per-track mdat
+		// data_offset should be: new_moof_size + 8 (mdat header) + offset_within_track_mdat
+		let mut current_offset_in_track_mdat: i32 = 0;
+		for trun in &mut new_traf.trun {
+			// Set data_offset to point to the start of this trun's samples in the per-track mdat
+			// The offset is relative to the start of the moof
+			trun.data_offset = Some((new_moof_size as i32) + 8 + current_offset_in_track_mdat);
+
+			// Calculate how many bytes this trun consumes
+			for entry in &trun.entries {
+				let size = entry
+					.size
+					.unwrap_or(traf.tfhd.default_sample_size.unwrap_or(default_sample_size));
+				current_offset_in_track_mdat += size as i32;
+			}
+		}
+
+		// Build the final per-track moof
+		let per_track_moof = Moof {
+			mfhd: mfhd.clone(),
+			traf: vec![new_traf],
+		};
+		let mut moof_bytes = BytesMut::new();
+		per_track_moof.encode(&mut moof_bytes)?;
+
+		// Build the per-track mdat: 4 bytes size + 4 bytes 'mdat' + data
+		let mdat_size = (8 + track_mdat_data.len()) as u32;
+		let mut mdat_bytes = BytesMut::new();
+		mdat_bytes.extend_from_slice(&mdat_size.to_be_bytes());
+		mdat_bytes.extend_from_slice(b"mdat");
+		mdat_bytes.extend_from_slice(&track_mdat_data);
+
+		Ok((moof_bytes.freeze(), mdat_bytes.freeze()))
+	}
 }
 
 impl Drop for Fmp4 {
@@ -753,3 +857,268 @@ impl Drop for Fmp4 {
 		}
 	}
 }
+
+#[cfg(test)]
+mod tests {
+	use super::*;
+	use mp4_atom::{Mfhd, Traf, Tfhd, Tfdt, Trun, TrunEntry};
+
+	/// Test that build_per_track_segment creates a moof with only one traf
+	/// and an mdat containing only that track's samples.
+	#[test]
+	fn test_per_track_moof_mdat_extraction() {
+		// Create a mock mfhd (movie fragment header)
+		let mfhd = Mfhd {
+			sequence_number: 1,
+		};
+
+		// Create sample data that would be in the global mdat
+		// Track 1 samples: [0x11, 0x12, 0x13] (3 bytes) + [0x14, 0x15] (2 bytes) = 5 bytes
+		// Track 2 samples: [0x21, 0x22, 0x23, 0x24] (4 bytes) = 4 bytes
+		let track1_sample1 = vec![0x11, 0x12, 0x13];
+		let track1_sample2 = vec![0x14, 0x15];
+		let track2_sample1 = vec![0x21, 0x22, 0x23, 0x24];
+
+		// Simulate mdat containing both tracks' data
+		let mut global_mdat_data = BytesMut::new();
+		global_mdat_data.extend_from_slice(&track1_sample1);
+		global_mdat_data.extend_from_slice(&track1_sample2);
+		global_mdat_data.extend_from_slice(&track2_sample1);
+		let global_mdat = global_mdat_data.freeze();
+
+		// Create traf for track 1
+		// The data_offset points to after the moof (we'll use a mock moof_size)
+		let mock_moof_size = 100; // Assume moof is 100 bytes
+		let mdat_header_size = 8; // mdat box header
+
+		let traf1 = Traf {
+			tfhd: Tfhd {
+				track_id: 1,
+				base_data_offset: None,
+				sample_description_index: Some(1),
+				default_sample_duration: Some(1024),
+				default_sample_size: None,
+				default_sample_flags: None,
+			},
+			tfdt: Some(Tfdt {
+				base_media_decode_time: 0,
+			}),
+			trun: vec![Trun {
+				// data_offset is relative to moof start, points to mdat data
+				data_offset: Some((mock_moof_size + mdat_header_size) as i32),
+				entries: vec![
+					TrunEntry {
+						duration: Some(1024),
+						size: Some(3), // 3 bytes
+						flags: Some(0x02000000), // keyframe
+						cts: Some(0),
+					},
+					TrunEntry {
+						duration: Some(1024),
+						size: Some(2), // 2 bytes
+						flags: Some(0x01010000), // non-keyframe
+						cts: Some(0),
+					},
+				],
+			}],
+			..Default::default()
+		};
+
+		// Create traf for track 2
+		let traf2 = Traf {
+			tfhd: Tfhd {
+				track_id: 2,
+				base_data_offset: None,
+				sample_description_index: Some(1),
+				default_sample_duration: Some(1024),
+				default_sample_size: None,
+				default_sample_flags: None,
+			},
+			tfdt: Some(Tfdt {
+				base_media_decode_time: 0,
+			}),
+			trun: vec![Trun {
+				// Track 2 data starts at offset 5 (after track 1's 5 bytes)
+				data_offset: Some((mock_moof_size + mdat_header_size + 5) as i32),
+				entries: vec![TrunEntry {
+					duration: Some(1024),
+					size: Some(4), // 4 bytes
+					flags: Some(0x02000000), // keyframe
+					cts: Some(0),
+				}],
+			}],
+			..Default::default()
+		};
+
+		// Test extracting track 1
+		let (moof_bytes, mdat_bytes) =
+			build_per_track_segment_standalone(&mfhd, &traf1, &global_mdat, mock_moof_size);
+
+		// Verify mdat contains only track 1 samples (5 bytes + 8 byte header)
+		assert_eq!(mdat_bytes.len(), 8 + 5, "Track 1 mdat should be 13 bytes (8 header + 5 data)");
+
+		// Verify mdat header
+		let mdat_size = u32::from_be_bytes([mdat_bytes[0], mdat_bytes[1], mdat_bytes[2], mdat_bytes[3]]);
+		assert_eq!(mdat_size, 13, "Track 1 mdat size field should be 13");
+		assert_eq!(&mdat_bytes[4..8], b"mdat", "mdat fourcc should be 'mdat'");
+
+		// Verify mdat data content
+		assert_eq!(&mdat_bytes[8..11], &[0x11, 0x12, 0x13], "Track 1 sample 1 data");
+		assert_eq!(&mdat_bytes[11..13], &[0x14, 0x15], "Track 1 sample 2 data");
+
+		// Verify moof contains only one traf
+		let decoded_moof = decode_moof(&moof_bytes);
+		assert_eq!(decoded_moof.traf.len(), 1, "Per-track moof should have exactly 1 traf");
+		assert_eq!(decoded_moof.traf[0].tfhd.track_id, 1, "Traf should be for track 1");
+
+		// Test extracting track 2
+		let (moof_bytes2, mdat_bytes2) =
+			build_per_track_segment_standalone(&mfhd, &traf2, &global_mdat, mock_moof_size);
+
+		// Verify mdat contains only track 2 samples (4 bytes + 8 byte header)
+		assert_eq!(mdat_bytes2.len(), 8 + 4, "Track 2 mdat should be 12 bytes (8 header + 4 data)");
+
+		// Verify mdat data content
+		assert_eq!(&mdat_bytes2[8..12], &[0x21, 0x22, 0x23, 0x24], "Track 2 sample data");
+
+		// Verify moof contains only one traf for track 2
+		let decoded_moof2 = decode_moof(&moof_bytes2);
+		assert_eq!(decoded_moof2.traf.len(), 1, "Per-track moof should have exactly 1 traf");
+		assert_eq!(decoded_moof2.traf[0].tfhd.track_id, 2, "Traf should be for track 2");
+	}
+
+	/// Test that data_offset in the per-track moof points correctly into the per-track mdat
+	#[test]
+	fn test_per_track_data_offset() {
+		let mfhd = Mfhd { sequence_number: 1 };
+
+		// Single sample of 10 bytes
+		let sample_data = vec![0xAA; 10];
+		let global_mdat = Bytes::from(sample_data.clone());
+
+		let mock_moof_size = 80;
+		let mdat_header_size = 8;
+
+		let traf = Traf {
+			tfhd: Tfhd {
+				track_id: 1,
+				base_data_offset: None,
+				sample_description_index: Some(1),
+				default_sample_duration: Some(1024),
+				default_sample_size: None,
+				default_sample_flags: None,
+			},
+			tfdt: Some(Tfdt {
+				base_media_decode_time: 0,
+			}),
+			trun: vec![Trun {
+				data_offset: Some((mock_moof_size + mdat_header_size) as i32),
+				entries: vec![TrunEntry {
+					duration: Some(1024),
+					size: Some(10),
+					flags: Some(0x02000000),
+					cts: Some(0),
+				}],
+			}],
+			..Default::default()
+		};
+
+		let (moof_bytes, mdat_bytes) =
+			build_per_track_segment_standalone(&mfhd, &traf, &global_mdat, mock_moof_size);
+
+		// Decode the moof to check the data_offset
+		let decoded_moof = decode_moof(&moof_bytes);
+		let new_moof_size = moof_bytes.len();
+
+		// The data_offset should point to right after the moof + mdat header
+		let expected_data_offset = (new_moof_size + 8) as i32;
+		assert_eq!(
+			decoded_moof.traf[0].trun[0].data_offset,
+			Some(expected_data_offset),
+			"data_offset should point to start of sample data in mdat"
+		);
+
+		// Verify that reading at that offset gives us the sample data
+		let actual_offset = expected_data_offset as usize - new_moof_size;
+		assert_eq!(&mdat_bytes[actual_offset..actual_offset + 10], &sample_data[..], "Data at offset should match sample");
+	}
+
+	/// Standalone version of build_per_track_segment for testing without Fmp4 instance
+	fn build_per_track_segment_standalone(
+		mfhd: &Mfhd,
+		traf: &Traf,
+		global_mdat: &Bytes,
+		moof_size: usize,
+	) -> (Bytes, Bytes) {
+		use mp4_atom::Encode;
+
+		let default_sample_size = traf.tfhd.default_sample_size.unwrap_or(0);
+
+		// Extract sample data for this track
+		let mut track_mdat_data = BytesMut::new();
+		let mut offset = traf.tfhd.base_data_offset.unwrap_or_default() as usize;
+
+		for trun in &traf.trun {
+			if let Some(data_offset) = trun.data_offset {
+				let base_offset = traf.tfhd.base_data_offset.unwrap_or_default() as usize;
+				let data_offset_usize = data_offset as usize;
+				// Calculate offset into mdat
+				offset = base_offset + data_offset_usize - moof_size - 8;
+			}
+
+			for entry in &trun.entries {
+				let size = entry.size.unwrap_or(default_sample_size) as usize;
+				if offset + size <= global_mdat.len() {
+					track_mdat_data.extend_from_slice(&global_mdat[offset..offset + size]);
+				}
+				offset += size;
+			}
+		}
+
+		// Clone and update traf
+		let mut new_traf = traf.clone();
+
+		// Calculate new moof size
+		let temp_moof = Moof {
+			mfhd: mfhd.clone(),
+			traf: vec![new_traf.clone()],
+		};
+		let mut temp_moof_bytes = BytesMut::new();
+		temp_moof.encode(&mut temp_moof_bytes).unwrap();
+		let new_moof_size = temp_moof_bytes.len();
+
+		// Update trun data_offsets
+		let mut current_offset_in_track_mdat: i32 = 0;
+		for trun in &mut new_traf.trun {
+			trun.data_offset = Some((new_moof_size as i32) + 8 + current_offset_in_track_mdat);
+			for entry in &trun.entries {
+				let size = entry.size.unwrap_or(default_sample_size);
+				current_offset_in_track_mdat += size as i32;
+			}
+		}
+
+		// Build final moof
+		let per_track_moof = Moof {
+			mfhd: mfhd.clone(),
+			traf: vec![new_traf],
+		};
+		let mut moof_bytes = BytesMut::new();
+		per_track_moof.encode(&mut moof_bytes).unwrap();
+
+		// Build mdat
+		let mdat_size = (8 + track_mdat_data.len()) as u32;
+		let mut mdat_bytes = BytesMut::new();
+		mdat_bytes.extend_from_slice(&mdat_size.to_be_bytes());
+		mdat_bytes.extend_from_slice(b"mdat");
+		mdat_bytes.extend_from_slice(&track_mdat_data);
+
+		(moof_bytes.freeze(), mdat_bytes.freeze())
+	}
+
+	/// Helper to decode a Moof from bytes
+	fn decode_moof(bytes: &Bytes) -> Moof {
+		use mp4_atom::Decode;
+		let mut cursor = std::io::Cursor::new(bytes);
+		Moof::decode(&mut cursor).expect("Failed to decode moof")
+	}
+}

From a7fde5110f0e0da2fe44c53e5c98a06731c44a3a Mon Sep 17 00:00:00 2001
From: David <wdavid12@gmail.com>
Date: Mon, 22 Dec 2025 19:00:23 -0500
Subject: [PATCH 4/5] style: Format fixes, reorder imports in moq-client.

---
 js/hang-demo/src/mse/moq-client.ts     |  342 ++--
 js/hang-demo/src/mse/moq-mse-player.ts | 2455 ++++++++++++------------
 2 files changed, 1433 insertions(+), 1364 deletions(-)

diff --git a/js/hang-demo/src/mse/moq-client.ts b/js/hang-demo/src/mse/moq-client.ts
index a810ff05d..73ae987bb 100644
--- a/js/hang-demo/src/mse/moq-client.ts
+++ b/js/hang-demo/src/mse/moq-client.ts
@@ -1,181 +1,175 @@
-import * as Moq from "@moq/lite";
 import * as Catalog from "@moq/hang/catalog";
+import * as Moq from "@moq/lite";
 
 export interface MoqClientConfig {
-  relayUrl: string;
-  broadcastName: string;
-  onData?: (data: Uint8Array, trackType: "video" | "audio") => void;
-  onCatalog?: (catalog: Catalog.Root) => void;
-  onError?: (error: Error) => void;
-  onConnected?: () => void;
-  onDisconnected?: () => void;
+	relayUrl: string;
+	broadcastName: string;
+	onData?: (data: Uint8Array, trackType: "video" | "audio") => void;
+	onCatalog?: (catalog: Catalog.Root) => void;
+	onError?: (error: Error) => void;
+	onConnected?: () => void;
+	onDisconnected?: () => void;
 }
 
 export class MoqClient {
-  private connection: Moq.Connection.Established | null = null;
-  private broadcast: Moq.Broadcast | null = null;
-  private config: MoqClientConfig;
-  private isRunning = false;
-
-  constructor(config: MoqClientConfig) {
-    this.config = config;
-  }
-
-  async connect(): Promise<void> {
-    try {
-      this.isRunning = true;
-
-      // Connect to relay using @moq/lite
-      this.connection = await Moq.Connection.connect(new URL(this.config.relayUrl));
-      console.log("[MoqClient] Connected to relay:", this.config.relayUrl);
-
-      this.config.onConnected?.();
-
-      // Subscribe to broadcast
-      this.broadcast = this.connection.consume(Moq.Path.from(this.config.broadcastName));
-      console.log("[MoqClient] Subscribed to broadcast:", this.config.broadcastName);
-
-      // First, fetch the catalog to get track names
-      const catalog = await this.fetchCatalog();
-
-      if (!catalog) {
-        console.warn("[MoqClient] No catalog received, using default track names");
-        // Fallback to default names
-        await this.subscribeToTracks("video0", "audio1");
-      } else {
-        this.config.onCatalog?.(catalog);
-
-        // Get track names from catalog
-        const videoTrackName = this.getVideoTrackName(catalog);
-        const audioTrackName = this.getAudioTrackName(catalog);
-
-        console.log("[MoqClient] Using tracks from catalog:", { videoTrackName, audioTrackName });
-
-        await this.subscribeToTracks(videoTrackName, audioTrackName);
-      }
-    } catch (error) {
-      console.error("[MoqClient] Connection error:", error);
-      this.config.onError?.(error as Error);
-      throw error;
-    }
-  }
-
-  private async fetchCatalog(): Promise<Catalog.Root | null> {
-    if (!this.broadcast) return null;
-
-    console.log("[MoqClient] Fetching catalog.json...");
-    const catalogTrack = this.broadcast.subscribe("catalog.json", 100);
-
-    try {
-      // Wait for catalog with timeout
-      const frame = await Promise.race([
-        catalogTrack.readFrame(),
-        new Promise<null>((resolve) => setTimeout(() => resolve(null), 5000))
-      ]);
-
-      if (!frame) {
-        console.warn("[MoqClient] Catalog fetch timed out");
-        return null;
-      }
-
-      // Use the catalog decode function from @moq/hang
-      const catalog = Catalog.decode(frame);
-      console.log("[MoqClient] Received catalog:", catalog);
-
-      return catalog;
-    } catch (error) {
-      console.warn("[MoqClient] Error fetching catalog:", error);
-      return null;
-    }
-  }
-
-  private getVideoTrackName(catalog: Catalog.Root): string | null {
-    if (!catalog.video?.renditions) return null;
-
-    // The rendition key (e.g., "video0") IS the track name
-    const renditionKeys = Object.keys(catalog.video.renditions);
-    if (renditionKeys.length > 0) {
-      return renditionKeys[0];
-    }
-    return null;
-  }
-
-  private getAudioTrackName(catalog: Catalog.Root): string | null {
-    if (!catalog.audio?.renditions) return null;
-
-    // The rendition key (e.g., "audio1") IS the track name
-    const renditionKeys = Object.keys(catalog.audio.renditions);
-    if (renditionKeys.length > 0) {
-      return renditionKeys[0];
-    }
-    return null;
-  }
-
-  private async subscribeToTracks(
-    videoTrackName: string | null,
-    audioTrackName: string | null
-  ): Promise<void> {
-    if (!this.broadcast) return;
-
-    const promises: Promise<void>[] = [];
-
-    if (videoTrackName) {
-      const videoTrack = this.broadcast.subscribe(videoTrackName, 2);
-      console.log("[MoqClient] Subscribed to video track:", videoTrackName);
-      promises.push(this.processTrack(videoTrack, "video"));
-    }
-
-    if (audioTrackName) {
-      const audioTrack = this.broadcast.subscribe(audioTrackName, 2);
-      console.log("[MoqClient] Subscribed to audio track:", audioTrackName);
-      promises.push(this.processTrack(audioTrack, "audio"));
-    }
-
-    await Promise.all(promises);
-  }
-
-  private async processTrack(
-    track: Moq.Track,
-    trackType: "video" | "audio"
-  ): Promise<void> {
-    console.log(`[MoqClient] Processing ${trackType} track:`, track.name);
-
-    try {
-      while (this.isRunning) {
-        const group = await track.nextGroup();
-        if (!group) {
-          console.log(`[MoqClient] ${trackType} track ended`);
-          break;
-        }
-
-        while (this.isRunning) {
-          const frame = await group.readFrame();
-          if (!frame) break;
-
-          // For segment mode, the frame IS the complete fMP4 segment
-          // No timestamp stripping needed
-          this.config.onData?.(frame, trackType);
-        }
-      }
-    } catch (error) {
-      if (this.isRunning) {
-        console.error(`[MoqClient] Error processing ${trackType} track:`, error);
-        this.config.onError?.(error as Error);
-      }
-    }
-  }
-
-  disconnect(): void {
-    this.isRunning = false;
-    if (this.broadcast) {
-      this.broadcast.close();
-      this.broadcast = null;
-    }
-    if (this.connection) {
-      this.connection.close();
-      this.connection = null;
-    }
-    this.config.onDisconnected?.();
-    console.log("[MoqClient] Disconnected");
-  }
+	private connection: Moq.Connection.Established | null = null;
+	private broadcast: Moq.Broadcast | null = null;
+	private config: MoqClientConfig;
+	private isRunning = false;
+
+	constructor(config: MoqClientConfig) {
+		this.config = config;
+	}
+
+	async connect(): Promise<void> {
+		try {
+			this.isRunning = true;
+
+			// Connect to relay using @moq/lite
+			this.connection = await Moq.Connection.connect(new URL(this.config.relayUrl));
+			console.log("[MoqClient] Connected to relay:", this.config.relayUrl);
+
+			this.config.onConnected?.();
+
+			// Subscribe to broadcast
+			this.broadcast = this.connection.consume(Moq.Path.from(this.config.broadcastName));
+			console.log("[MoqClient] Subscribed to broadcast:", this.config.broadcastName);
+
+			// First, fetch the catalog to get track names
+			const catalog = await this.fetchCatalog();
+
+			if (!catalog) {
+				console.warn("[MoqClient] No catalog received, using default track names");
+				// Fallback to default names
+				await this.subscribeToTracks("video0", "audio1");
+			} else {
+				this.config.onCatalog?.(catalog);
+
+				// Get track names from catalog
+				const videoTrackName = this.getVideoTrackName(catalog);
+				const audioTrackName = this.getAudioTrackName(catalog);
+
+				console.log("[MoqClient] Using tracks from catalog:", { videoTrackName, audioTrackName });
+
+				await this.subscribeToTracks(videoTrackName, audioTrackName);
+			}
+		} catch (error) {
+			console.error("[MoqClient] Connection error:", error);
+			this.config.onError?.(error as Error);
+			throw error;
+		}
+	}
+
+	private async fetchCatalog(): Promise<Catalog.Root | null> {
+		if (!this.broadcast) return null;
+
+		console.log("[MoqClient] Fetching catalog.json...");
+		const catalogTrack = this.broadcast.subscribe("catalog.json", 100);
+
+		try {
+			// Wait for catalog with timeout
+			const frame = await Promise.race([
+				catalogTrack.readFrame(),
+				new Promise<null>((resolve) => setTimeout(() => resolve(null), 5000)),
+			]);
+
+			if (!frame) {
+				console.warn("[MoqClient] Catalog fetch timed out");
+				return null;
+			}
+
+			// Use the catalog decode function from @moq/hang
+			const catalog = Catalog.decode(frame);
+			console.log("[MoqClient] Received catalog:", catalog);
+
+			return catalog;
+		} catch (error) {
+			console.warn("[MoqClient] Error fetching catalog:", error);
+			return null;
+		}
+	}
+
+	private getVideoTrackName(catalog: Catalog.Root): string | null {
+		if (!catalog.video?.renditions) return null;
+
+		// The rendition key (e.g., "video0") IS the track name
+		const renditionKeys = Object.keys(catalog.video.renditions);
+		if (renditionKeys.length > 0) {
+			return renditionKeys[0];
+		}
+		return null;
+	}
+
+	private getAudioTrackName(catalog: Catalog.Root): string | null {
+		if (!catalog.audio?.renditions) return null;
+
+		// The rendition key (e.g., "audio1") IS the track name
+		const renditionKeys = Object.keys(catalog.audio.renditions);
+		if (renditionKeys.length > 0) {
+			return renditionKeys[0];
+		}
+		return null;
+	}
+
+	private async subscribeToTracks(videoTrackName: string | null, audioTrackName: string | null): Promise<void> {
+		if (!this.broadcast) return;
+
+		const promises: Promise<void>[] = [];
+
+		if (videoTrackName) {
+			const videoTrack = this.broadcast.subscribe(videoTrackName, 2);
+			console.log("[MoqClient] Subscribed to video track:", videoTrackName);
+			promises.push(this.processTrack(videoTrack, "video"));
+		}
+
+		if (audioTrackName) {
+			const audioTrack = this.broadcast.subscribe(audioTrackName, 2);
+			console.log("[MoqClient] Subscribed to audio track:", audioTrackName);
+			promises.push(this.processTrack(audioTrack, "audio"));
+		}
+
+		await Promise.all(promises);
+	}
+
+	private async processTrack(track: Moq.Track, trackType: "video" | "audio"): Promise<void> {
+		console.log(`[MoqClient] Processing ${trackType} track:`, track.name);
+
+		try {
+			while (this.isRunning) {
+				const group = await track.nextGroup();
+				if (!group) {
+					console.log(`[MoqClient] ${trackType} track ended`);
+					break;
+				}
+
+				while (this.isRunning) {
+					const frame = await group.readFrame();
+					if (!frame) break;
+
+					// For segment mode, the frame IS the complete fMP4 segment
+					// No timestamp stripping needed
+					this.config.onData?.(frame, trackType);
+				}
+			}
+		} catch (error) {
+			if (this.isRunning) {
+				console.error(`[MoqClient] Error processing ${trackType} track:`, error);
+				this.config.onError?.(error as Error);
+			}
+		}
+	}
+
+	disconnect(): void {
+		this.isRunning = false;
+		if (this.broadcast) {
+			this.broadcast.close();
+			this.broadcast = null;
+		}
+		if (this.connection) {
+			this.connection.close();
+			this.connection = null;
+		}
+		this.config.onDisconnected?.();
+		console.log("[MoqClient] Disconnected");
+	}
 }
diff --git a/js/hang-demo/src/mse/moq-mse-player.ts b/js/hang-demo/src/mse/moq-mse-player.ts
index e9184c0ae..eb43b78c0 100644
--- a/js/hang-demo/src/mse/moq-mse-player.ts
+++ b/js/hang-demo/src/mse/moq-mse-player.ts
@@ -1,5 +1,5 @@
+import type * as Catalog from "@moq/hang/catalog";
 import { MoqClient } from "./moq-client";
-import * as Catalog from "@moq/hang/catalog";
 
 /**
  * MSE-based video player for MOQ streams.
@@ -13,41 +13,40 @@ import * as Catalog from "@moq/hang/catalog";
  * ```
  */
 export class MoqMsePlayer extends HTMLElement {
-  private video: HTMLVideoElement;
-  private mediaSource: MediaSource | null = null;
-  private videoSourceBuffer: SourceBuffer | null = null;
-  private audioSourceBuffer: SourceBuffer | null = null;
-  private client: MoqClient | null = null;
-  private videoQueue: { data: Uint8Array; trackType: "video" }[] = [];
-  private audioQueue: { data: Uint8Array; trackType: "audio" }[] = [];
-  private isVideoProcessing = false;
-  private isAudioProcessing = false;
-  private lastVideoProcessTime = 0;
-  private lastAudioProcessTime = 0;
-  private userPaused = false;
-  private monitorInterval: number | null = null;
-  private statusIntervalId: number | null = null;
-  private connectionState = "disconnected";
-  private reconnectTimer: number | null = null;
-  private catalogReceived = false;
-  private videoInitReceived = false;
-  private audioInitReceived = false;
-
-  // Audio-Video Synchronization State
-  private firstVideoTimestamp: number | null = null;  // In timescale units
-  private firstAudioTimestamp: number | null = null;  // In timescale units
-  private videoTimescale: number = 24000;             // Default, updated from init segment
-  private audioTimescale: number = 44100;             // Default, updated from init segment
-  private syncApplied = false;                        // True after offset is set
-
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-
-    // Create styles
-    const style = document.createElement("style");
-    style.textContent = `
+	private video: HTMLVideoElement;
+	private mediaSource: MediaSource | null = null;
+	private videoSourceBuffer: SourceBuffer | null = null;
+	private audioSourceBuffer: SourceBuffer | null = null;
+	private client: MoqClient | null = null;
+	private videoQueue: { data: Uint8Array; trackType: "video" }[] = [];
+	private audioQueue: { data: Uint8Array; trackType: "audio" }[] = [];
+	private isVideoProcessing = false;
+	private isAudioProcessing = false;
+	private lastVideoProcessTime = 0;
+	private lastAudioProcessTime = 0;
+	private userPaused = false;
+	private monitorInterval: number | null = null;
+	private statusIntervalId: number | null = null;
+	private connectionState = "disconnected";
+	private reconnectTimer: number | null = null;
+	private catalogReceived = false;
+	private videoInitReceived = false;
+	private audioInitReceived = false;
+
+	// Audio-Video Synchronization State
+	private firstVideoTimestamp: number | null = null; // In timescale units
+	private firstAudioTimestamp: number | null = null; // In timescale units
+	private videoTimescale: number = 24000; // Default, updated from init segment
+	private audioTimescale: number = 44100; // Default, updated from init segment
+	private syncApplied = false; // True after offset is set
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+
+		// Create styles
+		const style = document.createElement("style");
+		style.textContent = `
       :host {
         display: block;
         position: relative;
@@ -76,889 +75,938 @@ export class MoqMsePlayer extends HTMLElement {
       }
     `;
 
-    // Create video element
-    this.video = document.createElement("video");
-    this.video.controls = true;
-    this.video.autoplay = true;
-    this.video.muted = true; // Enable muted autoplay to bypass browser policies
-    this.video.playsInline = true;
-
-    this.video.addEventListener("play", () => {
-      this.userPaused = false;
-    });
-
-    this.video.addEventListener("pause", () => {
-      this.userPaused = true;
-    });
-
-    // Handle buffer underruns - try to resume when buffer refills
-    this.video.addEventListener("waiting", () => {
-      console.log("[MoqMsePlayer] Video waiting for data...");
-    });
-
-    this.video.addEventListener("stalled", () => {
-      console.log("[MoqMsePlayer] Video stalled, attempting to recover...");
-      // Try to seek to current position to unstick
-      if (this.videoSourceBuffer && this.videoSourceBuffer.buffered.length > 0) {
-        const bufferedEnd = this.videoSourceBuffer.buffered.end(0);
-        if (bufferedEnd > this.video.currentTime + 0.5) {
-          console.log("[MoqMsePlayer] Buffer ahead, seeking to resume");
-          this.video.currentTime = this.video.currentTime + 0.1;
-        }
-      }
-    });
-
-    this.video.addEventListener("canplay", () => {
-      if (!this.userPaused && this.video.paused) {
-        console.log("[MoqMsePlayer] Can play, resuming...");
-        this.video.play().catch((e) => console.error("[MoqMsePlayer] Resume failed:", e));
-      }
-    });
-
-    const shadowRoot = this.shadowRoot;
-    if (shadowRoot) {
-      shadowRoot.appendChild(style);
-      shadowRoot.appendChild(this.video);
-    }
-  }
-
-  static get observedAttributes() {
-    return ["url", "path", "debug", "latency"];
-  }
-
-  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
-    if (oldValue !== newValue && newValue !== null) {
-      if (name === "url" || name === "path") {
-        this.reconnect();
-      }
-    }
-  }
-
-  connectedCallback() {
-    this.connect();
-  }
-
-  disconnectedCallback() {
-    this.disconnect();
-  }
-
-  private reconnect() {
-    if (this.client) {
-      this.disconnect();
-      this.connect();
-    }
-  }
-
-  private async connect() {
-    // Clear any existing status interval before creating a new one
-    if (this.statusIntervalId !== null) {
-      clearInterval(this.statusIntervalId);
-      this.statusIntervalId = null;
-    }
-
-    // Start periodic status logging
-    this.statusIntervalId = window.setInterval(() => {
-        if (!this.video) return;
-        const vBuf = this.videoSourceBuffer?.buffered.length ? `${this.videoSourceBuffer.buffered.start(0).toFixed(2)}-${this.videoSourceBuffer.buffered.end(this.videoSourceBuffer.buffered.length-1).toFixed(2)}` : "empty";
-        const aBuf = this.audioSourceBuffer?.buffered.length ? `${this.audioSourceBuffer.buffered.start(0).toFixed(2)}-${this.audioSourceBuffer.buffered.end(this.audioSourceBuffer.buffered.length-1).toFixed(2)}` : "empty";
-        console.log(`[MoqMsePlayer Status] Time: ${this.video.currentTime.toFixed(3)}s, State: ${this.video.readyState}, Paused: ${this.video.paused}, V-Buf: ${vBuf}, A-Buf: ${aBuf}`);
-    }, 1000);
-
-    const url = this.getAttribute("url");
-    const path = this.getAttribute("path");
-
-    if (!url || !path) {
-      console.error("[MoqMsePlayer] Missing url or path attributes");
-      return;
-    }
-
-    try {
-      // Initialize MediaSource but DON'T create SourceBuffer yet
-      // Wait for catalog to get the correct codec
-      await this.initMediaSource();
-
-      // Connect to MoQ
-      this.client = new MoqClient({
-        relayUrl: url,
-        broadcastName: path,
-        onCatalog: (catalog) => this.handleCatalog(catalog),
-        onData: (data, trackType) => this.handleData(data, trackType),
-        onError: (error) => {
-          console.error("[MoqMsePlayer] Error:", error);
-          this.connectionState = "error";
-          this.scheduleReconnect();
-        },
-        onConnected: () => {
-          console.log("[MoqMsePlayer] Connected");
-          this.connectionState = "connected";
-        },
-        onDisconnected: () => {
-          console.log("[MoqMsePlayer] Disconnected");
-          this.connectionState = "disconnected";
-        },
-      });
-
-      this.connectionState = "connecting";
-      await this.client.connect();
-
-      // Start monitoring playback
-      if (this.monitorInterval) clearInterval(this.monitorInterval);
-      this.monitorInterval = window.setInterval(() => this.checkLiveEdge(), 1000);
-    } catch (error) {
-      console.error("[MoqMsePlayer] Connection failed:", error);
-      this.scheduleReconnect();
-    }
-  }
-
-  private scheduleReconnect() {
-    if (this.reconnectTimer) return;
-    console.log("[MoqMsePlayer] Scheduling reconnect in 2s...");
-    this.reconnectTimer = window.setTimeout(() => {
-      this.reconnectTimer = null;
-      this.disconnect();
-      this.connect();
-    }, 2000);
-  }
-
-  private disconnect() {
-    if (this.statusIntervalId !== null) {
-      clearInterval(this.statusIntervalId);
-      this.statusIntervalId = null;
-    }
-    if (this.monitorInterval) {
-      clearInterval(this.monitorInterval);
-      this.monitorInterval = null;
-    }
-    if (this.reconnectTimer) {
-      clearTimeout(this.reconnectTimer);
-      this.reconnectTimer = null;
-    }
-    if (this.client) {
-      this.client.disconnect();
-      this.client = null;
-    }
-
-    // Reset MediaSource and SourceBuffer
-    if (this.mediaSource) {
-      try {
-        if (this.mediaSource.readyState === "open") {
-          this.mediaSource.endOfStream();
-        }
-      } catch {
-        // Ignore error if already closed
-      }
-      this.mediaSource = null;
-    }
-    this.videoSourceBuffer = null;
-    this.audioSourceBuffer = null;
-    this.videoQueue = [];
-    this.audioQueue = [];
-    this.isVideoProcessing = false;
-    this.isAudioProcessing = false;
-    this.catalogReceived = false;
-    this.videoInitReceived = false;
-    this.audioInitReceived = false;
-
-    // Detach video source
-    this.video.pause();
-    this.video.removeAttribute("src");
-    this.video.load();
-  }
-
-  private async initMediaSource(): Promise<void> {
-    return new Promise((resolve) => {
-      this.mediaSource = new MediaSource();
-      this.video.src = URL.createObjectURL(this.mediaSource);
-
-      this.mediaSource.addEventListener("sourceopen", () => {
-        console.log("[MoqMsePlayer] MediaSource opened, waiting for catalog...");
-        resolve();
-      });
-    });
-  }
-
-  private handleCatalog(catalog: Catalog.Root) {
-    console.log("[MoqMsePlayer] Received catalog:", catalog);
-
-    if (!this.mediaSource || this.mediaSource.readyState !== "open") {
-      console.error("[MoqMsePlayer] MediaSource not open");
-      return;
-    }
-
-    if (this.catalogReceived) {
-      console.log("[MoqMsePlayer] Catalog already processed, skipping");
-      return;
-    }
-
-    // Build codec string from catalog
-    const videoCodec = this.getVideoCodec(catalog);
-    const audioCodec = this.getAudioCodec(catalog);
-
-    if (!videoCodec && !audioCodec) {
-      console.error("[MoqMsePlayer] No codecs found in catalog");
-      return;
-    }
-
-    // Build combined codec string for multiplexed fMP4
-    const codecs: string[] = [];
-    if (videoCodec) codecs.push(videoCodec);
-    if (audioCodec) codecs.push(audioCodec);
-
-    const mimeType = `video/mp4; codecs="${codecs.join(", ")}"`;
-    console.log("[MoqMsePlayer] Using codec from catalog:", mimeType, "- Supported:", MediaSource.isTypeSupported(mimeType));
-
-    if (!MediaSource.isTypeSupported(mimeType)) {
-      console.error("[MoqMsePlayer] Codec not supported:", mimeType);
-      return;
-    }
-
-    try {
-      // Create separate SourceBuffers for video and audio
-      const videoMimeType = `video/mp4; codecs="${videoCodec}"`;
-      const audioMimeType = `audio/mp4; codecs="${audioCodec}"`;
-
-      console.log("[MoqMsePlayer] Creating video SourceBuffer:", videoMimeType);
-      this.videoSourceBuffer = this.mediaSource.addSourceBuffer(videoMimeType);
-      this.videoSourceBuffer.mode = "sequence";
-      this.videoSourceBuffer.addEventListener("updateend", () => {
-        this.processVideoQueue();
-        this.checkLiveEdge();
-      });
-      this.videoSourceBuffer.addEventListener("error", (e) => {
-        console.error("[MoqMsePlayer] Video SourceBuffer error:", e);
-      });
-
-      console.log("[MoqMsePlayer] Creating audio SourceBuffer:", audioMimeType);
-      this.audioSourceBuffer = this.mediaSource.addSourceBuffer(audioMimeType);
-      this.audioSourceBuffer.mode = "sequence";
-      this.audioSourceBuffer.addEventListener("updateend", () => {
-        this.processAudioQueue();
-      });
-      this.audioSourceBuffer.addEventListener("error", (e) => {
-        const sb = this.audioSourceBuffer;
-        console.error("[MoqMsePlayer] Audio SourceBuffer error:", e, {
-          updating: sb?.updating,
-          mediaSourceState: this.mediaSource?.readyState
-        });
-      });
-
-      this.catalogReceived = true;
-      console.log("[MoqMsePlayer] SourceBuffers created, waiting for init segments...");
-
-      // Process any queued data
-      this.processVideoQueue();
-      this.processAudioQueue();
-    } catch (error) {
-      console.error("[MoqMsePlayer] Failed to create SourceBuffer:", error);
-    }
-  }
-
-  private getVideoCodec(catalog: Catalog.Root): string | null {
-    if (!catalog.video?.renditions) return null;
-
-    const renditionKeys = Object.keys(catalog.video.renditions);
-    if (renditionKeys.length === 0) return null;
-
-    const firstRendition = catalog.video.renditions[renditionKeys[0]];
-    return firstRendition?.codec || null;
-  }
-
-  private getAudioCodec(catalog: Catalog.Root): string | null {
-    if (!catalog.audio?.renditions) return null;
-
-    const renditionKeys = Object.keys(catalog.audio.renditions);
-    if (renditionKeys.length === 0) return null;
-
-    const firstRendition = catalog.audio.renditions[renditionKeys[0]];
-    return firstRendition?.codec || null;
-  }
-
-  private log(msg: string, ...args: unknown[]) {
-    if (this.hasAttribute("debug")) {
-      console.log(msg, ...args);
-    }
-  }
-
-  /**
-   * Strip the QUIC VarInt timestamp prefix from frame data.
-   * The hang server prepends a QUIC VarInt-encoded timestamp to each frame.
-   * QUIC VarInt format: first 2 bits indicate length (1, 2, 4, or 8 bytes).
-   * We need to remove this before passing to MSE.
-   */
-  private stripTimestampPrefix(data: Uint8Array): Uint8Array {
-    if (data.byteLength < 1) return data;
-
-    // QUIC VarInt: first 2 bits of first byte indicate length
-    const firstByte = data[0];
-    const lengthBits = (firstByte >> 6) & 0x03;
-
-    let varintLength: number;
-    switch (lengthBits) {
-      case 0: varintLength = 1; break;  // 00 = 1 byte
-      case 1: varintLength = 2; break;  // 01 = 2 bytes
-      case 2: varintLength = 4; break;  // 10 = 4 bytes
-      case 3: varintLength = 8; break;  // 11 = 8 bytes
-      default: varintLength = 1; break;
-    }
-
-    if (data.byteLength < varintLength) {
-      console.error("[MoqMsePlayer] Data too short for QUIC VarInt");
-      return data;
-    }
-
-    // Return the data without the timestamp prefix
-    this.log(`[MoqMsePlayer] Stripped ${varintLength} byte QUIC VarInt timestamp`);
-    return data.slice(varintLength);
-  }
-
-  /**
-   * Check if data is an init segment (starts with ftyp box)
-   */
-  private isInitSegment(data: Uint8Array): boolean {
-    if (data.byteLength < 8) return false;
-    // Check for 'ftyp' fourcc at offset 4
-    const fourcc = String.fromCharCode(data[4], data[5], data[6], data[7]);
-    return fourcc === "ftyp";
-  }
-
-  /**
-   * Check if data is a media segment (starts with moof or styp)
-   */
-  private isMediaSegment(data: Uint8Array): boolean {
-    if (data.byteLength < 8) return false;
-    const fourcc = String.fromCharCode(data[4], data[5], data[6], data[7]);
-    return fourcc === "moof" || fourcc === "styp";
-  }
-
-  /**
-   * Debug helper: Log all MP4 boxes in a segment
-   */
-  private logMp4Boxes(data: Uint8Array, trackType: string) {
-    let offset = 0;
-    const boxes: string[] = [];
-    const dv = new DataView(data.buffer, data.byteOffset, data.byteLength);
-
-    while (offset + 8 <= data.byteLength) {
-      const boxSize = dv.getUint32(offset);
-      const fourcc = String.fromCharCode(
-        data[offset + 4], data[offset + 5], data[offset + 6], data[offset + 7]
-      );
-
-      if (boxSize === 0) break; // End of boxes
-      if (boxSize < 8 || offset + boxSize > data.byteLength) {
-        boxes.push(`INVALID(size=${boxSize})`);
-        break;
-      }
-
-      boxes.push(`${fourcc}(${boxSize})`);
-      offset += boxSize;
-    }
-
-    console.log(`[MoqMsePlayer] ${trackType} init boxes:`, boxes.join(', '));
-
-    // Log first 64 bytes as hex for debugging
-    const hexBytes = Array.from(data.slice(0, Math.min(64, data.byteLength)))
-      .map(b => b.toString(16).padStart(2, '0'))
-      .join(' ');
-    console.log(`[MoqMsePlayer] ${trackType} init first 64 bytes:`, hexBytes);
-  }
-
-  /**
-   * Split a combined init+media segment into separate parts.
-   * The server sends ftyp + moov + moof + mdat combined.
-   * We need ftyp + moov as init segment, and moof + mdat as media segment.
-   */
-  private splitInitAndMedia(data: Uint8Array): { initSegment: Uint8Array | null; mediaSegment: Uint8Array | null } {
-    let offset = 0;
-    let initEnd = 0;
-    const dv = new DataView(data.buffer, data.byteOffset, data.byteLength);
-
-    // Find the end of init segment (after ftyp and moov boxes)
-    while (offset + 8 <= data.byteLength) {
-      const boxSize = dv.getUint32(offset);
-      const fourcc = String.fromCharCode(
-        data[offset + 4], data[offset + 5], data[offset + 6], data[offset + 7]
-      );
-
-      if (boxSize === 0 || boxSize < 8 || offset + boxSize > data.byteLength) {
-        break;
-      }
-
-      // ftyp and moov are part of init segment
-      if (fourcc === 'ftyp' || fourcc === 'moov') {
-        initEnd = offset + boxSize;
-        offset += boxSize;
-      } else {
-        // This is where media segment starts (moof, mdat, etc)
-        break;
-      }
-    }
-
-    const initSegment = initEnd > 0 ? data.slice(0, initEnd) : null;
-    const mediaSegment = offset < data.byteLength ? data.slice(offset) : null;
-
-    return { initSegment, mediaSegment };
-  }
-
-  private handleData(rawData: Uint8Array, trackType: "video" | "audio") {
-    // Strip the varint timestamp prefix that hang adds to each frame
-    const data = this.stripTimestampPrefix(rawData);
-
-    // Log first 8 bytes to see what we're getting
-    if (data.byteLength >= 8) {
-      const fourcc = String.fromCharCode(data[4], data[5], data[6], data[7]);
-      const size = new DataView(data.buffer, data.byteOffset, 4).getUint32(0);
-      console.log(`[MoqMsePlayer] Received ${trackType} segment: fourcc='${fourcc}', size=${data.byteLength}, boxSize=${size}`);
-    }
-
-    // Check if this is an init segment
-    if (this.isInitSegment(data)) {
-      let processInit = true; // Flag to pass to split logic
-      if (trackType === "video") {
-        if (this.videoInitReceived) {
-          this.log(`[MoqMsePlayer] Skipping duplicate video INIT segment: ${data.byteLength} bytes. Continuing to check for media...`);
-          processInit = false; // Mark init as handled/skipped so we don't re-append it
-        } else {
-            console.log(`[MoqMsePlayer] Received VIDEO INIT segment: ${data.byteLength} bytes`);
-            this.videoInitReceived = true;
-        }
-      } else {
-        if (this.audioInitReceived) {
-          this.log(`[MoqMsePlayer] Skipping duplicate audio INIT segment: ${data.byteLength} bytes. Continuing to check for media...`);
-          processInit = false;
-        } else {
-            console.log(`[MoqMsePlayer] Received AUDIO INIT segment: ${data.byteLength} bytes`);
-            this.audioInitReceived = true;
-        }
-      }
-
-      // Debug: Parse and log all boxes in the init segment
-      this.logMp4Boxes(data, trackType);
-
-      // The server sends ftyp + moov + moof + mdat combined!
-      // We need to split this: only ftyp + moov should be the init segment
-      // The moof + mdat should be queued as the first media segment
-      const { initSegment, mediaSegment } = this.splitInitAndMedia(data);
-
-      if (initSegment && processInit) { // Only process init if it wasn't marked as duplicate
-        console.log(`[MoqMsePlayer] Extracted ${trackType} init segment (ftyp+moov): ${initSegment.byteLength} bytes`);
-        this.patchInitSegment(initSegment);
-        if (trackType === "video") this.videoQueue.push({ data: initSegment, trackType });
-        else this.audioQueue.push({ data: initSegment, trackType });
-      }
-
-      if (mediaSegment) {
-        console.log(`[MoqMsePlayer] Extracted ${trackType} first media segment (moof+mdat): ${mediaSegment.byteLength} bytes`);
-        const timestamp = this.inspectMP4(mediaSegment, trackType + " Media");
-
-        // Capture first timestamp for sync calculation
-        if (trackType === "video" && this.firstVideoTimestamp === null && timestamp !== null) {
-          this.firstVideoTimestamp = timestamp;
-          console.log(`[Sync] First video timestamp: ${timestamp} (timescale: ${this.videoTimescale})`);
-        }
-        if (trackType === "audio" && this.firstAudioTimestamp === null && timestamp !== null) {
-          this.firstAudioTimestamp = timestamp;
-          console.log(`[Sync] First audio timestamp: ${timestamp} (timescale: ${this.audioTimescale})`);
-        }
-
-        if (trackType === "video") this.videoQueue.push({ data: mediaSegment, trackType });
-        else this.audioQueue.push({ data: mediaSegment, trackType });
-      }
-
-      if (trackType === "video") this.processVideoQueue();
-      else this.processAudioQueue();
-      return;
-    }
-
-    // Inspect regular media segments and capture timestamp for sync
-    const timestamp = this.inspectMP4(data, trackType + " Media");
-
-    // Capture first timestamp for sync calculation (for non-bundled segments)
-    if (trackType === "video" && this.firstVideoTimestamp === null && timestamp !== null) {
-      this.firstVideoTimestamp = timestamp;
-      console.log(`[Sync] First video timestamp: ${timestamp} (timescale: ${this.videoTimescale})`);
-    }
-    if (trackType === "audio" && this.firstAudioTimestamp === null && timestamp !== null) {
-      this.firstAudioTimestamp = timestamp;
-      console.log(`[Sync] First audio timestamp: ${timestamp} (timescale: ${this.audioTimescale})`);
-    }
-
-    // If we haven't received the init segment for this track type, drop its data
-    if (trackType === "video" && !this.videoInitReceived) {
-      this.log(`[MoqMsePlayer] Dropping video segment (waiting for video init)`);
-      return;
-    }
-    if (trackType === "audio" && !this.audioInitReceived) {
-      this.log(`[MoqMsePlayer] Dropping audio segment (waiting for audio init)`);
-      return;
-    }
-
-    // Safety check: if queue is too large, drop old data
-    if (this.videoQueue.length > 1000) {
-      console.warn("[MoqMsePlayer] Video queue too large, clearing.");
-      this.videoQueue = [];
-    }
-    if (this.audioQueue.length > 1000) {
-        console.warn("[MoqMsePlayer] Audio queue too large, clearing.");
-        this.audioQueue = [];
-    }
-
-    if (trackType === "video") {
-      // console.log(`[MoqMsePlayer] Enqueuing video segment. Queue size: ${this.videoQueue.length+1}`);
-      this.videoQueue.push({ data, trackType });
-      this.processVideoQueue();
-    } else {
-      this.audioQueue.push({ data, trackType });
-      this.processAudioQueue();
-    }
-  }
-
-  private async processVideoQueue() {
-    if (!this.videoSourceBuffer || !this.catalogReceived || !this.videoInitReceived) return;
-
-    if (this.isVideoProcessing) {
-        if (Date.now() - this.lastVideoProcessTime > 2000) {
-            console.warn("[MoqMsePlayer] Video process loop stuck, forcing reset.");
-            this.isVideoProcessing = false;
-        } else {
-            return;
-        }
-    }
-
-    this.isVideoProcessing = true;
-    this.lastVideoProcessTime = Date.now();
-
-    try {
-        while (this.videoQueue.length > 0) {
-            const targetBuffer = this.videoSourceBuffer;
-
-            // Wait if buffer is updating
-            if (targetBuffer.updating) {
-                await new Promise<void>((resolve) => {
-                    const onEnd = () => {
-                        targetBuffer.removeEventListener("updateend", onEnd);
-                        resolve();
-                    };
-                    targetBuffer.addEventListener("updateend", onEnd);
-                });
-            }
-
-            if (this.videoQueue.length === 0) break;
-            const item = this.videoQueue[0];
-
-            try {
-                const start = performance.now();
-                await this.appendToBuffer(item.data, "video");
-                const duration = performance.now() - start;
-                if (duration > 50) {
-                   console.warn(`[MoqMsePlayer] Slow video append: ${duration.toFixed(1)}ms`);
-                }
-                this.videoQueue.shift(); // remove only after success
-            } catch (e) {
-                const error = e as Error;
-                if (error.name === "QuotaExceededError") {
-                    console.warn("[MoqMsePlayer] Video QuotaExceededError. Cleaning up.");
-                    this.cleanupBuffer(true);
-                    // Don't shift, retry next time
-                    break;
-                } else {
-                    console.error("[MoqMsePlayer] Error appending video:", error);
-                    this.videoQueue.shift(); // Drop problematic segment
-                }
-            }
-        }
-    } catch (e) {
-        console.error("[MoqMsePlayer] Fatal error in processVideoQueue:", e);
-    } finally {
-        this.isVideoProcessing = false;
-        // this.log("[MoqMsePlayer] Exiting processVideoQueue");
-    }
-  }
-
-  private async processAudioQueue() {
-    if (!this.audioSourceBuffer || !this.catalogReceived || !this.audioInitReceived) return;
-
-    if (this.isAudioProcessing) {
-        if (Date.now() - this.lastAudioProcessTime > 2000) {
-            console.warn("[MoqMsePlayer] Audio process loop stuck, forcing reset.");
-            this.isAudioProcessing = false;
-        } else {
-            return;
-        }
-    }
-
-    this.isAudioProcessing = true;
-    this.lastAudioProcessTime = Date.now();
-
-    // SYNC GATE: Apply offset once when both first timestamps are available
-    if (!this.syncApplied && this.firstVideoTimestamp !== null && this.firstAudioTimestamp !== null) {
-      this.applySyncOffset();
-    }
-
-    try {
-        while (this.audioQueue.length > 0) {
-            const targetBuffer = this.audioSourceBuffer;
-
-            // Wait if buffer is updating
-            if (targetBuffer.updating) {
-                await new Promise<void>((resolve) => {
-                    const onEnd = () => {
-                        targetBuffer.removeEventListener("updateend", onEnd);
-                        resolve();
-                    };
-                    targetBuffer.addEventListener("updateend", onEnd);
-                });
-            }
-
-            if (this.audioQueue.length === 0) break;
-            const item = this.audioQueue[0];
-
-            try {
-                await this.appendToBuffer(item.data, "audio");
-                this.audioQueue.shift(); // remove only after success
-            } catch (e) {
-                const error = e as Error;
-                if (error.name === "QuotaExceededError") {
-                    console.warn("[MoqMsePlayer] Audio QuotaExceededError. Cleaning up.");
-                    this.cleanupBuffer(true);
-                    // Don't shift, retry next time
-                    break;
-                } else {
-                    console.error("[MoqMsePlayer] Error appending audio:", error);
-                    this.audioQueue.shift(); // Drop problematic segment
-                }
-            }
-        }
-    } catch (e) {
-        console.error("[MoqMsePlayer] Fatal error in processAudioQueue:", e);
-    } finally {
-        this.isAudioProcessing = false;
-    }
-  }
-
-  /**
-   * Calculate and apply the audio timestamp offset to synchronize with video.
-   * This is called once when both first video and audio timestamps are available.
-   */
-  private applySyncOffset() {
-    if (this.firstVideoTimestamp === null || this.firstAudioTimestamp === null) return;
-    if (this.syncApplied) return;
-    if (!this.audioSourceBuffer) return;
-
-    // Convert both to seconds using their respective timescales
-    const videoStartSec = this.firstVideoTimestamp / this.videoTimescale;
-    const audioStartSec = this.firstAudioTimestamp / this.audioTimescale;
-
-    // Calculate offset: we want audio to start when video starts
-    const offset = videoStartSec - audioStartSec;
-
-    console.log(`[Sync] Video starts at ${videoStartSec.toFixed(3)}s (${this.firstVideoTimestamp}/${this.videoTimescale})`);
-    console.log(`[Sync] Audio starts at ${audioStartSec.toFixed(3)}s (${this.firstAudioTimestamp}/${this.audioTimescale})`);
-    console.log(`[Sync] Calculated offset: ${offset.toFixed(3)}s (NOT applying - sequence mode starts both at 0)`);
-
-    // In sequence mode, both tracks start at 0 regardless of original media timestamps.
-    // Applying an offset would break sync by delaying one track.
-    // The real fix for audio/video timestamp mismatch is on the server/encoder side.
-    this.syncApplied = true;
-  }
-
-  private async appendToBuffer(data: Uint8Array, trackType: "video" | "audio"): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const targetBuffer = trackType === "video" ? this.videoSourceBuffer : this.audioSourceBuffer;
-      if (!targetBuffer) {
-        reject(new Error(`No ${trackType} SourceBuffer`));
-        return;
-      }
-
-      // Check if MediaSource is still open
-      if (!this.mediaSource || this.mediaSource.readyState !== "open") {
-        reject(new Error(`MediaSource not open (state: ${this.mediaSource?.readyState})`));
-        return;
-      }
-
-      // Check if buffer is still updating
-      if (targetBuffer.updating) {
-        reject(new Error(`${trackType} SourceBuffer still updating`));
-        return;
-      }
-
-      const isInit = this.isInitSegment(data);
-      const isMedia = this.isMediaSegment(data);
-
-      if (isInit) {
-        console.log(`[MoqMsePlayer] Appending ${trackType} INIT segment, size:`, data.byteLength);
-      } else if (isMedia) {
-        this.log(`[MoqMsePlayer] Appending ${trackType} media segment, size:`, data.byteLength);
-      } else {
-        console.warn(`[MoqMsePlayer] Unknown ${trackType} segment type, first bytes:`,
-          Array.from(data.slice(0, 16)).map(b => b.toString(16).padStart(2, '0')).join(' '));
-      }
-
-      try {
-        // Cast to BufferSource to handle TypeScript lib compatibility
-        targetBuffer.appendBuffer(data as unknown as BufferSource);
-      } catch (e: unknown) {
-        const error = e as Error;
-        console.error(`[MoqMsePlayer] ${trackType} appendBuffer failed:`, error.name, error.message);
-        reject(error);
-        return;
-      }
-
-      const onUpdateEnd = () => {
-        targetBuffer.removeEventListener("updateend", onUpdateEnd);
-
-        if (targetBuffer.buffered.length > 0) {
-            const start = targetBuffer.buffered.start(0);
-            const end = targetBuffer.buffered.end(targetBuffer.buffered.length - 1);
-            // Diagnostic log - log frequently for now to debug "only 1 segment" issue
-             console.log(`[MoqMsePlayer] ${trackType} UpdateEnd. Range: ${start.toFixed(3)}-${end.toFixed(3)} (Ranges: ${targetBuffer.buffered.length})`);
-        }
-        resolve();
-      };
-
-      targetBuffer.addEventListener("updateend", onUpdateEnd);
-    });
-  }
-
-  private cleanupBuffer(aggressive = false) {
-    const currentTime = this.video.currentTime;
-    const keepDuration = aggressive ? 5 : 60;
-
-    // Cleanup both buffers
-    for (const buffer of [this.videoSourceBuffer, this.audioSourceBuffer]) {
-      if (!buffer || buffer.updating) continue;
-
-      const buffered = buffer.buffered;
-      for (let i = 0; i < buffered.length; i++) {
-        const start = buffered.start(i);
-        const end = buffered.end(i);
-
-        if (end < currentTime - keepDuration) {
-          this.log(`[MoqMsePlayer] Cleaning up buffer: ${start.toFixed(2)}-${end.toFixed(2)}`);
-          buffer.remove(start, end);
-          return;
-        } else if (start < currentTime - keepDuration) {
-          this.log(`[MoqMsePlayer] Cleaning up buffer: ${start.toFixed(2)}-${(currentTime - keepDuration).toFixed(2)}`);
-          buffer.remove(start, currentTime - keepDuration);
-          return;
-        }
-      }
-    }
-  }
-
-  private checkLiveEdge() {
-    if (!this.videoSourceBuffer) return;
-    try {
-      const buffered = this.videoSourceBuffer?.buffered;
-      if (!buffered || buffered.length === 0) {
-         // this.log(`[MoqMsePlayer] Buffer empty. Time: ${this.video.currentTime.toFixed(2)}`);
-         return;
-      }
-
-      // Log fragmentation if > 1 range
-      if (buffered.length > 1) {
-         const ranges = [];
-         for(let i=0; i<buffered.length; i++) ranges.push(`${buffered.start(i).toFixed(3)}-${buffered.end(i).toFixed(3)}`);
-         console.warn(`[MoqMsePlayer] Fragmented Buffer: ${ranges.join(", ")}`);
-      }
-
-      const bufferedEnd = buffered.end(buffered.length - 1);
-      const bufferedStart = buffered.start(0);
-      const currentTime = this.video.currentTime;
-      const paused = this.video.paused;
-
-      if (paused) {
-        if (this.userPaused) return;
-
-        const bufferDuration = bufferedEnd - bufferedStart;
-        this.log(`[MoqMsePlayer] Paused. Buffer: ${bufferDuration.toFixed(2)}s (${bufferedStart.toFixed(2)}-${bufferedEnd.toFixed(2)})`);
-
-        // Check if we need to start playing
-        // If we are way behind the buffer start (e.g. at 0 while buffer is at 500), seek immediately
-        const isOutOfSync = currentTime < bufferedStart - 0.5;
-
-        // console.log(`[MoqMsePlayer] Autoplay Check: autoplay=${this.video.autoplay}, bufferDuration=${bufferDuration.toFixed(3)}, isOutOfSync=${isOutOfSync}, currentTime=${currentTime.toFixed(3)}, bufferedStart=${bufferedStart.toFixed(3)}`);
-
-        // Relaxed condition: If out of sync, try to recover even if buffer is tiny (it might grow)
-        if (this.video.autoplay && (bufferDuration > 0.1 || isOutOfSync)) {
-          // Seek to live edge before playing
-          if (currentTime < bufferedStart || currentTime > bufferedEnd) {
-            const targetTime = Math.max(bufferedStart, bufferedEnd - 1.0);
-            console.log(`[MoqMsePlayer] Seeking to live edge: ${targetTime.toFixed(2)}s (was at ${currentTime.toFixed(2)}s) range=${bufferedStart.toFixed(2)}-${bufferedEnd.toFixed(2)}`);
-            this.video.currentTime = targetTime;
-          }
-          this.log("[MoqMsePlayer] Attempting autoplay...");
-          this.video.play().catch((e) => console.error("[MoqMsePlayer] Autoplay failed:", e));
-        }
-        return;
-      }
-
-      // HLS.js-style Live Sync
-      const targetLatency = 2.0;
-      const latency = bufferedEnd - currentTime;
-
-      // Hard Seek if too far behind
-      const isOutOfSync = currentTime < bufferedStart - 0.5;
-      if (latency > 5.0 || isOutOfSync) {
-        // Ensure we don't seek before the actual buffer start
-        const safeTarget = Math.max(bufferedStart, bufferedEnd - targetLatency);
-
-        this.log(`[MoqMsePlayer] Sync adjustment: latency=${latency.toFixed(2)}s, outOfSync=${isOutOfSync}, seeking to ${safeTarget.toFixed(2)}s coverage=${bufferedStart.toFixed(2)}-${bufferedEnd.toFixed(2)}`);
-
-        if (Math.abs(currentTime - safeTarget) > 0.5) {
-             this.video.currentTime = safeTarget;
-        }
-        return;
-      }
-
-      // Catch-up via Playback Rate
-      if (latency > 3.0) {
-        if (this.video.playbackRate !== 1.1) {
-          this.log(`[MoqMsePlayer] Catching up (latency ${latency.toFixed(2)}s), rate -> 1.1x`);
-          this.video.playbackRate = 1.1;
-        }
-      } else if (latency < 2.0 && latency > -0.5) {
-        if (this.video.playbackRate !== 1.0) {
-          this.log(`[MoqMsePlayer] Latency good (${latency.toFixed(2)}s), rate -> 1.0x`);
-          this.video.playbackRate = 1.0;
-        }
-      } else if (latency <= -0.5) {
-        const targetPos = Math.max(0, bufferedEnd - 0.1);
-        this.log(`[MoqMsePlayer] Ahead of buffer (${latency.toFixed(2)}s), seeking to ${targetPos.toFixed(2)}s`);
-        this.video.pause();
-        this.video.currentTime = targetPos;
-      }
-
-      // Update Debug Overlay
-      if (this.hasAttribute("debug")) {
-        this.updateDebugOverlay(latency, bufferedStart, bufferedEnd);
-      }
-
-      // Regular buffer cleanup
-      this.cleanupBuffer();
-    } catch (e) {
-      // console.error("[MoqMsePlayer] checkLiveEdge error:", e);
-    }
-  }
-
-  private updateDebugOverlay(latency: number, bufferedStart: number, bufferedEnd: number) {
-    try {
-        let debugEl = this.shadowRoot?.querySelector(".debug-overlay") as HTMLDivElement | null;
-        if (!debugEl) {
-          debugEl = document.createElement("div");
-          debugEl.className = "debug-overlay";
-          this.shadowRoot?.appendChild(debugEl);
-        }
-
-        const quality = this.video.getVideoPlaybackQuality?.() ?? null;
-        const dropped = quality?.droppedVideoFrames ?? 0;
-        const total = quality?.totalVideoFrames ?? 0;
-        const vRanges = this.videoSourceBuffer?.buffered.length ?? 0;
-        const aRanges = this.audioSourceBuffer?.buffered.length ?? 0;
-        const vQ = this.videoQueue.length;
-        const aQ = this.audioQueue.length;
-
-        debugEl.innerHTML = `
+		// Create video element
+		this.video = document.createElement("video");
+		this.video.controls = true;
+		this.video.autoplay = true;
+		this.video.muted = true; // Enable muted autoplay to bypass browser policies
+		this.video.playsInline = true;
+
+		this.video.addEventListener("play", () => {
+			this.userPaused = false;
+		});
+
+		this.video.addEventListener("pause", () => {
+			this.userPaused = true;
+		});
+
+		// Handle buffer underruns - try to resume when buffer refills
+		this.video.addEventListener("waiting", () => {
+			console.log("[MoqMsePlayer] Video waiting for data...");
+		});
+
+		this.video.addEventListener("stalled", () => {
+			console.log("[MoqMsePlayer] Video stalled, attempting to recover...");
+			// Try to seek to current position to unstick
+			if (this.videoSourceBuffer && this.videoSourceBuffer.buffered.length > 0) {
+				const bufferedEnd = this.videoSourceBuffer.buffered.end(0);
+				if (bufferedEnd > this.video.currentTime + 0.5) {
+					console.log("[MoqMsePlayer] Buffer ahead, seeking to resume");
+					this.video.currentTime = this.video.currentTime + 0.1;
+				}
+			}
+		});
+
+		this.video.addEventListener("canplay", () => {
+			if (!this.userPaused && this.video.paused) {
+				console.log("[MoqMsePlayer] Can play, resuming...");
+				this.video.play().catch((e) => console.error("[MoqMsePlayer] Resume failed:", e));
+			}
+		});
+
+		const shadowRoot = this.shadowRoot;
+		if (shadowRoot) {
+			shadowRoot.appendChild(style);
+			shadowRoot.appendChild(this.video);
+		}
+	}
+
+	static get observedAttributes() {
+		return ["url", "path", "debug", "latency"];
+	}
+
+	attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+		if (oldValue !== newValue && newValue !== null) {
+			if (name === "url" || name === "path") {
+				this.reconnect();
+			}
+		}
+	}
+
+	connectedCallback() {
+		this.connect();
+	}
+
+	disconnectedCallback() {
+		this.disconnect();
+	}
+
+	private reconnect() {
+		if (this.client) {
+			this.disconnect();
+			this.connect();
+		}
+	}
+
+	private async connect() {
+		// Clear any existing status interval before creating a new one
+		if (this.statusIntervalId !== null) {
+			clearInterval(this.statusIntervalId);
+			this.statusIntervalId = null;
+		}
+
+		// Start periodic status logging
+		this.statusIntervalId = window.setInterval(() => {
+			if (!this.video) return;
+			const vBuf = this.videoSourceBuffer?.buffered.length
+				? `${this.videoSourceBuffer.buffered.start(0).toFixed(2)}-${this.videoSourceBuffer.buffered.end(this.videoSourceBuffer.buffered.length - 1).toFixed(2)}`
+				: "empty";
+			const aBuf = this.audioSourceBuffer?.buffered.length
+				? `${this.audioSourceBuffer.buffered.start(0).toFixed(2)}-${this.audioSourceBuffer.buffered.end(this.audioSourceBuffer.buffered.length - 1).toFixed(2)}`
+				: "empty";
+			console.log(
+				`[MoqMsePlayer Status] Time: ${this.video.currentTime.toFixed(3)}s, State: ${this.video.readyState}, Paused: ${this.video.paused}, V-Buf: ${vBuf}, A-Buf: ${aBuf}`,
+			);
+		}, 1000);
+
+		const url = this.getAttribute("url");
+		const path = this.getAttribute("path");
+
+		if (!url || !path) {
+			console.error("[MoqMsePlayer] Missing url or path attributes");
+			return;
+		}
+
+		try {
+			// Initialize MediaSource but DON'T create SourceBuffer yet
+			// Wait for catalog to get the correct codec
+			await this.initMediaSource();
+
+			// Connect to MoQ
+			this.client = new MoqClient({
+				relayUrl: url,
+				broadcastName: path,
+				onCatalog: (catalog) => this.handleCatalog(catalog),
+				onData: (data, trackType) => this.handleData(data, trackType),
+				onError: (error) => {
+					console.error("[MoqMsePlayer] Error:", error);
+					this.connectionState = "error";
+					this.scheduleReconnect();
+				},
+				onConnected: () => {
+					console.log("[MoqMsePlayer] Connected");
+					this.connectionState = "connected";
+				},
+				onDisconnected: () => {
+					console.log("[MoqMsePlayer] Disconnected");
+					this.connectionState = "disconnected";
+				},
+			});
+
+			this.connectionState = "connecting";
+			await this.client.connect();
+
+			// Start monitoring playback
+			if (this.monitorInterval) clearInterval(this.monitorInterval);
+			this.monitorInterval = window.setInterval(() => this.checkLiveEdge(), 1000);
+		} catch (error) {
+			console.error("[MoqMsePlayer] Connection failed:", error);
+			this.scheduleReconnect();
+		}
+	}
+
+	private scheduleReconnect() {
+		if (this.reconnectTimer) return;
+		console.log("[MoqMsePlayer] Scheduling reconnect in 2s...");
+		this.reconnectTimer = window.setTimeout(() => {
+			this.reconnectTimer = null;
+			this.disconnect();
+			this.connect();
+		}, 2000);
+	}
+
+	private disconnect() {
+		if (this.statusIntervalId !== null) {
+			clearInterval(this.statusIntervalId);
+			this.statusIntervalId = null;
+		}
+		if (this.monitorInterval) {
+			clearInterval(this.monitorInterval);
+			this.monitorInterval = null;
+		}
+		if (this.reconnectTimer) {
+			clearTimeout(this.reconnectTimer);
+			this.reconnectTimer = null;
+		}
+		if (this.client) {
+			this.client.disconnect();
+			this.client = null;
+		}
+
+		// Reset MediaSource and SourceBuffer
+		if (this.mediaSource) {
+			try {
+				if (this.mediaSource.readyState === "open") {
+					this.mediaSource.endOfStream();
+				}
+			} catch {
+				// Ignore error if already closed
+			}
+			this.mediaSource = null;
+		}
+		this.videoSourceBuffer = null;
+		this.audioSourceBuffer = null;
+		this.videoQueue = [];
+		this.audioQueue = [];
+		this.isVideoProcessing = false;
+		this.isAudioProcessing = false;
+		this.catalogReceived = false;
+		this.videoInitReceived = false;
+		this.audioInitReceived = false;
+
+		// Detach video source
+		this.video.pause();
+		this.video.removeAttribute("src");
+		this.video.load();
+	}
+
+	private async initMediaSource(): Promise<void> {
+		return new Promise((resolve) => {
+			this.mediaSource = new MediaSource();
+			this.video.src = URL.createObjectURL(this.mediaSource);
+
+			this.mediaSource.addEventListener("sourceopen", () => {
+				console.log("[MoqMsePlayer] MediaSource opened, waiting for catalog...");
+				resolve();
+			});
+		});
+	}
+
+	private handleCatalog(catalog: Catalog.Root) {
+		console.log("[MoqMsePlayer] Received catalog:", catalog);
+
+		if (!this.mediaSource || this.mediaSource.readyState !== "open") {
+			console.error("[MoqMsePlayer] MediaSource not open");
+			return;
+		}
+
+		if (this.catalogReceived) {
+			console.log("[MoqMsePlayer] Catalog already processed, skipping");
+			return;
+		}
+
+		// Build codec string from catalog
+		const videoCodec = this.getVideoCodec(catalog);
+		const audioCodec = this.getAudioCodec(catalog);
+
+		if (!videoCodec && !audioCodec) {
+			console.error("[MoqMsePlayer] No codecs found in catalog");
+			return;
+		}
+
+		// Build combined codec string for multiplexed fMP4
+		const codecs: string[] = [];
+		if (videoCodec) codecs.push(videoCodec);
+		if (audioCodec) codecs.push(audioCodec);
+
+		const mimeType = `video/mp4; codecs="${codecs.join(", ")}"`;
+		console.log(
+			"[MoqMsePlayer] Using codec from catalog:",
+			mimeType,
+			"- Supported:",
+			MediaSource.isTypeSupported(mimeType),
+		);
+
+		if (!MediaSource.isTypeSupported(mimeType)) {
+			console.error("[MoqMsePlayer] Codec not supported:", mimeType);
+			return;
+		}
+
+		try {
+			// Create separate SourceBuffers for video and audio
+			const videoMimeType = `video/mp4; codecs="${videoCodec}"`;
+			const audioMimeType = `audio/mp4; codecs="${audioCodec}"`;
+
+			console.log("[MoqMsePlayer] Creating video SourceBuffer:", videoMimeType);
+			this.videoSourceBuffer = this.mediaSource.addSourceBuffer(videoMimeType);
+			this.videoSourceBuffer.mode = "sequence";
+			this.videoSourceBuffer.addEventListener("updateend", () => {
+				this.processVideoQueue();
+				this.checkLiveEdge();
+			});
+			this.videoSourceBuffer.addEventListener("error", (e) => {
+				console.error("[MoqMsePlayer] Video SourceBuffer error:", e);
+			});
+
+			console.log("[MoqMsePlayer] Creating audio SourceBuffer:", audioMimeType);
+			this.audioSourceBuffer = this.mediaSource.addSourceBuffer(audioMimeType);
+			this.audioSourceBuffer.mode = "sequence";
+			this.audioSourceBuffer.addEventListener("updateend", () => {
+				this.processAudioQueue();
+			});
+			this.audioSourceBuffer.addEventListener("error", (e) => {
+				const sb = this.audioSourceBuffer;
+				console.error("[MoqMsePlayer] Audio SourceBuffer error:", e, {
+					updating: sb?.updating,
+					mediaSourceState: this.mediaSource?.readyState,
+				});
+			});
+
+			this.catalogReceived = true;
+			console.log("[MoqMsePlayer] SourceBuffers created, waiting for init segments...");
+
+			// Process any queued data
+			this.processVideoQueue();
+			this.processAudioQueue();
+		} catch (error) {
+			console.error("[MoqMsePlayer] Failed to create SourceBuffer:", error);
+		}
+	}
+
+	private getVideoCodec(catalog: Catalog.Root): string | null {
+		if (!catalog.video?.renditions) return null;
+
+		const renditionKeys = Object.keys(catalog.video.renditions);
+		if (renditionKeys.length === 0) return null;
+
+		const firstRendition = catalog.video.renditions[renditionKeys[0]];
+		return firstRendition?.codec || null;
+	}
+
+	private getAudioCodec(catalog: Catalog.Root): string | null {
+		if (!catalog.audio?.renditions) return null;
+
+		const renditionKeys = Object.keys(catalog.audio.renditions);
+		if (renditionKeys.length === 0) return null;
+
+		const firstRendition = catalog.audio.renditions[renditionKeys[0]];
+		return firstRendition?.codec || null;
+	}
+
+	private log(msg: string, ...args: unknown[]) {
+		if (this.hasAttribute("debug")) {
+			console.log(msg, ...args);
+		}
+	}
+
+	/**
+	 * Strip the QUIC VarInt timestamp prefix from frame data.
+	 * The hang server prepends a QUIC VarInt-encoded timestamp to each frame.
+	 * QUIC VarInt format: first 2 bits indicate length (1, 2, 4, or 8 bytes).
+	 * We need to remove this before passing to MSE.
+	 */
+	private stripTimestampPrefix(data: Uint8Array): Uint8Array {
+		if (data.byteLength < 1) return data;
+
+		// QUIC VarInt: first 2 bits of first byte indicate length
+		const firstByte = data[0];
+		const lengthBits = (firstByte >> 6) & 0x03;
+
+		let varintLength: number;
+		switch (lengthBits) {
+			case 0:
+				varintLength = 1;
+				break; // 00 = 1 byte
+			case 1:
+				varintLength = 2;
+				break; // 01 = 2 bytes
+			case 2:
+				varintLength = 4;
+				break; // 10 = 4 bytes
+			case 3:
+				varintLength = 8;
+				break; // 11 = 8 bytes
+			default:
+				varintLength = 1;
+				break;
+		}
+
+		if (data.byteLength < varintLength) {
+			console.error("[MoqMsePlayer] Data too short for QUIC VarInt");
+			return data;
+		}
+
+		// Return the data without the timestamp prefix
+		this.log(`[MoqMsePlayer] Stripped ${varintLength} byte QUIC VarInt timestamp`);
+		return data.slice(varintLength);
+	}
+
+	/**
+	 * Check if data is an init segment (starts with ftyp box)
+	 */
+	private isInitSegment(data: Uint8Array): boolean {
+		if (data.byteLength < 8) return false;
+		// Check for 'ftyp' fourcc at offset 4
+		const fourcc = String.fromCharCode(data[4], data[5], data[6], data[7]);
+		return fourcc === "ftyp";
+	}
+
+	/**
+	 * Check if data is a media segment (starts with moof or styp)
+	 */
+	private isMediaSegment(data: Uint8Array): boolean {
+		if (data.byteLength < 8) return false;
+		const fourcc = String.fromCharCode(data[4], data[5], data[6], data[7]);
+		return fourcc === "moof" || fourcc === "styp";
+	}
+
+	/**
+	 * Debug helper: Log all MP4 boxes in a segment
+	 */
+	private logMp4Boxes(data: Uint8Array, trackType: string) {
+		let offset = 0;
+		const boxes: string[] = [];
+		const dv = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+		while (offset + 8 <= data.byteLength) {
+			const boxSize = dv.getUint32(offset);
+			const fourcc = String.fromCharCode(data[offset + 4], data[offset + 5], data[offset + 6], data[offset + 7]);
+
+			if (boxSize === 0) break; // End of boxes
+			if (boxSize < 8 || offset + boxSize > data.byteLength) {
+				boxes.push(`INVALID(size=${boxSize})`);
+				break;
+			}
+
+			boxes.push(`${fourcc}(${boxSize})`);
+			offset += boxSize;
+		}
+
+		console.log(`[MoqMsePlayer] ${trackType} init boxes:`, boxes.join(", "));
+
+		// Log first 64 bytes as hex for debugging
+		const hexBytes = Array.from(data.slice(0, Math.min(64, data.byteLength)))
+			.map((b) => b.toString(16).padStart(2, "0"))
+			.join(" ");
+		console.log(`[MoqMsePlayer] ${trackType} init first 64 bytes:`, hexBytes);
+	}
+
+	/**
+	 * Split a combined init+media segment into separate parts.
+	 * The server sends ftyp + moov + moof + mdat combined.
+	 * We need ftyp + moov as init segment, and moof + mdat as media segment.
+	 */
+	private splitInitAndMedia(data: Uint8Array): { initSegment: Uint8Array | null; mediaSegment: Uint8Array | null } {
+		let offset = 0;
+		let initEnd = 0;
+		const dv = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+		// Find the end of init segment (after ftyp and moov boxes)
+		while (offset + 8 <= data.byteLength) {
+			const boxSize = dv.getUint32(offset);
+			const fourcc = String.fromCharCode(data[offset + 4], data[offset + 5], data[offset + 6], data[offset + 7]);
+
+			if (boxSize === 0 || boxSize < 8 || offset + boxSize > data.byteLength) {
+				break;
+			}
+
+			// ftyp and moov are part of init segment
+			if (fourcc === "ftyp" || fourcc === "moov") {
+				initEnd = offset + boxSize;
+				offset += boxSize;
+			} else {
+				// This is where media segment starts (moof, mdat, etc)
+				break;
+			}
+		}
+
+		const initSegment = initEnd > 0 ? data.slice(0, initEnd) : null;
+		const mediaSegment = offset < data.byteLength ? data.slice(offset) : null;
+
+		return { initSegment, mediaSegment };
+	}
+
+	private handleData(rawData: Uint8Array, trackType: "video" | "audio") {
+		// Strip the varint timestamp prefix that hang adds to each frame
+		const data = this.stripTimestampPrefix(rawData);
+
+		// Log first 8 bytes to see what we're getting
+		if (data.byteLength >= 8) {
+			const fourcc = String.fromCharCode(data[4], data[5], data[6], data[7]);
+			const size = new DataView(data.buffer, data.byteOffset, 4).getUint32(0);
+			console.log(
+				`[MoqMsePlayer] Received ${trackType} segment: fourcc='${fourcc}', size=${data.byteLength}, boxSize=${size}`,
+			);
+		}
+
+		// Check if this is an init segment
+		if (this.isInitSegment(data)) {
+			let processInit = true; // Flag to pass to split logic
+			if (trackType === "video") {
+				if (this.videoInitReceived) {
+					this.log(
+						`[MoqMsePlayer] Skipping duplicate video INIT segment: ${data.byteLength} bytes. Continuing to check for media...`,
+					);
+					processInit = false; // Mark init as handled/skipped so we don't re-append it
+				} else {
+					console.log(`[MoqMsePlayer] Received VIDEO INIT segment: ${data.byteLength} bytes`);
+					this.videoInitReceived = true;
+				}
+			} else {
+				if (this.audioInitReceived) {
+					this.log(
+						`[MoqMsePlayer] Skipping duplicate audio INIT segment: ${data.byteLength} bytes. Continuing to check for media...`,
+					);
+					processInit = false;
+				} else {
+					console.log(`[MoqMsePlayer] Received AUDIO INIT segment: ${data.byteLength} bytes`);
+					this.audioInitReceived = true;
+				}
+			}
+
+			// Debug: Parse and log all boxes in the init segment
+			this.logMp4Boxes(data, trackType);
+
+			// The server sends ftyp + moov + moof + mdat combined!
+			// We need to split this: only ftyp + moov should be the init segment
+			// The moof + mdat should be queued as the first media segment
+			const { initSegment, mediaSegment } = this.splitInitAndMedia(data);
+
+			if (initSegment && processInit) {
+				// Only process init if it wasn't marked as duplicate
+				console.log(
+					`[MoqMsePlayer] Extracted ${trackType} init segment (ftyp+moov): ${initSegment.byteLength} bytes`,
+				);
+				this.patchInitSegment(initSegment);
+				if (trackType === "video") this.videoQueue.push({ data: initSegment, trackType });
+				else this.audioQueue.push({ data: initSegment, trackType });
+			}
+
+			if (mediaSegment) {
+				console.log(
+					`[MoqMsePlayer] Extracted ${trackType} first media segment (moof+mdat): ${mediaSegment.byteLength} bytes`,
+				);
+				const timestamp = this.inspectMP4(mediaSegment, `${trackType} Media`);
+
+				// Capture first timestamp for sync calculation
+				if (trackType === "video" && this.firstVideoTimestamp === null && timestamp !== null) {
+					this.firstVideoTimestamp = timestamp;
+					console.log(`[Sync] First video timestamp: ${timestamp} (timescale: ${this.videoTimescale})`);
+				}
+				if (trackType === "audio" && this.firstAudioTimestamp === null && timestamp !== null) {
+					this.firstAudioTimestamp = timestamp;
+					console.log(`[Sync] First audio timestamp: ${timestamp} (timescale: ${this.audioTimescale})`);
+				}
+
+				if (trackType === "video") this.videoQueue.push({ data: mediaSegment, trackType });
+				else this.audioQueue.push({ data: mediaSegment, trackType });
+			}
+
+			if (trackType === "video") this.processVideoQueue();
+			else this.processAudioQueue();
+			return;
+		}
+
+		// Inspect regular media segments and capture timestamp for sync
+		const timestamp = this.inspectMP4(data, `${trackType} Media`);
+
+		// Capture first timestamp for sync calculation (for non-bundled segments)
+		if (trackType === "video" && this.firstVideoTimestamp === null && timestamp !== null) {
+			this.firstVideoTimestamp = timestamp;
+			console.log(`[Sync] First video timestamp: ${timestamp} (timescale: ${this.videoTimescale})`);
+		}
+		if (trackType === "audio" && this.firstAudioTimestamp === null && timestamp !== null) {
+			this.firstAudioTimestamp = timestamp;
+			console.log(`[Sync] First audio timestamp: ${timestamp} (timescale: ${this.audioTimescale})`);
+		}
+
+		// If we haven't received the init segment for this track type, drop its data
+		if (trackType === "video" && !this.videoInitReceived) {
+			this.log(`[MoqMsePlayer] Dropping video segment (waiting for video init)`);
+			return;
+		}
+		if (trackType === "audio" && !this.audioInitReceived) {
+			this.log(`[MoqMsePlayer] Dropping audio segment (waiting for audio init)`);
+			return;
+		}
+
+		// Safety check: if queue is too large, drop old data
+		if (this.videoQueue.length > 1000) {
+			console.warn("[MoqMsePlayer] Video queue too large, clearing.");
+			this.videoQueue = [];
+		}
+		if (this.audioQueue.length > 1000) {
+			console.warn("[MoqMsePlayer] Audio queue too large, clearing.");
+			this.audioQueue = [];
+		}
+
+		if (trackType === "video") {
+			// console.log(`[MoqMsePlayer] Enqueuing video segment. Queue size: ${this.videoQueue.length+1}`);
+			this.videoQueue.push({ data, trackType });
+			this.processVideoQueue();
+		} else {
+			this.audioQueue.push({ data, trackType });
+			this.processAudioQueue();
+		}
+	}
+
+	private async processVideoQueue() {
+		if (!this.videoSourceBuffer || !this.catalogReceived || !this.videoInitReceived) return;
+
+		if (this.isVideoProcessing) {
+			if (Date.now() - this.lastVideoProcessTime > 2000) {
+				console.warn("[MoqMsePlayer] Video process loop stuck, forcing reset.");
+				this.isVideoProcessing = false;
+			} else {
+				return;
+			}
+		}
+
+		this.isVideoProcessing = true;
+		this.lastVideoProcessTime = Date.now();
+
+		try {
+			while (this.videoQueue.length > 0) {
+				const targetBuffer = this.videoSourceBuffer;
+
+				// Wait if buffer is updating
+				if (targetBuffer.updating) {
+					await new Promise<void>((resolve) => {
+						const onEnd = () => {
+							targetBuffer.removeEventListener("updateend", onEnd);
+							resolve();
+						};
+						targetBuffer.addEventListener("updateend", onEnd);
+					});
+				}
+
+				if (this.videoQueue.length === 0) break;
+				const item = this.videoQueue[0];
+
+				try {
+					const start = performance.now();
+					await this.appendToBuffer(item.data, "video");
+					const duration = performance.now() - start;
+					if (duration > 50) {
+						console.warn(`[MoqMsePlayer] Slow video append: ${duration.toFixed(1)}ms`);
+					}
+					this.videoQueue.shift(); // remove only after success
+				} catch (e) {
+					const error = e as Error;
+					if (error.name === "QuotaExceededError") {
+						console.warn("[MoqMsePlayer] Video QuotaExceededError. Cleaning up.");
+						this.cleanupBuffer(true);
+						// Don't shift, retry next time
+						break;
+					} else {
+						console.error("[MoqMsePlayer] Error appending video:", error);
+						this.videoQueue.shift(); // Drop problematic segment
+					}
+				}
+			}
+		} catch (e) {
+			console.error("[MoqMsePlayer] Fatal error in processVideoQueue:", e);
+		} finally {
+			this.isVideoProcessing = false;
+			// this.log("[MoqMsePlayer] Exiting processVideoQueue");
+		}
+	}
+
+	private async processAudioQueue() {
+		if (!this.audioSourceBuffer || !this.catalogReceived || !this.audioInitReceived) return;
+
+		if (this.isAudioProcessing) {
+			if (Date.now() - this.lastAudioProcessTime > 2000) {
+				console.warn("[MoqMsePlayer] Audio process loop stuck, forcing reset.");
+				this.isAudioProcessing = false;
+			} else {
+				return;
+			}
+		}
+
+		this.isAudioProcessing = true;
+		this.lastAudioProcessTime = Date.now();
+
+		// SYNC GATE: Apply offset once when both first timestamps are available
+		if (!this.syncApplied && this.firstVideoTimestamp !== null && this.firstAudioTimestamp !== null) {
+			this.applySyncOffset();
+		}
+
+		try {
+			while (this.audioQueue.length > 0) {
+				const targetBuffer = this.audioSourceBuffer;
+
+				// Wait if buffer is updating
+				if (targetBuffer.updating) {
+					await new Promise<void>((resolve) => {
+						const onEnd = () => {
+							targetBuffer.removeEventListener("updateend", onEnd);
+							resolve();
+						};
+						targetBuffer.addEventListener("updateend", onEnd);
+					});
+				}
+
+				if (this.audioQueue.length === 0) break;
+				const item = this.audioQueue[0];
+
+				try {
+					await this.appendToBuffer(item.data, "audio");
+					this.audioQueue.shift(); // remove only after success
+				} catch (e) {
+					const error = e as Error;
+					if (error.name === "QuotaExceededError") {
+						console.warn("[MoqMsePlayer] Audio QuotaExceededError. Cleaning up.");
+						this.cleanupBuffer(true);
+						// Don't shift, retry next time
+						break;
+					} else {
+						console.error("[MoqMsePlayer] Error appending audio:", error);
+						this.audioQueue.shift(); // Drop problematic segment
+					}
+				}
+			}
+		} catch (e) {
+			console.error("[MoqMsePlayer] Fatal error in processAudioQueue:", e);
+		} finally {
+			this.isAudioProcessing = false;
+		}
+	}
+
+	/**
+	 * Calculate and apply the audio timestamp offset to synchronize with video.
+	 * This is called once when both first video and audio timestamps are available.
+	 */
+	private applySyncOffset() {
+		if (this.firstVideoTimestamp === null || this.firstAudioTimestamp === null) return;
+		if (this.syncApplied) return;
+		if (!this.audioSourceBuffer) return;
+
+		// Convert both to seconds using their respective timescales
+		const videoStartSec = this.firstVideoTimestamp / this.videoTimescale;
+		const audioStartSec = this.firstAudioTimestamp / this.audioTimescale;
+
+		// Calculate offset: we want audio to start when video starts
+		const offset = videoStartSec - audioStartSec;
+
+		console.log(
+			`[Sync] Video starts at ${videoStartSec.toFixed(3)}s (${this.firstVideoTimestamp}/${this.videoTimescale})`,
+		);
+		console.log(
+			`[Sync] Audio starts at ${audioStartSec.toFixed(3)}s (${this.firstAudioTimestamp}/${this.audioTimescale})`,
+		);
+		console.log(`[Sync] Calculated offset: ${offset.toFixed(3)}s (NOT applying - sequence mode starts both at 0)`);
+
+		// In sequence mode, both tracks start at 0 regardless of original media timestamps.
+		// Applying an offset would break sync by delaying one track.
+		// The real fix for audio/video timestamp mismatch is on the server/encoder side.
+		this.syncApplied = true;
+	}
+
+	private async appendToBuffer(data: Uint8Array, trackType: "video" | "audio"): Promise<void> {
+		return new Promise((resolve, reject) => {
+			const targetBuffer = trackType === "video" ? this.videoSourceBuffer : this.audioSourceBuffer;
+			if (!targetBuffer) {
+				reject(new Error(`No ${trackType} SourceBuffer`));
+				return;
+			}
+
+			// Check if MediaSource is still open
+			if (!this.mediaSource || this.mediaSource.readyState !== "open") {
+				reject(new Error(`MediaSource not open (state: ${this.mediaSource?.readyState})`));
+				return;
+			}
+
+			// Check if buffer is still updating
+			if (targetBuffer.updating) {
+				reject(new Error(`${trackType} SourceBuffer still updating`));
+				return;
+			}
+
+			const isInit = this.isInitSegment(data);
+			const isMedia = this.isMediaSegment(data);
+
+			if (isInit) {
+				console.log(`[MoqMsePlayer] Appending ${trackType} INIT segment, size:`, data.byteLength);
+			} else if (isMedia) {
+				this.log(`[MoqMsePlayer] Appending ${trackType} media segment, size:`, data.byteLength);
+			} else {
+				console.warn(
+					`[MoqMsePlayer] Unknown ${trackType} segment type, first bytes:`,
+					Array.from(data.slice(0, 16))
+						.map((b) => b.toString(16).padStart(2, "0"))
+						.join(" "),
+				);
+			}
+
+			try {
+				// Cast to BufferSource to handle TypeScript lib compatibility
+				targetBuffer.appendBuffer(data as unknown as BufferSource);
+			} catch (e: unknown) {
+				const error = e as Error;
+				console.error(`[MoqMsePlayer] ${trackType} appendBuffer failed:`, error.name, error.message);
+				reject(error);
+				return;
+			}
+
+			const onUpdateEnd = () => {
+				targetBuffer.removeEventListener("updateend", onUpdateEnd);
+
+				if (targetBuffer.buffered.length > 0) {
+					const start = targetBuffer.buffered.start(0);
+					const end = targetBuffer.buffered.end(targetBuffer.buffered.length - 1);
+					// Diagnostic log - log frequently for now to debug "only 1 segment" issue
+					console.log(
+						`[MoqMsePlayer] ${trackType} UpdateEnd. Range: ${start.toFixed(3)}-${end.toFixed(3)} (Ranges: ${targetBuffer.buffered.length})`,
+					);
+				}
+				resolve();
+			};
+
+			targetBuffer.addEventListener("updateend", onUpdateEnd);
+		});
+	}
+
+	private cleanupBuffer(aggressive = false) {
+		const currentTime = this.video.currentTime;
+		const keepDuration = aggressive ? 5 : 60;
+
+		// Cleanup both buffers
+		for (const buffer of [this.videoSourceBuffer, this.audioSourceBuffer]) {
+			if (!buffer || buffer.updating) continue;
+
+			const buffered = buffer.buffered;
+			for (let i = 0; i < buffered.length; i++) {
+				const start = buffered.start(i);
+				const end = buffered.end(i);
+
+				if (end < currentTime - keepDuration) {
+					this.log(`[MoqMsePlayer] Cleaning up buffer: ${start.toFixed(2)}-${end.toFixed(2)}`);
+					buffer.remove(start, end);
+					return;
+				} else if (start < currentTime - keepDuration) {
+					this.log(
+						`[MoqMsePlayer] Cleaning up buffer: ${start.toFixed(2)}-${(currentTime - keepDuration).toFixed(2)}`,
+					);
+					buffer.remove(start, currentTime - keepDuration);
+					return;
+				}
+			}
+		}
+	}
+
+	private checkLiveEdge() {
+		if (!this.videoSourceBuffer) return;
+		try {
+			const buffered = this.videoSourceBuffer?.buffered;
+			if (!buffered || buffered.length === 0) {
+				// this.log(`[MoqMsePlayer] Buffer empty. Time: ${this.video.currentTime.toFixed(2)}`);
+				return;
+			}
+
+			// Log fragmentation if > 1 range
+			if (buffered.length > 1) {
+				const ranges = [];
+				for (let i = 0; i < buffered.length; i++)
+					ranges.push(`${buffered.start(i).toFixed(3)}-${buffered.end(i).toFixed(3)}`);
+				console.warn(`[MoqMsePlayer] Fragmented Buffer: ${ranges.join(", ")}`);
+			}
+
+			const bufferedEnd = buffered.end(buffered.length - 1);
+			const bufferedStart = buffered.start(0);
+			const currentTime = this.video.currentTime;
+			const paused = this.video.paused;
+
+			if (paused) {
+				if (this.userPaused) return;
+
+				const bufferDuration = bufferedEnd - bufferedStart;
+				this.log(
+					`[MoqMsePlayer] Paused. Buffer: ${bufferDuration.toFixed(2)}s (${bufferedStart.toFixed(2)}-${bufferedEnd.toFixed(2)})`,
+				);
+
+				// Check if we need to start playing
+				// If we are way behind the buffer start (e.g. at 0 while buffer is at 500), seek immediately
+				const isOutOfSync = currentTime < bufferedStart - 0.5;
+
+				// console.log(`[MoqMsePlayer] Autoplay Check: autoplay=${this.video.autoplay}, bufferDuration=${bufferDuration.toFixed(3)}, isOutOfSync=${isOutOfSync}, currentTime=${currentTime.toFixed(3)}, bufferedStart=${bufferedStart.toFixed(3)}`);
+
+				// Relaxed condition: If out of sync, try to recover even if buffer is tiny (it might grow)
+				if (this.video.autoplay && (bufferDuration > 0.1 || isOutOfSync)) {
+					// Seek to live edge before playing
+					if (currentTime < bufferedStart || currentTime > bufferedEnd) {
+						const targetTime = Math.max(bufferedStart, bufferedEnd - 1.0);
+						console.log(
+							`[MoqMsePlayer] Seeking to live edge: ${targetTime.toFixed(2)}s (was at ${currentTime.toFixed(2)}s) range=${bufferedStart.toFixed(2)}-${bufferedEnd.toFixed(2)}`,
+						);
+						this.video.currentTime = targetTime;
+					}
+					this.log("[MoqMsePlayer] Attempting autoplay...");
+					this.video.play().catch((e) => console.error("[MoqMsePlayer] Autoplay failed:", e));
+				}
+				return;
+			}
+
+			// HLS.js-style Live Sync
+			const targetLatency = 2.0;
+			const latency = bufferedEnd - currentTime;
+
+			// Hard Seek if too far behind
+			const isOutOfSync = currentTime < bufferedStart - 0.5;
+			if (latency > 5.0 || isOutOfSync) {
+				// Ensure we don't seek before the actual buffer start
+				const safeTarget = Math.max(bufferedStart, bufferedEnd - targetLatency);
+
+				this.log(
+					`[MoqMsePlayer] Sync adjustment: latency=${latency.toFixed(2)}s, outOfSync=${isOutOfSync}, seeking to ${safeTarget.toFixed(2)}s coverage=${bufferedStart.toFixed(2)}-${bufferedEnd.toFixed(2)}`,
+				);
+
+				if (Math.abs(currentTime - safeTarget) > 0.5) {
+					this.video.currentTime = safeTarget;
+				}
+				return;
+			}
+
+			// Catch-up via Playback Rate
+			if (latency > 3.0) {
+				if (this.video.playbackRate !== 1.1) {
+					this.log(`[MoqMsePlayer] Catching up (latency ${latency.toFixed(2)}s), rate -> 1.1x`);
+					this.video.playbackRate = 1.1;
+				}
+			} else if (latency < 2.0 && latency > -0.5) {
+				if (this.video.playbackRate !== 1.0) {
+					this.log(`[MoqMsePlayer] Latency good (${latency.toFixed(2)}s), rate -> 1.0x`);
+					this.video.playbackRate = 1.0;
+				}
+			} else if (latency <= -0.5) {
+				const targetPos = Math.max(0, bufferedEnd - 0.1);
+				this.log(
+					`[MoqMsePlayer] Ahead of buffer (${latency.toFixed(2)}s), seeking to ${targetPos.toFixed(2)}s`,
+				);
+				this.video.pause();
+				this.video.currentTime = targetPos;
+			}
+
+			// Update Debug Overlay
+			if (this.hasAttribute("debug")) {
+				this.updateDebugOverlay(latency, bufferedStart, bufferedEnd);
+			}
+
+			// Regular buffer cleanup
+			this.cleanupBuffer();
+		} catch (_e) {
+			// console.error("[MoqMsePlayer] checkLiveEdge error:", e);
+		}
+	}
+
+	private updateDebugOverlay(latency: number, bufferedStart: number, bufferedEnd: number) {
+		try {
+			let debugEl = this.shadowRoot?.querySelector(".debug-overlay") as HTMLDivElement | null;
+			if (!debugEl) {
+				debugEl = document.createElement("div");
+				debugEl.className = "debug-overlay";
+				this.shadowRoot?.appendChild(debugEl);
+			}
+
+			const quality = this.video.getVideoPlaybackQuality?.() ?? null;
+			const dropped = quality?.droppedVideoFrames ?? 0;
+			const total = quality?.totalVideoFrames ?? 0;
+			const vRanges = this.videoSourceBuffer?.buffered.length ?? 0;
+			const aRanges = this.audioSourceBuffer?.buffered.length ?? 0;
+			const vQ = this.videoQueue.length;
+			const aQ = this.audioQueue.length;
+
+			debugEl.innerHTML = `
         <div>Latency: ${latency.toFixed(3)}s</div>
         <div>Buffer: ${bufferedStart.toFixed(2)} - ${bufferedEnd.toFixed(2)}s (${(bufferedEnd - bufferedStart).toFixed(2)}s)</div>
         <div>Ranges: V=${vRanges} A=${aRanges}</div>
@@ -971,281 +1019,308 @@ export class MoqMsePlayer extends HTMLElement {
         <div>Ready: ${this.video.readyState} | Net: ${this.video.networkState}</div>
         <div>Dropped: ${dropped} / ${total}</div>
         `;
-    } catch (e) {
-        console.error("Debug overlay error:", e);
-    }
-  }
-
-  // --- MP4 Patching for Missing Durations ---
-
-  private patchInitSegment(data: Uint8Array) {
-    try {
-      this.log(`[MP4 Patch] Scanning Init Segment (${data.byteLength} bytes)...`);
-      const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
-
-      // Step 1: Map Track IDs to Types and Timescales
-      const tracks = new Map<number, { type: string, timescale: number }>();
-
-      // Find MOOV
-      const moov = this.findBox(view, 0, 'moov');
-      if (!moov) {
-         this.log("[MP4 Patch] No moov box found!");
-         return;
-      }
-
-      // Iterate MOOV children to find TRAKs
-      let offset = moov.start + 8;
-      while (offset < moov.end) {
-        const box = this.readBoxHeader(view, offset);
-        if (box.size === 0) break;
-
-        if (box.type === 'trak') {
-            const info = this.parseTrak(view, box.start, box.end);
-            if (info) {
-                tracks.set(info.id, info);
-                this.log(`[MP4 Patch] Found Track ID=${info.id} Type=${info.type} Timescale=${info.timescale}`);
-                // Store timescales for sync calculation
-                if (info.type === 'vide') this.videoTimescale = info.timescale;
-                if (info.type === 'soun') this.audioTimescale = info.timescale;
-            }
-        }
-        offset += box.size;
-      }
-
-      // Step 2: Update TREX boxes in MVEX
-      const mvex = this.findBox(view, moov.start + 8, 'mvex', moov.end);
-      if (mvex) {
-          let inner = mvex.start + 8;
-          while (inner < mvex.end) {
-              const box = this.readBoxHeader(view, inner);
-              if (box.type === 'trex') {
-                  this.updateTrex(view, inner, tracks);
-              }
-              inner += box.size;
-          }
-      }
-
-    } catch (e) {
-      console.error("[MoqMsePlayer] Error patching init segment:", e);
-    }
-  }
-
-  private findBox(view: DataView, start: number, type: string, max: number = -1): { start: number, end: number, size: number } | null {
-      let offset = start;
-      const limit = max > 0 ? max : view.byteLength;
-      while (offset + 8 <= limit) {
-          const size = view.getUint32(offset);
-          const name = String.fromCharCode(view.getUint8(offset+4), view.getUint8(offset+5), view.getUint8(offset+6), view.getUint8(offset+7));
-          if (name === type) {
-              return { start: offset, end: offset + size, size };
-          }
-          if (size <= 0 || offset + size > limit) break; // Invalid
-
-          // Container boxes to recurse? No, simple linear scan for now, caller handles hierarchy
-          // If we receive a max, we assume we are scanning siblings
-          offset += size;
-      }
-      return null;
-  }
-
-  private readBoxHeader(view: DataView, offset: number) {
-      const size = view.getUint32(offset);
-      const type = String.fromCharCode(view.getUint8(offset+4), view.getUint8(offset+5), view.getUint8(offset+6), view.getUint8(offset+7));
-      return { size, type, start: offset, end: offset + size };
-  }
-
-  private parseTrak(view: DataView, start: number, end: number): { id: number, type: string, timescale: number } | null {
-      let id = 0;
-      let type = 'unknown';
-      let timescale = 0;
-
-      // Scan children: tkhd, mdia
-      let offset = start + 8;
-
-      // Find TKHD
-      const tkhd = this.findBox(view, offset, 'tkhd', end);
-      if (tkhd) {
-          const version = view.getUint8(tkhd.start + 8);
-          // Version(1)+Flags(3) = 4.
-          // Creation(4/8) + Mod(4/8)
-          let ptr = tkhd.start + 12;
-          if (version === 1) ptr += 16; else ptr += 8;
-          id = view.getUint32(ptr);
-      }
-
-      // Find MDIA
-      const mdia = this.findBox(view, offset, 'mdia', end);
-      if (mdia) {
-          // Find MDHD inside MDIA
-          const mdhd = this.findBox(view, mdia.start + 8, 'mdhd', mdia.end);
-          if (mdhd) {
-              const version = view.getUint8(mdhd.start + 8);
-              let ptr = mdhd.start + 12;
-              if (version === 1) ptr += 16; else ptr += 8; // Skip stamps
-              timescale = view.getUint32(ptr);
-          }
-          // Find HDLR inside MDIA
-          const hdlr = this.findBox(view, mdia.start + 8, 'hdlr', mdia.end);
-          if (hdlr) {
-             // Ver(4), Pre(4), Type(4)
-             const typeOffset = hdlr.start + 16;
-             type = String.fromCharCode(view.getUint8(typeOffset), view.getUint8(typeOffset+1), view.getUint8(typeOffset+2), view.getUint8(typeOffset+3));
-          }
-      }
-
-      if (id && timescale) return { id, type, timescale };
-      return null;
-  }
-
-  private updateTrex(view: DataView, offset: number, tracks: Map<number, { type: string, timescale: number }>) {
-      // trek: Size(4), Type(4), VerFlags(4), TrackID(4), DefDescIdx(4), DefDur(4)...
-      const trackId = view.getUint32(offset + 12);
-      const info = tracks.get(trackId);
-
-      const currentDuration = view.getUint32(offset + 20);
-
-      if (info && currentDuration === 0) {
-          let newDuration = 0;
-          if (info.type === 'vide') {
-              // Assume 30fps if unknown
-              newDuration = Math.floor(info.timescale / 30);
-          } else if (info.type === 'soun') {
-              // AAC default is 1024 samples
-              newDuration = 1024;
-          }
-
-          if (newDuration > 0) {
-              this.log(`[MP4 Patch] Overwriting TREX duration for Track ${trackId} (${info.type}). Old=${currentDuration}, New=${newDuration}`);
-              view.setUint32(offset + 20, newDuration); // Big Endian default
-          }
-      } else {
-          // this.log(`[MP4 Patch] TREX Track ${trackId} has duration ${currentDuration} (Type: ${info?.type})`);
-      }
-  }
-
-  // Debug: Inspect MP4 atoms to find timescale/duration issues
-  private inspectLogCount = 0;
-
-  private inspectMP4(data: Uint8Array, label: string): number | null {
-    // Rate limit logging, but ALWAYS parse audio if we need its first timestamp for sync
-    const isAudio = label.includes("audio");
-    const needAudioTimestamp = isAudio && this.firstAudioTimestamp === null;
-
-    if (this.inspectLogCount > 10 && label.includes("Media") && !label.includes("video") && !needAudioTimestamp) {
-      return null; // Limit spam, but allow video and first audio timestamp capture
-    }
-    if (label.includes("Media")) this.inspectLogCount++;
-
-    let foundTimestamp: number | null = null;
-
-    try {
-      let offset = 0;
-      const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
-
-      this.log(`[MP4 Debug] Inspecting ${label} (${data.byteLength} bytes)`);
-
-      let iter = 0;
-      while (offset < data.byteLength && iter < 50) {
-        iter++;
-        if (offset + 8 > data.byteLength) break;
-        const size = view.getUint32(offset);
-        const type = String.fromCharCode(
-          view.getUint8(offset + 4),
-          view.getUint8(offset + 5),
-          view.getUint8(offset + 6),
-          view.getUint8(offset + 7)
-        );
-
-        const boxSize = size === 0 ? data.byteLength - offset : size;
-        this.log(`  Box: ${type}, Size: ${boxSize} (Offset: ${offset})`);
-
-        if (type === 'mdhd') {
-           this.parseMdhd(view, offset + 8);
-        }
-        if (type === 'trun') {
-           this.parseTrun(view, offset + 8);
-        }
-        if (type === 'tfdt') {
-            foundTimestamp = this.parseTfdt(view, offset + 8);
-        }
-
-        if (['moov', 'trak', 'mdia', 'minf', 'stbl', 'mvex', 'moof', 'traf'].includes(type)) {
-            offset += 8; // Enter container
-        } else {
-            offset += boxSize; // Skip leaf
-        }
-      }
-    } catch (e) {
-      this.log(`[MP4 Debug] Error inspecting: ${e}`);
-    }
-
-    return foundTimestamp;
-  }
-
-  private parseTfdt(view: DataView, offset: number): number {
-      // Version(1), Flags(3), BaseMediaDecodeTime(4 or 8)
-      const version = view.getUint8(offset);
-      let baseMediaDecodeTime = 0;
-      if (version === 1) {
-          // 64-bit: high 32, low 32. JS only supports reading 32 safely or BigInt.
-          // Let's assume high 32 is 0 or use BigInt if possible, but logging simple number
-          const high = view.getUint32(offset + 4);
-          const low = view.getUint32(offset + 8);
-          // If high is > 0 this might be inaccurate as number, but fine for debug logs usually
-          baseMediaDecodeTime = high * 4294967296 + low;
-           this.log(`    [tfdt] BaseMediaDecodeTime (64-bit): ${baseMediaDecodeTime}`);
-      } else {
-          baseMediaDecodeTime = view.getUint32(offset + 4);
-           this.log(`    [tfdt] BaseMediaDecodeTime (32-bit): ${baseMediaDecodeTime}`);
-      }
-      return baseMediaDecodeTime;
-  }
-
-  private parseMdhd(view: DataView, offset: number) {
-      if (offset + 24 > view.byteLength) return;
-      const version = view.getUint8(offset);
-      let ptr = offset + 4;
-      if (version === 1) {
-          ptr += 16;
-      } else {
-          ptr += 8;
-      }
-      if (ptr + 4 <= view.byteLength) {
-        const timescale = view.getUint32(ptr);
-        this.log(`    [mdhd] Version: ${version}, Timescale: ${timescale}`);
-      }
-  }
-
-  private parseTrun(view: DataView, offset: number) {
-      if (offset + 12 > view.byteLength) return;
-      const fullFlags = view.getUint32(offset);
-      const flags = fullFlags & 0xFFFFFF;
-      const sampleCount = view.getUint32(offset + 4);
-
-      const durationPresent = (flags & 0x100) !== 0;
-
-      this.log(`    [trun] SampleCount: ${sampleCount}, DurationPresent: ${durationPresent}`);
-
-      if (durationPresent && sampleCount > 0) {
-          let ptr = offset + 8;
-          if (flags & 0x01) ptr += 4;
-          if (flags & 0x04) ptr += 4;
-
-          if (ptr + 4 <= view.byteLength) {
-            const firstDuration = view.getUint32(ptr);
-            this.log(`    [trun] First Sample Duration: ${firstDuration}`);
-          }
-      } else {
-        this.log(`    [trun] No duration present in samples.`);
-      }
-  }
+		} catch (e) {
+			console.error("Debug overlay error:", e);
+		}
+	}
+
+	// --- MP4 Patching for Missing Durations ---
+
+	private patchInitSegment(data: Uint8Array) {
+		try {
+			this.log(`[MP4 Patch] Scanning Init Segment (${data.byteLength} bytes)...`);
+			const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+			// Step 1: Map Track IDs to Types and Timescales
+			const tracks = new Map<number, { type: string; timescale: number }>();
+
+			// Find MOOV
+			const moov = this.findBox(view, 0, "moov");
+			if (!moov) {
+				this.log("[MP4 Patch] No moov box found!");
+				return;
+			}
+
+			// Iterate MOOV children to find TRAKs
+			let offset = moov.start + 8;
+			while (offset < moov.end) {
+				const box = this.readBoxHeader(view, offset);
+				if (box.size === 0) break;
+
+				if (box.type === "trak") {
+					const info = this.parseTrak(view, box.start, box.end);
+					if (info) {
+						tracks.set(info.id, info);
+						this.log(`[MP4 Patch] Found Track ID=${info.id} Type=${info.type} Timescale=${info.timescale}`);
+						// Store timescales for sync calculation
+						if (info.type === "vide") this.videoTimescale = info.timescale;
+						if (info.type === "soun") this.audioTimescale = info.timescale;
+					}
+				}
+				offset += box.size;
+			}
+
+			// Step 2: Update TREX boxes in MVEX
+			const mvex = this.findBox(view, moov.start + 8, "mvex", moov.end);
+			if (mvex) {
+				let inner = mvex.start + 8;
+				while (inner < mvex.end) {
+					const box = this.readBoxHeader(view, inner);
+					if (box.type === "trex") {
+						this.updateTrex(view, inner, tracks);
+					}
+					inner += box.size;
+				}
+			}
+		} catch (e) {
+			console.error("[MoqMsePlayer] Error patching init segment:", e);
+		}
+	}
+
+	private findBox(
+		view: DataView,
+		start: number,
+		type: string,
+		max: number = -1,
+	): { start: number; end: number; size: number } | null {
+		let offset = start;
+		const limit = max > 0 ? max : view.byteLength;
+		while (offset + 8 <= limit) {
+			const size = view.getUint32(offset);
+			const name = String.fromCharCode(
+				view.getUint8(offset + 4),
+				view.getUint8(offset + 5),
+				view.getUint8(offset + 6),
+				view.getUint8(offset + 7),
+			);
+			if (name === type) {
+				return { start: offset, end: offset + size, size };
+			}
+			if (size <= 0 || offset + size > limit) break; // Invalid
+
+			// Container boxes to recurse? No, simple linear scan for now, caller handles hierarchy
+			// If we receive a max, we assume we are scanning siblings
+			offset += size;
+		}
+		return null;
+	}
+
+	private readBoxHeader(view: DataView, offset: number) {
+		const size = view.getUint32(offset);
+		const type = String.fromCharCode(
+			view.getUint8(offset + 4),
+			view.getUint8(offset + 5),
+			view.getUint8(offset + 6),
+			view.getUint8(offset + 7),
+		);
+		return { size, type, start: offset, end: offset + size };
+	}
+
+	private parseTrak(
+		view: DataView,
+		start: number,
+		end: number,
+	): { id: number; type: string; timescale: number } | null {
+		let id = 0;
+		let type = "unknown";
+		let timescale = 0;
+
+		// Scan children: tkhd, mdia
+		const offset = start + 8;
+
+		// Find TKHD
+		const tkhd = this.findBox(view, offset, "tkhd", end);
+		if (tkhd) {
+			const version = view.getUint8(tkhd.start + 8);
+			// Version(1)+Flags(3) = 4.
+			// Creation(4/8) + Mod(4/8)
+			let ptr = tkhd.start + 12;
+			if (version === 1) ptr += 16;
+			else ptr += 8;
+			id = view.getUint32(ptr);
+		}
+
+		// Find MDIA
+		const mdia = this.findBox(view, offset, "mdia", end);
+		if (mdia) {
+			// Find MDHD inside MDIA
+			const mdhd = this.findBox(view, mdia.start + 8, "mdhd", mdia.end);
+			if (mdhd) {
+				const version = view.getUint8(mdhd.start + 8);
+				let ptr = mdhd.start + 12;
+				if (version === 1) ptr += 16;
+				else ptr += 8; // Skip stamps
+				timescale = view.getUint32(ptr);
+			}
+			// Find HDLR inside MDIA
+			const hdlr = this.findBox(view, mdia.start + 8, "hdlr", mdia.end);
+			if (hdlr) {
+				// Ver(4), Pre(4), Type(4)
+				const typeOffset = hdlr.start + 16;
+				type = String.fromCharCode(
+					view.getUint8(typeOffset),
+					view.getUint8(typeOffset + 1),
+					view.getUint8(typeOffset + 2),
+					view.getUint8(typeOffset + 3),
+				);
+			}
+		}
+
+		if (id && timescale) return { id, type, timescale };
+		return null;
+	}
+
+	private updateTrex(view: DataView, offset: number, tracks: Map<number, { type: string; timescale: number }>) {
+		// trek: Size(4), Type(4), VerFlags(4), TrackID(4), DefDescIdx(4), DefDur(4)...
+		const trackId = view.getUint32(offset + 12);
+		const info = tracks.get(trackId);
+
+		const currentDuration = view.getUint32(offset + 20);
+
+		if (info && currentDuration === 0) {
+			let newDuration = 0;
+			if (info.type === "vide") {
+				// Assume 30fps if unknown
+				newDuration = Math.floor(info.timescale / 30);
+			} else if (info.type === "soun") {
+				// AAC default is 1024 samples
+				newDuration = 1024;
+			}
+
+			if (newDuration > 0) {
+				this.log(
+					`[MP4 Patch] Overwriting TREX duration for Track ${trackId} (${info.type}). Old=${currentDuration}, New=${newDuration}`,
+				);
+				view.setUint32(offset + 20, newDuration); // Big Endian default
+			}
+		} else {
+			// this.log(`[MP4 Patch] TREX Track ${trackId} has duration ${currentDuration} (Type: ${info?.type})`);
+		}
+	}
+
+	// Debug: Inspect MP4 atoms to find timescale/duration issues
+	private inspectLogCount = 0;
+
+	private inspectMP4(data: Uint8Array, label: string): number | null {
+		// Rate limit logging, but ALWAYS parse audio if we need its first timestamp for sync
+		const isAudio = label.includes("audio");
+		const needAudioTimestamp = isAudio && this.firstAudioTimestamp === null;
+
+		if (this.inspectLogCount > 10 && label.includes("Media") && !label.includes("video") && !needAudioTimestamp) {
+			return null; // Limit spam, but allow video and first audio timestamp capture
+		}
+		if (label.includes("Media")) this.inspectLogCount++;
+
+		let foundTimestamp: number | null = null;
+
+		try {
+			let offset = 0;
+			const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+			this.log(`[MP4 Debug] Inspecting ${label} (${data.byteLength} bytes)`);
+
+			let iter = 0;
+			while (offset < data.byteLength && iter < 50) {
+				iter++;
+				if (offset + 8 > data.byteLength) break;
+				const size = view.getUint32(offset);
+				const type = String.fromCharCode(
+					view.getUint8(offset + 4),
+					view.getUint8(offset + 5),
+					view.getUint8(offset + 6),
+					view.getUint8(offset + 7),
+				);
+
+				const boxSize = size === 0 ? data.byteLength - offset : size;
+				this.log(`  Box: ${type}, Size: ${boxSize} (Offset: ${offset})`);
+
+				if (type === "mdhd") {
+					this.parseMdhd(view, offset + 8);
+				}
+				if (type === "trun") {
+					this.parseTrun(view, offset + 8);
+				}
+				if (type === "tfdt") {
+					foundTimestamp = this.parseTfdt(view, offset + 8);
+				}
+
+				if (["moov", "trak", "mdia", "minf", "stbl", "mvex", "moof", "traf"].includes(type)) {
+					offset += 8; // Enter container
+				} else {
+					offset += boxSize; // Skip leaf
+				}
+			}
+		} catch (e) {
+			this.log(`[MP4 Debug] Error inspecting: ${e}`);
+		}
+
+		return foundTimestamp;
+	}
+
+	private parseTfdt(view: DataView, offset: number): number {
+		// Version(1), Flags(3), BaseMediaDecodeTime(4 or 8)
+		const version = view.getUint8(offset);
+		let baseMediaDecodeTime = 0;
+		if (version === 1) {
+			// 64-bit: high 32, low 32. JS only supports reading 32 safely or BigInt.
+			// Let's assume high 32 is 0 or use BigInt if possible, but logging simple number
+			const high = view.getUint32(offset + 4);
+			const low = view.getUint32(offset + 8);
+			// If high is > 0 this might be inaccurate as number, but fine for debug logs usually
+			baseMediaDecodeTime = high * 4294967296 + low;
+			this.log(`    [tfdt] BaseMediaDecodeTime (64-bit): ${baseMediaDecodeTime}`);
+		} else {
+			baseMediaDecodeTime = view.getUint32(offset + 4);
+			this.log(`    [tfdt] BaseMediaDecodeTime (32-bit): ${baseMediaDecodeTime}`);
+		}
+		return baseMediaDecodeTime;
+	}
+
+	private parseMdhd(view: DataView, offset: number) {
+		if (offset + 24 > view.byteLength) return;
+		const version = view.getUint8(offset);
+		let ptr = offset + 4;
+		if (version === 1) {
+			ptr += 16;
+		} else {
+			ptr += 8;
+		}
+		if (ptr + 4 <= view.byteLength) {
+			const timescale = view.getUint32(ptr);
+			this.log(`    [mdhd] Version: ${version}, Timescale: ${timescale}`);
+		}
+	}
+
+	private parseTrun(view: DataView, offset: number) {
+		if (offset + 12 > view.byteLength) return;
+		const fullFlags = view.getUint32(offset);
+		const flags = fullFlags & 0xffffff;
+		const sampleCount = view.getUint32(offset + 4);
+
+		const durationPresent = (flags & 0x100) !== 0;
+
+		this.log(`    [trun] SampleCount: ${sampleCount}, DurationPresent: ${durationPresent}`);
+
+		if (durationPresent && sampleCount > 0) {
+			let ptr = offset + 8;
+			if (flags & 0x01) ptr += 4;
+			if (flags & 0x04) ptr += 4;
+
+			if (ptr + 4 <= view.byteLength) {
+				const firstDuration = view.getUint32(ptr);
+				this.log(`    [trun] First Sample Duration: ${firstDuration}`);
+			}
+		} else {
+			this.log(`    [trun] No duration present in samples.`);
+		}
+	}
 }
 
 // Register the custom element
 customElements.define("moq-mse-player", MoqMsePlayer);
 
 declare global {
-  interface HTMLElementTagNameMap {
-    "moq-mse-player": MoqMsePlayer;
-  }
+	interface HTMLElementTagNameMap {
+		"moq-mse-player": MoqMsePlayer;
+	}
 }

From d1effc82f6a797eddfdaa6e567cb94af63a6732c Mon Sep 17 00:00:00 2001
From: David <wdavid12@gmail.com>
Date: Mon, 22 Dec 2025 19:07:17 -0500
Subject: [PATCH 5/5] just fix

---
 rs/hang/src/import/fmp4.rs | 49 ++++++++++++++++++++++----------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/rs/hang/src/import/fmp4.rs b/rs/hang/src/import/fmp4.rs
index 205d6680a..87e23aaf8 100644
--- a/rs/hang/src/import/fmp4.rs
+++ b/rs/hang/src/import/fmp4.rs
@@ -769,7 +769,11 @@ impl Fmp4 {
 				// data_offset is relative to the start of the moof
 				let data_offset_usize: usize = data_offset.try_into().context("invalid data offset")?;
 				if data_offset_usize < self.moof_size {
-					anyhow::bail!("invalid data offset: {} < moof_size {}", data_offset_usize, self.moof_size);
+					anyhow::bail!(
+						"invalid data offset: {} < moof_size {}",
+						data_offset_usize,
+						self.moof_size
+					);
 				}
 				// Calculate offset into mdat (moof_size is subtracted, and we also need to
 				// account for the 8-byte mdat header that was stripped when parsing)
@@ -782,12 +786,7 @@ impl Fmp4 {
 					.unwrap_or(traf.tfhd.default_sample_size.unwrap_or(default_sample_size)) as usize;
 
 				if offset + size > global_mdat.len() {
-					anyhow::bail!(
-						"invalid sample offset: {} + {} > {}",
-						offset,
-						size,
-						global_mdat.len()
-					);
+					anyhow::bail!("invalid sample offset: {} + {} > {}", offset, size, global_mdat.len());
 				}
 
 				track_mdat_data.extend_from_slice(&global_mdat[offset..offset + size]);
@@ -861,16 +860,14 @@ impl Drop for Fmp4 {
 #[cfg(test)]
 mod tests {
 	use super::*;
-	use mp4_atom::{Mfhd, Traf, Tfhd, Tfdt, Trun, TrunEntry};
+	use mp4_atom::{Mfhd, Tfdt, Tfhd, Traf, Trun, TrunEntry};
 
 	/// Test that build_per_track_segment creates a moof with only one traf
 	/// and an mdat containing only that track's samples.
 	#[test]
 	fn test_per_track_moof_mdat_extraction() {
 		// Create a mock mfhd (movie fragment header)
-		let mfhd = Mfhd {
-			sequence_number: 1,
-		};
+		let mfhd = Mfhd { sequence_number: 1 };
 
 		// Create sample data that would be in the global mdat
 		// Track 1 samples: [0x11, 0x12, 0x13] (3 bytes) + [0x14, 0x15] (2 bytes) = 5 bytes
@@ -909,13 +906,13 @@ mod tests {
 				entries: vec![
 					TrunEntry {
 						duration: Some(1024),
-						size: Some(3), // 3 bytes
+						size: Some(3),           // 3 bytes
 						flags: Some(0x02000000), // keyframe
 						cts: Some(0),
 					},
 					TrunEntry {
 						duration: Some(1024),
-						size: Some(2), // 2 bytes
+						size: Some(2),           // 2 bytes
 						flags: Some(0x01010000), // non-keyframe
 						cts: Some(0),
 					},
@@ -942,7 +939,7 @@ mod tests {
 				data_offset: Some((mock_moof_size + mdat_header_size + 5) as i32),
 				entries: vec![TrunEntry {
 					duration: Some(1024),
-					size: Some(4), // 4 bytes
+					size: Some(4),           // 4 bytes
 					flags: Some(0x02000000), // keyframe
 					cts: Some(0),
 				}],
@@ -951,11 +948,14 @@ mod tests {
 		};
 
 		// Test extracting track 1
-		let (moof_bytes, mdat_bytes) =
-			build_per_track_segment_standalone(&mfhd, &traf1, &global_mdat, mock_moof_size);
+		let (moof_bytes, mdat_bytes) = build_per_track_segment_standalone(&mfhd, &traf1, &global_mdat, mock_moof_size);
 
 		// Verify mdat contains only track 1 samples (5 bytes + 8 byte header)
-		assert_eq!(mdat_bytes.len(), 8 + 5, "Track 1 mdat should be 13 bytes (8 header + 5 data)");
+		assert_eq!(
+			mdat_bytes.len(),
+			8 + 5,
+			"Track 1 mdat should be 13 bytes (8 header + 5 data)"
+		);
 
 		// Verify mdat header
 		let mdat_size = u32::from_be_bytes([mdat_bytes[0], mdat_bytes[1], mdat_bytes[2], mdat_bytes[3]]);
@@ -976,7 +976,11 @@ mod tests {
 			build_per_track_segment_standalone(&mfhd, &traf2, &global_mdat, mock_moof_size);
 
 		// Verify mdat contains only track 2 samples (4 bytes + 8 byte header)
-		assert_eq!(mdat_bytes2.len(), 8 + 4, "Track 2 mdat should be 12 bytes (8 header + 4 data)");
+		assert_eq!(
+			mdat_bytes2.len(),
+			8 + 4,
+			"Track 2 mdat should be 12 bytes (8 header + 4 data)"
+		);
 
 		// Verify mdat data content
 		assert_eq!(&mdat_bytes2[8..12], &[0x21, 0x22, 0x23, 0x24], "Track 2 sample data");
@@ -1023,8 +1027,7 @@ mod tests {
 			..Default::default()
 		};
 
-		let (moof_bytes, mdat_bytes) =
-			build_per_track_segment_standalone(&mfhd, &traf, &global_mdat, mock_moof_size);
+		let (moof_bytes, mdat_bytes) = build_per_track_segment_standalone(&mfhd, &traf, &global_mdat, mock_moof_size);
 
 		// Decode the moof to check the data_offset
 		let decoded_moof = decode_moof(&moof_bytes);
@@ -1040,7 +1043,11 @@ mod tests {
 
 		// Verify that reading at that offset gives us the sample data
 		let actual_offset = expected_data_offset as usize - new_moof_size;
-		assert_eq!(&mdat_bytes[actual_offset..actual_offset + 10], &sample_data[..], "Data at offset should match sample");
+		assert_eq!(
+			&mdat_bytes[actual_offset..actual_offset + 10],
+			&sample_data[..],
+			"Data at offset should match sample"
+		);
 	}
 
 	/// Standalone version of build_per_track_segment for testing without Fmp4 instance