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

package/dist/components/device-selector.d.ts

@@ -0,0 +1,250 @@
+/**
+ * Device Selector Component
+ *
+ * Dropdown-based selector for choosing audio/video devices. Displays device lists from
+ * DeviceController observables with labeled dropdowns for microphone, camera, and speaker.
+ * Includes inline preview for video (camera) and audio level (microphone) using browser API.
+ *
+ * @example
+ * ```html
+ * <sw-device-selector .deviceController=${deviceController} show-preview></sw-device-selector>
+ * ```
+ */
+import { LitElement } from 'lit';
+import type { Observable } from 'rxjs';
+import './audio-level.js';
+/**
+ * DeviceController interface for observing device lists
+ */
+export interface DeviceController {
+    readonly audioInputDevices$: Observable<MediaDeviceInfo[]>;
+    readonly audioOutputDevices$: Observable<MediaDeviceInfo[]>;
+    readonly videoInputDevices$: Observable<MediaDeviceInfo[]>;
+    readonly selectedAudioInputDevice$: Observable<MediaDeviceInfo | null>;
+    readonly selectedAudioOutputDevice$: Observable<MediaDeviceInfo | null>;
+    readonly selectedVideoInputDevice$: Observable<MediaDeviceInfo | null>;
+    readonly selectedAudioInputDevice: MediaDeviceInfo | null;
+    readonly selectedAudioOutputDevice: MediaDeviceInfo | null;
+    readonly selectedVideoInputDevice: MediaDeviceInfo | null;
+    readonly audioInputDevices: MediaDeviceInfo[];
+    readonly audioOutputDevices: MediaDeviceInfo[];
+    readonly videoInputDevices: MediaDeviceInfo[];
+    readonly selectedAudioInputDeviceConstraints: MediaTrackConstraints;
+    readonly selectedVideoInputDeviceConstraints: MediaTrackConstraints;
+    MediaDeviceInfoToConstraints(MediaDeviceInfo: MediaDeviceInfo | null): MediaTrackConstraints;
+    selectAudioInputDevice(device: MediaDeviceInfo | null): void;
+    selectVideoInputDevice(device: MediaDeviceInfo | null): void;
+    selectAudioOutputDevice(device: MediaDeviceInfo | null): void;
+    enableDeviceMonitoring(): void;
+    disableDeviceMonitoring(): void;
+    getLocalStream?: () => Promise<MediaStream>;
+}
+export declare class DeviceSelector extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Device controller with observables for device lists
+     */
+    deviceController?: DeviceController;
+    /**
+     * Whether to show the preview panel
+     */
+    showPreview: boolean;
+    /**
+     * Audio input devices
+     */
+    private _audioInputDevices;
+    /**
+     * Video input devices
+     */
+    private _videoInputDevices;
+    /**
+     * Audio output devices
+     */
+    private _audioOutputDevices;
+    /**
+     * Selected audio input device
+     */
+    private _selectedAudioInput;
+    /**
+     * Selected video input device
+     */
+    private _selectedVideoInput;
+    /**
+     * Selected audio output device
+     */
+    private _selectedAudioOutput;
+    /**
+     * Video preview stream from camera
+     */
+    private _videoPreviewStream;
+    /**
+     * Audio preview stream from microphone
+     */
+    private _audioPreviewStream;
+    /**
+     * Is test audio playing
+     */
+    private _isTestingAudio;
+    /**
+     * Whether the component is currently visible (combines all visibility factors)
+     */
+    private _isComponentVisible;
+    /**
+     * Whether the component is in the viewport (IntersectionObserver)
+     */
+    private _isInViewport;
+    /**
+     * Whether the document/tab is visible
+     */
+    private _isDocumentVisible;
+    /**
+     * Whether the component is CSS-visible (display, visibility, opacity)
+     */
+    private _isCSSVisible;
+    /**
+     * Video element reference
+     */
+    private _videoElement?;
+    /**
+     * RxJS subscriptions for cleanup
+     */
+    private subscriptions;
+    /**
+     * Audio element for speaker test
+     */
+    private _testAudioElement?;
+    /**
+     * IntersectionObserver for viewport visibility
+     */
+    private _intersectionObserver?;
+    /**
+     * Bound handler for document visibility change
+     */
+    private _boundHandleDocumentVisibility;
+    /**
+     * Interval ID for CSS visibility polling
+     */
+    private _cssVisibilityCheckInterval?;
+    /**
+     * Flag to prevent concurrent preview initialization
+     */
+    private _isInitializingPreviews;
+    /**
+     * Interval in milliseconds for checking CSS visibility changes
+     */
+    private static readonly CSS_VISIBILITY_CHECK_INTERVAL_MS;
+    /**
+     * 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;
+    /**
+     * Setup all visibility observers (IntersectionObserver, document visibility, CSS polling)
+     */
+    private setupVisibilityObservers;
+    /**
+     * Cleanup all visibility observers
+     */
+    private cleanupVisibilityObservers;
+    /**
+     * Handle document visibility change (tab switching)
+     */
+    private handleDocumentVisibilityChange;
+    /**
+     * Check if the component is visible via CSS (display, visibility, opacity)
+     * Traverses the DOM tree including shadow DOM boundaries
+     */
+    private checkCSSVisibility;
+    /**
+     * Update the combined visibility state and manage preview streams accordingly
+     */
+    private updateVisibilityState;
+    /**
+     * Subscribe to device controller observables
+     */
+    private setupSubscriptions;
+    /**
+     * Cleanup all subscriptions
+     */
+    private cleanupSubscriptions;
+    /**
+     * 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/
+     */
+    private cleanupVideoPreviewStream;
+    /**
+     * 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
+     */
+    private cleanupAudioPreviewStream;
+    /**
+     * Get video preview stream from browser API
+     */
+    private getVideoPreviewStream;
+    /**
+     * Get audio preview stream from browser API
+     */
+    private getAudioPreviewStream;
+    /**
+     * Update video element with current stream
+     */
+    private updateVideoElement;
+    /**
+     * Initialize previews when show-preview is enabled
+     */
+    private initializePreviews;
+    /**
+     * Handle device selection change from dropdown
+     */
+    private handleDeviceChange;
+    /**
+     * Test speaker by playing a test tone
+     */
+    private testSpeaker;
+    /**
+     * Stop test audio
+     */
+    private stopTestAudio;
+    /**
+     * Render device icon
+     */
+    private renderDeviceIcon;
+    /**
+     * Render dropdown arrow icon
+     */
+    private renderSelectArrow;
+    /**
+     * Render a device selection section
+     */
+    private renderDeviceSection;
+    /**
+     * Render video preview for camera section
+     */
+    private renderVideoPreview;
+    /**
+     * Render audio level preview for microphone section
+     */
+    private renderAudioPreview;
+    /**
+     * Render the component
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * Declare global type for TypeScript
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-device-selector': DeviceSelector;
+    }
+}
+//# sourceMappingURL=device-selector.d.ts.map

package/dist/components/device-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-selector.d.ts","sourceRoot":"","sources":["../../src/components/device-selector.ts"],"names":[],"mappings":"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"}