@signalwire/web-components 4.0.0-beta.11 → 4.0.0-beta.12

package/dist/components/self-media.js

@@ -1,129 +0,0 @@
-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 m } from "../context/call-context.js";
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (t, s, r, i) => {
-  for (var e = i > 1 ? void 0 : i ? _(s, r) : s, o = t.length - 1, c; o >= 0; o--)
-    (c = t[o]) && (e = (i ? c(s, r, e) : c(e)) || e);
-  return i && e && y(s, r, e), e;
-};
-let l = 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((s) => s.member_id === t);
-  }
-  /**
-   * Render the component
-   */
-  render() {
-    var e;
-    const t = this.getSelfLayer();
-    if (!t || !((((e = this._localStreamValue) == null ? void 0 : e.getVideoTracks().length) ?? 0) > 0)) return null;
-    const r = `
-      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;
-    `, i = this.mirror ? "transform: scale(-1, 1); -webkit-transform: scale(-1, 1);" : "";
-    return p`
-      <div class="local-overlay" part="container" style="${r}">
-        <video
-          class="local-video"
-          part="video"
-          style="width: 100%; height: 100%; object-fit: cover; ${i}"
-          autoplay
-          playsinline
-          muted
-          disablePictureInPicture
-          .srcObject=${this._localStreamValue}
-        ></video>
-      </div>
-    `;
-  }
-};
-l.styles = h`
-    :host {
-      display: contents; /* Doesn't create a box, children inherit positioning */
-    }
-
-    .local-overlay {
-      box-sizing: border-box;
-    }
-
-    video {
-      display: block;
-    }
-  `;
-a([
-  n({ type: Boolean })
-], l.prototype, "mirror", 2);
-a([
-  d({ context: m, subscribe: !0 }),
-  n({ attribute: !1 })
-], l.prototype, "_call", 2);
-a([
-  n({ attribute: !1 })
-], l.prototype, "call", 1);
-l = a([
-  b("sw-self-media")
-], l);
-export {
-  l as SelfMedia
-};
-//# sourceMappingURL=self-media.js.map

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

@@ -1 +0,0 @@
-{"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    // Skip video overlay for audio-only streams (no video tracks)\n    const hasVideoTracks = (this._localStreamValue?.getVideoTracks().length ?? 0) > 0;\n    if (!hasVideoTracks) 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","_a","style","videoStyle","html","css","__decorateClass","property","consume","callContext","customElement"],"mappings":"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"}

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

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/types/index.js

@@ -1,12 +0,0 @@
-function e(t) {
-  var n;
-  return (n = t == null ? void 0 : t.self) == null ? void 0 : n.id;
-}
-function r(t) {
-  return t;
-}
-export {
-  r as castParticipants,
-  e as getSelfId
-};
-//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/types/index.ts"],"sourcesContent":["/**\n * Type definitions for call-media components.\n *\n * Types are imported directly from the SDK to stay in sync.\n */\n\nimport type { Call, CallParticipant, CallSelfParticipant, DeviceController, LayoutLayer } from '@signalwire/js';\n\n// Re-export SDK types for internal use\nexport type { Call, CallParticipant, CallSelfParticipant, DeviceController, LayoutLayer };\n\n// Use SDK's CallParticipant as the canonical Participant type\nexport type Participant = CallParticipant;\n\n/**\n * Helper to safely get self ID from a Call.\n * Call.self is typed as CallSelfParticipant | null.\n */\nexport function getSelfId(call: Call | undefined): string | undefined {\n  return call?.self?.id;\n}\n\n/**\n * Type-safe cast for participants array.\n * The SDK's Call.participants is typed as CallParticipant[], so this\n * provides a semantic helper for web-components that receive unknown[].\n */\nexport function castParticipants(participants: unknown[]): Participant[] {\n  return participants as Participant[];\n}\n"],"names":["getSelfId","call","_a","castParticipants","participants"],"mappings":"AAkBO,SAASA,EAAUC,GAA4C;AAA/D,MAAAC;AACL,UAAOA,IAAAD,KAAA,gBAAAA,EAAM,SAAN,gBAAAC,EAAY;AACrB;AAOO,SAASC,EAAiBC,GAAwC;AACvE,SAAOA;AACT;"}