@signalwire/web-components 1.0.0-dev-20260318132643 → 1.0.0-dev-20260318135307

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/components/call-media.d.ts.map +1 -1
  2. package/dist/components/call-media.js +13 -9
  3. package/dist/components/call-media.js.map +1 -1
  4. package/dist/components/self-media.d.ts.map +1 -1
  5. package/dist/components/self-media.js +24 -23
  6. package/dist/components/self-media.js.map +1 -1
  7. package/dist/constants.d.ts +10 -0
  8. package/dist/constants.d.ts.map +1 -0
  9. package/dist/constants.js +5 -0
  10. package/dist/constants.js.map +1 -0
  11. package/dist/utils/video.d.ts.map +1 -1
  12. package/dist/utils/video.js +15 -15
  13. package/dist/utils/video.js.map +1 -1
  14. package/package.json +2 -2
package/dist/components/call-media.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"call-media.d.ts","sourceRoot":"","sources":["../../src/components/call-media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;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;IAS9B;;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;IAgF7B;;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"}
1
+ {"version":3,"file":"call-media.d.ts","sourceRoot":"","sources":["../../src/components/call-media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;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 CHANGED
@@ -3,11 +3,11 @@ import { property as D, customElement as j } from "lit/decorators.js";
3
3
  import { provide as L } from "@lit/context";
4
4
  import { callContext as V } from "../context/call-context.js";
5
5
  import { debounce as $ } from "../utils/debounce.js";
6
- import { waitForVideoReady as k, attachMediaStream as P, detachMediaStream as X } from "../utils/video.js";
7
- var Y = Object.defineProperty, A = Object.getOwnPropertyDescriptor, u = (e, t, s, o) => {
8
- for (var i = o > 1 ? void 0 : o ? A(t, s) : t, r = e.length - 1, n; r >= 0; r--)
6
+ import { waitForVideoReady as k, attachMediaStream as B, detachMediaStream as P } from "../utils/video.js";
7
+ var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, u = (e, t, s, o) => {
8
+ for (var i = o > 1 ? void 0 : o ? Y(t, s) : t, r = e.length - 1, n; r >= 0; r--)
9
9
  (n = e[r]) && (i = (o ? n(t, s, i) : n(i)) || i);
10
- return o && i && Y(t, s, i), i;
10
+ return o && i && X(t, s, i), i;
11
11
  };
12
12
  let a = class extends E {
13
13
  constructor() {
@@ -38,7 +38,7 @@ let a = class extends E {
38
38
  var t;
39
39
  const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("video.mcu-video");
40
40
  e && k(e).then(() => {
41
- this.setupResizeObserver();
41
+ this.isConnected && this.setupResizeObserver();
42
42
  });
43
43
  }
44
44
  /**
@@ -50,7 +50,7 @@ let a = class extends E {
50
50
  var s;
51
51
  this._remoteStreamValue = e, this.requestUpdate();
52
52
  const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("video.mcu-video");
53
- t && P(t, e);
53
+ t && B(t, e);
54
54
  })
55
55
  );
56
56
  }
@@ -86,7 +86,11 @@ let a = class extends E {
86
86
  */
87
87
  recalculateDimensions() {
88
88
  const e = this._videoElement, t = this._paddingWrapper;
89
- if (!e || !t || !e.videoWidth || !e.videoHeight) return;
89
+ if (!e || !t) return;
90
+ if (!e.videoWidth || !e.videoHeight) {
91
+ t.style.width = "100%", t.style.height = "100%", t.style.paddingBottom = "0", t.style.transform = "none";
92
+ return;
93
+ }
90
94
  const s = window.innerWidth, o = window.innerHeight, i = this.getBoundingClientRect(), r = i.width, n = i.height;
91
95
  if (r <= 0 || n <= 0) return;
92
96
  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;
@@ -94,7 +98,7 @@ let a = class extends E {
94
98
  const w = e.videoWidth, f = e.videoHeight, p = w / f, g = l / h;
95
99
  let d, c;
96
100
  p > g ? (d = l, c = d / p) : (c = h, d = c * p);
97
- const R = Math.max(0, i.left), y = Math.max(0, i.top), z = Math.min(s, i.right), S = Math.min(o, i.bottom), H = (R + z) / 2, C = (y + S) / 2, x = i.left + r / 2, O = i.top + n / 2, _ = H - x, W = C - O;
101
+ 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;
98
102
  t.style.width = `${d}px`, t.style.height = `${c}px`, t.style.paddingBottom = "0", t.style.transform = `translate(${_}px, ${W}px)`;
99
103
  }
100
104
  /**
@@ -112,7 +116,7 @@ let a = class extends E {
112
116
  cleanupVideoElement() {
113
117
  var t;
114
118
  const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("video.mcu-video");
115
- e && X(e);
119
+ e && P(e);
116
120
  }
117
121
  /**
118
122
  * Render the component
package/dist/components/call-media.js.map CHANGED
@@ -1 +1 @@
1
- {"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\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 this.setupResizeObserver();\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 if (!video.videoWidth || !video.videoHeight) return;\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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"}
1
+ {"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\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/self-media.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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;CAyCP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAC;KAC5B;CACF"}
package/dist/components/self-media.js CHANGED
@@ -2,13 +2,13 @@ import { LitElement as u, html as p, css as h } from "lit";
2
2
  import { property as n, customElement as b } from "lit/decorators.js";
3
3
  import { consume as d } from "@lit/context";
4
4
  import { getSelfId as f } from "../types/index.js";
5
- import { callContext as y } from "../context/call-context.js";
6
- var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, e, l, r) => {
7
- for (var s = r > 1 ? void 0 : r ? _(e, l) : e, a = t.length - 1, c; a >= 0; a--)
8
- (c = t[a]) && (s = (r ? c(e, l, s) : c(s)) || s);
9
- return r && s && m(e, l, s), s;
5
+ import { callContext as m } from "../context/call-context.js";
6
+ var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (t, s, r, i) => {
7
+ for (var e = i > 1 ? void 0 : i ? _(s, r) : s, o = t.length - 1, c; o >= 0; o--)
8
+ (c = t[o]) && (e = (i ? c(s, r, e) : c(e)) || e);
9
+ return i && e && y(s, r, e), e;
10
10
  };
11
- let i = class extends u {
11
+ let l = class extends u {
12
12
  constructor() {
13
13
  super(...arguments), this.mirror = !1, this._localStreamValue = null, this._layoutLayersValue = [], this.subscriptions = [];
14
14
  }
@@ -61,15 +61,16 @@ let i = class extends u {
61
61
  */
62
62
  getSelfLayer() {
63
63
  const t = f(this._call);
64
- return this._layoutLayersValue.find((e) => e.member_id === t);
64
+ return this._layoutLayersValue.find((s) => s.member_id === t);
65
65
  }
66
66
  /**
67
67
  * Render the component
68
68
  */
69
69
  render() {
70
+ var e;
70
71
  const t = this.getSelfLayer();
71
- if (!t) return null;
72
- const e = `
72
+ if (!t || !((((e = this._localStreamValue) == null ? void 0 : e.getVideoTracks().length) ?? 0) > 0)) return null;
73
+ const r = `
73
74
  position: absolute;
74
75
  top: ${t.y}%;
75
76
  left: ${t.x}%;
@@ -79,13 +80,13 @@ let i = class extends u {
79
80
  overflow: hidden;
80
81
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
81
82
  pointer-events: none;
82
- `, l = this.mirror ? "transform: scale(-1, 1); -webkit-transform: scale(-1, 1);" : "";
83
+ `, i = this.mirror ? "transform: scale(-1, 1); -webkit-transform: scale(-1, 1);" : "";
83
84
  return p`
84
- <div class="local-overlay" part="container" style="${e}">
85
+ <div class="local-overlay" part="container" style="${r}">
85
86
  <video
86
87
  class="local-video"
87
88
  part="video"
88
- style="width: 100%; height: 100%; object-fit: cover; ${l}"
89
+ style="width: 100%; height: 100%; object-fit: cover; ${i}"
89
90
  autoplay
90
91
  playsinline
91
92
  muted
@@ -96,7 +97,7 @@ let i = class extends u {
96
97
  `;
97
98
  }
98
99
  };
99
- i.styles = h`
100
+ l.styles = h`
100
101
  :host {
101
102
  display: contents; /* Doesn't create a box, children inherit positioning */
102
103
  }
@@ -109,20 +110,20 @@ i.styles = h`
109
110
  display: block;
110
111
  }
111
112
  `;
112
- o([
113
+ a([
113
114
  n({ type: Boolean })
114
- ], i.prototype, "mirror", 2);
115
- o([
116
- d({ context: y, subscribe: !0 }),
115
+ ], l.prototype, "mirror", 2);
116
+ a([
117
+ d({ context: m, subscribe: !0 }),
117
118
  n({ attribute: !1 })
118
- ], i.prototype, "_call", 2);
119
- o([
119
+ ], l.prototype, "_call", 2);
120
+ a([
120
121
  n({ attribute: !1 })
121
- ], i.prototype, "call", 1);
122
- i = o([
122
+ ], l.prototype, "call", 1);
123
+ l = a([
123
124
  b("sw-self-media")
124
- ], i);
125
+ ], l);
125
126
  export {
126
- i as SelfMedia
127
+ l as SelfMedia
127
128
  };
128
129
  //# sourceMappingURL=self-media.js.map
package/dist/components/self-media.js.map CHANGED
@@ -1 +1 @@
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;"}
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 // 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/constants.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Constants for the web-components package
3
+ */
4
+ /**
5
+ * Timeout in milliseconds for waiting for a video element to become ready.
6
+ * Audio-only streams attached to video elements may never fire `resize` or `canplay`,
7
+ * so this timeout ensures the component doesn't block indefinitely.
8
+ */
9
+ export declare const VIDEO_READY_TIMEOUT_MS = 2000;
10
+ //# sourceMappingURL=constants.d.ts.map
package/dist/constants.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,OAAO,CAAC"}
package/dist/constants.js ADDED
@@ -0,0 +1,5 @@
1
+ const E = 2e3;
2
+ export {
3
+ E as VIDEO_READY_TIMEOUT_MS
4
+ };
5
+ //# sourceMappingURL=constants.js.map
package/dist/constants.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["/**\n * Constants for the web-components package\n */\n\n/**\n * Timeout in milliseconds for waiting for a video element to become ready.\n * Audio-only streams attached to video elements may never fire `resize` or `canplay`,\n * so this timeout ensures the component doesn't block indefinitely.\n */\nexport const VIDEO_READY_TIMEOUT_MS = 2000;\n"],"names":["VIDEO_READY_TIMEOUT_MS"],"mappings":"AASO,MAAMA,IAAyB;"}
package/dist/utils/video.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/utils/video.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;GAMG;AACH,wBAAgB,kBAAkB,IAAI,gBAAgB,CAcrD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAsB1E;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAE7F;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAIjE"}
1
+ {"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/utils/video.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;;;;;GAMG;AACH,wBAAgB,kBAAkB,IAAI,gBAAgB,CAcrD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAuB1E;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAE7F;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAIjE"}
package/dist/utils/video.js CHANGED
@@ -1,26 +1,26 @@
1
- function a(e) {
2
- return new Promise((t) => {
1
+ import { VIDEO_READY_TIMEOUT_MS as n } from "../constants.js";
2
+ function c(e) {
3
+ return new Promise((r) => {
3
4
  if (e.readyState >= HTMLMediaElement.HAVE_METADATA) {
4
- t();
5
+ r();
5
6
  return;
6
7
  }
7
- const n = () => {
8
- e.removeEventListener("canplay", n), e.removeEventListener("resize", r), t();
9
- }, r = () => {
10
- e.removeEventListener("canplay", n), e.removeEventListener("resize", r), t();
11
- };
12
- e.addEventListener("canplay", n), e.addEventListener("resize", r);
8
+ let i = !1;
9
+ const t = () => {
10
+ i || (i = !0, clearTimeout(a), e.removeEventListener("canplay", t), e.removeEventListener("resize", t), r());
11
+ }, a = setTimeout(t, n);
12
+ e.addEventListener("canplay", t), e.addEventListener("resize", t);
13
13
  });
14
14
  }
15
- function i(e, t) {
16
- e.srcObject = t;
15
+ function d(e, r) {
16
+ e.srcObject = r;
17
17
  }
18
- function c(e) {
18
+ function s(e) {
19
19
  e.srcObject && (e.srcObject = null);
20
20
  }
21
21
  export {
22
- i as attachMediaStream,
23
- c as detachMediaStream,
24
- a as waitForVideoReady
22
+ d as attachMediaStream,
23
+ s as detachMediaStream,
24
+ c as waitForVideoReady
25
25
  };
26
26
  //# sourceMappingURL=video.js.map
package/dist/utils/video.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"video.js","sources":["../../src/utils/video.ts"],"sourcesContent":["/**\n * Video element utilities for creating and managing video elements\n * with proper configuration for WebRTC streams.\n */\n\n/**\n * Creates a video element configured for WebRTC streams.\n * The video is muted, autoplays, and plays inline (mobile Safari support).\n * Prevents pause events which can occur on camera switches or PiP mode.\n *\n * @returns A configured HTMLVideoElement\n */\nexport function createVideoElement(): HTMLVideoElement {\n const video = document.createElement('video');\n video.muted = true;\n video.autoplay = true;\n video.playsInline = true;\n\n // Prevent pause (Safari/Firefox pause on PiP, camera switch)\n video.addEventListener('pause', () => {\n video.play().catch((error) => {\n console.error('Video Element Paused', error);\n });\n });\n\n return video;\n}\n\n/**\n * Waits for a video element to be ready for playback.\n * Resolves when the video has metadata or when it can play.\n *\n * @param element - The video element to wait for\n * @returns A promise that resolves when the video is ready\n */\nexport function waitForVideoReady(element: HTMLVideoElement): Promise<void> {\n return new Promise<void>((resolve) => {\n if (element.readyState >= HTMLMediaElement.HAVE_METADATA) {\n resolve();\n return;\n }\n\n const onCanPlay = () => {\n element.removeEventListener('canplay', onCanPlay);\n element.removeEventListener('resize', onResize);\n resolve();\n };\n\n const onResize = () => {\n element.removeEventListener('canplay', onCanPlay);\n element.removeEventListener('resize', onResize);\n resolve();\n };\n\n element.addEventListener('canplay', onCanPlay);\n element.addEventListener('resize', onResize);\n });\n}\n\n/**\n * Attaches a MediaStream to a video element.\n *\n * @param element - The video element to attach the stream to\n * @param stream - The MediaStream to attach, or null to detach\n */\nexport function attachMediaStream(element: HTMLVideoElement, stream: MediaStream | null): void {\n element.srcObject = stream;\n}\n\n/**\n * Detaches any MediaStream from a video element.\n *\n * @param element - The video element to detach the stream from\n */\nexport function detachMediaStream(element: HTMLVideoElement): void {\n if (element.srcObject) {\n element.srcObject = null;\n }\n}\n"],"names":["waitForVideoReady","element","resolve","onCanPlay","onResize","attachMediaStream","stream","detachMediaStream"],"mappings":"AAmCO,SAASA,EAAkBC,GAA0C;AAC1E,SAAO,IAAI,QAAc,CAACC,MAAY;AACpC,QAAID,EAAQ,cAAc,iBAAiB,eAAe;AACxD,MAAAC,EAAA;AACA;AAAA,IACF;AAEA,UAAMC,IAAY,MAAM;AACtB,MAAAF,EAAQ,oBAAoB,WAAWE,CAAS,GAChDF,EAAQ,oBAAoB,UAAUG,CAAQ,GAC9CF,EAAA;AAAA,IACF,GAEME,IAAW,MAAM;AACrB,MAAAH,EAAQ,oBAAoB,WAAWE,CAAS,GAChDF,EAAQ,oBAAoB,UAAUG,CAAQ,GAC9CF,EAAA;AAAA,IACF;AAEA,IAAAD,EAAQ,iBAAiB,WAAWE,CAAS,GAC7CF,EAAQ,iBAAiB,UAAUG,CAAQ;AAAA,EAC7C,CAAC;AACH;AAQO,SAASC,EAAkBJ,GAA2BK,GAAkC;AAC7F,EAAAL,EAAQ,YAAYK;AACtB;AAOO,SAASC,EAAkBN,GAAiC;AACjE,EAAIA,EAAQ,cACVA,EAAQ,YAAY;AAExB;"}
1
+ {"version":3,"file":"video.js","sources":["../../src/utils/video.ts"],"sourcesContent":["/**\n * Video element utilities for creating and managing video elements\n * with proper configuration for WebRTC streams.\n */\n\nimport { VIDEO_READY_TIMEOUT_MS } from '../constants.js';\n\n/**\n * Creates a video element configured for WebRTC streams.\n * The video is muted, autoplays, and plays inline (mobile Safari support).\n * Prevents pause events which can occur on camera switches or PiP mode.\n *\n * @returns A configured HTMLVideoElement\n */\nexport function createVideoElement(): HTMLVideoElement {\n const video = document.createElement('video');\n video.muted = true;\n video.autoplay = true;\n video.playsInline = true;\n\n // Prevent pause (Safari/Firefox pause on PiP, camera switch)\n video.addEventListener('pause', () => {\n video.play().catch((error) => {\n console.error('Video Element Paused', error);\n });\n });\n\n return video;\n}\n\n/**\n * Waits for a video element to be ready for playback.\n * Resolves when the video has metadata or when it can play.\n *\n * @param element - The video element to wait for\n * @returns A promise that resolves when the video is ready\n */\nexport function waitForVideoReady(element: HTMLVideoElement): Promise<void> {\n return new Promise<void>((resolve) => {\n if (element.readyState >= HTMLMediaElement.HAVE_METADATA) {\n resolve();\n return;\n }\n\n let resolved = false;\n\n const done = () => {\n if (resolved) return;\n resolved = true;\n clearTimeout(timeoutId);\n element.removeEventListener('canplay', done);\n element.removeEventListener('resize', done);\n resolve();\n };\n\n // Timeout fallback for audio-only streams where resize/canplay may never fire\n const timeoutId = setTimeout(done, VIDEO_READY_TIMEOUT_MS);\n element.addEventListener('canplay', done);\n element.addEventListener('resize', done);\n });\n}\n\n/**\n * Attaches a MediaStream to a video element.\n *\n * @param element - The video element to attach the stream to\n * @param stream - The MediaStream to attach, or null to detach\n */\nexport function attachMediaStream(element: HTMLVideoElement, stream: MediaStream | null): void {\n element.srcObject = stream;\n}\n\n/**\n * Detaches any MediaStream from a video element.\n *\n * @param element - The video element to detach the stream from\n */\nexport function detachMediaStream(element: HTMLVideoElement): void {\n if (element.srcObject) {\n element.srcObject = null;\n }\n}\n"],"names":["waitForVideoReady","element","resolve","resolved","done","timeoutId","VIDEO_READY_TIMEOUT_MS","attachMediaStream","stream","detachMediaStream"],"mappings":";AAqCO,SAASA,EAAkBC,GAA0C;AAC1E,SAAO,IAAI,QAAc,CAACC,MAAY;AACpC,QAAID,EAAQ,cAAc,iBAAiB,eAAe;AACxD,MAAAC,EAAA;AACA;AAAA,IACF;AAEA,QAAIC,IAAW;AAEf,UAAMC,IAAO,MAAM;AACjB,MAAID,MACJA,IAAW,IACX,aAAaE,CAAS,GACtBJ,EAAQ,oBAAoB,WAAWG,CAAI,GAC3CH,EAAQ,oBAAoB,UAAUG,CAAI,GAC1CF,EAAA;AAAA,IACF,GAGMG,IAAY,WAAWD,GAAME,CAAsB;AACzD,IAAAL,EAAQ,iBAAiB,WAAWG,CAAI,GACxCH,EAAQ,iBAAiB,UAAUG,CAAI;AAAA,EACzC,CAAC;AACH;AAQO,SAASG,EAAkBN,GAA2BO,GAAkC;AAC7F,EAAAP,EAAQ,YAAYO;AACtB;AAOO,SAASC,EAAkBR,GAAiC;AACjE,EAAIA,EAAQ,cACVA,EAAQ,YAAY;AAExB;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@signalwire/web-components",
3
- "version": "1.0.0-dev-20260318132643",
3
+ "version": "1.0.0-dev-20260318135307",
4
4
  "description": "UI components library built with Lit",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -115,7 +115,7 @@
115
115
  "rxjs": "^7.8.2"
116
116
  },
117
117
  "peerDependencies": {
118
- "@signalwire/js": "4.0.0-dev-20260318132643"
118
+ "@signalwire/js": "4.0.0-dev-20260318135307"
119
119
  },
120
120
  "devDependencies": {
121
121
  "@playwright/test": "^1.56.1",