Miscellaneous fixes (#1291)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: kixelated

cdn/relay/flake.lock

@@ -153,15 +153,11 @@ export class Reload {
 
 		effect.cleanup(() => this.#announced.set(new Set()));
 
-		// Warn if the relay doesn't support announcements (e.g. Cloudflare)
+		// Cloudflare's relay does not yet support SUBSCRIBE_NAMESPACE, so
+		// skip announce subscriptions entirely for those hosts.
 		if (conn.url.hostname.endsWith("mediaoverquic.com")) {
-			effect.timer(() => {
-				if (this.#announced.peek().size === 0) {
-					console.warn(
-						"Cloudflare relay does not support the reload feature yet. Remove the `reload` attribute to connect without waiting for announcements.",
-					);
-				}
-			}, 1000);
+			console.warn("Cloudflare relay does not support broadcast discovery yet; skipping subscribe_namespace.");
+			return;
 		}
 
 		const announced = conn.announced(emptyPath());

doc/public/icon.png

@@ -8,7 +8,7 @@ import type { Sync } from "../sync";
 const WORKLET_QUANTUM = 128;
 
 // Extra milliseconds for decode + postMessage latency between main thread and worklet.
-const POST_MESSAGE_OVERHEAD = 5;
+const POST_MESSAGE_OVERHEAD = 10;
 
 export type Target = {
 	// Optional manual override for the selected rendition name.

js/lite/src/connection/reload.ts

@@ -3,7 +3,7 @@ import * as Moq from "@moq/lite";
 import { Effect, Signal } from "@moq/signals";
 import { MultiBackend } from "./backend";
 import { Broadcast } from "./broadcast";
-import { type Latency, Sync } from "./sync";
+import type { Latency } from "./sync";
 
 const OBSERVED = ["url", "name", "paused", "volume", "muted", "reload", "latency", "jitter"] as const;
 type Observed = (typeof OBSERVED)[number];
@@ -23,9 +23,6 @@ export default class MoqWatch extends HTMLElement {
 	// The broadcast being watched.
 	broadcast: Broadcast;
 
-	// Used to sync audio and video playback at a target latency.
-	sync = new Sync();
-
 	// The backend that powers this element.
 	backend: MultiBackend;
 

js/watch/src/audio/source.ts

@@ -4,12 +4,6 @@ import { Effect, Signal } from "@moq/signals";
 /** Latency: `"real-time"` auto-computes jitter from RTT; a `Time.Milli` sets a fixed jitter. */
 export type Latency = "real-time" | Time.Milli;
 
-interface Label {
-	ref: Time.Milli;
-	lateCount: number;
-	lateMaxMs: number;
-}
-
 const MIN_JITTER = 10 as Time.Milli;
 const FALLBACK_JITTER = 100 as Time.Milli;
 
@@ -49,10 +43,8 @@ export class Sync {
 	// The media timestamp of the most recently received frame.
 	readonly timestamp = new Signal<Time.Milli | undefined>(undefined);
 
-	// Per-label tracking: minimum reference and late-frame stats.
-	// The effective #reference is the max across all labels,
-	// ensuring the slowest track sets the pace (late audio stalls early video).
-	#labels = new Map<string, Label>();
+	// Per-label late-frame tracking: accumulate count and max lateness, flush on recovery.
+	#late = new Map<string, { count: number; maxMs: number }>();
 
 	// RTT signal from the connection (PROBE or getStats).
 	rtt?: Signal<number | undefined>;
@@ -118,51 +110,43 @@ export class Sync {
 		this.#update = Promise.withResolvers();
 	}
 
-	// Update the reference if this is the earliest frame we've seen for this label, relative to its timestamp.
-	// The effective reference is the max across all labels so the slowest track sets the pace.
+	// Update the reference if this is the earliest frame we've seen, relative to its timestamp.
 	received(timestamp: Time.Milli, label = ""): void {
 		this.timestamp.update((current) => (current === undefined || timestamp > current ? timestamp : current));
 		const now = Time.Milli.now();
 		const ref = Time.Milli.sub(now, timestamp);
 		const currentRef = this.#reference.peek();
 
-		let entry = this.#labels.get(label);
-		if (!entry) {
-			entry = { ref, lateCount: 0, lateMaxMs: 0 };
-			this.#labels.set(label, entry);
-		}
-
 		if (currentRef !== undefined) {
 			// Check if `wait()` would not sleep at all.
 			// NOTE: We check here instead of in `wait()` so we can identify when frames are received late.
 			// Otherwise, chained `wait()` calls would cause a false-positive during CPU starvation.
 			const sleep = Time.Milli.add(Time.Milli.sub(currentRef, ref), this.#buffer.peek());
 			if (sleep < 0) {
-				entry.lateCount++;
-				entry.lateMaxMs = Math.max(entry.lateMaxMs, -sleep);
-			} else if (entry.lateCount > 0) {
-				const prefix = label ? `sync[${label}]` : "sync";
-				const behind = Sync.#formatDuration(entry.lateMaxMs);
-				console.debug(`${prefix}: ${entry.lateCount} late frame(s), max ${behind} behind`);
-				entry.lateCount = 0;
-				entry.lateMaxMs = 0;
+				const entry = this.#late.get(label);
+				if (entry) {
+					entry.count++;
+					entry.maxMs = Math.max(entry.maxMs, -sleep);
+				} else {
+					this.#late.set(label, { count: 1, maxMs: -sleep });
+				}
+			} else {
+				const entry = this.#late.get(label);
+				if (entry) {
+					const prefix = label ? `sync[${label}]` : "sync";
+					const behind = Sync.#formatDuration(entry.maxMs);
+					console.debug(`${prefix}: ${entry.count} late frame(s), max ${behind} behind`);
+					this.#late.delete(label);
+				}
 			}
-		}
 
-		// Update per-label reference (keep the minimum ref for each label).
-		if (ref >= entry.ref) return;
-		entry.ref = ref;
-
-		// Recompute effective reference as max of all per-label references.
-		// Using max ensures the slowest track (e.g. late audio) stalls faster tracks (e.g. early video).
-		let effectiveRef = ref;
-		for (const { ref: r } of this.#labels.values()) {
-			if (r > effectiveRef) effectiveRef = r;
+			if (ref >= currentRef) {
+				// Our frame was not relatively newer than any other frame.
+				return;
+			}
 		}
 
-		if (currentRef === effectiveRef) return;
-
-		this.#reference.set(effectiveRef);
+		this.#reference.set(ref);
 		this.#update.resolve();
 		this.#update = Promise.withResolvers();
 	}