@livepeer-frameworks/streamcrafter-wc 0.1.1 → 0.1.2

package/src/components/fw-streamcrafter.ts

@@ -17,6 +17,8 @@ import {
   micMutedIcon,
   videoIcon,
   xIcon,
+  eyeIcon,
+  eyeOffIcon,
 } from "../icons/index.js";
 import { IngestControllerHost } from "../controllers/ingest-controller-host.js";
 import type {
@@ -81,6 +83,7 @@ export class FwStreamCrafter extends LitElement {
   @state() private _showSettings = false;
   @state() private _showSources = true;
   @state() private _isAdvancedPanelOpen = false;
+  @state() private _contextMenu: { x: number; y: number } | null = null;
 
   @query(".fw-sc-preview video") private _videoEl!: HTMLVideoElement | null;
 
@@ -155,6 +158,45 @@ export class FwStreamCrafter extends LitElement {
     }
   }
 
+  // ---- Context Menu ----
+
+  private _boundDismissContextMenu = this._dismissContextMenu.bind(this);
+
+  private _handleContextMenu(e: MouseEvent) {
+    e.preventDefault();
+    this._contextMenu = { x: e.clientX, y: e.clientY };
+    document.addEventListener("click", this._boundDismissContextMenu, { once: true });
+    document.addEventListener("contextmenu", this._boundDismissContextMenu, { once: true });
+  }
+
+  private _dismissContextMenu() {
+    this._contextMenu = null;
+    document.removeEventListener("click", this._boundDismissContextMenu);
+    document.removeEventListener("contextmenu", this._boundDismissContextMenu);
+  }
+
+  private _copyWhipUrl() {
+    if (this.whipUrl) {
+      navigator.clipboard.writeText(this.whipUrl).catch(console.error);
+    }
+    this._contextMenu = null;
+  }
+
+  private _copyStreamInfo() {
+    const s = this.pc.s;
+    const profile = QUALITY_PROFILES.find((p) => p.id === s.qualityProfile);
+    const info = [
+      `Status: ${s.state}`,
+      `Quality: ${profile?.label ?? s.qualityProfile} (${profile?.description ?? ""})`,
+      `Sources: ${s.sources.length}`,
+      this.whipUrl ? `WHIP: ${this.whipUrl}` : null,
+    ]
+      .filter(Boolean)
+      .join("\n");
+    navigator.clipboard.writeText(info).catch(console.error);
+    this._contextMenu = null;
+  }
+
   // ---- Public API ----
 
   async startCamera(options?: Parameters<IngestControllerHost["startCamera"]>[0]) {
@@ -205,6 +247,7 @@ export class FwStreamCrafter extends LitElement {
     return html`
       <div
         class=${classMap({ root: true, "fw-sc-root": true, "fw-sc-root--devmode": this.devMode })}
+        @contextmenu=${(e: MouseEvent) => this._handleContextMenu(e)}
       >
         <div class="main fw-sc-main">
           <!-- Header -->
@@ -279,6 +322,22 @@ export class FwStreamCrafter extends LitElement {
               : nothing}
           </div>
 
+          <!-- VU Meter -->
+          ${s.isCapturing
+            ? html`
+                <div class="fw-sc-vu-meter">
+                  <div
+                    class="fw-sc-vu-meter-fill"
+                    style="width:${Math.min(s.audioLevel * 100, 100)}%"
+                  ></div>
+                  <div
+                    class="fw-sc-vu-meter-peak"
+                    style="left:${Math.min(s.peakAudioLevel * 100, 100)}%"
+                  ></div>
+                </div>
+              `
+            : nothing}
+
           <!-- Error -->
           ${s.error
             ? html`
@@ -360,11 +419,63 @@ export class FwStreamCrafter extends LitElement {
           </div>
         </div>
 
+        <!-- Context Menu -->
+        ${this._contextMenu
+          ? html`
+              <div
+                class="fw-sc-context-menu"
+                style="position:fixed;top:${this._contextMenu.y}px;left:${this._contextMenu.x}px;z-index:1000;background:#1a1b26;border:1px solid rgba(90,96,127,0.3);border-radius:6px;padding:4px;box-shadow:0 4px 12px rgba(0,0,0,0.5);min-width:160px"
+              >
+                ${this.whipUrl
+                  ? html`
+                      <button
+                        type="button"
+                        class="fw-sc-context-menu-item"
+                        @click=${() => this._copyWhipUrl()}
+                      >
+                        Copy WHIP URL
+                      </button>
+                    `
+                  : nothing}
+                <button
+                  type="button"
+                  class="fw-sc-context-menu-item"
+                  @click=${() => this._copyStreamInfo()}
+                >
+                  Copy Stream Info
+                </button>
+                ${this.devMode
+                  ? html`
+                      <div class="fw-sc-context-menu-separator"></div>
+                      <button
+                        type="button"
+                        class="fw-sc-context-menu-item"
+                        @click=${() => {
+                          this._isAdvancedPanelOpen = !this._isAdvancedPanelOpen;
+                          this._contextMenu = null;
+                        }}
+                      >
+                        ${settingsIcon(14)}
+                        <span
+                          >${this._isAdvancedPanelOpen ? "Hide Advanced" : "Advanced"}</span
+                        >
+                      </button>
+                    `
+                  : nothing}
+              </div>
+            `
+          : nothing}
+
         <!-- Advanced Panel -->
         ${this.devMode && this._isAdvancedPanelOpen
           ? html`
               <fw-sc-advanced
                 .ic=${this.pc}
+                .compositorEnabled=${this.enableCompositor}
+                .compositorRendererType=${this._getCompositorRendererType()}
+                .compositorStats=${this._getCompositorStats()}
+                .sceneCount=${this._getSceneCount()}
+                .layerCount=${this._getLayerCount()}
                 @fw-close=${() => {
                   this._isAdvancedPanelOpen = false;
                 }}
@@ -375,11 +486,77 @@ export class FwStreamCrafter extends LitElement {
     `;
   }
 
+  private _getSourceLayerVisibility(sourceId: string): boolean {
+    const ctrl = this.pc.getController();
+    if (!ctrl || !this.enableCompositor) return true;
+    const sm = ctrl.getSceneManager();
+    if (!sm) return true;
+    const scene = sm.getActiveScene();
+    if (!scene) return true;
+    const layer = scene.layers.find((l: { sourceId: string }) => l.sourceId === sourceId);
+    return layer?.visible ?? true;
+  }
+
+  private _toggleSourceLayerVisibility(sourceId: string) {
+    const ctrl = this.pc.getController();
+    if (!ctrl) return;
+    const sm = ctrl.getSceneManager();
+    if (!sm) return;
+    const scene = sm.getActiveScene();
+    if (!scene) return;
+    const layer = scene.layers.find((l: { sourceId: string }) => l.sourceId === sourceId);
+    if (layer) {
+      sm.setLayerVisibility(scene.id, layer.id, !layer.visible);
+      this.requestUpdate();
+    }
+  }
+
+  // ---- Compositor helpers (for advanced panel) ----
+
+  private _getCompositorRendererType() {
+    if (!this.enableCompositor) return null;
+    return this.pc.getController()?.getSceneManager()?.getRendererType() ?? null;
+  }
+
+  private _getCompositorStats() {
+    if (!this.enableCompositor) return null;
+    return this.pc.getController()?.getSceneManager()?.getStats() ?? null;
+  }
+
+  private _getSceneCount(): number {
+    if (!this.enableCompositor) return 0;
+    return this.pc.getController()?.getSceneManager()?.getAllScenes()?.length ?? 0;
+  }
+
+  private _getLayerCount(): number {
+    if (!this.enableCompositor) return 0;
+    const scene = this.pc.getController()?.getSceneManager()?.getActiveScene();
+    return scene?.layers?.length ?? 0;
+  }
+
   private _renderSourceRow(source: MediaSource) {
     const s = this.pc.s;
     const hasVideo = source.stream.getVideoTracks().length > 0;
+    const isVisible = this._getSourceLayerVisibility(source.id);
     return html`
-      <div class=${classMap({ "fw-sc-source": true })}>
+      <div
+        class=${classMap({ "fw-sc-source": true, "fw-sc-source--hidden": !isVisible })}
+      >
+        ${this.enableCompositor
+          ? html`
+              <button
+                type="button"
+                class=${classMap({
+                  "fw-sc-icon-btn": true,
+                  "fw-sc-icon-btn--muted": !isVisible,
+                })}
+                @click=${() => this._toggleSourceLayerVisibility(source.id)}
+                title=${isVisible ? "Hide from composition" : "Show in composition"}
+              >
+                ${isVisible ? eyeIcon(14) : eyeOffIcon(14)}
+              </button>
+            `
+          : nothing}
         <div class="fw-sc-source-icon">
           ${source.type === "camera" ? cameraIcon(16) : monitorIcon(16)}
         </div>

package/src/controllers/ingest-controller-host.ts

@@ -52,6 +52,8 @@ export interface IngestControllerHostState {
   isWebCodecsActive: boolean;
   isWebCodecsAvailable: boolean;
   encoderStats: EncoderStats | null;
+  audioLevel: number;
+  peakAudioLevel: number;
 }
 
 type HostElement = ReactiveControllerHost & HTMLElement;
@@ -61,6 +63,7 @@ export class IngestControllerHost implements ReactiveController {
   private controller: IngestControllerV2 | null = null;
   private unsubs: Array<() => void> = [];
   private encoderStatsCleanup: (() => void) | null = null;
+  private audioLevelCleanup: (() => void) | null = null;
 
   s: IngestControllerHostState;
 
@@ -85,6 +88,8 @@ export class IngestControllerHost implements ReactiveController {
       isWebCodecsActive: false,
       isWebCodecsAvailable: isWebCodecsEncodingPathSupported(),
       encoderStats: null,
+      audioLevel: 0,
+      peakAudioLevel: 0,
     };
   }
 
@@ -114,6 +119,7 @@ export class IngestControllerHost implements ReactiveController {
       this.encoderStatsCleanup();
       this.encoderStatsCleanup = null;
     }
+    this.stopAudioLevelMonitoring();
     this.controller?.destroy();
     this.controller = null;
   }
@@ -134,16 +140,22 @@ export class IngestControllerHost implements ReactiveController {
       controller.on("stateChange", (event) => {
         const state = event.state;
         const ctx = (event.context ?? {}) as IngestStateContextV2;
+        const isCapturing = state === "capturing" || state === "streaming";
         this.update({
           state,
           stateContext: ctx,
           isStreaming: state === "streaming",
-          isCapturing: state === "capturing" || state === "streaming",
+          isCapturing,
           isReconnecting: state === "reconnecting",
           mediaStream: controller.getMediaStream(),
           sources: controller.getSources(),
           reconnectionState: ctx.reconnection ?? this.s.reconnectionState,
         });
+        if (isCapturing) {
+          this.startAudioLevelMonitoring();
+        } else {
+          this.stopAudioLevelMonitoring();
+        }
         this.dispatchEvent("fw-sc-state-change", { state, context: ctx });
       })
     );
@@ -242,6 +254,29 @@ export class IngestControllerHost implements ReactiveController {
     }
   }
 
+  private startAudioLevelMonitoring() {
+    if (this.audioLevelCleanup || !this.controller) return;
+    const audioMixer = this.controller.getAudioMixer();
+    if (!audioMixer) return;
+
+    const unsub = audioMixer.on("levelUpdate", (event: { level: number; peakLevel: number }) => {
+      this.update({ audioLevel: event.level, peakAudioLevel: event.peakLevel });
+    });
+    audioMixer.startLevelMonitoring();
+    this.audioLevelCleanup = () => {
+      unsub();
+      audioMixer.stopLevelMonitoring();
+    };
+  }
+
+  private stopAudioLevelMonitoring() {
+    if (this.audioLevelCleanup) {
+      this.audioLevelCleanup();
+      this.audioLevelCleanup = null;
+    }
+    this.update({ audioLevel: 0, peakAudioLevel: 0 });
+  }
+
   private dispatchEvent(name: string, detail: unknown) {
     this.host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
   }