@signalwire/web-components 4.0.0-beta.3 → 4.0.0-beta.4

package/dist/components/self-media.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Self Media Component
+ *
+ * Renders local video overlay with positioning from layoutLayers.
+ * Supports optional mirror transform for the video element.
+ *
+ * @example
+ * ```html
+ * <self-media mirror=${true}></self-media>
+ * ```
+ */
+import { LitElement } from 'lit';
+import type { Call } from '../types/index.js';
+export declare class SelfMedia extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Mirror the local video horizontally
+     */
+    mirror: boolean;
+    /**
+     * Consumes call context from parent call-media component
+     */
+    private _call?;
+    /**
+     * Public call property for direct assignment (when not nested in sw-call-media)
+     */
+    set call(value: Call | undefined);
+    get call(): Call | undefined;
+    /**
+     * Current local stream value from observable
+     */
+    private _localStreamValue;
+    /**
+     * Current layout layers value from observable
+     */
+    private _layoutLayersValue;
+    /**
+     * RxJS subscriptions for cleanup
+     */
+    private subscriptions;
+    /**
+     * Lifecycle: Component connected to DOM
+     */
+    connectedCallback(): void;
+    /**
+     * Lifecycle: React to property/context 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;
+    /**
+     * Find self layer in layout layers
+     */
+    private getSelfLayer;
+    /**
+     * Render the component
+     */
+    render(): import("lit-html").TemplateResult<1> | null;
+}
+/**
+ * Declare global type for TypeScript
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-self-media': SelfMedia;
+    }
+}
+//# sourceMappingURL=self-media.d.ts.map

package/dist/components/self-media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"self-media.d.ts","sourceRoot":"","sources":["../../src/components/self-media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,IAAI,EAAe,MAAM,mBAAmB,CAAC;AAI3D,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAYX;IAEF;;OAEG;IAC0B,MAAM,UAAS;IAE5C;;OAEG;IAGH,OAAO,CAAC,KAAK,CAAC,CAAO;IAErB;;OAEG;IACH,IACI,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,EAI/B;IACD,IAAI,IAAI,IAAI,IAAI,GAAG,SAAS,CAE3B;IAED;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAA4B;IAErD;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,iBAAiB;IAKjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUhE;;OAEG;IACH,oBAAoB;IAKpB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAsB1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAK5B;;OAEG;IACH,OAAO,CAAC,YAAY;IAMpB;;OAEG;IACH,MAAM;CAqCP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAC;KAC5B;CACF"}

package/dist/components/self-media.js

@@ -0,0 +1,128 @@
+import { LitElement as u, html as p, css as h } from "lit";
+import { property as n, customElement as b } from "lit/decorators.js";
+import { consume as d } from "@lit/context";
+import { getSelfId as f } from "../types/index.js";
+import { callContext as y } from "../context/call-context.js";
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, e, l, r) => {
+  for (var s = r > 1 ? void 0 : r ? _(e, l) : e, a = t.length - 1, c; a >= 0; a--)
+    (c = t[a]) && (s = (r ? c(e, l, s) : c(s)) || s);
+  return r && s && m(e, l, s), s;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.mirror = !1, this._localStreamValue = null, this._layoutLayersValue = [], this.subscriptions = [];
+  }
+  set call(t) {
+    this._call = t, this.cleanupSubscriptions(), this.setupSubscriptions();
+  }
+  get call() {
+    return this._call;
+  }
+  /**
+   * Lifecycle: Component connected to DOM
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.setupSubscriptions();
+  }
+  /**
+   * Lifecycle: React to property/context changes
+   */
+  updated(t) {
+    super.updated(t), t.has("_call") && this._call && (this.cleanupSubscriptions(), this.setupSubscriptions());
+  }
+  /**
+   * Lifecycle: Component disconnected from DOM
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanupSubscriptions();
+  }
+  /**
+   * Subscribe to call observables
+   */
+  setupSubscriptions() {
+    this._call && (this.subscriptions.push(
+      this._call.localStream$.subscribe((t) => {
+        this._localStreamValue = t, this.requestUpdate();
+      })
+    ), this.subscriptions.push(
+      this._call.layoutLayers$.subscribe((t) => {
+        this._layoutLayersValue = t, this.requestUpdate();
+      })
+    ));
+  }
+  /**
+   * Cleanup all subscriptions
+   */
+  cleanupSubscriptions() {
+    this.subscriptions.forEach((t) => t.unsubscribe()), this.subscriptions = [];
+  }
+  /**
+   * Find self layer in layout layers
+   */
+  getSelfLayer() {
+    const t = f(this._call);
+    return this._layoutLayersValue.find((e) => e.member_id === t);
+  }
+  /**
+   * Render the component
+   */
+  render() {
+    const t = this.getSelfLayer();
+    if (!t) return null;
+    const e = `
+      position: absolute;
+      top: ${t.y}%;
+      left: ${t.x}%;
+      width: ${t.width}%;
+      height: ${t.height}%;
+      opacity: ${t.visible ? 1 : 0};
+      overflow: hidden;
+      transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
+      pointer-events: none;
+    `, l = this.mirror ? "transform: scale(-1, 1); -webkit-transform: scale(-1, 1);" : "";
+    return p`
+      <div class="local-overlay" part="container" style="${e}">
+        <video
+          class="local-video"
+          part="video"
+          style="width: 100%; height: 100%; object-fit: cover; ${l}"
+          autoplay
+          playsinline
+          muted
+          disablePictureInPicture
+          .srcObject=${this._localStreamValue}
+        ></video>
+      </div>
+    `;
+  }
+};
+i.styles = h`
+    :host {
+      display: contents; /* Doesn't create a box, children inherit positioning */
+    }
+
+    .local-overlay {
+      box-sizing: border-box;
+    }
+
+    video {
+      display: block;
+    }
+  `;
+o([
+  n({ type: Boolean })
+], i.prototype, "mirror", 2);
+o([
+  d({ context: y, subscribe: !0 }),
+  n({ attribute: !1 })
+], i.prototype, "_call", 2);
+o([
+  n({ attribute: !1 })
+], i.prototype, "call", 1);
+i = o([
+  b("sw-self-media")
+], i);
+export {
+  i as SelfMedia
+};
+//# sourceMappingURL=self-media.js.map

package/dist/components/self-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"self-media.js","sources":["../../src/components/self-media.ts"],"sourcesContent":["/**\n * Self Media Component\n *\n * Renders local video overlay with positioning from layoutLayers.\n * Supports optional mirror transform for the video element.\n *\n * @example\n * ```html\n * <self-media mirror=${true}></self-media>\n * ```\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { Call, LayoutLayer } from '../types/index.js';\nimport { getSelfId } from '../types/index.js';\nimport { callContext } from '../context/call-context.js';\n\n@customElement('sw-self-media')\nexport class SelfMedia extends LitElement {\n  static styles = css`\n    :host {\n      display: contents; /* Doesn't create a box, children inherit positioning */\n    }\n\n    .local-overlay {\n      box-sizing: border-box;\n    }\n\n    video {\n      display: block;\n    }\n  `;\n\n  /**\n   * Mirror the local video horizontally\n   */\n  @property({ type: Boolean }) mirror = false;\n\n  /**\n   * Consumes call context from parent call-media component\n   */\n  @consume({ context: callContext, subscribe: true })\n  @property({ attribute: false })\n  private _call?: Call;\n\n  /**\n   * Public call property for direct assignment (when not nested in sw-call-media)\n   */\n  @property({ attribute: false })\n  set call(value: Call | undefined) {\n    this._call = value;\n    this.cleanupSubscriptions();\n    this.setupSubscriptions();\n  }\n  get call(): Call | undefined {\n    return this._call;\n  }\n\n  /**\n   * Current local stream value from observable\n   */\n  private _localStreamValue: MediaStream | null = null;\n\n  /**\n   * Current layout layers value from observable\n   */\n  private _layoutLayersValue: LayoutLayer[] = [];\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this.setupSubscriptions();\n  }\n\n  /**\n   * Lifecycle: React to property/context changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_call') && this._call) {\n      // Clean up old subscriptions first\n      this.cleanupSubscriptions();\n      // Set up new subscriptions\n      this.setupSubscriptions();\n    }\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupSubscriptions();\n  }\n\n  /**\n   * Subscribe to call observables\n   */\n  private setupSubscriptions(): void {\n    // Continue observing even if _call is undefined initially\n    // This allows component to react when call becomes available\n    if (!this._call) return;\n\n    // Subscribe to local stream\n    this.subscriptions.push(\n      this._call.localStream$.subscribe((stream: MediaStream | null) => {\n        this._localStreamValue = stream;\n        this.requestUpdate();\n      })\n    );\n\n    // Subscribe to layout layers\n    this.subscriptions.push(\n      this._call.layoutLayers$.subscribe((layers: LayoutLayer[]) => {\n        this._layoutLayersValue = layers;\n        this.requestUpdate();\n      })\n    );\n  }\n\n  /**\n   * Cleanup all subscriptions\n   */\n  private cleanupSubscriptions(): void {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n  }\n\n  /**\n   * Find self layer in layout layers\n   */\n  private getSelfLayer(): LayoutLayer | undefined {\n    // Get selfId dynamically from call.self to handle cases where self is available after subscription setup\n    const selfId = getSelfId(this._call);\n    return this._layoutLayersValue.find((layer) => layer.member_id === selfId);\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    const layer = this.getSelfLayer();\n\n    // Skip rendering but continue observing - return null allows reactive updates\n    if (!layer) return null;\n\n    const style = `\n      position: absolute;\n      top: ${layer.y}%;\n      left: ${layer.x}%;\n      width: ${layer.width}%;\n      height: ${layer.height}%;\n      opacity: ${layer.visible ? 1 : 0};\n      overflow: hidden;\n      transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;\n      pointer-events: none;\n    `;\n\n    const videoStyle = this.mirror\n      ? 'transform: scale(-1, 1); -webkit-transform: scale(-1, 1);'\n      : '';\n\n    return html`\n      <div class=\"local-overlay\" part=\"container\" style=\"${style}\">\n        <video\n          class=\"local-video\"\n          part=\"video\"\n          style=\"width: 100%; height: 100%; object-fit: cover; ${videoStyle}\"\n          autoplay\n          playsinline\n          muted\n          disablePictureInPicture\n          .srcObject=${this._localStreamValue}\n        ></video>\n      </div>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-self-media': SelfMedia;\n  }\n}\n"],"names":["SelfMedia","LitElement","value","changedProperties","stream","layers","sub","selfId","getSelfId","layer","style","videoStyle","html","css","__decorateClass","property","consume","callContext","customElement"],"mappings":";;;;;;;;;;AAqBO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAkBwB,KAAA,SAAS,IAyBtC,KAAQ,oBAAwC,MAKhD,KAAQ,qBAAoC,CAAA,GAK5C,KAAQ,gBAAgC,CAAA;AAAA,EAAC;AAAA,EAtBzC,IAAI,KAAKC,GAAyB;AAChC,SAAK,QAAQA,GACb,KAAK,qBAAA,GACL,KAAK,mBAAA;AAAA,EACP;AAAA,EACA,IAAI,OAAyB;AAC3B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAoBA,oBAAoB;AAClB,UAAM,kBAAA,GACN,KAAK,mBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA,EAKU,QAAQC,GAA+C;AAC/D,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,OAAO,KAAK,KAAK,UAEzC,KAAK,qBAAA,GAEL,KAAK,mBAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA,EAKA,uBAAuB;AACrB,UAAM,qBAAA,GACN,KAAK,qBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA,EAKQ,qBAA2B;AAGjC,IAAK,KAAK,UAGV,KAAK,cAAc;AAAA,MACjB,KAAK,MAAM,aAAa,UAAU,CAACC,MAA+B;AAChE,aAAK,oBAAoBA,GACzB,KAAK,cAAA;AAAA,MACP,CAAC;AAAA,IAAA,GAIH,KAAK,cAAc;AAAA,MACjB,KAAK,MAAM,cAAc,UAAU,CAACC,MAA0B;AAC5D,aAAK,qBAAqBA,GAC1B,KAAK,cAAA;AAAA,MACP,CAAC;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA;AAAA,EAKQ,uBAA6B;AACnC,SAAK,cAAc,QAAQ,CAACC,MAAQA,EAAI,aAAa,GACrD,KAAK,gBAAgB,CAAA;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKQ,eAAwC;AAE9C,UAAMC,IAASC,EAAU,KAAK,KAAK;AACnC,WAAO,KAAK,mBAAmB,KAAK,CAACC,MAAUA,EAAM,cAAcF,CAAM;AAAA,EAC3E;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,UAAME,IAAQ,KAAK,aAAA;AAGnB,QAAI,CAACA,EAAO,QAAO;AAEnB,UAAMC,IAAQ;AAAA;AAAA,aAELD,EAAM,CAAC;AAAA,cACNA,EAAM,CAAC;AAAA,eACNA,EAAM,KAAK;AAAA,gBACVA,EAAM,MAAM;AAAA,iBACXA,EAAM,UAAU,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,OAM5BE,IAAa,KAAK,SACpB,8DACA;AAEJ,WAAOC;AAAA,2DACgDF,CAAK;AAAA;AAAA;AAAA;AAAA,iEAICC,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKpD,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI3C;AACF;AAtKaX,EACJ,SAASa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBaC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlBhBf,EAkBkB,WAAA,UAAA,CAAA;AAOrBc,EAAA;AAAA,EAFPE,EAAQ,EAAE,SAASC,GAAa,WAAW,IAAM;AAAA,EACjDF,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAxBnBf,EAyBH,WAAA,SAAA,CAAA;AAMJc,EAAA;AAAA,EADHC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA9BnBf,EA+BP,WAAA,QAAA,CAAA;AA/BOA,IAANc,EAAA;AAAA,EADNI,EAAc,eAAe;AAAA,GACjBlB,CAAA;"}

package/dist/context/call-context.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Context for sharing Call object between call-media components.
+ * Provides call instance from parent <call-media> to child components.
+ */
+import type { Call } from '../types/index.js';
+/**
+ * Context key for Call object sharing.
+ * Used by call-media (provider) and participants/self-media (consumers).
+ */
+export declare const callContext: {
+    __context__: Call | undefined;
+};
+//# sourceMappingURL=call-context.d.ts.map

package/dist/context/call-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"call-context.d.ts","sourceRoot":"","sources":["../../src/context/call-context.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9C;;;GAGG;AACH,eAAO,MAAM,WAAW;;CAA0C,CAAC"}

package/dist/context/call-context.js

@@ -0,0 +1,6 @@
+import { createContext as t } from "@lit/context";
+const e = t("call");
+export {
+  e as callContext
+};
+//# sourceMappingURL=call-context.js.map

package/dist/context/call-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"call-context.js","sources":["../../src/context/call-context.ts"],"sourcesContent":["/**\n * Context for sharing Call object between call-media components.\n * Provides call instance from parent <call-media> to child components.\n */\n\nimport { createContext } from '@lit/context';\nimport type { Call } from '../types/index.js';\n\n/**\n * Context key for Call object sharing.\n * Used by call-media (provider) and participants/self-media (consumers).\n */\nexport const callContext = createContext<Call | undefined>('call');\n"],"names":["callContext","createContext"],"mappings":";AAYO,MAAMA,IAAcC,EAAgC,MAAM;"}

package/dist/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from './call-context.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @signalwire/web-components
+ * UI Components Library built with Lit
+ */
+export { ExampleButton } from './components/example-button.js';
+export { CallMedia } from './components/call-media.js';
+export { Participants } from './components/participants.js';
+export { SelfMedia } from './components/self-media.js';
+export { AudioLevel } from './components/audio-level.js';
+export { DeviceSelector } from './components/device-selector.js';
+export { CallControls } from './components/call-controls.js';
+export { CallStatusComponent } from './components/call-status.js';
+export { DialpadComponent } from './components/dialpad.js';
+export { ClickToCallComponent } from './components/click-to-call.js';
+export { DirectoryComponent } from './components/directory.js';
+export { ParticipantControlsComponent } from './components/participant-controls.js';
+export * from './types/index.js';
+export * from './context/index.js';
+export { html, css, LitElement } from 'lit';
+export type { TemplateResult, CSSResult } from 'lit';
+/**
+ * Library version from package.json, injected at build time.
+ */
+export declare const version: string;
+/**
+ * Flag indicating the library has been loaded and is ready to use.
+ */
+export declare const ready: boolean;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AAGpF,cAAc,kBAAkB,CAAC;AAGjC,cAAc,oBAAoB,CAAC;AAGnC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAQrD;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,MAAoB,CAAC;AAE3C;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,OAAc,CAAC"}