Npm fix

moq-karp/src/broadcast.rs

@@ -131,15 +131,14 @@ impl BroadcastAnnounced {
 
 	async fn try_load(&mut self, suffix: Path) -> Result<Option<BroadcastConsumer>> {
 		let name = suffix.first().ok_or(Error::InvalidSession)?;
-		tracing::info!(?name, "loading broadcast");
 
 		if self.active.contains(name.as_str()) {
 			// Skip duplicates
 			return Ok(None);
 		}
 
 		let path = self.announced.prefix().clone().push(name);
-		tracing::info!(prefix = ?self.announced.prefix(), ?path, "loading broadcast");
+		tracing::info!(?path, "loading broadcast");
 		let broadcast = BroadcastConsumer::new(self.session.clone(), path);
 
 		self.active.insert(name.to_string());
@@ -194,7 +193,6 @@ impl BroadcastConsumer {
 					return Ok(Some(catalog));
 				},
 				Some(group) = async { self.catalog_track.next_group().await.transpose() } => {
-					println!("{:?}", group);
 					self.catalog_group.replace(group?);
 				},
 				else => return Ok(None),

moq-transfork/src/session/subscriber.rs

@@ -152,7 +152,7 @@ impl Subscriber {
 		// TODO use the response to correctly populate the track info
 		let _response: message::Info = stream.reader.decode().await?;
 
-		tracing::info!("active");
+		tracing::info!("subscribed");
 
 		self.subscribes.lock().insert(id, track.clone());
 

moq-web/Cargo.toml

@@ -3,7 +3,7 @@ name = "moq-web"
 authors = ["Luke Curley <[email protected]>"]
 edition = "2021"
 publish = false
-version = "0.0.0"
+version = "0.3.3"
 license = "MIT OR Apache-2.0"
 repository = "https://github.com/kixelated/moq-web"
 description = "WebAssembly frontend for MoQ"

moq-web/src/element/karp.ts

@@ -60,3 +60,9 @@ export class MoqKarpElement extends HTMLElement {
 }
 
 customElements.define("moq-karp", MoqKarpElement);
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"moq-karp": MoqKarpElement;
+	}
+}

moq-web/src/element/video.ts

@@ -5,7 +5,7 @@ import * as Moq from "..";
 // Also: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
 export class MoqVideoElement extends HTMLElement implements HTMLVideoElement {
 	#watch?: Moq.Watch;
-	#canvas: OffscreenCanvas;
+	#canvas?: OffscreenCanvas;
 
 	// Attributes with getters and setters.
 	#width = 0;
@@ -91,13 +91,37 @@ export class MoqVideoElement extends HTMLElement implements HTMLVideoElement {
 	constructor() {
 		super();
 
-		const shadowRoot = this.attachShadow({ mode: "open" });
-		const canvas = document.createElement("canvas");
-		shadowRoot.appendChild(canvas);
-		this.#canvas = canvas.transferControlToOffscreen();
+		const shadow = this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = `
+			:host {
+				display: block;
+				position: relative;
+			}
+
+			::slotted(canvas) {
+				display: block;
+				max-width: 100%;
+				height: auto;
+			}
+		`;
+		shadow.appendChild(style);
+
+		const slot = document.createElement("slot");
+		slot.name = "canvas"; // Named slot for the canvas
+		shadow.appendChild(slot);
 	}
 
 	connectedCallback() {
+		// Provide a default canvas if none is slotted
+		if (!this.querySelector("canvas")) {
+			const defaultCanvas = document.createElement("canvas");
+			defaultCanvas.slot = "canvas";
+			this.appendChild(defaultCanvas);
+		}
+
+		this.#canvas = this.querySelector("canvas")?.transferControlToOffscreen();
+
 		for (const name of MoqVideoElement.initAttrbiutes.concat(...MoqVideoElement.observedAttributes)) {
 			const value = this.getAttribute(name);
 			if (value !== null) {
@@ -160,15 +184,14 @@ export class MoqVideoElement extends HTMLElement implements HTMLVideoElement {
 		const room = parts[1];
 		const broadcast = parts[2];
 
-		console.log("module", Moq);
-		console.log("Watch", Moq.Watch);
 		const watch = new Moq.Watch(server, room, broadcast);
 		this.#watch = watch;
 
 		// Set the initial state in this specific order.
 		(async () => {
 			await watch.pause(paused);
 			await watch.volume(volume);
+			if (!this.#canvas) throw new Error("canvas not loaded");
 			await watch.render(this.#canvas);
 		})();
 	}
@@ -334,8 +357,6 @@ export class MoqVideoElement extends HTMLElement implements HTMLVideoElement {
 	}
 }
 
-customElements.define("moq-video", MoqVideoElement);
-
 function emptyRange(): TimeRanges {
 	const invalid = () => {
 		throw new RangeError("Index is not in the allowed range.");
@@ -415,3 +436,11 @@ function emptyTextTracks(): TextTrackList {
 		},
 	};
 }
+
+customElements.define("moq-video", MoqVideoElement);
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"moq-video": MoqVideoElement;
+	}
+}

moq-web/src/index.ts

@@ -2,5 +2,5 @@
 export { Watch } from "./watch";
 
 // Export the Web Components
-import "./element/video";
-import "./element/karp";
+export { MoqVideoElement } from "./element/video";
+export { MoqKarpElement } from "./element/karp";

moq-web/src/main.ts

@@ -1,7 +1,7 @@
 import * as Comlink from "comlink";
 import type { Api } from "./worker";
 
-const worker = new Worker(new URL("./worker", import.meta.url));
+const worker = new Worker(new URL("./worker", import.meta.url), { type: "module" });
 
 // Not 100% if this is the best solution, but Comlink was silently failing.
 // We wait until the worker is fully initialized before we return the proxy.

moq-web/src/watch.rs

@@ -128,7 +128,7 @@ impl WatchBackend {
 
 		let mut announced = room.watch(&self.broadcast);
 
-		tracing::info!(addr = ?self.server, ?room, broadcast = ?announced, "connected");
+		tracing::info!(addr = %self.server, ?room, broadcast = ?announced, "connected");
 
 		self.status.send_modify(|status| {
 			status.connected = true;
@@ -137,8 +137,6 @@ impl WatchBackend {
 		loop {
 			tokio::select! {
 				Some(broadcast) = announced.broadcast() => {
-					tracing::info!(?broadcast, "announced");
-
 					// TODO ignore lower IDs
 					self.active = Some(broadcast);
 					self.catalog = None;
@@ -172,6 +170,8 @@ impl WatchBackend {
 		let broadcast = self.active.as_ref().unwrap();
 		let catalog = self.catalog.as_ref().unwrap();
 
+		tracing::info!(?catalog, "initializing");
+
 		if let Some(video) = catalog.video.first() {
 			tracing::info!("fetching video track: {:?}", video);
 

package.json

@@ -1,17 +1,13 @@
 {
 	"name": "@kixelated/moq",
-	"version": "0.3.1",
+	"version": "0.3.3",
 	"type": "module",
-	"module": "./dist/index.js",
-	"types": "./dist/index.d.ts",
+	"module": "./dist/src/index.js",
+	"types": "./dist/src/index.d.ts",
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js"
-		},
-		"./element": {
-			"import": "./dist/element/index.js",
-			"types": "./dist/element/index.d.ts"
+			"types": "./dist/src/index.d.ts",
+			"import": "./dist/src/index.js"
 		}
 	},
 	"files": ["dist", "pkg", "README.md", "LICENSE*"],
@@ -34,13 +30,5 @@
 		"html-webpack-plugin": "^5.6.0",
 		"typescript": "^5.6.3",
 		"wasm-pack": "^0.13.1"
-	},
-	"engines": {
-		"bun": "1",
-		"node": "use bun",
-		"npm": "use bun",
-		"yarn": "use bun",
-		"pnpm": "use bun"
-	},
-	"engineStrict": true
+	}
 }

tsconfig.json

@@ -7,7 +7,7 @@
 		"moduleResolution": "Bundler",
 
 		/* Emit Options */
-		"outDir": "dist",
+		"outDir": "dist/src",
 		"declaration": true,
 		"sourceMap": true,
 		"resolveJsonModule": true,