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

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

@@ -1,118 +0,0 @@
-/**
- * Call Media Component
- *
- * Root component that renders remote video stream and provides call context
- * to child components. Manages aspect ratio with ResizeObserver and handles
- * video stream lifecycle.
- *
- * @example
- * ```html
- * <call-media .call=${call}>
- *   <participants>
- *     <self-media mirror=${true}></self-media>
- *   </participants>
- * </call-media>
- * ```
- *
- * @cssprop [--sw-color-primary=#044cf6] - Primary accent color used for theming.
- * @cssprop [--sw-color-background=#000000] - Background color of the video container.
- * @cssprop [--sw-border-radius=0px] - Border radius applied to the video container and wrapper.
- */
-import { LitElement } from 'lit';
-import type { Call } from '../types/index.js';
-export declare class CallMedia extends LitElement {
-    static styles: import("lit").CSSResult;
-    /**
-     * Call object with observable streams and properties
-     */
-    call?: Call;
-    /**
-     * Provides call context to child components
-     * Note: Used by @provide decorator, TypeScript doesn't see the usage
-     */
-    private _providedCall?;
-    /**
-     * Current remote stream value from observable
-     */
-    private _remoteStreamValue;
-    /**
-     * RxJS subscriptions for cleanup
-     */
-    private subscriptions;
-    /**
-     * ResizeObserver instance for aspect ratio management
-     */
-    private resizeObserver?;
-    /**
-     * Video resize event handler reference for cleanup
-     */
-    private videoResizeHandler?;
-    /**
-     * Window resize event handler reference for cleanup
-     */
-    private windowResizeHandler?;
-    /**
-     * 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;
-    /**
-     * Lifecycle: First update after render
-     */
-    protected firstUpdated(): void;
-    /**
-     * Subscribe to call observables
-     */
-    private setupSubscriptions;
-    /**
-     * Cleanup all subscriptions
-     */
-    private cleanupSubscriptions;
-    /**
-     * Setup ResizeObserver for aspect ratio management
-     */
-    private setupResizeObserver;
-    /**
-     * Video element reference for dimension calculations
-     */
-    private _videoElement?;
-    /**
-     * Padding wrapper reference for dimension calculations
-     */
-    private _paddingWrapper?;
-    /**
-     * Recalculate and apply dimensions based on viewport, container, and video sizes.
-     * Video should never grow bigger than the visible area.
-     * When container bleeds viewport, scale proportionally to maintain container's aspect ratio.
-     * Uses "contain" fitting algorithm - compares aspect ratios to determine constraint.
-     */
-    private recalculateDimensions;
-    /**
-     * Cleanup ResizeObserver and event listeners
-     */
-    private cleanupResizeObserver;
-    /**
-     * Cleanup video element
-     */
-    private cleanupVideoElement;
-    /**
-     * Render the component
-     */
-    render(): import("lit-html").TemplateResult<1>;
-}
-/**
- * Declare global type for TypeScript
- */
-declare global {
-    interface HTMLElementTagNameMap {
-        'sw-call-media': CallMedia;
-    }
-}
-//# sourceMappingURL=call-media.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"call-media.d.ts","sourceRoot":"","sources":["../../src/components/call-media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAK9C,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BA4DX;IAEF;;OAEG;IACyB,IAAI,CAAC,EAAE,IAAI,CAAC;IAExC;;;OAGG;IAGH,OAAO,CAAC,aAAa,CAAC,CAAO;IAE7B;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAA4B;IAEtD;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAC,CAAa;IAExC;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAC,CAAa;IAEzC;;OAEG;IACH,iBAAiB;IAMjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAYhE;;OAEG;IACH,oBAAoB;IAOpB;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAW9B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAK5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAwC3B;;OAEG;IACH,OAAO,CAAC,aAAa,CAAC,CAAmB;IAEzC;;OAEG;IACH,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEzC;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IAyF7B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAkB7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACH,MAAM;CAqBP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAC;KAC5B;CACF"}

package/dist/components/call-media.js

@@ -1,219 +0,0 @@
-import { LitElement as E, html as M, css as q } from "lit";
-import { property as D, customElement as j } from "lit/decorators.js";
-import { provide as L } from "@lit/context";
-import { callContext as V } from "../context/call-context.js";
-import { debounce as $ } from "../utils/debounce.js";
-import { waitForVideoReady as k, attachMediaStream as B, detachMediaStream as P } from "../utils/video.js";
-var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, u = (e, t, s, o) => {
-  for (var i = o > 1 ? void 0 : o ? Y(t, s) : t, r = e.length - 1, n; r >= 0; r--)
-    (n = e[r]) && (i = (o ? n(t, s, i) : n(i)) || i);
-  return o && i && X(t, s, i), i;
-};
-let a = class extends E {
-  constructor() {
-    super(...arguments), this._remoteStreamValue = null, this.subscriptions = [];
-  }
-  /**
-   * Lifecycle: Component connected to DOM
-   */
-  connectedCallback() {
-    super.connectedCallback(), this._providedCall = this.call, this.setupSubscriptions();
-  }
-  /**
-   * Lifecycle: React to property changes
-   */
-  updated(e) {
-    super.updated(e), e.has("call") && (this.cleanupSubscriptions(), this._providedCall = this.call, this.setupSubscriptions());
-  }
-  /**
-   * Lifecycle: Component disconnected from DOM
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.cleanupSubscriptions(), this.cleanupResizeObserver(), this.cleanupVideoElement();
-  }
-  /**
-   * Lifecycle: First update after render
-   */
-  firstUpdated() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("video.mcu-video");
-    e && k(e).then(() => {
-      this.isConnected && this.setupResizeObserver();
-    });
-  }
-  /**
-   * Subscribe to call observables
-   */
-  setupSubscriptions() {
-    this.call && this.subscriptions.push(
-      this.call.remoteStream$.subscribe((e) => {
-        var s;
-        this._remoteStreamValue = e, this.requestUpdate();
-        const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("video.mcu-video");
-        t && B(t, e);
-      })
-    );
-  }
-  /**
-   * Cleanup all subscriptions
-   */
-  cleanupSubscriptions() {
-    this.subscriptions.forEach((e) => e.unsubscribe()), this.subscriptions = [];
-  }
-  /**
-   * Setup ResizeObserver for aspect ratio management
-   */
-  setupResizeObserver() {
-    var s, o;
-    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("video.mcu-video"), t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".padding-wrapper");
-    !e || !t || (this._videoElement = e, this._paddingWrapper = t, this.resizeObserver = new ResizeObserver(
-      $(() => {
-        this.recalculateDimensions();
-      }, 50)
-    ), this.resizeObserver.observe(this), this.videoResizeHandler = () => {
-      this.recalculateDimensions();
-    }, e.addEventListener("resize", this.videoResizeHandler), this.windowResizeHandler = () => {
-      requestAnimationFrame(() => {
-        this.recalculateDimensions();
-      });
-    }, window.addEventListener("resize", this.windowResizeHandler), this.recalculateDimensions());
-  }
-  /**
-   * Recalculate and apply dimensions based on viewport, container, and video sizes.
-   * Video should never grow bigger than the visible area.
-   * When container bleeds viewport, scale proportionally to maintain container's aspect ratio.
-   * Uses "contain" fitting algorithm - compares aspect ratios to determine constraint.
-   */
-  recalculateDimensions() {
-    const e = this._videoElement, t = this._paddingWrapper;
-    if (!e || !t) return;
-    if (!e.videoWidth || !e.videoHeight) {
-      t.style.width = "100%", t.style.height = "100%", t.style.paddingBottom = "0", t.style.transform = "none";
-      return;
-    }
-    const s = window.innerWidth, o = window.innerHeight, i = this.getBoundingClientRect(), r = i.width, n = i.height;
-    if (r <= 0 || n <= 0) return;
-    const m = Math.min(1, (s - i.left) / r), b = Math.min(1, (o - i.top) / n), v = Math.min(m, b), l = r * v, h = n * v;
-    if (l <= 0 || h <= 0) return;
-    const w = e.videoWidth, f = e.videoHeight, p = w / f, g = l / h;
-    let d, c;
-    p > g ? (d = l, c = d / p) : (c = h, d = c * p);
-    const y = Math.max(0, i.left), R = Math.max(0, i.top), z = Math.min(s, i.right), S = Math.min(o, i.bottom), C = (y + z) / 2, H = (R + S) / 2, x = i.left + r / 2, O = i.top + n / 2, _ = C - x, W = H - O;
-    t.style.width = `${d}px`, t.style.height = `${c}px`, t.style.paddingBottom = "0", t.style.transform = `translate(${_}px, ${W}px)`;
-  }
-  /**
-   * Cleanup ResizeObserver and event listeners
-   */
-  cleanupResizeObserver() {
-    var t;
-    this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = void 0);
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("video.mcu-video");
-    e && this.videoResizeHandler && (e.removeEventListener("resize", this.videoResizeHandler), this.videoResizeHandler = void 0), this.windowResizeHandler && (window.removeEventListener("resize", this.windowResizeHandler), this.windowResizeHandler = void 0);
-  }
-  /**
-   * Cleanup video element
-   */
-  cleanupVideoElement() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("video.mcu-video");
-    e && P(e);
-  }
-  /**
-   * Render the component
-   */
-  render() {
-    return M`
-      <div class="mcu-content" part="container">
-        <div class="padding-wrapper">
-          <div class="mcu-wrapper">
-            <video
-              class="mcu-video"
-              part="video"
-              autoplay
-              playsinline
-              muted
-              .srcObject=${this._remoteStreamValue}
-            ></video>
-          </div>
-          <div class="mcu-layers">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-a.styles = q`
-    :host {
-      /* CSS Custom Properties for theming */
-      --sw-color-primary: #044cf6;
-      --sw-color-background: #000000;
-      --sw-border-radius: 0px;
-
-      display: block;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-
-    .mcu-content {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      margin: 0 auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--sw-color-background);
-      border-radius: var(--sw-border-radius);
-      overflow: hidden;
-    }
-
-    .padding-wrapper {
-      position: relative;
-      max-width: 100%;
-      max-height: 100%;
-      transition:
-        width 0.3s ease,
-        height 0.3s ease;
-    }
-
-    .mcu-wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: var(--sw-border-radius);
-      overflow: hidden;
-    }
-
-    .mcu-video {
-      width: 100%;
-      height: 100%;
-      display: block;
-      object-fit: contain;
-    }
-
-    .mcu-layers {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-    }
-  `;
-u([
-  D({ type: Object })
-], a.prototype, "call", 2);
-u([
-  L({ context: V })
-], a.prototype, "_providedCall", 2);
-a = u([
-  j("sw-call-media")
-], a);
-export {
-  a as CallMedia
-};
-//# sourceMappingURL=call-media.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"call-media.js","sources":["../../src/components/call-media.ts"],"sourcesContent":["/**\n * Call Media Component\n *\n * Root component that renders remote video stream and provides call context\n * to child components. Manages aspect ratio with ResizeObserver and handles\n * video stream lifecycle.\n *\n * @example\n * ```html\n * <call-media .call=${call}>\n *   <participants>\n *     <self-media mirror=${true}></self-media>\n *   </participants>\n * </call-media>\n * ```\n *\n * @cssprop [--sw-color-primary=#044cf6] - Primary accent color used for theming.\n * @cssprop [--sw-color-background=#000000] - Background color of the video container.\n * @cssprop [--sw-border-radius=0px] - Border radius applied to the video container and wrapper.\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { provide } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { Call } from '../types/index.js';\nimport { callContext } from '../context/call-context.js';\nimport { debounce } from '../utils/debounce.js';\nimport { waitForVideoReady, attachMediaStream, detachMediaStream } from '../utils/video.js';\n\n@customElement('sw-call-media')\nexport class CallMedia extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-primary: #044cf6;\n      --sw-color-background: #000000;\n      --sw-border-radius: 0px;\n\n      display: block;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .mcu-content {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      margin: 0 auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background-color: var(--sw-color-background);\n      border-radius: var(--sw-border-radius);\n      overflow: hidden;\n    }\n\n    .padding-wrapper {\n      position: relative;\n      max-width: 100%;\n      max-height: 100%;\n      transition:\n        width 0.3s ease,\n        height 0.3s ease;\n    }\n\n    .mcu-wrapper {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border-radius: var(--sw-border-radius);\n      overflow: hidden;\n    }\n\n    .mcu-video {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: contain;\n    }\n\n    .mcu-layers {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n  `;\n\n  /**\n   * Call object with observable streams and properties\n   */\n  @property({ type: Object }) call?: Call;\n\n  /**\n   * Provides call context to child components\n   * Note: Used by @provide decorator, TypeScript doesn't see the usage\n   */\n  @provide({ context: callContext })\n  // @ts-expect-error - Used by @provide decorator\n  private _providedCall?: Call;\n\n  /**\n   * Current remote stream value from observable\n   */\n  private _remoteStreamValue: MediaStream | null = null;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * ResizeObserver instance for aspect ratio management\n   */\n  private resizeObserver?: ResizeObserver;\n\n  /**\n   * Video resize event handler reference for cleanup\n   */\n  private videoResizeHandler?: () => void;\n\n  /**\n   * Window resize event handler reference for cleanup\n   */\n  private windowResizeHandler?: () => void;\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this._providedCall = this.call;\n    this.setupSubscriptions();\n  }\n\n  /**\n   * Lifecycle: React to property changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('call')) {\n      // Clean up old subscriptions first\n      this.cleanupSubscriptions();\n      // Update context for child components\n      this._providedCall = this.call;\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    this.cleanupResizeObserver();\n    this.cleanupVideoElement();\n  }\n\n  /**\n   * Lifecycle: First update after render\n   */\n  protected firstUpdated(): void {\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    if (video) {\n      waitForVideoReady(video).then(() => {\n        if (this.isConnected) {\n          this.setupResizeObserver();\n        }\n      });\n    }\n  }\n\n  /**\n   * Subscribe to call observables\n   */\n  private setupSubscriptions(): void {\n    if (!this.call) return;\n\n    // Subscribe to remote stream\n    this.subscriptions.push(\n      this.call.remoteStream$.subscribe((stream: MediaStream | null) => {\n        this._remoteStreamValue = stream;\n        this.requestUpdate();\n\n        // Attach stream to video element\n        const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n        if (video) {\n          attachMediaStream(video, stream);\n        }\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   * Setup ResizeObserver for aspect ratio management\n   */\n  private setupResizeObserver(): void {\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    const paddingWrapper = this.shadowRoot?.querySelector('.padding-wrapper') as HTMLDivElement;\n\n    if (!video || !paddingWrapper) return;\n\n    // Store references for the update function\n    this._videoElement = video;\n    this._paddingWrapper = paddingWrapper;\n\n    // Observe the host element for container size changes\n    this.resizeObserver = new ResizeObserver(\n      debounce(() => {\n        this.recalculateDimensions();\n      }, 50)\n    );\n\n    this.resizeObserver.observe(this);\n\n    // Listen for video intrinsic dimension changes (when media orientation flips)\n    this.videoResizeHandler = () => {\n      this.recalculateDimensions();\n    };\n\n    video.addEventListener('resize', this.videoResizeHandler);\n\n    // Listen for window/viewport resize changes\n    // Use requestAnimationFrame to ensure layout has settled before reading dimensions\n    this.windowResizeHandler = () => {\n      requestAnimationFrame(() => {\n        this.recalculateDimensions();\n      });\n    };\n\n    window.addEventListener('resize', this.windowResizeHandler);\n\n    // Initial calculation\n    this.recalculateDimensions();\n  }\n\n  /**\n   * Video element reference for dimension calculations\n   */\n  private _videoElement?: HTMLVideoElement;\n\n  /**\n   * Padding wrapper reference for dimension calculations\n   */\n  private _paddingWrapper?: HTMLDivElement;\n\n  /**\n   * Recalculate and apply dimensions based on viewport, container, and video sizes.\n   * Video should never grow bigger than the visible area.\n   * When container bleeds viewport, scale proportionally to maintain container's aspect ratio.\n   * Uses \"contain\" fitting algorithm - compares aspect ratios to determine constraint.\n   */\n  private recalculateDimensions(): void {\n    const video = this._videoElement;\n    const paddingWrapper = this._paddingWrapper;\n\n    if (!video || !paddingWrapper) return;\n\n    // Audio-only streams have no video dimensions.\n    // Fill the container and reset transform so the layout layers remain usable.\n    if (!video.videoWidth || !video.videoHeight) {\n      paddingWrapper.style.width = '100%';\n      paddingWrapper.style.height = '100%';\n      paddingWrapper.style.paddingBottom = '0';\n      paddingWrapper.style.transform = 'none';\n      return;\n    }\n\n    // Get viewport dimensions\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    // Get container's bounding rect (actual rendered position and size)\n    const containerRect = this.getBoundingClientRect();\n    const containerWidth = containerRect.width;\n    const containerHeight = containerRect.height;\n\n    if (containerWidth <= 0 || containerHeight <= 0) return;\n\n    // Calculate scale factors for each dimension\n    // This tells us how much the container would need to shrink to fit in viewport\n    const scaleX = Math.min(1, (viewportWidth - containerRect.left) / containerWidth);\n    const scaleY = Math.min(1, (viewportHeight - containerRect.top) / containerHeight);\n\n    // Use the minimum scale to maintain proportionality\n    // This ensures the container's aspect ratio is preserved when scaling down\n    const scale = Math.min(scaleX, scaleY);\n\n    // Calculate available space by applying scale to container dimensions\n    const maxWidth = containerWidth * scale;\n    const maxHeight = containerHeight * scale;\n\n    if (maxWidth <= 0 || maxHeight <= 0) return;\n\n    const videoWidth = video.videoWidth;\n    const videoHeight = video.videoHeight;\n\n    // Calculate aspect ratios\n    const videoAspectRatio = videoWidth / videoHeight;\n    const availableAspectRatio = maxWidth / maxHeight;\n\n    let finalWidth: number;\n    let finalHeight: number;\n\n    // \"Contain\" algorithm: compare aspect ratios to determine which dimension constrains\n    if (videoAspectRatio > availableAspectRatio) {\n      // Video is wider than available space - constrain by width\n      finalWidth = maxWidth;\n      finalHeight = finalWidth / videoAspectRatio;\n    } else {\n      // Video is taller than available space - constrain by height\n      finalHeight = maxHeight;\n      finalWidth = finalHeight * videoAspectRatio;\n    }\n\n    // Calculate offset to center video in the visible area of the container\n    // When container bleeds viewport, the visible center is different from container center\n    const visibleLeft = Math.max(0, containerRect.left);\n    const visibleTop = Math.max(0, containerRect.top);\n    const visibleRight = Math.min(viewportWidth, containerRect.right);\n    const visibleBottom = Math.min(viewportHeight, containerRect.bottom);\n\n    // Center of the visible area (in viewport coordinates)\n    const visibleCenterX = (visibleLeft + visibleRight) / 2;\n    const visibleCenterY = (visibleTop + visibleBottom) / 2;\n\n    // Center of the container (in viewport coordinates)\n    const containerCenterX = containerRect.left + containerWidth / 2;\n    const containerCenterY = containerRect.top + containerHeight / 2;\n\n    // Offset needed to shift from container center to visible center\n    const offsetX = visibleCenterX - containerCenterX;\n    const offsetY = visibleCenterY - containerCenterY;\n\n    // Apply the calculated dimensions and offset\n    paddingWrapper.style.width = `${finalWidth}px`;\n    paddingWrapper.style.height = `${finalHeight}px`;\n    paddingWrapper.style.paddingBottom = '0';\n    paddingWrapper.style.transform = `translate(${offsetX}px, ${offsetY}px)`;\n  }\n\n  /**\n   * Cleanup ResizeObserver and event listeners\n   */\n  private cleanupResizeObserver(): void {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = undefined;\n    }\n\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    if (video && this.videoResizeHandler) {\n      video.removeEventListener('resize', this.videoResizeHandler);\n      this.videoResizeHandler = undefined;\n    }\n\n    if (this.windowResizeHandler) {\n      window.removeEventListener('resize', this.windowResizeHandler);\n      this.windowResizeHandler = undefined;\n    }\n  }\n\n  /**\n   * Cleanup video element\n   */\n  private cleanupVideoElement(): void {\n    const video = this.shadowRoot?.querySelector('video.mcu-video') as HTMLVideoElement;\n    if (video) {\n      detachMediaStream(video);\n    }\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    return html`\n      <div class=\"mcu-content\" part=\"container\">\n        <div class=\"padding-wrapper\">\n          <div class=\"mcu-wrapper\">\n            <video\n              class=\"mcu-video\"\n              part=\"video\"\n              autoplay\n              playsinline\n              muted\n              .srcObject=${this._remoteStreamValue}\n            ></video>\n          </div>\n          <div class=\"mcu-layers\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-media': CallMedia;\n  }\n}\n"],"names":["CallMedia","LitElement","changedProperties","video","_a","waitForVideoReady","stream","attachMediaStream","sub","paddingWrapper","_b","debounce","viewportWidth","viewportHeight","containerRect","containerWidth","containerHeight","scaleX","scaleY","scale","maxWidth","maxHeight","videoWidth","videoHeight","videoAspectRatio","availableAspectRatio","finalWidth","finalHeight","visibleLeft","visibleTop","visibleRight","visibleBottom","visibleCenterX","visibleCenterY","containerCenterX","containerCenterY","offsetX","offsetY","detachMediaStream","html","css","__decorateClass","property","provide","callContext","customElement"],"mappings":"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"}

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

@@ -1,83 +0,0 @@
-/**
- * Call Status Component
- *
- * Displays current call state with status text and duration timer.
- * Shows animated indicators for transient states (connecting, ringing, disconnecting).
- *
- * @example
- * ```html
- * <sw-call-status .call=${call}></sw-call-status>
- * ```
- *
- * @cssprop [--sw-color-primary=#044cf6] - Primary brand color
- * @cssprop [--sw-color-success=#10b981] - Success/connected indicator color
- * @cssprop [--sw-color-warning=#f59e0b] - Warning/connecting indicator color
- * @cssprop [--sw-color-danger=#ef4444] - Danger/disconnecting indicator color
- * @cssprop [--sw-color-text=#1f2937] - Primary text color
- * @cssprop [--sw-color-text-muted=#6b7280] - Secondary/muted text and duration color
- * @cssprop [--sw-font-family=-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif] - Font family
- * @cssprop [--sw-font-size-sm=14px] - Small font size for duration
- * @cssprop [--sw-font-size-base=16px] - Base font size for status text
- * @cssprop [--sw-font-size-lg=18px] - Large font size
- * @cssprop [--sw-space-1=4px] - Smallest spacing unit
- * @cssprop [--sw-space-2=8px] - Small spacing unit
- * @cssprop [--sw-space-3=12px] - Medium spacing unit
- * @cssprop [--sw-border-radius=8px] - Border radius for container
- */
-import { LitElement } from 'lit';
-import type { Observable } from 'rxjs';
-import type { CallStatus } from '@signalwire/js';
-/**
- * Call interface for status component
- */
-export interface CallStatusCall {
-    status$: Observable<CallStatus>;
-}
-export declare class CallStatusComponent extends LitElement {
-    static styles: import("lit").CSSResult;
-    /**
-     * Call object with status$ observable
-     */
-    call: CallStatusCall | null;
-    /**
-     * Call from context (if nested in sw-call-media)
-     */
-    private contextCall?;
-    /**
-     * Current call status
-     */
-    private status;
-    /**
-     * Call start time for duration calculation
-     */
-    private callStartTime;
-    /**
-     * Formatted duration string
-     */
-    private duration;
-    /**
-     * RxJS subscriptions for cleanup
-     */
-    private subscriptions;
-    /**
-     * Duration timer interval
-     */
-    private durationInterval;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changedProperties: Map<string, unknown>): void;
-    private get activeCall();
-    private subscribeToCall;
-    private startDurationTimer;
-    private stopDurationTimer;
-    private formatDuration;
-    private cleanup;
-    private getStatusText;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sw-call-status': CallStatusComponent;
-    }
-}
-//# sourceMappingURL=call-status.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"call-status.d.ts","sourceRoot":"","sources":["../../src/components/call-status.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CACjC;AAED,qBACa,mBAAoB,SAAQ,UAAU;IACjD,MAAM,CAAC,MAAM,0BAqIX;IAEF;;OAEG;IAEH,IAAI,EAAE,cAAc,GAAG,IAAI,CAAQ;IAEnC;;OAEG;IAGH,OAAO,CAAC,WAAW,CAAC,CAAiB;IAErC;;OAEG;IAEH,OAAO,CAAC,MAAM,CAAqB;IAEnC;;OAEG;IAEH,OAAO,CAAC,aAAa,CAAuB;IAE5C;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAkB;IAElC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAuB;IAE/C,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa;IA6BrB,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}