@signalwire/web-components 4.0.0-beta.1 → 4.0.0-beta.10

package/README.md

@@ -24,7 +24,9 @@ npm install @signalwire/web-components
 import '@signalwire/web-components';
 
 // Or import specific components
-import { CallMedia, CallControls, SelfMedia } from '@signalwire/web-components';
+import '@signalwire/web-components/call-status';
+import '@signalwire/web-components/call-media';
+import '@signalwire/web-components/self-media';
 ```
 
 ```html
@@ -212,7 +214,7 @@ Displays call state, status text, and duration timer.
 |----------|------|---------|-------------|
 | `call` | `CallStatusCall` | - | Call with status$ observable |
 
-**Status Values:** `idle`, `connecting`, `ringing`, `connected`, `disconnecting`, `disconnected`
+**Status Values:** `new`, `trying`, `ringing`, `connecting`, `connected`, `disconnecting`, `disconnected`, `failed`, `destroyed`
 
 **CSS Custom Properties:**
 
@@ -312,7 +314,7 @@ Dropdown for selecting audio/video input and output devices.
 | Event | Detail | Description |
 |-------|--------|-------------|
 | `sw-tab-change` | `{ tab: 'microphone' \| 'camera' \| 'speaker' }` | Tab changed |
-| `sw-device-change` | `{ device: DeviceInfo }` | Device selected |
+| `sw-device-change` | `{ device: MediaDeviceInfo }` | Device selected |
 | `sw-test-speaker` | - | Speaker test triggered |
 
 **CSS Custom Properties:**
@@ -666,7 +668,7 @@ sw-call-media::part(video) {
 ## TypeScript Interfaces
 
 ```typescript
-import type { Call, LayoutLayer, DeviceInfo, Address } from '@signalwire/web-components';
+import type { Call, CallSelf, DeviceController, LayoutLayer, Participant } from '@signalwire/web-components';
 
 // Call object interface
 interface Call {
@@ -692,12 +694,9 @@ interface LayoutLayer {
   height: number;
 }
 
-// Device information
-interface DeviceInfo {
-  deviceId: string;
-  label: string;
-  kind: 'audioinput' | 'audiooutput' | 'videoinput';
-}
+// DeviceController is imported from @signalwire/js via @signalwire/web-components
+// It provides observables for device lists and selection methods.
+// See @signalwire/js documentation for the full DeviceController interface.
 
 // Directory address
 interface Address {

package/dist/components/audio-level.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Audio Level Component
+ *
+ * Visual audio level indicator that renders real-time audio levels from a MediaStream
+ * via Web Audio API. Displays configurable number of bars with color transitions
+ * based on audio intensity.
+ *
+ * @example
+ * ```html
+ * <sw-audio-level .stream=${mediaStream} bars="5" orientation="vertical"></sw-audio-level>
+ * ```
+ */
+import { LitElement } from 'lit';
+export declare class AudioLevel extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * MediaStream to analyze for audio levels
+     */
+    stream?: MediaStream;
+    /**
+     * Number of bars to display (default: 5)
+     */
+    bars: number;
+    /**
+     * Orientation of the bars: 'vertical' or 'horizontal'
+     */
+    orientation: 'vertical' | 'horizontal';
+    /**
+     * Maximum height/width of bars in pixels
+     */
+    maxSize: number;
+    /**
+     * Current audio levels for each bar (0-1)
+     */
+    private _levels;
+    /**
+     * Web Audio API context
+     */
+    private _audioContext?;
+    /**
+     * Analyser node for frequency data
+     */
+    private _analyser?;
+    /**
+     * Source node connected to the MediaStream
+     */
+    private _source?;
+    /**
+     * Animation frame ID for cleanup
+     */
+    private _animationFrameId?;
+    /**
+     * Frequency data buffer
+     */
+    private _dataArray?;
+    /**
+     * Lifecycle: Component connected to DOM
+     */
+    connectedCallback(): void;
+    /**
+     * Lifecycle: React to property changes
+     */
+    protected updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Lifecycle: Component disconnected from DOM
+     */
+    disconnectedCallback(): void;
+    /**
+     * Public method to release all audio resources immediately
+     * Call this before stopping the MediaStream tracks to ensure proper cleanup
+     */
+    releaseResources(): void;
+    /**
+     * Setup Web Audio API for audio level analysis
+     */
+    private setupAudioAnalysis;
+    /**
+     * Cleanup Web Audio API resources
+     */
+    private cleanupAudioAnalysis;
+    /**
+     * Start the animation loop for updating levels
+     */
+    private startAnimationLoop;
+    /**
+     * Get the color class based on level
+     */
+    private getLevelClass;
+    /**
+     * Get the active class if level is above threshold
+     */
+    private isActive;
+    /**
+     * Render the component
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * Declare global type for TypeScript
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-audio-level': AudioLevel;
+    }
+}
+//# sourceMappingURL=audio-level.d.ts.map

package/dist/components/audio-level.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-level.d.ts","sourceRoot":"","sources":["../../src/components/audio-level.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAiEX;IAEF;;OAEG;IACyB,MAAM,CAAC,EAAE,WAAW,CAAC;IAEjD;;OAEG;IACyB,IAAI,SAAK;IAErC;;OAEG;IACwC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IAE/F;;OAEG;IACyB,OAAO,SAAM;IAEzC;;OAEG;IACM,OAAO,CAAC,OAAO,CAAgB;IAExC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAC,CAAe;IAErC;;OAEG;IACH,OAAO,CAAC,SAAS,CAAC,CAAe;IAEjC;;OAEG;IACH,OAAO,CAAC,OAAO,CAAC,CAA6B;IAE7C;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAAC,CAAS;IAEnC;;OAEG;IACH,OAAO,CAAC,UAAU,CAAC,CAA0B;IAE7C;;OAEG;IACH,iBAAiB;IAQjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAehE;;OAEG;IACH,oBAAoB;IAKpB;;;OAGG;IACI,gBAAgB,IAAI,IAAI;IAK/B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAkC1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAgC5B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAyC1B;;OAEG;IACH,OAAO,CAAC,aAAa;IAOrB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAIhB;;OAEG;IACH,MAAM;CA0BP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAC;KAC9B;CACF"}

package/dist/components/audio-level.js

@@ -0,0 +1,203 @@
+import { LitElement as b, html as p, css as y } from "lit";
+import { property as c, state as f, customElement as _ } from "lit/decorators.js";
+var w = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (t, e, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? g(e, s) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (i = (a ? o(e, s, i) : o(i)) || i);
+  return a && i && w(e, s, i), i;
+};
+let n = class extends b {
+  constructor() {
+    super(...arguments), this.bars = 5, this.orientation = "vertical", this.maxSize = 32, this._levels = [];
+  }
+  /**
+   * Lifecycle: Component connected to DOM
+   */
+  connectedCallback() {
+    super.connectedCallback(), this._levels = new Array(this.bars).fill(0), this.stream && this.setupAudioAnalysis();
+  }
+  /**
+   * Lifecycle: React to property changes
+   */
+  updated(t) {
+    super.updated(t), t.has("stream") && (this.cleanupAudioAnalysis(), this.stream && this.setupAudioAnalysis()), t.has("bars") && (this._levels = new Array(this.bars).fill(0));
+  }
+  /**
+   * Lifecycle: Component disconnected from DOM
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanupAudioAnalysis();
+  }
+  /**
+   * Public method to release all audio resources immediately
+   * Call this before stopping the MediaStream tracks to ensure proper cleanup
+   */
+  releaseResources() {
+    this.cleanupAudioAnalysis(), this.stream = void 0;
+  }
+  /**
+   * Setup Web Audio API for audio level analysis
+   */
+  setupAudioAnalysis() {
+    if (!this.stream) return;
+    if (this.stream.getAudioTracks().length === 0) {
+      console.warn("sw-audio-level: MediaStream has no audio tracks");
+      return;
+    }
+    try {
+      this._audioContext = new AudioContext(), this._analyser = this._audioContext.createAnalyser(), this._analyser.fftSize = 256, this._analyser.smoothingTimeConstant = 0.8, this._source = this._audioContext.createMediaStreamSource(this.stream), this._source.connect(this._analyser);
+      const e = this._analyser.frequencyBinCount;
+      this._dataArray = new Uint8Array(e), this.startAnimationLoop();
+    } catch (e) {
+      console.error("sw-audio-level: Failed to setup audio analysis:", e);
+    }
+  }
+  /**
+   * Cleanup Web Audio API resources
+   */
+  cleanupAudioAnalysis() {
+    this._animationFrameId !== void 0 && (cancelAnimationFrame(this._animationFrameId), this._animationFrameId = void 0), this._source && (this._source.disconnect(), this._source = void 0), this._analyser && (this._analyser.disconnect(), this._analyser = void 0), this._audioContext && this._audioContext.state !== "closed" && (this._audioContext.close().catch(console.error), this._audioContext = void 0), this._dataArray = void 0, this._levels = new Array(this.bars).fill(0);
+  }
+  /**
+   * Start the animation loop for updating levels
+   */
+  startAnimationLoop() {
+    const t = () => {
+      const e = this._analyser, s = this._dataArray;
+      if (!e || !s)
+        return;
+      e.getByteFrequencyData(s);
+      const a = [], i = s.length, r = Math.floor(i / this.bars);
+      for (let o = 0; o < this.bars; o++) {
+        const h = o * r, u = Math.min(h + r, i);
+        let m = 0;
+        for (let d = h; d < u; d++)
+          m += s[d] ?? 0;
+        const v = m / (u - h);
+        a.push(v / 255);
+      }
+      this._levels = a, this.requestUpdate(), this._animationFrameId = requestAnimationFrame(t);
+    };
+    this._animationFrameId = requestAnimationFrame(t);
+  }
+  /**
+   * Get the color class based on level
+   */
+  getLevelClass(t) {
+    return t > 0.7 ? "level-high" : t > 0.4 ? "level-medium" : t > 0.05 ? "level-low" : "";
+  }
+  /**
+   * Get the active class if level is above threshold
+   */
+  isActive(t) {
+    return t > 0.05;
+  }
+  /**
+   * Render the component
+   */
+  render() {
+    const t = this._levels.length === this.bars ? this._levels : new Array(this.bars).fill(0);
+    return p`
+      <div class="container" part="container">
+        ${t.map((e, s) => {
+      const a = this.isActive(e), i = this.getLevelClass(e), r = Math.max(4, e * this.maxSize), o = this.orientation === "horizontal" ? `width: ${r}px;` : `height: ${r}px;`;
+      return p`
+            <div
+              class="bar ${a ? "active" : ""} ${i}"
+              part="bar ${a ? "bar-active" : ""}"
+              style="${o}"
+              data-bar-index="${s}"
+            ></div>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+n.styles = y`
+    :host {
+      /* CSS Custom Properties for theming */
+      --sw-color-success: #10b981;
+      --sw-color-warning: #f59e0b;
+      --sw-color-danger: #ef4444;
+      --sw-audio-bar-width: 4px;
+      --sw-audio-bar-gap: 2px;
+      --sw-audio-bar-radius: 2px;
+      --sw-audio-bar-background: rgba(255, 255, 255, 0.2);
+
+      display: inline-flex;
+    }
+
+    .container {
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      gap: var(--sw-audio-bar-gap);
+    }
+
+    :host([orientation='horizontal']) .container {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    :host([orientation='vertical']) .container,
+    .container {
+      flex-direction: row;
+      align-items: flex-end;
+    }
+
+    .bar {
+      width: var(--sw-audio-bar-width);
+      background: var(--sw-audio-bar-background);
+      border-radius: var(--sw-audio-bar-radius);
+      transition:
+        height 0.05s ease-out,
+        width 0.05s ease-out,
+        background-color 0.1s ease;
+      min-height: 4px;
+    }
+
+    :host([orientation='horizontal']) .bar {
+      height: var(--sw-audio-bar-width);
+      width: 4px;
+      min-width: 4px;
+      min-height: auto;
+    }
+
+    .bar.active {
+      /* Color is set dynamically via inline style */
+    }
+
+    .bar.level-low {
+      background-color: var(--sw-color-success);
+    }
+
+    .bar.level-medium {
+      background-color: var(--sw-color-warning);
+    }
+
+    .bar.level-high {
+      background-color: var(--sw-color-danger);
+    }
+  `;
+l([
+  c({ type: Object })
+], n.prototype, "stream", 2);
+l([
+  c({ type: Number })
+], n.prototype, "bars", 2);
+l([
+  c({ type: String, reflect: !0 })
+], n.prototype, "orientation", 2);
+l([
+  c({ type: Number })
+], n.prototype, "maxSize", 2);
+l([
+  f()
+], n.prototype, "_levels", 2);
+n = l([
+  _("sw-audio-level")
+], n);
+export {
+  n as AudioLevel
+};
+//# sourceMappingURL=audio-level.js.map

package/dist/components/audio-level.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-level.js","sources":["../../src/components/audio-level.ts"],"sourcesContent":["/**\n * Audio Level Component\n *\n * Visual audio level indicator that renders real-time audio levels from a MediaStream\n * via Web Audio API. Displays configurable number of bars with color transitions\n * based on audio intensity.\n *\n * @example\n * ```html\n * <sw-audio-level .stream=${mediaStream} bars=\"5\" orientation=\"vertical\"></sw-audio-level>\n * ```\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n@customElement('sw-audio-level')\nexport class AudioLevel extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-success: #10b981;\n      --sw-color-warning: #f59e0b;\n      --sw-color-danger: #ef4444;\n      --sw-audio-bar-width: 4px;\n      --sw-audio-bar-gap: 2px;\n      --sw-audio-bar-radius: 2px;\n      --sw-audio-bar-background: rgba(255, 255, 255, 0.2);\n\n      display: inline-flex;\n    }\n\n    .container {\n      display: flex;\n      align-items: flex-end;\n      justify-content: center;\n      gap: var(--sw-audio-bar-gap);\n    }\n\n    :host([orientation='horizontal']) .container {\n      flex-direction: row;\n      align-items: center;\n    }\n\n    :host([orientation='vertical']) .container,\n    .container {\n      flex-direction: row;\n      align-items: flex-end;\n    }\n\n    .bar {\n      width: var(--sw-audio-bar-width);\n      background: var(--sw-audio-bar-background);\n      border-radius: var(--sw-audio-bar-radius);\n      transition:\n        height 0.05s ease-out,\n        width 0.05s ease-out,\n        background-color 0.1s ease;\n      min-height: 4px;\n    }\n\n    :host([orientation='horizontal']) .bar {\n      height: var(--sw-audio-bar-width);\n      width: 4px;\n      min-width: 4px;\n      min-height: auto;\n    }\n\n    .bar.active {\n      /* Color is set dynamically via inline style */\n    }\n\n    .bar.level-low {\n      background-color: var(--sw-color-success);\n    }\n\n    .bar.level-medium {\n      background-color: var(--sw-color-warning);\n    }\n\n    .bar.level-high {\n      background-color: var(--sw-color-danger);\n    }\n  `;\n\n  /**\n   * MediaStream to analyze for audio levels\n   */\n  @property({ type: Object }) stream?: MediaStream;\n\n  /**\n   * Number of bars to display (default: 5)\n   */\n  @property({ type: Number }) bars = 5;\n\n  /**\n   * Orientation of the bars: 'vertical' or 'horizontal'\n   */\n  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Maximum height/width of bars in pixels\n   */\n  @property({ type: Number }) maxSize = 32;\n\n  /**\n   * Current audio levels for each bar (0-1)\n   */\n  @state() private _levels: number[] = [];\n\n  /**\n   * Web Audio API context\n   */\n  private _audioContext?: AudioContext;\n\n  /**\n   * Analyser node for frequency data\n   */\n  private _analyser?: AnalyserNode;\n\n  /**\n   * Source node connected to the MediaStream\n   */\n  private _source?: MediaStreamAudioSourceNode;\n\n  /**\n   * Animation frame ID for cleanup\n   */\n  private _animationFrameId?: number;\n\n  /**\n   * Frequency data buffer\n   */\n  private _dataArray?: Uint8Array<ArrayBuffer>;\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this._levels = new Array(this.bars).fill(0);\n    if (this.stream) {\n      this.setupAudioAnalysis();\n    }\n  }\n\n  /**\n   * Lifecycle: React to property changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('stream')) {\n      this.cleanupAudioAnalysis();\n      if (this.stream) {\n        this.setupAudioAnalysis();\n      }\n    }\n\n    if (changedProperties.has('bars')) {\n      this._levels = new Array(this.bars).fill(0);\n    }\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupAudioAnalysis();\n  }\n\n  /**\n   * Public method to release all audio resources immediately\n   * Call this before stopping the MediaStream tracks to ensure proper cleanup\n   */\n  public releaseResources(): void {\n    this.cleanupAudioAnalysis();\n    this.stream = undefined;\n  }\n\n  /**\n   * Setup Web Audio API for audio level analysis\n   */\n  private setupAudioAnalysis(): void {\n    if (!this.stream) return;\n\n    // Check if stream has audio tracks\n    const audioTracks = this.stream.getAudioTracks();\n    if (audioTracks.length === 0) {\n      console.warn('sw-audio-level: MediaStream has no audio tracks');\n      return;\n    }\n\n    try {\n      // Create AudioContext\n      this._audioContext = new AudioContext();\n\n      // Create analyser node\n      this._analyser = this._audioContext.createAnalyser();\n      this._analyser.fftSize = 256;\n      this._analyser.smoothingTimeConstant = 0.8;\n\n      // Create source from MediaStream\n      this._source = this._audioContext.createMediaStreamSource(this.stream);\n      this._source.connect(this._analyser);\n\n      // Create data array for frequency data\n      const bufferLength = this._analyser.frequencyBinCount;\n      this._dataArray = new Uint8Array(bufferLength);\n\n      // Start animation loop\n      this.startAnimationLoop();\n    } catch (error) {\n      console.error('sw-audio-level: Failed to setup audio analysis:', error);\n    }\n  }\n\n  /**\n   * Cleanup Web Audio API resources\n   */\n  private cleanupAudioAnalysis(): void {\n    // Cancel animation frame\n    if (this._animationFrameId !== undefined) {\n      cancelAnimationFrame(this._animationFrameId);\n      this._animationFrameId = undefined;\n    }\n\n    // Disconnect source\n    if (this._source) {\n      this._source.disconnect();\n      this._source = undefined;\n    }\n\n    // Disconnect analyser (not strictly necessary but good practice)\n    if (this._analyser) {\n      this._analyser.disconnect();\n      this._analyser = undefined;\n    }\n\n    // Close AudioContext\n    if (this._audioContext && this._audioContext.state !== 'closed') {\n      this._audioContext.close().catch(console.error);\n      this._audioContext = undefined;\n    }\n\n    // Clear data array\n    this._dataArray = undefined;\n\n    // Reset levels\n    this._levels = new Array(this.bars).fill(0);\n  }\n\n  /**\n   * Start the animation loop for updating levels\n   */\n  private startAnimationLoop(): void {\n    const updateLevels = () => {\n      const analyser = this._analyser;\n      const dataArray = this._dataArray;\n      if (!analyser || !dataArray) {\n        return;\n      }\n\n      // Get frequency data\n      analyser.getByteFrequencyData(dataArray);\n\n      // Calculate levels for each bar by sampling frequency ranges\n      const levels: number[] = [];\n      const binCount = dataArray.length;\n      const binsPerBar = Math.floor(binCount / this.bars);\n\n      for (let i = 0; i < this.bars; i++) {\n        const startBin = i * binsPerBar;\n        const endBin = Math.min(startBin + binsPerBar, binCount);\n\n        // Average the frequency values for this bar's range\n        let sum = 0;\n        for (let j = startBin; j < endBin; j++) {\n          sum += dataArray[j] ?? 0;\n        }\n        const average = sum / (endBin - startBin);\n\n        // Normalize to 0-1 range\n        levels.push(average / 255);\n      }\n\n      this._levels = levels;\n      this.requestUpdate();\n\n      // Schedule next frame\n      this._animationFrameId = requestAnimationFrame(updateLevels);\n    };\n\n    this._animationFrameId = requestAnimationFrame(updateLevels);\n  }\n\n  /**\n   * Get the color class based on level\n   */\n  private getLevelClass(level: number): string {\n    if (level > 0.7) return 'level-high';\n    if (level > 0.4) return 'level-medium';\n    if (level > 0.05) return 'level-low';\n    return '';\n  }\n\n  /**\n   * Get the active class if level is above threshold\n   */\n  private isActive(level: number): boolean {\n    return level > 0.05;\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    // Ensure we have the right number of levels\n    const levels = this._levels.length === this.bars ? this._levels : new Array(this.bars).fill(0);\n\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${levels.map((level, index) => {\n          const isActive = this.isActive(level);\n          const levelClass = this.getLevelClass(level);\n          const size = Math.max(4, level * this.maxSize);\n\n          const style =\n            this.orientation === 'horizontal' ? `width: ${size}px;` : `height: ${size}px;`;\n\n          return html`\n            <div\n              class=\"bar ${isActive ? 'active' : ''} ${levelClass}\"\n              part=\"bar ${isActive ? 'bar-active' : ''}\"\n              style=\"${style}\"\n              data-bar-index=\"${index}\"\n            ></div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-audio-level': AudioLevel;\n  }\n}\n"],"names":["AudioLevel","LitElement","changedProperties","bufferLength","error","updateLevels","analyser","dataArray","levels","binCount","binsPerBar","i","startBin","endBin","sum","j","average","level","html","index","isActive","levelClass","size","style","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/call-controls.d.ts

@@ -0,0 +1,163 @@
+/**
+ * Call Controls Component
+ *
+ * Responsive button bar for call actions. Displays mute audio, mute video,
+ * screen share, and hangup buttons with states reflecting current call state.
+ *
+ * @example
+ * ```html
+ * <sw-call-controls .call=${call}></sw-call-controls>
+ * ```
+ */
+import { LitElement } from 'lit';
+import type { Observable } from 'rxjs';
+/**
+ * Screen share status type
+ */
+export type ScreenShareStatus = 'inactive' | 'pending' | 'active';
+/**
+ * SelfParticipant interface for call controls
+ */
+export interface SelfParticipant {
+    id: string;
+    audioMuted$: Observable<boolean>;
+    videoMuted$: Observable<boolean>;
+    screenShareStatus$?: Observable<string>;
+    mute: () => Promise<void>;
+    unmute: () => Promise<void>;
+    muteVideo: () => Promise<void>;
+    unmuteVideo: () => Promise<void>;
+    startScreenShare?: () => Promise<void>;
+    stopScreenShare?: () => Promise<void>;
+}
+/**
+ * Call interface for call controls
+ */
+export interface CallControlsCall {
+    self?: SelfParticipant | null;
+    self$?: Observable<SelfParticipant | null>;
+    capabilities$?: Observable<string[]>;
+    hangup: () => Promise<void>;
+}
+export declare class CallControls extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The call object - can be provided via property or context
+     */
+    call?: CallControlsCall;
+    /**
+     * Consume call from context if not provided as property
+     */
+    private _contextCall?;
+    /**
+     * Orientation: horizontal (default) or vertical
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Show tooltips on hover
+     */
+    showTooltips: boolean;
+    /**
+     * Current audio muted state
+     */
+    private _audioMuted;
+    /**
+     * Current video muted state
+     */
+    private _videoMuted;
+    /**
+     * Current screen share status
+     */
+    private _screenShareStatus;
+    /**
+     * Available capabilities
+     */
+    private _capabilities;
+    /**
+     * Is overflow menu open
+     */
+    private _overflowOpen;
+    /**
+     * RxJS subscriptions for cleanup
+     */
+    private subscriptions;
+    /**
+     * Cached self participant reference for button handlers.
+     * Marked as @state() to trigger re-render when self becomes available,
+     * enabling the control buttons.
+     */
+    private selfParticipant?;
+    /**
+     * Get the effective call (property or context)
+     */
+    private get effectiveCall();
+    /**
+     * Lifecycle: Component connected to DOM
+     */
+    connectedCallback(): void;
+    /**
+     * Lifecycle: React to property changes
+     */
+    protected updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Lifecycle: Component disconnected from DOM
+     */
+    disconnectedCallback(): void;
+    /**
+     * Subscribe to call observables
+     */
+    private setupSubscriptions;
+    /**
+     * Cleanup all subscriptions
+     */
+    private cleanupSubscriptions;
+    /**
+     * Check if capability is available
+     */
+    private hasCapability;
+    /**
+     * Handle mute audio toggle
+     */
+    private handleMuteAudio;
+    /**
+     * Handle mute video toggle
+     */
+    private handleMuteVideo;
+    /**
+     * Handle screen share toggle
+     */
+    private handleScreenShare;
+    /**
+     * Handle hangup
+     */
+    private handleHangup;
+    /**
+     * Toggle overflow menu
+     */
+    private toggleOverflow;
+    /**
+     * Get tooltip text for button
+     */
+    private getTooltipText;
+    /**
+     * Render button icon
+     */
+    private renderIcon;
+    /**
+     * Render a control button
+     */
+    private renderButton;
+    /**
+     * Render the component
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * Declare global type for TypeScript
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-call-controls': CallControls;
+    }
+}
+//# sourceMappingURL=call-controls.d.ts.map

package/dist/components/call-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"call-controls.d.ts","sourceRoot":"","sources":["../../src/components/call-controls.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAGvC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACjC,kBAAkB,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACxC,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;IACrC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AAOD,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,0BAmPX;IAEF;;OAEG;IACyB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IAEpD;;OAEG;IAGH,OAAO,CAAC,YAAY,CAAC,CAAmB;IAExC;;OAEG;IACyB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAElF;;OAEG;IACsD,YAAY,UAAQ;IAE7E;;OAEG;IACM,OAAO,CAAC,WAAW,CAAS;IAErC;;OAEG;IACM,OAAO,CAAC,WAAW,CAAS;IAErC;;OAEG;IACM,OAAO,CAAC,kBAAkB,CAAiC;IAEpE;;OAEG;IACM,OAAO,CAAC,aAAa,CAAgB;IAE9C;;OAEG;IACM,OAAO,CAAC,aAAa,CAAS;IAEvC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;;;OAIG;IACM,OAAO,CAAC,eAAe,CAAC,CAAkB;IAEnD;;OAEG;IACH,OAAO,KAAK,aAAa,GAExB;IAED;;OAEG;IACH,iBAAiB;IAKjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQhE;;OAEG;IACH,oBAAoB;IAKpB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAyE1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACH,OAAO,CAAC,aAAa;IAQrB;;OAEG;YACW,eAAe;IA0B7B;;OAEG;YACW,eAAe;IA0B7B;;OAEG;YACW,iBAAiB;IA0B/B;;OAEG;YACW,YAAY;IAkB1B;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,cAAc;IAatB;;OAEG;IACH,OAAO,CAAC,UAAU;IAkDlB;;OAEG;IACH,OAAO,CAAC,YAAY;IA6BpB;;OAEG;IACH,MAAM;CAkFP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,YAAY,CAAC;KAClC;CACF"}