add video and context wc

lherman-cs · lherman-cs · commit f567583a342d · 2025-05-25T12:55:26.000-04:00
diff --git a/client-web/index.html b/client-web/index.html
@@ -10,7 +10,8 @@
 </head>
 
 <body>
-  <video></video>
+  <pulsebeam-context>
+  </pulsebeam-context>
 </body>
 
 </html>
diff --git a/client-web/package.json b/client-web/package.json
@@ -25,6 +25,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@lit/context": "^1.1.5",
     "@protobuf-ts/runtime": "^2.10.0",
     "lit": "^3.3.0",
     "nanostores": "^1.0.1"
diff --git a/client-web/src/component.ts b/client-web/src/component.ts
@@ -0,0 +1,71 @@
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { consume, createContext, provide } from "@lit/context";
+import { ClientCore } from "./lib";
+import type { ParticipantMeta } from "./lib/core";
+
+const clientContext = createContext<ClientCore>(Symbol("client"));
+
+@customElement("pulsebeam-context")
+export class PulsebeamContext extends LitElement {
+  @provide({ context: clientContext })
+  @property({ attribute: false })
+  value!: ClientCore;
+
+  @query("slot")
+  slotEl!: HTMLSlotElement;
+
+  private audioElements: HTMLAudioElement[] = [];
+
+  firstUpdated() {
+    this.audioElements = Array.from(this.renderRoot.querySelectorAll("audio"));
+    console.log("Audio elements:", this.audioElements);
+  }
+
+  render() {
+    return html`
+      <audio></audio>
+      <audio></audio>
+      <audio></audio>
+
+      <slot></slot>
+    `;
+  }
+}
+
+@customElement("pulsebeam-video")
+export class PulsebeamVideo extends LitElement {
+  @property({ attribute: false })
+  participantMeta?: ParticipantMeta;
+
+  @consume({ context: clientContext, subscribe: true })
+  client?: ClientCore;
+
+  @query("video")
+  videoEl!: HTMLVideoElement;
+
+  firstUpdated() {
+    if (!this.client) {
+      console.warn("No client context available");
+      return;
+    }
+
+    if (!this.participantMeta) {
+      console.warn("No participant specified on <pulsebeam-video>");
+      return;
+    }
+
+    this.client.subscribeVideo(this.videoEl, this.participantMeta);
+  }
+
+  render() {
+    return html`<video autoplay muted playsinline></video>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pulsebeam-context": PulsebeamContext;
+    "pulsebeam-video": PulsebeamVideo;
+  }
+}
diff --git a/client-web/src/index.ts b/client-web/src/index.ts
@@ -1,18 +1,36 @@
+import type { PulsebeamVideo } from "./component";
 import { ClientCore } from "./lib";
+export * from "./component";
+
+const context = document.querySelector("pulsebeam-context");
 
 (async () => {
   const client = new ClientCore({
     sfuUrl: "http://localhost:3000/",
     maxDownstreams: 1,
   });
+  context!.value = client;
 
-  const videos: Record<string, HTMLVideoElement> = {};
+  const videos: Record<string, PulsebeamVideo> = {};
   client.$state.listen((v) => console.log(v));
-  client.$participants.listen((newValue, _, changed) => {
-    const video = videos[changed] || document.createElement("video");
-    const participant = newValue[changed].get();
-    client.subscribe(video, participant);
+  client.$participants.listen(async (newValue, _, changed) => {
+    // Create a new pulsebeam-video element if not already present
+    let video = videos[changed];
+    if (video) {
+      return;
+    }
+
+    video = document.createElement("pulsebeam-video") as PulsebeamVideo;
     videos[changed] = video;
+    await video.updateComplete;
+
+    // Set participantMeta on the pulsebeam-video element
+    const participantMeta = newValue[changed].get(); // Get the metadata for the participant
+    video.participantMeta = participantMeta;
+    console.log(participantMeta);
+
+    // Append the video to the DOM
+    context!.appendChild(video);
   });
   await client.connect("default", `alice-${Math.round(Math.random() * 100)}`);
 
diff --git a/client-web/src/lib/core.ts b/client-web/src/lib/core.ts
@@ -339,8 +339,11 @@ export class ClientCore {
   }
 
   // TODO: remove browser specific
-  subscribe(video: HTMLVideoElement, participant: ParticipantMeta) {
+  subscribeVideo(video: HTMLVideoElement, participant: ParticipantMeta) {
     video.srcObject = participant.stream;
     video.autoplay = true;
   }
+
+  subscribeAudio(audio: HTMLAudioElement) {
+  }
 }
diff --git a/client-web/src/pulsebeam-connector.ts b/client-web/src/pulsebeam-connector.ts
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -339,8 +339,11 @@ export class ClientCore {`
`339`	`339`	`}`
`340`	`340`
`341`	`341`	`// TODO: remove browser specific`
`342`		`- subscribe(video: HTMLVideoElement, participant: ParticipantMeta) {`
	`342`	`+ subscribeVideo(video: HTMLVideoElement, participant: ParticipantMeta) {`
`343`	`343`	`video.srcObject = participant.stream;`
`344`	`344`	`video.autoplay = true;`
`345`	`345`	`}`
	`346`	`+`
	`347`	`+ subscribeAudio(audio: HTMLAudioElement) {`
	`348`	`+ }`
`346`	`349`	`}`