moq-boy: dark mode, fix paths, subscription improvements (#1226)

kixelated · claude · web-flow · commit 683ebfe171b4 · 2026-04-06T19:34:59.000-07:00
Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/cdn/README.md b/cdn/README.md
@@ -13,16 +13,19 @@ However, we do use GCP for GeoDNS because most providers don't support it or too
    mkdir -p secrets
 
    # generate the root key private key
-   cargo run --bin moq-token-cli -- --key secrets/root.jwk generate > secrets/root.jwk
+   cargo run --bin moq-token-cli -- generate --key secrets/root.jwk > secrets/root.jwk
 
    # to allow relay servers to connect to each other
-   cargo run --bin moq-token-cli -- --key secrets/root.jwk sign --publish "" --subscribe "" --cluster > secrets/cluster.jwt
+   cargo run --bin moq-token-cli -- sign --key secrets/root.jwk --publish "" --subscribe "" --cluster > secrets/cluster.jwt
 
    # to allow publishing to `demo/`
-   cargo run --bin moq-token-cli -- --key secrets/root.jwk sign --root "demo" --publish "" > secrets/demo-pub.jwt
+   cargo run --bin moq-token-cli -- sign --key secrets/root.jwk --root "demo" --publish "" > secrets/demo-pub.jwt
 
    # to allow subscribing to `demo/` (used by health checks and the website)
-   cargo run --bin moq-token-cli -- --key secrets/root.jwk sign --root "demo" --subscribe "" > secrets/demo-sub.jwt
+   cargo run --bin moq-token-cli -- sign --key secrets/root.jwk --root "demo" --subscribe "" > secrets/demo-sub.jwt
+
+   # to allow moq-boy to publish to `demo/boy` and subscribe to `anon/boy`
+   cargo run --bin moq-token-cli -- sign --key secrets/root.jwk --root "" --publish "demo/boy" --subscribe "anon/boy" > secrets/boy.jwt
    ```
 3. Run `tofu init`.
 4. Run `tofu apply`.
diff --git a/cdn/boy/boy.service.tftpl b/cdn/boy/boy.service.tftpl
@@ -11,9 +11,11 @@ WorkingDirectory=/var/lib/moq
 Environment="RUST_LOG=info"
 
 ExecStart=/var/lib/moq/pkg/bin/moq-boy \
-  --url "https://${domain}/anon" \
+  --url "https://${domain}?jwt=$(cat /var/lib/moq/boy.jwt)" \
   --rom "/var/lib/moq/${rom}" \
-  --name "${name}"
+  --name "${name}" \
+  --prefix-game "demo/boy" \
+  --prefix-viewer "anon/boy"
 
 # Restart with exponential backoff
 Restart=always
diff --git a/demo/boy/package.json b/demo/boy/package.json
@@ -2,7 +2,7 @@
 	"name": "@moq/demo-boy",
 	"private": true,
 	"type": "module",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "MoQ Boy Demo - Crowd-controlled Game Boy streaming",
 	"license": "(MIT OR Apache-2.0)",
 	"scripts": {
diff --git a/demo/boy/src/index.html b/demo/boy/src/index.html
@@ -8,14 +8,16 @@
 			* { margin: 0; padding: 0; box-sizing: border-box; }
 			body {
 				font-family: system-ui, sans-serif;
-				color-scheme: light dark;
+				color-scheme: dark;
+				background: #0a0a0a;
+				color: #e0e0e0;
 				min-height: 100vh;
 				display: flex;
 				flex-direction: column;
 			}
 
 			header {
-				border-bottom: 1px solid light-dark(#ddd, #333);
+				border-bottom: 1px solid #333;
 				padding: 0.75rem 1.5rem;
 				display: flex;
 				align-items: center;
@@ -28,7 +30,7 @@
 				margin: 1.5rem auto;
 				padding: 0 1.5rem;
 				font-size: 0.75rem;
-				color: light-dark(#777, #555);
+				color: #555;
 				line-height: 1.7;
 			}
 			.about p { margin-bottom: 0.5rem; }
@@ -39,6 +41,18 @@
 			.about li::before { content: "\2022"; color: #8bac0f; position: absolute; left: 0; }
 
 			moq-boy-ui { flex: 1; display: flex; flex-direction: column; }
+
+			footer {
+				padding: 0.75rem 1.5rem;
+				border-top: 1px solid #333;
+				font-family: monospace;
+				font-size: 0.7rem;
+				color: #555;
+				text-align: center;
+			}
+			footer code {
+				color: #8bac0f;
+			}
 		</style>
 	</head>
 	<body>
@@ -50,7 +64,7 @@ <h1>MoQ Boy</h1>
 			<moq-boy></moq-boy>
 		</moq-boy-ui>
 
-		<div class="about">
+		<div class="about" id="about">
 			<p>Click a game to play. Multiple players can control it. (anarchy!)</p>
 			<p>
 				A generic <a href="https://moq.dev">MoQ</a> relay is used for everything:
@@ -62,6 +76,8 @@ <h1>MoQ Boy</h1>
 			</ul>
 		</div>
 
+		<footer>try: <code>just boy opossum</code></footer>
+
 		<script type="module" src="./index.ts"></script>
 	</body>
 </html>
diff --git a/demo/boy/src/index.ts b/demo/boy/src/index.ts
@@ -1,7 +1,16 @@
 import "@moq/boy/element";
 import "@moq/boy/ui";
+import { Effect } from "@moq/signals";
 
 const url = import.meta.env.VITE_RELAY_URL || "http://localhost:4443/anon";
 
 const boy = document.querySelector("moq-boy");
 if (boy) boy.url = url;
+
+const about = document.getElementById("about");
+if (boy && about) {
+	const effect = new Effect();
+	effect.run(() => {
+		about.hidden = effect.get(boy.expanded) !== undefined;
+	});
+}
diff --git a/js/moq-boy/package.json b/js/moq-boy/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@moq/boy",
 	"type": "module",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "MoQ Boy - Crowd-controlled Game Boy streaming via MoQ",
 	"license": "(MIT OR Apache-2.0)",
 	"repository": {
diff --git a/js/moq-boy/src/element.ts b/js/moq-boy/src/element.ts
@@ -2,11 +2,10 @@ import * as Moq from "@moq/lite";
 import type { GameConfig } from "./index.ts";
 import { Game } from "./index.ts";
 
-const OBSERVED = ["url", "game-prefix", "viewer-prefix"] as const;
+const OBSERVED = ["url", "prefix", "prefix-game", "prefix-viewer"] as const;
 type Observed = (typeof OBSERVED)[number];
 
-const DEFAULT_GAME_PREFIX = "anon/boy/game";
-const DEFAULT_VIEWER_PREFIX = "anon/boy/viewer";
+const DEFAULT_PREFIX = "boy";
 
 const cleanup = new FinalizationRegistry<Moq.Signals.Effect>((signals) => signals.close());
 
@@ -19,8 +18,10 @@ const cleanup = new FinalizationRegistry<Moq.Signals.Effect>((signals) => signal
  *
  * Attributes:
  *   - `url` — MoQ relay URL
- *   - `game-prefix` — Path prefix for game broadcasts (default: "anon/boy/game")
- *   - `viewer-prefix` — Path prefix for viewer broadcasts (default: "anon/boy/viewer")
+ *   - `prefix` — Base path prefix (default: "boy"). Derives prefix-game and prefix-viewer.
+ *     **Breaking change**: previously the derived attributes were named game-prefix/viewer-prefix.
+ *   - `prefix-game` — Path prefix for game broadcasts (default: "{prefix}/game")
+ *   - `prefix-viewer` — Path prefix for viewer broadcasts (default: "{prefix}/viewer")
  */
 export default class MoqBoy extends HTMLElement {
 	static observedAttributes = OBSERVED;
@@ -33,8 +34,9 @@ export default class MoqBoy extends HTMLElement {
 
 	readonly #signals = new Moq.Signals.Effect();
 	readonly #enabled = new Moq.Signals.Signal(false);
-	readonly #gamePrefix = new Moq.Signals.Signal(DEFAULT_GAME_PREFIX);
-	readonly #viewerPrefix = new Moq.Signals.Signal(DEFAULT_VIEWER_PREFIX);
+	readonly #prefix = new Moq.Signals.Signal(DEFAULT_PREFIX);
+	readonly #gamePrefixOverride = new Moq.Signals.Signal<string | undefined>(undefined);
+	readonly #viewerPrefixOverride = new Moq.Signals.Signal<string | undefined>(undefined);
 	readonly #sessions = new Map<string, Game>();
 
 	constructor() {
@@ -61,11 +63,14 @@ export default class MoqBoy extends HTMLElement {
 			case "url":
 				this.connection.url.set(newValue ? new URL(newValue) : undefined);
 				break;
-			case "game-prefix":
-				this.#gamePrefix.set(newValue ?? DEFAULT_GAME_PREFIX);
+			case "prefix":
+				this.#prefix.set(newValue ?? DEFAULT_PREFIX);
 				break;
-			case "viewer-prefix":
-				this.#viewerPrefix.set(newValue ?? DEFAULT_VIEWER_PREFIX);
+			case "prefix-game":
+				this.#gamePrefixOverride.set(newValue ?? undefined);
+				break;
+			case "prefix-viewer":
+				this.#viewerPrefixOverride.set(newValue ?? undefined);
 				break;
 		}
 	}
@@ -78,28 +83,37 @@ export default class MoqBoy extends HTMLElement {
 		this.connection.url.set(value ? new URL(value) : undefined);
 	}
 
-	get gamePrefix(): string {
-		return this.#gamePrefix.peek();
+	get prefixPath(): string {
+		return this.#prefix.peek();
+	}
+
+	set prefixPath(value: string) {
+		this.#prefix.set(value);
+	}
+
+	get prefixGame(): string {
+		return this.#gamePrefixOverride.peek() ?? `${this.#prefix.peek()}/game`;
 	}
 
-	set gamePrefix(value: string) {
-		this.#gamePrefix.set(value);
+	set prefixGame(value: string) {
+		this.#gamePrefixOverride.set(value);
 	}
 
-	get viewerPrefix(): string {
-		return this.#viewerPrefix.peek();
+	get prefixViewer(): string {
+		return this.#viewerPrefixOverride.peek() ?? `${this.#prefix.peek()}/viewer`;
 	}
 
-	set viewerPrefix(value: string) {
-		this.#viewerPrefix.set(value);
+	set prefixViewer(value: string) {
+		this.#viewerPrefixOverride.set(value);
 	}
 
 	#runDiscovery(effect: Moq.Signals.Effect) {
 		const conn = effect.get(this.connection.established);
 		if (!conn) return;
 
-		const gamePrefix = effect.get(this.#gamePrefix);
-		const viewerPrefix = effect.get(this.#viewerPrefix);
+		const base = effect.get(this.#prefix);
+		const gamePrefix = effect.get(this.#gamePrefixOverride) ?? `${base}/game`;
+		const viewerPrefix = effect.get(this.#viewerPrefixOverride) ?? `${base}/viewer`;
 		const prefix = Moq.Path.from(gamePrefix);
 
 		const announced = conn.announced(prefix);
diff --git a/js/moq-boy/src/index.ts b/js/moq-boy/src/index.ts
@@ -115,26 +115,28 @@ export class Game {
 
 		this.#signals.run(this.#runPixelBudget.bind(this));
 
-		// Pass active signal directly — no effect wrapper needed.
-		this.videoDecoder = new Watch.Video.Decoder(this.videoSource, { enabled: this.active });
+		// 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, { enabled: videoEnabled });
 		this.#signals.cleanup(() => this.videoDecoder.close());
 
 		// Renderer needs a canvas — created by the UI layer, set via setCanvas().
 		this.videoRenderer = new Watch.Video.Renderer(this.videoDecoder);
 		this.#signals.cleanup(() => this.videoRenderer.close());
 
-		// Audio pipeline — pass signals directly.
+		// Audio pipeline — only download audio when active AND unmuted.
 		this.audioSource = new Watch.Audio.Source(this.sync, { broadcast: this.broadcast });
 		this.#signals.cleanup(() => this.audioSource.close());
 
-		this.audioDecoder = new Watch.Audio.Decoder(this.audioSource, { enabled: this.active });
-		this.#signals.cleanup(() => this.audioDecoder.close());
+		const audioEnabled = new Moq.Signals.Signal(false);
+		this.#signals.run(this.#runAudioEnabled.bind(this, audioEnabled));
 
-		// Derive a muted signal: muted when user mutes OR when not active.
-		const muted = new Moq.Signals.Signal(true);
-		this.#signals.run(this.#runAudioMuted.bind(this, muted));
+		this.audioDecoder = new Watch.Audio.Decoder(this.audioSource, { enabled: audioEnabled });
+		this.#signals.cleanup(() => this.audioDecoder.close());
 
-		this.audioEmitter = new Watch.Audio.Emitter(this.audioDecoder, { volume: 0.5, muted });
+		this.audioEmitter = new Watch.Audio.Emitter(this.audioDecoder, { volume: 0.5 });
 		this.#signals.cleanup(() => this.audioEmitter.close());
 
 		// Resume AudioContext on first user interaction (browser autoplay policy).
@@ -198,10 +200,15 @@ export class Game {
 		this.videoSource.target.set({ pixels });
 	}
 
-	#runAudioMuted(muted: Moq.Signals.Signal<boolean>, effect: Moq.Signals.Effect) {
+	#runVideoEnabled(videoEnabled: Moq.Signals.Signal<boolean>, effect: Moq.Signals.Effect) {
+		const exp = effect.get(this.expanded);
+		videoEnabled.set(exp === undefined || exp === this.sessionId);
+	}
+
+	#runAudioEnabled(audioEnabled: Moq.Signals.Signal<boolean>, effect: Moq.Signals.Effect) {
 		const active = effect.get(this.active);
 		const userMuted = effect.get(this.userMuted);
-		muted.set(userMuted || !active);
+		audioEnabled.set(active && !userMuted);
 	}
 
 	#runStatus(effect: Moq.Signals.Effect) {
diff --git a/js/moq-boy/src/ui/components/StatsPanel.tsx b/js/moq-boy/src/ui/components/StatsPanel.tsx
@@ -50,7 +50,9 @@ export default function StatsPanel() {
 				</div>
 			</Show>
 
-			<div class="boy__stats-note">Emulation and encoding are paused when there are no viewers.</div>
+			<div class="boy__stats-note">
+				Emulation and encoding are paused when there are no viewers. Try muting or tabbing away!
+			</div>
 
 			<Show when={latencyEntries().length > 0}>
 				<div class="boy__latency-list">
diff --git a/js/moq-boy/src/ui/styles/grid.css b/js/moq-boy/src/ui/styles/grid.css
@@ -1,24 +1,24 @@
 :host {
 	--boy-accent: #8bac0f;
-	--boy-bg: #f5f5f5;
-	--boy-bg-card: #ffffff;
-	--boy-border: #ddd;
-	--boy-text: #222;
+	--boy-bg: #0a0a0a;
+	--boy-bg-card: #111;
+	--boy-border: #333;
+	--boy-text: #e0e0e0;
 	--boy-text-muted: #888;
-	--boy-text-dim: #aaa;
+	--boy-text-dim: #555;
 
 	display: block;
-	color-scheme: light dark;
+	color-scheme: dark;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
 	:host {
-		--boy-bg: #0a0a0a;
-		--boy-bg-card: #111;
-		--boy-border: #333;
-		--boy-text: #e0e0e0;
+		--boy-bg: #f5f5f5;
+		--boy-bg-card: #ffffff;
+		--boy-border: #ddd;
+		--boy-text: #222;
 		--boy-text-muted: #888;
-		--boy-text-dim: #555;
+		--boy-text-dim: #aaa;
 	}
 }
 
diff --git a/rs/moq-boy/Cargo.toml b/rs/moq-boy/Cargo.toml
@@ -7,7 +7,7 @@ license = "MIT OR Apache-2.0"
 keywords = ["moq", "gameboy", "streaming", "emulator", "live"]
 categories = ["multimedia::video", "emulators", "network-programming"]
 
-version = "0.1.0"
+version = "0.2.0"
 edition = "2024"
 rust-version.workspace = true
 
diff --git a/rs/moq-boy/src/main.rs b/rs/moq-boy/src/main.rs

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@moq/boy",`
`3`	`3`	`"type": "module",`
`4`		`- "version": "0.1.0",`
	`4`	`+ "version": "0.2.0",`
`5`	`5`	`"description": "MoQ Boy - Crowd-controlled Game Boy streaming via MoQ",`
`6`	`6`	`"license": "(MIT OR Apache-2.0)",`
`7`	`7`	`"repository": {`