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

package/README.md

@@ -24,12 +24,14 @@ 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
 <!-- Basic video call layout -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <sw-participants>
     <sw-self-media mirror></sw-self-media>
   </sw-participants>
@@ -51,6 +53,7 @@ Root container component that renders the remote video stream and provides call
 | `call` | `Call` | - | Call object with streams and layout data |
 
 **CSS Custom Properties:**
+
 ```css
 sw-call-media {
   --sw-color-primary: #044cf6;
@@ -62,12 +65,13 @@ sw-call-media {
 **CSS Parts:** `container`, `video`, `layers`
 
 **Usage:**
+
 ```html
 <!-- Basic usage -->
-<sw-call-media .call=${call}></sw-call-media>
+<sw-call-media .call="${call}"></sw-call-media>
 
 <!-- With child components -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <sw-participants>
     <sw-self-media></sw-self-media>
   </sw-participants>
@@ -96,6 +100,7 @@ Renders the local video stream as an overlay with positioning from layout layers
 **Context:** Consumes `callContext` from parent `sw-call-media`
 
 **Usage:**
+
 ```html
 <!-- Basic usage (inside sw-participants) -->
 <sw-participants>
@@ -119,14 +124,15 @@ Renders overlay containers for all remote participants based on layout layer dat
 **Context:** Consumes `callContext` from parent `sw-call-media`
 
 **Usage:**
+
 ```html
 <!-- Basic usage -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <sw-participants></sw-participants>
 </sw-call-media>
 
 <!-- With local video as child -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <sw-participants>
     <sw-self-media mirror></sw-self-media>
   </sw-participants>
@@ -155,6 +161,7 @@ Responsive button bar for call actions: mute audio, mute video, screen share, an
 | `sw-hangup` | - | Call ended |
 
 **CSS Custom Properties:**
+
 ```css
 sw-call-controls {
   --sw-color-primary: #044cf6;
@@ -168,15 +175,16 @@ sw-call-controls {
 **CSS Parts:** `container`, `button`, `button-active`, `button-disabled`, `tooltip`
 
 **Usage:**
+
 ```html
 <!-- Basic usage (uses context from sw-call-media) -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <!-- ... -->
 </sw-call-media>
 <sw-call-controls></sw-call-controls>
 
 <!-- With explicit call property -->
-<sw-call-controls .call=${call} orientation="vertical"></sw-call-controls>
+<sw-call-controls .call="${call}" orientation="vertical"></sw-call-controls>
 
 <!-- Without tooltips -->
 <sw-call-controls show-tooltips="false"></sw-call-controls>
@@ -206,9 +214,10 @@ 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:**
+
 ```css
 sw-call-status {
   --sw-color-primary: #044cf6;
@@ -221,12 +230,13 @@ sw-call-status {
 **CSS Parts:** `container`, `status-text`, `duration`
 
 **Usage:**
+
 ```html
 <!-- Basic usage (uses context) -->
 <sw-call-status></sw-call-status>
 
 <!-- With explicit call -->
-<sw-call-status .call=${call}></sw-call-status>
+<sw-call-status .call="${call}"></sw-call-status>
 ```
 
 ---
@@ -250,6 +260,7 @@ sw-call-status {
 | `sw-dial` | `{ digits: string }` | Call button clicked |
 
 **CSS Custom Properties:**
+
 ```css
 sw-dialpad {
   --sw-color-primary: #044cf6;
@@ -262,6 +273,7 @@ sw-dialpad {
 **CSS Parts:** `container`, `display`, `keypad`, `key`, `key-pressed`, `call-button`
 
 **Usage:**
+
 ```html
 <!-- Basic DTMF dialpad (uses context) -->
 <sw-dialpad></sw-dialpad>
@@ -270,7 +282,7 @@ sw-dialpad {
 <sw-dialpad show-call-button placeholder="Phone number"></sw-dialpad>
 
 <!-- With explicit call -->
-<sw-dialpad .call=${call}></sw-dialpad>
+<sw-dialpad .call="${call}"></sw-dialpad>
 ```
 
 ```typescript
@@ -302,10 +314,11 @@ 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:**
+
 ```css
 sw-device-selector {
   --sw-color-primary: #044cf6;
@@ -317,15 +330,13 @@ sw-device-selector {
 **CSS Parts:** `container`, `tabs`, `device-list`, `device-item`, `device-item-selected`, `preview`
 
 **Usage:**
+
 ```html
 <!-- Basic usage -->
-<sw-device-selector .deviceController=${deviceController}></sw-device-selector>
+<sw-device-selector .deviceController="${deviceController}"></sw-device-selector>
 
 <!-- With preview panel -->
-<sw-device-selector
-  .deviceController=${deviceController}
-  show-preview>
-</sw-device-selector>
+<sw-device-selector .deviceController="${deviceController}" show-preview> </sw-device-selector>
 ```
 
 ```typescript
@@ -353,6 +364,7 @@ Real-time audio level indicator using Web Audio API.
 | `maxSize` | `number` | `32` | Maximum bar height/width in pixels |
 
 **CSS Custom Properties:**
+
 ```css
 sw-audio-level {
   --sw-color-success: #10b981;
@@ -368,16 +380,13 @@ sw-audio-level {
 **CSS Parts:** `container`, `bar`, `bar-active`
 
 **Usage:**
+
 ```html
 <!-- Basic usage -->
-<sw-audio-level .stream=${localStream}></sw-audio-level>
+<sw-audio-level .stream="${localStream}"></sw-audio-level>
 
 <!-- Horizontal with more bars -->
-<sw-audio-level
-  .stream=${localStream}
-  orientation="horizontal"
-  bars="10"
-  maxSize="48">
+<sw-audio-level .stream="${localStream}" orientation="horizontal" bars="10" maxSize="48">
 </sw-audio-level>
 ```
 
@@ -403,6 +412,7 @@ Single button widget for calling a preconfigured destination.
 | `sw-hangup` | - | Call ended |
 
 **CSS Custom Properties:**
+
 ```css
 sw-click-to-call {
   --sw-color-primary: #044cf6;
@@ -414,20 +424,19 @@ sw-click-to-call {
 **CSS Parts:** `container`, `button`, `controls`, `status`, `duration`
 
 **Usage:**
+
 ```html
 <!-- Basic click-to-call button -->
-<sw-click-to-call
-  .client=${client}
-  destination="sip:support@example.com"
-  label="Contact Support">
+<sw-click-to-call .client="${client}" destination="sip:support@example.com" label="Contact Support">
 </sw-click-to-call>
 
 <!-- Audio/video call -->
 <sw-click-to-call
-  .client=${client}
+  .client="${client}"
   destination="+15551234567"
   label="Call Sales"
-  audio-only="false">
+  audio-only="false"
+>
 </sw-click-to-call>
 ```
 
@@ -461,6 +470,7 @@ Searchable list of directory addresses for selecting call destinations.
 | `sw-dial` | `{ address: Address }` | Address dialed (double-click) |
 
 **CSS Custom Properties:**
+
 ```css
 sw-directory {
   --sw-color-primary: #044cf6;
@@ -472,9 +482,10 @@ sw-directory {
 **CSS Parts:** `container`, `search`, `list`, `item`, `item-selected`, `item-name`, `item-type`, `item-channels`
 
 **Usage:**
+
 ```html
 <!-- Basic directory list -->
-<sw-directory .directory=${directoryService}></sw-directory>
+<sw-directory .directory="${directoryService}"></sw-directory>
 ```
 
 ```typescript
@@ -517,6 +528,7 @@ Control panel for individual participant actions (mute, volume, pin, remove).
 **CSS Parts:** `container`, `action-button`, `slider`
 
 **Usage:**
+
 ```html
 <!-- Basic participant controls -->
 <sw-participant-controls
@@ -564,6 +576,7 @@ Simple example button component for demonstration purposes.
 **CSS Parts:** `button`
 
 **Usage:**
+
 ```html
 <!-- Primary button -->
 <sw-example-button>Click Me</sw-example-button>
@@ -580,7 +593,7 @@ The components use Lit context (`@lit/context`) to share call state. The `sw-cal
 
 ```html
 <!-- sw-call-media provides context -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <!-- These components consume context automatically -->
   <sw-participants>
     <sw-self-media></sw-self-media>
@@ -588,8 +601,8 @@ The components use Lit context (`@lit/context`) to share call state. The `sw-cal
 </sw-call-media>
 
 <!-- Components outside sw-call-media need explicit call property -->
-<sw-call-controls .call=${call}></sw-call-controls>
-<sw-call-status .call=${call}></sw-call-status>
+<sw-call-controls .call="${call}"></sw-call-controls>
+<sw-call-status .call="${call}"></sw-call-status>
 ```
 
 ---
@@ -655,12 +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 {
@@ -686,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 {
@@ -714,68 +719,68 @@ interface Address {
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <style>
-    .call-container {
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      background: #000;
-    }
-
-    .video-area {
-      flex: 1;
-      position: relative;
-    }
-
-    .controls-bar {
-      padding: 16px;
-      display: flex;
-      justify-content: center;
-      gap: 16px;
-      background: rgba(0, 0, 0, 0.8);
-    }
-  </style>
-</head>
-<body>
-  <div class="call-container">
-    <sw-call-status></sw-call-status>
-
-    <div class="video-area">
-      <sw-call-media id="call-media">
-        <sw-participants>
-          <sw-self-media mirror></sw-self-media>
-        </sw-participants>
-      </sw-call-media>
-    </div>
-
-    <div class="controls-bar">
-      <sw-call-controls></sw-call-controls>
-      <sw-dialpad></sw-dialpad>
+  <head>
+    <style>
+      .call-container {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        background: #000;
+      }
+
+      .video-area {
+        flex: 1;
+        position: relative;
+      }
+
+      .controls-bar {
+        padding: 16px;
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        background: rgba(0, 0, 0, 0.8);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="call-container">
+      <sw-call-status></sw-call-status>
+
+      <div class="video-area">
+        <sw-call-media id="call-media">
+          <sw-participants>
+            <sw-self-media mirror></sw-self-media>
+          </sw-participants>
+        </sw-call-media>
+      </div>
+
+      <div class="controls-bar">
+        <sw-call-controls></sw-call-controls>
+        <sw-dialpad></sw-dialpad>
+      </div>
     </div>
-  </div>
 
-  <script type="module">
-    import '@signalwire/web-components';
-    import { SignalWire } from '@signalwire/signalwire-js';
+    <script type="module">
+      import '@signalwire/web-components';
+      import { SignalWire } from '@signalwire/js';
 
-    const client = new SignalWire({
-      host: 'your-signalwire-space.signalwire.com',
-      token: 'your-token'
-    });
+      const client = new SignalWire({
+        host: 'your-signalwire-space.signalwire.com',
+        token: 'your-token'
+      });
 
-    await client.connect();
+      await client.connect();
 
-    const call = await client.call({
-      destination: 'sip:room@example.com',
-      audio: true,
-      video: true
-    });
+      const call = await client.call({
+        destination: 'sip:room@example.com',
+        audio: true,
+        video: true
+      });
 
-    // Set the call on the media component (provides context)
-    document.getElementById('call-media').call = call;
-  </script>
-</body>
+      // Set the call on the media component (provides context)
+      document.getElementById('call-media').call = call;
+    </script>
+  </body>
 </html>
 ```
 

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"}