watch: stop audio/video downloads when muted, paused, or off-screen (#1588)

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

Author: kixelated

js/moq-boy/src/index.ts

@@ -135,18 +135,19 @@ export class Game {
 
 		this.#signals.run(this.#runPixelBudget.bind(this));
 
-		// Video is enabled on the grid or when this game is expanded.
 		const videoEnabled = new Moq.Signals.Signal(true);
-		this.#signals.run(this.#runVideoEnabled.bind(this, videoEnabled));
-
 		this.videoDecoder = new Watch.Video.Decoder(this.videoSource, this.sync, { enabled: videoEnabled });
 		this.#signals.cleanup(() => this.videoDecoder.close());
 
 		// Renderer needs a canvas — created by the UI layer, set via `canvas`.
 		this.videoRenderer = new Watch.Video.Renderer(this.videoDecoder, { canvas: this.canvas });
 		this.#signals.cleanup(() => this.videoRenderer.close());
 
-		// Audio pipeline — the emitter controls muted (volume) and paused (download).
+		// Download on the grid or when expanded, but only while the tile is on-screen.
+		// Reads the renderer's visibility, so it must run after the renderer exists.
+		this.#signals.run(this.#runVideoEnabled.bind(this, videoEnabled));
+
+		// Audio pipeline — the emitter stops the download when muted or paused.
 		this.audioDecoder = new Watch.Audio.Decoder(this.audioSource, this.sync);
 		this.#signals.cleanup(() => this.audioDecoder.close());
 
@@ -224,7 +225,9 @@ export class Game {
 
 	#runVideoEnabled(videoEnabled: Moq.Signals.Signal<boolean>, effect: Moq.Signals.Effect) {
 		const exp = effect.get(this.expanded);
-		videoEnabled.set(exp === undefined || exp === this.sessionId);
+		const visible = effect.get(this.videoRenderer.output.visible);
+		// On the grid or when expanded, but never download an off-screen tile.
+		videoEnabled.set((exp === undefined || exp === this.sessionId) && visible);
 	}
 
 	#runAudioPaused(audioPaused: Moq.Signals.Signal<boolean>, effect: Moq.Signals.Effect) {

js/watch/src/audio/decoder.ts

@@ -94,9 +94,6 @@ export class Decoder {
 		const sampleRate = config.sampleRate;
 		const channelCount = config.numberOfChannels;
 
-		// NOTE: We still create an AudioContext even when muted.
-		// This way we can process the audio for visualizations.
-
 		const context = new AudioContext({
 			latencyHint: "interactive", // We don't use real-time because of the buffer.
 			sampleRate,

js/watch/src/audio/emitter.ts

@@ -6,10 +6,12 @@ const FADE_TIME = 0.2;
 
 type EmitterInput = {
 	volume: Getter<number>;
+
+	// Silences the audio and stops the download. Muted samples aren't worth the bandwidth,
+	// and the decoder keeps the AudioContext warm so unmuting is still instant.
 	muted: Getter<boolean>;
 
-	// Similar to muted, but controls whether we download audio at all.
-	// That way we can be "muted" but also download audio for visualizations.
+	// Pauses playback, which also stops the download.
 	paused: Getter<boolean>;
 };
 
@@ -39,9 +41,10 @@ export class Emitter {
 		this.input = {
 			volume: getter(props?.volume ?? 0.5),
 			muted: getter(props?.muted ?? false),
-			paused: getter(props?.paused ?? props?.muted ?? false),
+			paused: getter(props?.paused ?? false),
 		};
 
+		// Only download while playing audible audio. Pausing or muting stops it.
 		this.#signals.run((effect) => {
 			const enabled = !effect.get(this.input.paused) && !effect.get(this.input.muted);
 			this.#output.enabled.set(enabled);

js/watch/src/backend.ts

@@ -199,17 +199,18 @@ export class MultiBackend {
 		// Audio download follows the emitter's enable policy (paused/muted).
 		effect.proxy(this.#audioEnabled, audioEmitter.output.enabled);
 
-		// Video download policy: when playing, follow visibility; when paused, fetch a
-		// single preview frame then stop.
+		// Video downloads while playing and on-screen. When paused, keep downloading only
+		// until a frame is on the canvas, then stop: a cold paused start still shows a poster
+		// instead of black, without streaming while paused. Read the rendered frame only in
+		// the paused branch so playback doesn't re-run this every painted frame.
 		effect.run((inner) => {
-			const paused = inner.get(this.input.paused);
 			const visible = inner.get(videoRenderer.output.visible);
-			if (!paused) {
+			if (!inner.get(this.input.paused)) {
 				this.#videoEnabled.set(visible);
 				return;
 			}
-			const frame = inner.get(videoDecoder.output.frame);
-			this.#videoEnabled.set(!frame);
+			const frame = inner.get(videoRenderer.output.frame);
+			this.#videoEnabled.set(visible && !frame);
 		});
 		effect.cleanup(() => {
 			this.#videoEnabled.set(false);