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

package/dist/components/device-selector.js

@@ -0,0 +1,685 @@
+import { LitElement as _, html as a, nothing as b, css as f } from "lit";
+import { property as m, state as n, customElement as g } from "lit/decorators.js";
+var S = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (e, i, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? y(i, r) : i, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (t = (s ? d(i, r, t) : d(t)) || t);
+  return s && t && S(i, r, t), t;
+};
+let o = class extends _ {
+  constructor() {
+    super(...arguments), this.showPreview = !1, this._audioInputDevices = [], this._videoInputDevices = [], this._audioOutputDevices = [], this._selectedAudioInput = null, this._selectedVideoInput = null, this._selectedAudioOutput = null, this._videoPreviewStream = null, this._audioPreviewStream = null, this._isTestingAudio = !1, this._isComponentVisible = !1, this._isInViewport = !1, this._isDocumentVisible = !0, this._isCSSVisible = !0, this.subscriptions = [], this._boundHandleDocumentVisibility = this.handleDocumentVisibilityChange.bind(this), this._isInitializingPreviews = !1;
+  }
+  /**
+   * Lifecycle: Component connected to DOM
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.setupSubscriptions(), this.setupVisibilityObservers();
+  }
+  /**
+   * Lifecycle: React to property changes
+   */
+  updated(e) {
+    super.updated(e), e.has("deviceController") && (this.cleanupSubscriptions(), this.setupSubscriptions()), e.has("showPreview") && (this.showPreview && this._isComponentVisible ? this.initializePreviews() : this.showPreview || (this.cleanupVideoPreviewStream(), this.cleanupAudioPreviewStream()));
+  }
+  /**
+   * Lifecycle: Component disconnected from DOM
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanupSubscriptions(), this.cleanupVisibilityObservers(), this.cleanupVideoPreviewStream(), this.cleanupAudioPreviewStream(), this.stopTestAudio();
+  }
+  /**
+   * Setup all visibility observers (IntersectionObserver, document visibility, CSS polling)
+   */
+  setupVisibilityObservers() {
+    this.cleanupVisibilityObservers(), this._intersectionObserver = new IntersectionObserver(
+      (e) => {
+        const i = e[0];
+        i && (this._isInViewport = i.isIntersecting, this.updateVisibilityState());
+      },
+      { threshold: 0 }
+    ), this._intersectionObserver.observe(this), this._isDocumentVisible = document.visibilityState === "visible", document.addEventListener("visibilitychange", this._boundHandleDocumentVisibility), this._isCSSVisible = this.checkCSSVisibility(), this._cssVisibilityCheckInterval = setInterval(() => {
+      const e = this._isCSSVisible;
+      this._isCSSVisible = this.checkCSSVisibility(), e !== this._isCSSVisible && this.updateVisibilityState();
+    }, o.CSS_VISIBILITY_CHECK_INTERVAL_MS);
+  }
+  /**
+   * Cleanup all visibility observers
+   */
+  cleanupVisibilityObservers() {
+    this._intersectionObserver && (this._intersectionObserver.disconnect(), this._intersectionObserver = void 0), document.removeEventListener("visibilitychange", this._boundHandleDocumentVisibility), this._cssVisibilityCheckInterval && (clearInterval(this._cssVisibilityCheckInterval), this._cssVisibilityCheckInterval = void 0);
+  }
+  /**
+   * Handle document visibility change (tab switching)
+   */
+  handleDocumentVisibilityChange() {
+    this._isDocumentVisible = document.visibilityState === "visible", this.updateVisibilityState();
+  }
+  /**
+   * Check if the component is visible via CSS (display, visibility, opacity)
+   * Traverses the DOM tree including shadow DOM boundaries
+   */
+  checkCSSVisibility() {
+    if (!this.isConnected)
+      return !1;
+    let e = this;
+    for (; e; ) {
+      const i = getComputedStyle(e);
+      if (i.display === "none" || i.visibility === "hidden" || parseFloat(i.opacity) === 0)
+        return !1;
+      if (e.parentElement)
+        e = e.parentElement;
+      else {
+        const r = e.getRootNode();
+        e = r instanceof ShadowRoot ? r.host : null;
+      }
+    }
+    return !0;
+  }
+  /**
+   * Update the combined visibility state and manage preview streams accordingly
+   */
+  updateVisibilityState() {
+    const e = this._isComponentVisible;
+    this._isComponentVisible = this._isInViewport && this._isDocumentVisible && this._isCSSVisible, e !== this._isComponentVisible && (this._isComponentVisible && this.showPreview ? this.initializePreviews() : this._isComponentVisible || (this.cleanupVideoPreviewStream(), this.cleanupAudioPreviewStream()));
+  }
+  /**
+   * Subscribe to device controller observables
+   */
+  setupSubscriptions() {
+    this.deviceController && (this.subscriptions.push(
+      this.deviceController.audioInputDevices$.subscribe((e) => {
+        this._audioInputDevices = e;
+      })
+    ), this.subscriptions.push(
+      this.deviceController.videoInputDevices$.subscribe((e) => {
+        this._videoInputDevices = e;
+      })
+    ), this.subscriptions.push(
+      this.deviceController.audioOutputDevices$.subscribe((e) => {
+        this._audioOutputDevices = e;
+      })
+    ), this.deviceController.selectedAudioInputDevice$ && this.subscriptions.push(
+      this.deviceController.selectedAudioInputDevice$.subscribe((e) => {
+        this._selectedAudioInput = e;
+      })
+    ), this.deviceController.selectedVideoInputDevice$ && this.subscriptions.push(
+      this.deviceController.selectedVideoInputDevice$.subscribe((e) => {
+        this._selectedVideoInput = e;
+      })
+    ), this.deviceController.selectedAudioOutputDevice$ && this.subscriptions.push(
+      this.deviceController.selectedAudioOutputDevice$.subscribe((e) => {
+        this._selectedAudioOutput = e;
+      })
+    ));
+  }
+  /**
+   * Cleanup all subscriptions
+   */
+  cleanupSubscriptions() {
+    this.subscriptions.forEach((e) => e.unsubscribe()), this.subscriptions = [];
+  }
+  /**
+   * Cleanup video preview stream
+   * Best practice from SDK: Pause video, clear srcObject, remove tracks from stream, then stop tracks
+   * @see https://webrtchacks.com/srcobject-intervention/
+   */
+  cleanupVideoPreviewStream() {
+    var i;
+    this._videoElement && (this._videoElement.pause(), this._videoElement.srcObject = null, this._videoElement = void 0);
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("video");
+    e && (e.pause(), e.srcObject = null), this._videoPreviewStream && (this._videoPreviewStream.getTracks().forEach((s) => {
+      var t;
+      (t = this._videoPreviewStream) == null || t.removeTrack(s), s.stop();
+    }), this._videoPreviewStream = null);
+  }
+  /**
+   * Cleanup audio preview stream
+   * Best practice from SDK: Release audio components, remove tracks from stream, then stop tracks
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/stop
+   */
+  cleanupAudioPreviewStream() {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelectorAll("sw-audio-level");
+    e == null || e.forEach((r) => {
+      const s = r;
+      s.releaseResources ? s.releaseResources() : s.stream = void 0;
+    }), this._audioPreviewStream && (this._audioPreviewStream.getTracks().forEach((s) => {
+      var t;
+      (t = this._audioPreviewStream) == null || t.removeTrack(s), s.stop();
+    }), this._audioPreviewStream = null);
+  }
+  /**
+   * Get video preview stream from browser API
+   */
+  async getVideoPreviewStream(e) {
+    if (this.cleanupVideoPreviewStream(), !!this.showPreview)
+      try {
+        const i = {
+          video: e ? { deviceId: { exact: e } } : !0,
+          audio: !1
+        };
+        this._videoPreviewStream = await navigator.mediaDevices.getUserMedia(i), this.updateVideoElement();
+      } catch (i) {
+        console.warn("Failed to get video preview stream:", i), this._videoPreviewStream = null;
+      }
+  }
+  /**
+   * Get audio preview stream from browser API
+   */
+  async getAudioPreviewStream(e) {
+    if (this.cleanupAudioPreviewStream(), !!this.showPreview)
+      try {
+        const i = {
+          video: !1,
+          audio: e ? { deviceId: { exact: e } } : !0
+        };
+        this._audioPreviewStream = await navigator.mediaDevices.getUserMedia(i);
+      } catch (i) {
+        console.warn("Failed to get audio preview stream:", i), this._audioPreviewStream = null;
+      }
+  }
+  /**
+   * Update video element with current stream
+   */
+  updateVideoElement() {
+    this._videoElement && this._videoPreviewStream && (this._videoElement.srcObject = this._videoPreviewStream);
+  }
+  /**
+   * Initialize previews when show-preview is enabled
+   */
+  async initializePreviews() {
+    var e, i;
+    if (!(!this.showPreview || this._isInitializingPreviews)) {
+      this._isInitializingPreviews = !0;
+      try {
+        if (this._videoInputDevices.length > 0) {
+          const r = (e = this._selectedVideoInput) == null ? void 0 : e.deviceId;
+          await this.getVideoPreviewStream(r);
+        }
+        if (this._audioInputDevices.length > 0) {
+          const r = (i = this._selectedAudioInput) == null ? void 0 : i.deviceId;
+          await this.getAudioPreviewStream(r);
+        }
+      } finally {
+        this._isInitializingPreviews = !1;
+      }
+    }
+  }
+  /**
+   * Handle device selection change from dropdown
+   */
+  handleDeviceChange(e, i) {
+    var l, d, u, p, h, w;
+    if (!this.deviceController) return;
+    const s = e.target.value;
+    let t = null;
+    switch (i) {
+      case "microphone":
+        t = this._audioInputDevices.find((v) => v.deviceId === s) || null, this._selectedAudioInput = t, (d = (l = this.deviceController).selectAudioInputDevice) == null || d.call(l, t), this.showPreview && this.getAudioPreviewStream(s);
+        break;
+      case "camera":
+        t = this._videoInputDevices.find((v) => v.deviceId === s) || null, this._selectedVideoInput = t, (p = (u = this.deviceController).selectVideoInputDevice) == null || p.call(u, t), this.showPreview && this.getVideoPreviewStream(s);
+        break;
+      case "speaker":
+        t = this._audioOutputDevices.find((v) => v.deviceId === s) || null, this._selectedAudioOutput = t, (w = (h = this.deviceController).selectAudioOutputDevice) == null || w.call(h, t);
+        break;
+    }
+    t && this.dispatchEvent(
+      new CustomEvent("sw-device-change", {
+        detail: { device: t, deviceType: i },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Test speaker by playing a test tone
+   */
+  async testSpeaker() {
+    if (this._isTestingAudio) {
+      this.stopTestAudio();
+      return;
+    }
+    try {
+      this._isTestingAudio = !0;
+      const e = new AudioContext(), i = e.createOscillator(), r = e.createGain();
+      i.type = "sine", i.frequency.value = 440, r.gain.value = 0.3, i.connect(r), r.connect(e.destination), i.start(), setTimeout(() => {
+        i.stop(), e.close(), this._isTestingAudio = !1;
+      }, 1e3), this.dispatchEvent(
+        new CustomEvent("sw-test-speaker", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    } catch (e) {
+      console.error("Failed to play test audio:", e), this._isTestingAudio = !1;
+    }
+  }
+  /**
+   * Stop test audio
+   */
+  stopTestAudio() {
+    this._testAudioElement && (this._testAudioElement.pause(), this._testAudioElement = void 0), this._isTestingAudio = !1;
+  }
+  /**
+   * Render device icon
+   */
+  renderDeviceIcon(e) {
+    switch (e) {
+      case "microphone":
+        return a`<svg class="device-icon" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 14.2 14.47 16 12 16s-4.52-1.8-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V20c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z"
+          />
+        </svg>`;
+      case "camera":
+        return a`<svg class="device-icon" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"
+          />
+        </svg>`;
+      case "speaker":
+        return a`<svg class="device-icon" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
+          />
+        </svg>`;
+    }
+  }
+  /**
+   * Render dropdown arrow icon
+   */
+  renderSelectArrow() {
+    return a`<svg class="select-arrow" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M7 10l5 5 5-5z" />
+    </svg>`;
+  }
+  /**
+   * Render a device selection section
+   */
+  renderDeviceSection(e, i, r, s) {
+    return a`
+      <div class="device-section" part="device-section">
+        <label class="device-label" for="select-${e}">
+          ${this.renderDeviceIcon(e)}
+          <span>${i}</span>
+        </label>
+        ${r.length === 0 ? a`<div class="no-devices">No ${i.toLowerCase()} found</div>` : a`
+              <div class="device-select-wrapper">
+                <select
+                  id="select-${e}"
+                  class="device-select"
+                  part="device-select"
+                  aria-label="${i}"
+                  .value=${(s == null ? void 0 : s.deviceId) || ""}
+                  @change=${(t) => this.handleDeviceChange(t, e)}
+                >
+                  ${r.map(
+      (t) => a`
+                      <option
+                        value="${t.deviceId}"
+                        ?selected=${(s == null ? void 0 : s.deviceId) === t.deviceId}
+                      >
+                        ${t.label || `Device ${t.deviceId.slice(0, 8)}`}
+                      </option>
+                    `
+    )}
+                </select>
+                ${this.renderSelectArrow()}
+              </div>
+            `}
+      </div>
+    `;
+  }
+  /**
+   * Render video preview for camera section
+   */
+  renderVideoPreview() {
+    return !this.showPreview || this._videoInputDevices.length === 0 ? b : a`
+      <div class="device-preview">
+        ${this._videoPreviewStream ? a`
+              <div class="video-preview">
+                <video
+                  autoplay
+                  playsinline
+                  muted
+                  .srcObject=${this._videoPreviewStream}
+                  @loadedmetadata=${(e) => {
+      const i = e.target;
+      this._videoElement = i, i.play().catch(() => {
+      });
+    }}
+                ></video>
+              </div>
+            ` : a` <div class="video-preview-placeholder">Click to enable camera preview</div> `}
+      </div>
+    `;
+  }
+  /**
+   * Render audio level preview for microphone section
+   */
+  renderAudioPreview() {
+    return !this.showPreview || this._audioInputDevices.length === 0 ? b : a`
+      <div class="device-preview">
+        <div class="audio-preview">
+          <span class="audio-preview-label">Level:</span>
+          <div class="audio-level-wrapper">
+            ${this._audioPreviewStream ? a`
+                  <sw-audio-level
+                    .stream=${this._audioPreviewStream}
+                    bars="10"
+                    orientation="horizontal"
+                    maxSize="20"
+                  ></sw-audio-level>
+                ` : a`
+                  <span style="color: var(--sw-color-text-muted); font-size: 12px;"
+                    >No audio input</span
+                  >
+                `}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Render the component
+   */
+  render() {
+    return a`
+      <div class="container" part="container">
+        ${this.renderDeviceSection(
+      "microphone",
+      "Microphone",
+      this._audioInputDevices,
+      this._selectedAudioInput
+    )}
+        ${this.renderAudioPreview()}
+        ${this.renderDeviceSection(
+      "camera",
+      "Camera",
+      this._videoInputDevices,
+      this._selectedVideoInput
+    )}
+        ${this.renderVideoPreview()}
+        ${this.renderDeviceSection(
+      "speaker",
+      "Speaker",
+      this._audioOutputDevices,
+      this._selectedAudioOutput
+    )}
+
+        <div class="device-section">
+          <button
+            class="test-speaker-btn"
+            @click=${this.testSpeaker}
+            ?disabled=${this._isTestingAudio}
+            aria-label="Test speaker"
+          >
+            ${this._isTestingAudio ? "Playing..." : "Test Speaker"}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = f`
+    :host {
+      /* CSS Custom Properties for theming */
+      --sw-color-primary: #044cf6;
+      --sw-color-primary-hover: #0339c4;
+      --sw-color-background: #1a1a1a;
+      --sw-color-surface: #2a2a2a;
+      --sw-color-surface-hover: #3a3a3a;
+      --sw-color-text: #ffffff;
+      --sw-color-text-muted: #a0a0a0;
+      --sw-color-border: #404040;
+      --sw-color-success: #10b981;
+      --sw-border-radius: 8px;
+      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --sw-space-1: 4px;
+      --sw-space-2: 8px;
+      --sw-space-3: 12px;
+      --sw-space-4: 16px;
+      --sw-space-6: 24px;
+
+      display: block;
+      font-family: var(--sw-font-family);
+      color: var(--sw-color-text);
+    }
+
+    .container {
+      background: var(--sw-color-background);
+      border-radius: var(--sw-border-radius);
+      border: 1px solid var(--sw-color-border);
+      overflow: hidden;
+      min-width: 300px;
+      padding: var(--sw-space-4);
+    }
+
+    .device-section {
+      margin-bottom: var(--sw-space-4);
+    }
+
+    .device-section:last-of-type {
+      margin-bottom: 0;
+    }
+
+    .device-label {
+      display: flex;
+      align-items: center;
+      gap: var(--sw-space-2);
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--sw-color-text);
+      margin-bottom: var(--sw-space-2);
+    }
+
+    .device-icon {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      color: var(--sw-color-text-muted);
+    }
+
+    .device-select-wrapper {
+      position: relative;
+    }
+
+    .device-select {
+      width: 100%;
+      padding: var(--sw-space-3) var(--sw-space-4);
+      padding-right: 36px;
+      background: var(--sw-color-surface);
+      border: 1px solid var(--sw-color-border);
+      border-radius: calc(var(--sw-border-radius) - 4px);
+      color: var(--sw-color-text);
+      font-size: 14px;
+      font-family: var(--sw-font-family);
+      cursor: pointer;
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      transition:
+        border-color 0.2s ease,
+        background-color 0.2s ease;
+    }
+
+    .device-select:hover {
+      background: var(--sw-color-surface-hover);
+    }
+
+    .device-select:focus {
+      outline: none;
+      border-color: var(--sw-color-primary);
+      box-shadow: 0 0 0 2px rgba(4, 76, 246, 0.2);
+    }
+
+    .device-select:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .device-select option {
+      background: var(--sw-color-surface);
+      color: var(--sw-color-text);
+      padding: var(--sw-space-2);
+    }
+
+    .select-arrow {
+      position: absolute;
+      right: var(--sw-space-3);
+      top: 50%;
+      transform: translateY(-50%);
+      width: 16px;
+      height: 16px;
+      color: var(--sw-color-text-muted);
+      pointer-events: none;
+    }
+
+    .no-devices {
+      padding: var(--sw-space-3) var(--sw-space-4);
+      background: var(--sw-color-surface);
+      border: 1px solid var(--sw-color-border);
+      border-radius: calc(var(--sw-border-radius) - 4px);
+      color: var(--sw-color-text-muted);
+      font-size: 14px;
+    }
+
+    .device-preview {
+      margin-top: var(--sw-space-3);
+    }
+
+    .video-preview {
+      width: 100%;
+      aspect-ratio: 16/9;
+      background: #000;
+      border-radius: calc(var(--sw-border-radius) - 4px);
+      overflow: hidden;
+    }
+
+    .video-preview video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transform: scaleX(-1);
+    }
+
+    .video-preview-placeholder {
+      width: 100%;
+      aspect-ratio: 16/9;
+      background: var(--sw-color-surface);
+      border-radius: calc(var(--sw-border-radius) - 4px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--sw-color-text-muted);
+      font-size: 14px;
+    }
+
+    .audio-preview {
+      display: flex;
+      align-items: center;
+      gap: var(--sw-space-3);
+      padding: var(--sw-space-3);
+      background: var(--sw-color-surface);
+      border-radius: calc(var(--sw-border-radius) - 4px);
+    }
+
+    .audio-preview-label {
+      font-size: 12px;
+      color: var(--sw-color-text-muted);
+      flex-shrink: 0;
+    }
+
+    .audio-level-wrapper {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .test-speaker-btn {
+      padding: var(--sw-space-2) var(--sw-space-4);
+      background: var(--sw-color-primary);
+      color: white;
+      border: none;
+      border-radius: calc(var(--sw-border-radius) - 4px);
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+
+    .test-speaker-btn:hover {
+      background: var(--sw-color-primary-hover);
+    }
+
+    .test-speaker-btn:focus {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--sw-color-background),
+        0 0 0 4px var(--sw-color-primary);
+    }
+
+    .test-speaker-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Scrollbar styling for select on some browsers */
+    .device-select::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .device-select::-webkit-scrollbar-track {
+      background: var(--sw-color-background);
+    }
+
+    .device-select::-webkit-scrollbar-thumb {
+      background: var(--sw-color-border);
+      border-radius: 4px;
+    }
+
+    .device-select::-webkit-scrollbar-thumb:hover {
+      background: var(--sw-color-text-muted);
+    }
+  `;
+o.CSS_VISIBILITY_CHECK_INTERVAL_MS = 200;
+c([
+  m({ type: Object })
+], o.prototype, "deviceController", 2);
+c([
+  m({ type: Boolean, attribute: "show-preview" })
+], o.prototype, "showPreview", 2);
+c([
+  n()
+], o.prototype, "_audioInputDevices", 2);
+c([
+  n()
+], o.prototype, "_videoInputDevices", 2);
+c([
+  n()
+], o.prototype, "_audioOutputDevices", 2);
+c([
+  n()
+], o.prototype, "_selectedAudioInput", 2);
+c([
+  n()
+], o.prototype, "_selectedVideoInput", 2);
+c([
+  n()
+], o.prototype, "_selectedAudioOutput", 2);
+c([
+  n()
+], o.prototype, "_videoPreviewStream", 2);
+c([
+  n()
+], o.prototype, "_audioPreviewStream", 2);
+c([
+  n()
+], o.prototype, "_isTestingAudio", 2);
+o = c([
+  g("sw-device-selector")
+], o);
+export {
+  o as DeviceSelector
+};
+//# sourceMappingURL=device-selector.js.map