@evolve.ui/core-components 1.0.0

package/WebRTCPlayer-C-sTtskR.mjs

@@ -0,0 +1,940 @@
+import { ArrowSquareOut } from "./Icons.mjs";
+import { BodySecondary, Caption, H5 } from "./Typography/Text.mjs";
+import { LoadingSpinner } from "./LoadingSpinner.mjs";
+import { Button } from "./Button.mjs";
+import { IconButton } from "./IconButton.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/WebRTCPlayer/types.ts
+/**
+* Configuration constants for WebRTC player
+*/
+const DEFAULT_WS_PORT = 5080;
+const DEFAULT_WSS_PORT = 5443;
+const DEFAULT_PATH = "/WebRTCAppEE/websocket";
+const RECONNECT_INTERVAL = 5e3;
+const PING_INTERVAL = 3e4;
+const FETCH_STREAM_ID_TIMEOUT = 3e3;
+/**
+* Error tokens emitted by NativeWebRTCAdaptor via its callbackError channel.
+* Exported so the adaptor (producer) and the hook's friendly-message map
+* (consumer) reference the same literals and can't silently drift apart — a
+* rename here is a compile error on both sides rather than a silent fallthrough.
+*/
+const WebRTCErrorToken = {
+	failedToCreateAnswer: "Failed to create answer",
+	failedToSetLocalDescription: "Failed to set local description",
+	failedToSetRemoteDescription: "Failed to set remote description",
+	iceConnectionFailed: "IceConnectionFailed",
+	peerConnectionFailed: "PeerConnectionFailed",
+	webSocketError: "WebSocket error",
+	webSocketNotConnected: "WebSocketNotConnected",
+	webSocketNotSupported: "WebSocketNotSupported"
+};
+//#endregion
+//#region src/WebRTCPlayer/adaptor/NativeWebRTCAdaptor.ts
+/**
+* Native WebRTC Adaptor for Ant Media Server
+*
+* This is a lightweight TypeScript implementation for WebRTC streaming from Ant Media Server.
+* It uses only native browser APIs (WebSocket, RTCPeerConnection) without external dependencies.
+*
+* This adaptor only supports PLAY mode (consuming streams), not publishing.
+*
+* Note: Console statements are intentionally enabled in this file for WebRTC debugging,
+* as they are crucial for troubleshooting connection issues in production environments.
+*/
+/**
+* WebSocket adaptor for managing the connection to Ant Media Server
+*/
+var WebSocketAdaptor = class {
+	constructor(config) {
+		this.connected = false;
+		this.callback = config.callback;
+		this.callbackError = config.callbackError;
+		this.closePeerConnection = config.closePeerConnection;
+		this.debug = config.debug;
+		this.takeCandidate = config.takeCandidate;
+		this.takeConfiguration = config.takeConfiguration;
+		this.wsConn = new WebSocket(config.websocket_url);
+		this.setupEventHandlers();
+	}
+	/**
+	* Setup WebSocket event handlers
+	*/
+	setupEventHandlers() {
+		this.wsConn.onopen = () => {
+			if (this.debug) console.log("[NativeWebRTC] WebSocket connected");
+			this.connected = true;
+			this.callback("initialized");
+		};
+		this.wsConn.onmessage = ({ data }) => {
+			let obj;
+			try {
+				obj = JSON.parse(data);
+			} catch (error) {
+				if (this.debug) console.error("[NativeWebRTC] Failed to parse WebSocket message:", error);
+				return;
+			}
+			if (this.debug) console.log("[NativeWebRTC] WebSocket message:", obj);
+			switch (obj.command) {
+				case "start":
+					if (this.debug) console.log("[NativeWebRTC] Start command received (ignored in play-only mode)");
+					break;
+				case "takeCandidate":
+					if (obj.streamId && obj.label !== void 0 && obj.candidate) {
+						if (this.debug) console.log(`[NativeWebRTC] Received ICE candidate for stream ${obj.streamId}`);
+						this.takeCandidate(obj.streamId, obj.label, obj.candidate);
+					}
+					break;
+				case "takeConfiguration":
+					if (obj.streamId && obj.sdp && obj.type) {
+						if (this.debug) console.log(`[NativeWebRTC] Received remote description for stream ${obj.streamId}, type: ${obj.type}`);
+						this.takeConfiguration(obj.streamId, obj.sdp, obj.type);
+					}
+					break;
+				case "stop":
+					if (this.debug) console.log("[NativeWebRTC] Stop command received");
+					if (obj.streamId) this.closePeerConnection(obj.streamId);
+					break;
+				case "error":
+					if (this.debug) console.error("[NativeWebRTC] Error from server:", obj.definition);
+					this.callbackError(obj.definition || "Unknown error");
+					break;
+				case "notification":
+					this.callback(obj.definition || "notification", obj);
+					if (obj.definition === "play_finished" || obj.definition === "publish_finished") {
+						if (obj.streamId) this.closePeerConnection(obj.streamId);
+					}
+					break;
+				case "streamInformation":
+					this.callback("streamInformation", obj);
+					break;
+				case "pong":
+					if (this.debug) console.log("[NativeWebRTC] Pong received");
+					break;
+				default: if (this.debug) console.log("[NativeWebRTC] Unhandled message:", obj);
+			}
+		};
+		this.wsConn.onerror = (error) => {
+			console.error("[NativeWebRTC] WebSocket error:", error);
+			this.callbackError(WebRTCErrorToken.webSocketError);
+		};
+		this.wsConn.onclose = (event) => {
+			this.connected = false;
+			if (this.debug) console.log("[NativeWebRTC] WebSocket connection closed");
+			this.callback("closed", event);
+		};
+	}
+	/**
+	* Send a message through the WebSocket
+	*/
+	send(text) {
+		if (this.wsConn.readyState !== WebSocket.OPEN) {
+			this.callbackError(WebRTCErrorToken.webSocketNotConnected);
+			return;
+		}
+		this.wsConn.send(text);
+	}
+	/**
+	* Close the WebSocket connection
+	*/
+	close() {
+		this.wsConn.close();
+	}
+	/**
+	* Check if WebSocket is connected
+	*/
+	isConnected() {
+		return this.connected;
+	}
+};
+/**
+* Native WebRTC Adaptor for Ant Media Server (Play Mode Only)
+*/
+var NativeWebRTCAdaptor = class {
+	constructor(config) {
+		this.webSocketAdaptor = null;
+		this.remotePeerConnection = {};
+		this.playStreamId = [];
+		this.pingInterval = null;
+		this.initPeerConnection = (streamId) => {
+			if (this.remotePeerConnection[streamId]) return;
+			if (this.debug) console.log(`[NativeWebRTC] Initializing peer connection for stream: ${streamId}`);
+			const peerConnection = new RTCPeerConnection(this.peerconnection_config);
+			this.remotePeerConnection[streamId] = peerConnection;
+			peerConnection.onicecandidate = (event) => {
+				this.iceCandidateReceived(event, streamId);
+			};
+			peerConnection.ontrack = (event) => {
+				this.onTrack(event, streamId);
+			};
+			peerConnection.onconnectionstatechange = () => {
+				if (peerConnection.connectionState === "failed") {
+					if (this.debug) console.log("[NativeWebRTC] Peer connection failed");
+					this.callbackError(WebRTCErrorToken.peerConnectionFailed);
+				}
+			};
+			peerConnection.oniceconnectionstatechange = () => {
+				if (peerConnection.iceConnectionState === "failed") {
+					if (this.debug) console.log("[NativeWebRTC] ICE connection failed");
+					this.callbackError(WebRTCErrorToken.iceConnectionFailed);
+				}
+			};
+			if (this.debug) console.log(`[NativeWebRTC] Peer connection created for stream: ${streamId}`);
+		};
+		this.closePeerConnection = (streamId) => {
+			const peerConnection = this.remotePeerConnection[streamId];
+			if (peerConnection && peerConnection.signalingState !== "closed") {
+				if (this.debug) console.log(`[NativeWebRTC] Closing peer connection for stream: ${streamId}`);
+				peerConnection.close();
+				delete this.remotePeerConnection[streamId];
+				const playStreamIndex = this.playStreamId.indexOf(streamId);
+				if (playStreamIndex !== -1) this.playStreamId.splice(playStreamIndex, 1);
+			}
+		};
+		this.onTrack = (event, streamId) => {
+			if (this.debug) console.log(`[NativeWebRTC] Track received for stream: ${streamId}`);
+			const remoteVideo = this.remoteVideoId ? document.getElementById(this.remoteVideoId) : null;
+			if (remoteVideo && remoteVideo instanceof HTMLVideoElement) {
+				if (remoteVideo.srcObject !== event.streams[0]) {
+					remoteVideo.srcObject = event.streams[0];
+					if (this.debug) console.log("[NativeWebRTC] Remote stream attached to video element");
+				}
+			} else {
+				const dataObj = {
+					streamId,
+					track: event.streams[0]
+				};
+				this.callback("newStreamAvailable", dataObj);
+			}
+		};
+		this.iceCandidateReceived = (event, streamId) => {
+			if (event.candidate) {
+				const jsCmd = {
+					candidate: event.candidate.candidate,
+					command: "takeCandidate",
+					id: event.candidate.sdpMid,
+					label: event.candidate.sdpMLineIndex,
+					streamId
+				};
+				if (this.debug) console.log(`[NativeWebRTC] Sending ICE candidate for stream: ${streamId}`);
+				this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+			}
+		};
+		this.takeConfiguration = (streamId, sdp, type) => {
+			this.initPeerConnection(streamId);
+			const peerConnection = this.remotePeerConnection[streamId];
+			if (!peerConnection) {
+				console.error("[NativeWebRTC] Peer connection not found");
+				return;
+			}
+			peerConnection.setRemoteDescription(new RTCSessionDescription({
+				sdp,
+				type
+			})).then(() => {
+				if (this.debug) console.log(`[NativeWebRTC] Remote description set successfully for stream: ${streamId}`);
+				if (type === "offer") {
+					if (this.debug) console.log(`[NativeWebRTC] Creating answer for stream: ${streamId}`);
+					peerConnection.createAnswer(this.sdp_constraints).then((description) => {
+						this.gotDescription(description, streamId);
+					}).catch((error) => {
+						console.error("[NativeWebRTC] Failed to create answer:", error);
+						this.callbackError(WebRTCErrorToken.failedToCreateAnswer, error);
+					});
+				}
+			}).catch((error) => {
+				console.error("[NativeWebRTC] Failed to set remote description:", error);
+				this.callbackError(WebRTCErrorToken.failedToSetRemoteDescription, error);
+			});
+		};
+		this.gotDescription = (description, streamId) => {
+			const peerConnection = this.remotePeerConnection[streamId];
+			if (!peerConnection) {
+				console.error("[NativeWebRTC] Peer connection not found");
+				return;
+			}
+			peerConnection.setLocalDescription(description).then(() => {
+				if (this.debug) console.log(`[NativeWebRTC] Local description set successfully for stream: ${streamId}`);
+				const jsCmd = {
+					command: "takeConfiguration",
+					sdp: description.sdp,
+					streamId,
+					type: description.type
+				};
+				this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+			}).catch((error) => {
+				console.error("[NativeWebRTC] Failed to set local description:", error);
+				this.callbackError(WebRTCErrorToken.failedToSetLocalDescription, error);
+			});
+		};
+		this.takeCandidate = (streamId, label, candidateSdp) => {
+			const candidate = new RTCIceCandidate({
+				candidate: candidateSdp,
+				sdpMLineIndex: label
+			});
+			this.initPeerConnection(streamId);
+			const peerConnection = this.remotePeerConnection[streamId];
+			if (!peerConnection) {
+				console.error("[NativeWebRTC] Peer connection not found");
+				return;
+			}
+			peerConnection.addIceCandidate(candidate).then(() => {
+				if (this.debug) console.log(`[NativeWebRTC] ICE candidate added for stream: ${streamId}`);
+			}).catch((error) => {
+				console.error(`[NativeWebRTC] Failed to add ICE candidate for stream ${streamId}:`, error);
+			});
+		};
+		this.callback = config.callback;
+		this.callbackError = config.callbackError;
+		this.debug = config.debug || false;
+		this.websocket_url = config.websocket_url;
+		this.peerconnection_config = config.peerconnection_config || { iceServers: [{ urls: "stun:stun.l.google.com:19302" }] };
+		this.sdp_constraints = config.sdp_constraints || {
+			offerToReceiveAudio: true,
+			offerToReceiveVideo: true
+		};
+		this.remoteVideoId = config.remoteVideoId;
+		this.init();
+	}
+	/**
+	* Initialize the WebSocket connection
+	*/
+	init() {
+		if (!("WebSocket" in window)) {
+			console.error("[NativeWebRTC] WebSocket not supported");
+			this.callbackError(WebRTCErrorToken.webSocketNotSupported);
+			return;
+		}
+		if (!this.webSocketAdaptor?.isConnected()) this.webSocketAdaptor = new WebSocketAdaptor({
+			callback: this.callback,
+			callbackError: this.callbackError,
+			closePeerConnection: this.closePeerConnection,
+			debug: this.debug,
+			takeCandidate: this.takeCandidate,
+			takeConfiguration: this.takeConfiguration,
+			websocket_url: this.websocket_url
+		});
+	}
+	/**
+	* Start playing a stream
+	*/
+	play(streamId) {
+		this.playStreamId.push(streamId);
+		const jsCmd = {
+			command: "play",
+			streamId
+		};
+		if (this.debug) console.log(`[NativeWebRTC] Sending play command for stream: ${streamId}`);
+		this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+	}
+	/**
+	* Stop playing a stream
+	*/
+	stop(streamId) {
+		this.closePeerConnection(streamId);
+		const jsCmd = {
+			command: "stop",
+			streamId
+		};
+		if (this.debug) console.log(`[NativeWebRTC] Sending stop command for stream: ${streamId}`);
+		this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+	}
+	/**
+	* Send a ping to keep the connection alive
+	*/
+	ping(streamId) {
+		const jsCmd = {
+			command: "ping",
+			streamId
+		};
+		if (this.debug) console.log("[NativeWebRTC] Sending ping");
+		this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+	}
+	/**
+	* Start sending periodic pings
+	*/
+	startPinging(streamId) {
+		this.pingInterval = setInterval(() => {
+			this.ping(streamId);
+		}, 3e4);
+	}
+	/**
+	* Stop sending pings
+	*/
+	stopPinging() {
+		if (this.pingInterval) {
+			clearInterval(this.pingInterval);
+			this.pingInterval = null;
+		}
+	}
+	/**
+	* Leave the stream and close connections
+	*/
+	leave(streamId) {
+		this.stopPinging();
+		const jsCmd = {
+			command: "leave",
+			streamId
+		};
+		if (this.debug) console.log(`[NativeWebRTC] Leaving stream: ${streamId}`);
+		this.webSocketAdaptor?.send(JSON.stringify(jsCmd));
+		this.closePeerConnection(streamId);
+		this.webSocketAdaptor?.close();
+	}
+	/**
+	* Close the WebSocket connection
+	*/
+	closeWebSocket() {
+		this.webSocketAdaptor?.close();
+	}
+};
+//#endregion
+//#region src/WebRTCPlayer/hooks/useWebRTCStream.ts
+/**
+* Races a value/promise against a timeout, resolving to `undefined` if the
+* timeout wins. Used to prevent a hung host-supplied fetchStreamId() from
+* permanently blocking the reconnect loop.
+*/
+const withTimeout = async (value, ms) => {
+	let timer;
+	const valuePromise = Promise.resolve(value);
+	valuePromise.catch(() => void 0);
+	try {
+		return await Promise.race([valuePromise, new Promise((resolve) => {
+			timer = setTimeout(() => {
+				resolve(void 0);
+			}, ms);
+		})]);
+	} finally {
+		if (timer) clearTimeout(timer);
+	}
+};
+/**
+* Maps adaptor error tokens to user-facing copy so raw identifiers like
+* `IceConnectionFailed` never reach the error overlay. Keyed off the shared
+* WebRTCErrorToken constants so this map can't drift from what the adaptor emits.
+*/
+const FRIENDLY_ERROR_MESSAGES = /* @__PURE__ */ new Map([
+	[WebRTCErrorToken.failedToCreateAnswer, "Connection lost"],
+	[WebRTCErrorToken.failedToSetLocalDescription, "Connection lost"],
+	[WebRTCErrorToken.failedToSetRemoteDescription, "Connection lost"],
+	[WebRTCErrorToken.iceConnectionFailed, "Connection lost"],
+	[WebRTCErrorToken.peerConnectionFailed, "Connection lost"],
+	[WebRTCErrorToken.webSocketError, "Connection lost"],
+	[WebRTCErrorToken.webSocketNotConnected, "Connection lost"],
+	[WebRTCErrorToken.webSocketNotSupported, "Your browser does not support live streaming"]
+]);
+const toFriendlyError = (raw) => FRIENDLY_ERROR_MESSAGES.get(raw) ?? raw;
+/**
+* Custom hook for managing WebRTC stream connections to Ant Media Server
+*
+* This hook handles the complete lifecycle of a WebRTC stream connection including:
+* - WebSocket connection management
+* - RTCPeerConnection setup and negotiation
+* - Stream state management (loading, playing, error, reconnecting)
+* - Automatic reconnection on connection failure
+* - Proper cleanup on unmount
+*
+* @param config - Configuration object for the WebRTC connection
+* @returns WebRTC player state including video ref, loading state, playing state, error, and mute controls
+*
+* @example
+* ```tsx
+* const { videoRef, loading, playing, error } = useWebRTCStream({
+*   streamId: 'my-stream-id',
+*   hostname: 'media.example.com'
+* });
+*
+* return (
+*   <video ref={videoRef} autoPlay playsInline />
+* );
+* ```
+*/
+const useWebRTCStream = ({ debug = false, fetchStreamId, hostname, streamId, wsPort = DEFAULT_WS_PORT, wssPort = DEFAULT_WSS_PORT }) => {
+	const videoRef = useRef(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [connectionState, setConnectionState] = useState("idle");
+	const webRTCAdaptorRef = useRef(null);
+	const reconnectIntervalRef = useRef(null);
+	const pingIntervalRef = useRef(null);
+	const isReconnectingRef = useRef(false);
+	const isMountedRef = useRef(true);
+	const initTokenRef = useRef(0);
+	/* istanbul ignore next -- @preserve: the default initializer is never invoked; an effect overwrites this ref on first commit, and no reconnect (the only caller) can fire before the mount effect creates an adaptor. */
+	const initializeWebRTCRef = useRef(() => void 0);
+	const activeStreamIdRef = useRef(streamId);
+	const fetchStreamIdRef = useRef(fetchStreamId);
+	fetchStreamIdRef.current = fetchStreamId;
+	/**
+	* Generates the WebSocket URL based on the current page protocol
+	*/
+	const getWebSocketUrl = useCallback(() => {
+		const isSecure = window.location.protocol === "https:";
+		const protocol = isSecure ? "wss" : "ws";
+		const port = isSecure ? wssPort : wsPort;
+		const url = `${protocol}://${hostname}:${port}${DEFAULT_PATH}`;
+		if (debug) console.log("[WebRTC] Generated WebSocket URL:", {
+			hostname,
+			isSecure,
+			location: window.location.protocol,
+			port,
+			protocol,
+			url
+		});
+		return url;
+	}, [
+		hostname,
+		wsPort,
+		wssPort,
+		debug
+	]);
+	/**
+	* Clears reconnection interval
+	*/
+	const stopReconnecting = useCallback(() => {
+		if (reconnectIntervalRef.current) {
+			clearInterval(reconnectIntervalRef.current);
+			reconnectIntervalRef.current = null;
+		}
+		isReconnectingRef.current = false;
+	}, []);
+	/**
+	* Starts the reconnection loop if one is not already running.
+	*
+	* Any failure signal (WebSocket error, WebSocket close, or the stream
+	* finishing) funnels through here so that a dropped connection always
+	* triggers recovery. The loop is idempotent — guarded by isReconnectingRef —
+	* and is cleared by stopReconnecting() once the stream re-initializes or
+	* starts playing again.
+	*
+	* The loop retries indefinitely (no max-attempt cap) by design: a live stream
+	* can resume minutes after dropping, so we keep attempting every
+	* RECONNECT_INTERVAL until it returns or the component unmounts.
+	*/
+	const startReconnecting = useCallback(() => {
+		if (isReconnectingRef.current) return;
+		if (debug) console.log(`[WebRTC] Starting reconnection attempts (every ${RECONNECT_INTERVAL}ms)`);
+		isReconnectingRef.current = true;
+		reconnectIntervalRef.current = setInterval(() => {
+			if (debug) console.log("[WebRTC] 🔄 Attempting to reconnect...");
+			initializeWebRTCRef.current();
+		}, RECONNECT_INTERVAL);
+	}, [debug]);
+	/**
+	* Starts ping interval to keep connection alive
+	*/
+	const startPinging = useCallback(() => {
+		if (pingIntervalRef.current) clearInterval(pingIntervalRef.current);
+		pingIntervalRef.current = setInterval(() => {
+			const activeStreamId = activeStreamIdRef.current;
+			if (webRTCAdaptorRef.current && activeStreamId) try {
+				webRTCAdaptorRef.current.ping(activeStreamId);
+			} catch (err) {
+				if (debug) console.error("Error sending ping:", err);
+			}
+		}, PING_INTERVAL);
+	}, [debug]);
+	/**
+	* Stops ping interval
+	*/
+	const stopPinging = useCallback(() => {
+		if (pingIntervalRef.current) {
+			clearInterval(pingIntervalRef.current);
+			pingIntervalRef.current = null;
+		}
+	}, []);
+	/**
+	* Handles WebRTC adaptor callbacks
+	*/
+	const handleCallback = useCallback((info, obj) => {
+		if (!isMountedRef.current) return;
+		if (debug) console.log(`[WebRTC] Callback: ${info}`, obj);
+		switch (info) {
+			case "initialized":
+				if (debug) console.log("[WebRTC] ✅ Initialized - WebSocket connected, starting playback");
+				setConnectionState("connected");
+				setLoading(true);
+				stopReconnecting();
+				startPinging();
+				if (webRTCAdaptorRef.current && activeStreamIdRef.current) {
+					if (debug) console.log(`[WebRTC] Calling play() for streamId: ${activeStreamIdRef.current}`);
+					webRTCAdaptorRef.current.play(activeStreamIdRef.current);
+				}
+				break;
+			case "play_started":
+				if (debug) console.log("[WebRTC] ✅ Play started - Stream is now playing");
+				setConnectionState("playing");
+				setLoading(false);
+				setError(null);
+				stopReconnecting();
+				break;
+			case "play_finished":
+				if (debug) console.log("[WebRTC] ⚠️ Play finished - Stream ended");
+				setConnectionState("error");
+				setError("Stream ended");
+				startReconnecting();
+				break;
+			case "closed":
+				if (debug) console.log("[WebRTC] ❌ Connection closed");
+				setConnectionState("error");
+				setError("Connection closed");
+				startReconnecting();
+				break;
+			default: if (debug) console.log(`[WebRTC] Unhandled callback: ${info}`, obj);
+		}
+	}, [
+		debug,
+		startPinging,
+		stopReconnecting,
+		startReconnecting
+	]);
+	/**
+	* Handles WebRTC adaptor errors
+	*/
+	const handleError = useCallback((errorMessage, errorObject) => {
+		if (!isMountedRef.current) return;
+		console.error("[WebRTC] ❌ Error:", errorMessage, errorObject);
+		setConnectionState("error");
+		setLoading(false);
+		setError(toFriendlyError(errorMessage));
+		startReconnecting();
+	}, [startReconnecting]);
+	/**
+	* Initializes the WebRTC adaptor
+	*/
+	const initializeWebRTC = useCallback(async () => {
+		if (!activeStreamIdRef.current) {
+			console.error("[WebRTC] ❌ No stream ID provided");
+			setError("No stream ID provided");
+			return;
+		}
+		const token = ++initTokenRef.current;
+		const isCurrent = () => token === initTokenRef.current && isMountedRef.current;
+		if (webRTCAdaptorRef.current) {
+			if (debug) console.log("[WebRTC] Cleaning up existing adaptor");
+			try {
+				stopPinging();
+				webRTCAdaptorRef.current.stop(activeStreamIdRef.current);
+				webRTCAdaptorRef.current.closeWebSocket();
+			} catch (err) {
+				console.error("[WebRTC] Error cleaning up previous adaptor:", err);
+			}
+			webRTCAdaptorRef.current = null;
+		}
+		const reconnecting = isReconnectingRef.current;
+		setConnectionState(reconnecting ? "reconnecting" : "connecting");
+		setLoading(!reconnecting);
+		if (isReconnectingRef.current && fetchStreamIdRef.current) try {
+			const freshStreamId = await withTimeout(fetchStreamIdRef.current(), FETCH_STREAM_ID_TIMEOUT);
+			if (!isCurrent()) return;
+			if (freshStreamId) {
+				if (debug && freshStreamId !== activeStreamIdRef.current) console.log(`[WebRTC] Refreshed stream ID: ${activeStreamIdRef.current} -> ${freshStreamId}`);
+				activeStreamIdRef.current = freshStreamId;
+			}
+		} catch (err) {
+			console.error("[WebRTC] fetchStreamId failed, reusing current stream ID:", err);
+			if (!isCurrent()) return;
+		}
+		if (!isCurrent()) {
+			if (debug) console.log("[WebRTC] Initialization superseded or unmounted, aborting");
+			return;
+		}
+		const activeStreamId = activeStreamIdRef.current;
+		if (debug) console.log(`[WebRTC] 🚀 Initializing WebRTC for streamId: ${activeStreamId}`);
+		try {
+			const websocketUrl = getWebSocketUrl();
+			if (videoRef.current && !videoRef.current.id) videoRef.current.id = "webrtc-video-" + activeStreamId;
+			const videoId = videoRef.current?.id || "webrtc-video";
+			if (debug) console.log("[WebRTC] Creating WebRTCAdaptor with config:", {
+				isPlayMode: true,
+				remoteVideoId: videoId,
+				streamId: activeStreamId,
+				websocket_url: websocketUrl
+			});
+			webRTCAdaptorRef.current = new NativeWebRTCAdaptor({
+				callback: handleCallback,
+				callbackError: handleError,
+				debug,
+				peerconnection_config: { iceServers: [{ urls: "stun:stun.l.google.com:19302" }] },
+				remoteVideoId: videoId,
+				sdp_constraints: {
+					offerToReceiveAudio: true,
+					offerToReceiveVideo: true
+				},
+				websocket_url: websocketUrl
+			});
+			if (debug) console.log("[WebRTC] ✅ WebRTCAdaptor created, waiting for connection...");
+		} catch (err) {
+			console.error("[WebRTC] ❌ Failed to initialize WebRTC:", err);
+			handleError("Failed to initialize WebRTC", err);
+		}
+	}, [
+		debug,
+		getWebSocketUrl,
+		handleCallback,
+		handleError,
+		stopPinging
+	]);
+	/**
+	* Track mount status so async init can bail after an await once the component
+	* has unmounted. Kept separate from the streamId-scoped cleanup effect below
+	* so a prop change never flips this to unmounted.
+	*/
+	useEffect(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+	/**
+	* Keep the ref pointed at the latest initializeWebRTC so the reconnect loop
+	* always reconnects with the current streamId/config rather than a closure
+	* captured when the loop first started.
+	*/
+	useEffect(() => {
+		initializeWebRTCRef.current = initializeWebRTC;
+	}, [initializeWebRTC]);
+	/**
+	* Initialize WebRTC connection on mount or when streamId changes
+	*/
+	useEffect(() => {
+		if (streamId) {
+			if (debug) console.log("[WebRTC] StreamId changed or component mounted, scheduling initialization");
+			activeStreamIdRef.current = streamId;
+			const timeoutId = setTimeout(() => {
+				initializeWebRTC();
+			}, 100);
+			return () => {
+				clearTimeout(timeoutId);
+			};
+		}
+	}, [
+		streamId,
+		initializeWebRTC,
+		debug
+	]);
+	/**
+	* Cleanup on unmount
+	*/
+	useEffect(() => {
+		return () => {
+			if (debug) console.log("[WebRTC] 🧹 Cleaning up on unmount");
+			stopReconnecting();
+			stopPinging();
+			if (webRTCAdaptorRef.current && activeStreamIdRef.current) try {
+				webRTCAdaptorRef.current.stop(activeStreamIdRef.current);
+				webRTCAdaptorRef.current.closeWebSocket();
+				if (debug) console.log("[WebRTC] ✅ Cleanup complete");
+			} catch (err) {
+				console.error("[WebRTC] Error during cleanup:", err);
+			}
+			webRTCAdaptorRef.current = null;
+		};
+	}, [
+		streamId,
+		debug,
+		stopReconnecting,
+		stopPinging
+	]);
+	/**
+	* Assign the stream to the video element when it's available
+	*/
+	useEffect(() => {
+		if (videoRef.current && webRTCAdaptorRef.current) {
+			const remoteVideo = videoRef.current;
+			if (!remoteVideo.id) remoteVideo.id = "webrtc-video-" + streamId;
+		}
+	}, [streamId]);
+	return {
+		connectionState,
+		error,
+		loading,
+		videoRef
+	};
+};
+//#endregion
+//#region src/WebRTCPlayer/WebRTCPlayer.tsx
+/**
+* WebRTC video player component for streaming from Ant Media Server
+*
+* This component provides a simple interface for playing live WebRTC streams from
+* Ant Media Server. It handles connection management, error recovery, and provides
+* a clean UI with loading states and error messages.
+*
+* Features:
+* - Automatic connection to Ant Media Server
+* - Loading spinner while connecting
+* - Error state display with automatic reconnection
+* - Native HTML5 video controls with volume, fullscreen, and picture-in-picture
+* - Responsive container with aspect ratio preservation
+* - Configurable hostname and ports for different server setups
+*
+* @example
+* ```tsx
+* <WebRTCPlayer
+*   hostname="media.example.com"
+*   streamId="my-stream-id"
+*   onPlay={() => console.log('Stream started')}
+*   onError={(error) => console.error('Stream error:', error)}
+* />
+* ```
+*
+* @example Custom server configuration
+* ```tsx
+* <WebRTCPlayer
+*   streamId="my-stream-id"
+*   hostname="custom-server.com"
+*   wsPort={8080}
+*   wssPort={8443}
+* />
+* ```
+*/
+const WebRTCPlayer = ({ allowFullscreen = true, allowPictureInPicture = true, className, "data-testid": testid = "webrtc-player", debug = false, fetchStreamId, hostname, onContactSupportOnError, onError, onFullscreenToggle, onOpenInNewWindow, onPause, onPipToggle, onPlay, onToggleMute, onVolumeChange, placeholderUrl, showControls = true, streamId, wsPort = DEFAULT_WS_PORT, wssPort = DEFAULT_WSS_PORT }) => {
+	const { connectionState, error, loading, videoRef } = useWebRTCStream({
+		debug,
+		fetchStreamId,
+		hostname,
+		streamId,
+		wsPort,
+		wssPort
+	});
+	const [showContent, setShowContent] = useState(false);
+	const hasUserInteractedRef = React.useRef(false);
+	const controlsList = useMemo(() => [!allowFullscreen && "nofullscreen", "nodownload"].filter(Boolean).join(" ") || void 0, [allowFullscreen]);
+	const handleUserInteraction = () => {
+		hasUserInteractedRef.current = true;
+	};
+	useEffect(() => {
+		if (!loading) {
+			const timer = setTimeout(() => setShowContent(true), 50);
+			return () => clearTimeout(timer);
+		}
+		setShowContent(false);
+	}, [loading]);
+	useEffect(() => {
+		if (error && onError) onError(error);
+	}, [error, onError]);
+	useEffect(() => {
+		if (!onFullscreenToggle || !allowFullscreen) return;
+		const handleFullscreenChange = () => {
+			if (!hasUserInteractedRef.current) return;
+			onFullscreenToggle(Boolean(document.fullscreenElement));
+		};
+		document.addEventListener("fullscreenchange", handleFullscreenChange);
+		return () => {
+			document.removeEventListener("fullscreenchange", handleFullscreenChange);
+		};
+	}, [allowFullscreen, onFullscreenToggle]);
+	useEffect(() => {
+		const video = videoRef.current;
+		if (!onPipToggle || !allowPictureInPicture || !Boolean(video)) return;
+		const handleEnterPip = () => {
+			if (!hasUserInteractedRef.current) return;
+			onPipToggle(true);
+		};
+		const handleLeavePip = () => {
+			if (!hasUserInteractedRef.current) return;
+			onPipToggle(false);
+		};
+		video.addEventListener("enterpictureinpicture", handleEnterPip);
+		video.addEventListener("leavepictureinpicture", handleLeavePip);
+		return () => {
+			video.removeEventListener("enterpictureinpicture", handleEnterPip);
+			video.removeEventListener("leavepictureinpicture", handleLeavePip);
+		};
+	}, [
+		allowPictureInPicture,
+		onPipToggle,
+		videoRef
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative w-full overflow-hidden rounded-container bg-background-inverse", "aspect-video", className),
+		"data-testid": testid,
+		children: [
+			/* @__PURE__ */ jsx("video", {
+				"aria-label": "Live video stream",
+				autoPlay: true,
+				className: cn("h-full w-full object-cover transition-opacity duration-300", showContent && !error ? "opacity-100" : "opacity-0"),
+				controls: showControls,
+				controlsList,
+				disablePictureInPicture: !allowPictureInPicture,
+				muted: true,
+				onMouseEnter: handleUserInteraction,
+				onPause: () => {
+					if (!hasUserInteractedRef.current) return;
+					onPause?.();
+				},
+				onPlay: () => {
+					if (!hasUserInteractedRef.current) return;
+					onPlay?.();
+				},
+				onTouchStart: handleUserInteraction,
+				onVolumeChange: (e) => {
+					if (!hasUserInteractedRef.current) return;
+					const video = e.currentTarget;
+					onVolumeChange?.(video.volume);
+					onToggleMute?.(video.muted);
+				},
+				playsInline: true,
+				poster: placeholderUrl,
+				ref: videoRef,
+				children: /* @__PURE__ */ jsx("track", { kind: "captions" })
+			}),
+			onOpenInNewWindow && !error && !loading && /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Open in new window",
+				className: "absolute right-xs top-xs z-10",
+				"data-testid": `${testid}-open-in-new-window`,
+				icon: ArrowSquareOut,
+				onClick: onOpenInNewWindow,
+				shape: "circle",
+				size: "sm",
+				style: "inverse",
+				variant: "transparent"
+			}),
+			loading && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center",
+				"data-testid": `${testid}-loading`,
+				children: /* @__PURE__ */ jsx(LoadingSpinner, {
+					color: "inverse",
+					size: "md"
+				})
+			}),
+			error && !loading && /* @__PURE__ */ jsx("div", {
+				className: cn("absolute inset-0 flex w-full flex-col items-center justify-center p-sm transition-opacity duration-300", showContent ? "opacity-100" : "opacity-0"),
+				"data-testid": `${testid}-error`,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full flex-col items-center justify-center gap-xs text-center",
+					children: [
+						/* @__PURE__ */ jsx(H5, {
+							color: "inverse",
+							children: "Connection Error"
+						}),
+						/* @__PURE__ */ jsx(BodySecondary, {
+							color: "inverse",
+							children: error
+						}),
+						onContactSupportOnError && /* @__PURE__ */ jsx(Button, {
+							onClick: onContactSupportOnError,
+							size: "sm",
+							style: "inverse",
+							variant: "outlined",
+							children: "Contact Support"
+						}),
+						connectionState === "reconnecting" && /* @__PURE__ */ jsx(Caption, {
+							className: "mt-sm",
+							color: "inverse",
+							children: "Attempting to reconnect..."
+						})
+					]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { DEFAULT_WS_PORT as a, DEFAULT_WSS_PORT as i, useWebRTCStream as n, PING_INTERVAL as o, DEFAULT_PATH as r, RECONNECT_INTERVAL as s, WebRTCPlayer as t };
+
+//# sourceMappingURL=WebRTCPlayer-C-sTtskR.mjs.map