zerorate-voip-sdk 0.1.0

package/dist/voip-sdk.js

@@ -0,0 +1,1157 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ZerorateVoIPSDK = {}));
+})(this, (function (exports) { 'use strict';
+
+    class EventEmitter {
+        constructor() {
+            this.handlers = new Map();
+        }
+        on(event, callback) {
+            if (!this.handlers.has(event))
+                this.handlers.set(event, new Set());
+            this.handlers.get(event).add(callback);
+        }
+        off(event, callback) {
+            const set = this.handlers.get(event);
+            if (!set)
+                return;
+            set.delete(callback);
+            if (set.size === 0)
+                this.handlers.delete(event);
+        }
+        once(event, callback) {
+            const wrapper = (data) => {
+                this.off(event, wrapper);
+                callback(data);
+            };
+            this.on(event, wrapper);
+        }
+        emit(event, data) {
+            const set = this.handlers.get(event);
+            if (!set)
+                return;
+            for (const cb of Array.from(set))
+                cb(data);
+        }
+    }
+
+    class WebSocketManager extends EventEmitter {
+        constructor(wsUrl, authToken, autoReconnect = true, debug = false, userId) {
+            super();
+            this.state = "disconnected";
+            this.queue = [];
+            this.reconnectAttempts = 0;
+            this.url = wsUrl;
+            this.authToken = authToken;
+            this.autoReconnect = autoReconnect;
+            this.debug = debug;
+            this.userId = userId;
+        }
+        getState() {
+            return this.state;
+        }
+        isConnected() {
+            return this.state === "connected";
+        }
+        async connect() {
+            if (this.ws && (this.state === "connecting" || this.state === "connected"))
+                return;
+            this.state = "connecting";
+            try {
+                this.ws = new WebSocket(this.url);
+                this.ws.onopen = () => {
+                    this.state = "connected";
+                    this.emit("connected");
+                    // Send authenticate handshake as JSON
+                    if (this.userId && this.authToken) {
+                        this.send({
+                            type: "authenticate",
+                            userId: this.userId,
+                            token: this.authToken,
+                        });
+                    }
+                    else if (this.authToken) {
+                        this.send({ type: "authenticate", token: this.authToken });
+                    }
+                    this.flushQueue();
+                    this.startHeartbeat();
+                    this.reconnectAttempts = 0;
+                };
+                this.ws.onmessage = (ev) => {
+                    if (typeof ev.data === "string") {
+                        try {
+                            const msg = JSON.parse(ev.data);
+                            this.emit("message", msg);
+                        }
+                        catch (_e) {
+                            this.emit("message", ev.data);
+                        }
+                    }
+                    else {
+                        this.emit("message", ev.data);
+                    }
+                };
+                this.ws.onerror = () => {
+                    this.state = "error";
+                    this.emit("error", { type: "network" });
+                };
+                this.ws.onclose = () => {
+                    this.stopHeartbeat();
+                    const wasConnected = this.state === "connected";
+                    this.state = "disconnected";
+                    this.emit("disconnected");
+                    if (this.autoReconnect) {
+                        this.scheduleReconnect(wasConnected);
+                    }
+                };
+            }
+            catch (_e) {
+                this.state = "error";
+                this.emit("error", { type: "network" });
+            }
+        }
+        disconnect() {
+            this.autoReconnect = false;
+            this.stopHeartbeat();
+            if (this.ws &&
+                (this.state === "connecting" || this.state === "connected")) {
+                try {
+                    this.ws.close();
+                }
+                catch (_e) {
+                }
+            }
+            this.ws = undefined;
+            this.state = "disconnected";
+            this.emit("disconnected");
+        }
+        send(message) {
+            const payload = typeof message === "string" ? message : JSON.stringify(message);
+            if (this.ws && this.state === "connected") {
+                try {
+                    this.ws.send(payload);
+                }
+                catch (_e) {
+                    this.queue.push(payload);
+                }
+            }
+            else {
+                this.queue.push(payload);
+            }
+        }
+        flushQueue() {
+            if (!this.ws || this.state !== "connected")
+                return;
+            for (const m of this.queue.splice(0)) {
+                try {
+                    this.ws.send(m);
+                }
+                catch (_e) {
+                }
+            }
+        }
+        startHeartbeat() {
+            this.stopHeartbeat();
+            this.heartbeatId = window.setInterval(() => {
+                if (!this.ws || this.state !== "connected")
+                    return;
+                try {
+                    this.ws.send(JSON.stringify({ type: "heartbeat" }));
+                    if (this.pongTimeoutId)
+                        window.clearTimeout(this.pongTimeoutId);
+                    this.pongTimeoutId = window.setTimeout(() => {
+                        try {
+                            this.ws?.close();
+                        }
+                        catch (_e) {
+                            void 0;
+                        }
+                    }, 5000);
+                }
+                catch (_e) {
+                }
+            }, 30000);
+        }
+        stopHeartbeat() {
+            if (this.heartbeatId) {
+                window.clearInterval(this.heartbeatId);
+                this.heartbeatId = undefined;
+            }
+            if (this.pongTimeoutId) {
+                window.clearTimeout(this.pongTimeoutId);
+                this.pongTimeoutId = undefined;
+            }
+        }
+        scheduleReconnect(wasConnected) {
+            this.reconnectAttempts += 1;
+            const base = wasConnected ? 1 : 2;
+            const delay = Math.min(30000, Math.pow(2, this.reconnectAttempts - 1) * 1000 * base);
+            this.emit("reconnecting", { attempt: this.reconnectAttempts, delay });
+            window.setTimeout(() => {
+                if (!this.autoReconnect)
+                    return;
+                this.connect();
+            }, delay);
+        }
+    }
+
+    class APIClient extends EventEmitter {
+        constructor(baseUrl, authToken) {
+            super();
+            this.timeoutMs = 10000;
+            this.retries = 3;
+            this.baseUrl = baseUrl.replace(/\/+$/, "");
+            this.authToken = authToken;
+        }
+        setAuthToken(token) {
+            this.authToken = token;
+        }
+        async initiateCall(data) {
+            return this.request("/api/webrtc/v1/calls/initiate", "POST", data);
+        }
+        async acceptCall(callId, userId) {
+            return this.request(`/api/webrtc/v1/calls/${encodeURIComponent(callId)}/accept`, "POST", { userId });
+        }
+        async declineCall(callId, userId) {
+            return this.request(`/api/webrtc/v1/calls/${encodeURIComponent(callId)}/decline`, "POST", { userId });
+        }
+        async endCall(callId, userId) {
+            return this.request(`/api/webrtc/v1/calls/${encodeURIComponent(callId)}/end`, "POST", { userId });
+        }
+        async getCallStatus(callId) {
+            return this.request(`/api/webrtc/v1/calls/${encodeURIComponent(callId)}`, "GET");
+        }
+        async request(path, method, body) {
+            const url = `${this.baseUrl}${path}`;
+            let attempt = 0;
+            let lastError;
+            while (attempt < this.retries) {
+                attempt += 1;
+                const controller = new AbortController();
+                const id = window.setTimeout(() => controller.abort(), this.timeoutMs);
+                try {
+                    const res = await fetch(url, {
+                        method,
+                        headers: {
+                            "Content-Type": "application/json",
+                            ...(this.authToken
+                                ? { Authorization: `Bearer ${this.authToken}` }
+                                : {}),
+                        },
+                        body: body ? JSON.stringify(body) : undefined,
+                        signal: controller.signal,
+                    });
+                    window.clearTimeout(id);
+                    if (!res.ok) {
+                        const errPayload = await this.safeJson(res);
+                        lastError = { status: res.status, data: errPayload };
+                        this.emit("error", {
+                            type: "network",
+                            message: "http_error",
+                            originalError: lastError,
+                        });
+                    }
+                    else {
+                        const data = await this.safeJson(res);
+                        return data;
+                    }
+                }
+                catch (e) {
+                    window.clearTimeout(id);
+                    lastError = e;
+                    this.emit("error", {
+                        type: "network",
+                        message: "fetch_error",
+                        originalError: e,
+                    });
+                }
+            }
+            throw lastError ?? new Error("request_failed");
+        }
+        async safeJson(res) {
+            try {
+                return await res.json();
+            }
+            catch (_e) {
+                return null;
+            }
+        }
+    }
+
+    class LiveKitManager extends EventEmitter {
+        async connectToRoom(livekitUrl, token, options) {
+            const mod = await import('livekit-client');
+            console.log(livekitUrl, token);
+            console.log(mod);
+            const Room = mod.Room;
+            const RoomEvent = mod.RoomEvent;
+            this.room = new Room(options);
+            await this.room.connect(livekitUrl, token);
+            this.room.on(RoomEvent.TrackSubscribed, (_track, _pub, participant) => {
+                this.emit("media:track-added", {
+                    participantId: participant.sid,
+                    trackType: _track.kind,
+                });
+            });
+            this.room.on(RoomEvent.TrackUnsubscribed, (_track, _pub, participant) => {
+                this.emit("media:track-removed", {
+                    participantId: participant.sid,
+                    trackType: _track.kind,
+                });
+            });
+            this.room.on(RoomEvent.Disconnected, () => {
+                this.emit("disconnected");
+            });
+        }
+        disconnectFromRoom() {
+            if (this.room) {
+                this.room.disconnect();
+                this.room = undefined;
+            }
+        }
+        async enableMicrophone() {
+            if (!this.room)
+                return;
+            await this.room.localParticipant.setMicrophoneEnabled(true);
+            this.emit("media:microphone-changed", { enabled: true });
+        }
+        async disableMicrophone() {
+            if (!this.room)
+                return;
+            await this.room.localParticipant.setMicrophoneEnabled(false);
+            this.emit("media:microphone-changed", { enabled: false });
+        }
+        async toggleMicrophone() {
+            if (!this.room)
+                return false;
+            const current = this.room.localParticipant.isMicrophoneEnabled;
+            await this.room.localParticipant.setMicrophoneEnabled(!current);
+            this.emit("media:microphone-changed", { enabled: !current });
+            return !current;
+        }
+        async enableVideo() {
+            if (!this.room)
+                return;
+            await this.room.localParticipant.setCameraEnabled(true);
+            this.emit("media:video-changed", { enabled: true });
+        }
+        async disableVideo() {
+            if (!this.room)
+                return;
+            await this.room.localParticipant.setCameraEnabled(false);
+            this.emit("media:video-changed", { enabled: false });
+        }
+        async toggleVideo() {
+            if (!this.room)
+                return false;
+            const current = this.room.localParticipant.isCameraEnabled;
+            await this.room.localParticipant.setCameraEnabled(!current);
+            this.emit("media:video-changed", { enabled: !current });
+            return !current;
+        }
+        getLocalTracks() {
+            if (!this.room)
+                return [];
+            return Array.from(this.room.localParticipant.tracks.values())
+                .map((p) => p.track)
+                .filter(Boolean);
+        }
+        getRemoteTracks() {
+            if (!this.room)
+                return [];
+            const tracks = [];
+            for (const p of this.room.participants.values()) {
+                for (const pub of p.tracks.values()) {
+                    if (pub.track)
+                        tracks.push(pub.track);
+                }
+            }
+            return tracks;
+        }
+        getRoom() {
+            return this.room;
+        }
+        attachTrack(track, element) {
+            if (!track)
+                return;
+            try {
+                track.attach(element);
+            }
+            catch (_e) {
+            }
+        }
+        detachTrack(track, element) {
+            if (!track)
+                return;
+            try {
+                track.detach(element);
+            }
+            catch (_e) {
+            }
+        }
+    }
+
+    class AudioManager {
+        constructor(ringTones) {
+            this.vol = 1;
+            this.playing = false;
+            if (ringTones?.incoming) {
+                this.incoming = new Audio(ringTones.incoming);
+                this.incoming.loop = true;
+                this.incoming.volume = this.vol;
+            }
+            if (ringTones?.outgoing) {
+                this.outgoing = new Audio(ringTones.outgoing);
+                this.outgoing.loop = true;
+                this.outgoing.volume = this.vol;
+            }
+        }
+        preloadRingtones() {
+            if (this.incoming)
+                this.incoming.load();
+            if (this.outgoing)
+                this.outgoing.load();
+        }
+        async playIncoming() {
+            if (!this.incoming)
+                return;
+            try {
+                await this.incoming.play();
+                this.playing = true;
+            }
+            catch (_e) {
+                this.playing = false;
+            }
+        }
+        async playOutgoing() {
+            if (!this.outgoing)
+                return;
+            try {
+                await this.outgoing.play();
+                this.playing = true;
+            }
+            catch (_e) {
+                this.playing = false;
+            }
+        }
+        stop() {
+            if (this.incoming) {
+                this.incoming.pause();
+                this.incoming.currentTime = 0;
+            }
+            if (this.outgoing) {
+                this.outgoing.pause();
+                this.outgoing.currentTime = 0;
+            }
+            this.playing = false;
+        }
+        setVolume(volume) {
+            this.vol = Math.max(0, Math.min(1, volume));
+            if (this.incoming)
+                this.incoming.volume = this.vol;
+            if (this.outgoing)
+                this.outgoing.volume = this.vol;
+        }
+        isPlaying() {
+            return this.playing;
+        }
+    }
+
+    class CallManager extends EventEmitter {
+        constructor(apiClient, webSocketManager, liveKitManager, audioManager, userId, userName) {
+            super();
+            this.state = "idle";
+            this.currentCall = null;
+            this.api = apiClient;
+            this.ws = webSocketManager;
+            this.livekit = liveKitManager;
+            this.audio = audioManager;
+            this.userId = userId;
+            this.userName = userName;
+            this.ws.on("message", (m) => this.handleSocketMessage(m));
+        }
+        getCallState() {
+            return this.state;
+        }
+        getCurrentCall() {
+            return this.currentCall;
+        }
+        async initiateCall(calleeId, calleeName, isVideo) {
+            if (this.state !== "idle")
+                return;
+            this.setState("calling");
+            await this.audio.playOutgoing();
+            try {
+                const res = await this.api.initiateCall({
+                    callerId: this.userId,
+                    callerName: this.userName,
+                    calleeId,
+                    calleeName,
+                    isVideo,
+                });
+                const call = {
+                    callId: res?.callId ?? "",
+                    roomName: res?.roomName ?? "",
+                    token: res?.token ?? "",
+                    livekitUrl: res?.livekitUrl ?? "",
+                    participantId: this.userId,
+                    participantName: this.userName,
+                    calleeId,
+                    calleeName,
+                    isVideo,
+                    startTime: Date.now(),
+                };
+                console.log(call);
+                this.currentCall = call;
+                this.emit("call_started", {
+                    callId: call.callId,
+                    participants: [this.userId, calleeId],
+                });
+                this.setState("connecting");
+                await this.livekit.connectToRoom(call.livekitUrl, call.token, {
+                    connect: true,
+                });
+                this.audio.stop();
+                this.setState("connected");
+            }
+            catch (e) {
+                this.audio.stop();
+                this.emit("call:error", { error: e });
+                this.setState("idle");
+            }
+        }
+        async acceptCall(callId) {
+            if (this.state !== "ringing")
+                return;
+            try {
+                await this.api.acceptCall(callId, this.userId);
+                this.setState("connecting");
+            }
+            catch (e) {
+                this.emit("call:error", { callId, error: e });
+            }
+        }
+        async declineCall(callId) {
+            if (this.state !== "ringing")
+                return;
+            try {
+                await this.api.declineCall(callId, this.userId);
+                this.audio.stop();
+                this.emit("call_declined", { callId });
+                this.cleanupCall();
+            }
+            catch (e) {
+                this.emit("call:error", { callId, error: e });
+            }
+        }
+        async endCall(callId) {
+            if (!this.currentCall || this.currentCall.callId !== callId)
+                return;
+            if (this.state !== "connected" && this.state !== "connecting")
+                return;
+            try {
+                await this.api.endCall(callId, this.userId);
+            }
+            catch (_e) {
+            }
+            this.finishCall();
+        }
+        async handleIncomingCall(data) {
+            if (this.state !== "idle")
+                return;
+            this.setState("ringing");
+            await this.audio.playIncoming();
+            const call = {
+                callId: data.callId,
+                roomName: data.roomName ?? "",
+                token: data.token ?? "",
+                livekitUrl: data.livekitUrl ?? "",
+                participantId: data.callerId,
+                participantName: data.callerName,
+                isVideo: !!data.isVideo,
+            };
+            this.currentCall = call;
+            this.emit("incoming_call", {
+                callId: call.callId,
+                callerId: call.participantId,
+                callerName: call.participantName,
+                isVideo: call.isVideo,
+            });
+        }
+        async handleAccepted() {
+            if (!this.currentCall)
+                return;
+            this.setState("connecting");
+            try {
+                await this.livekit.connectToRoom(this.currentCall.livekitUrl, this.currentCall.token, { connect: true });
+                this.audio.stop();
+                this.setState("connected");
+                this.emit("call_accepted", { callId: this.currentCall.callId });
+            }
+            catch (e) {
+                this.emit("call:error", { callId: this.currentCall.callId, error: e });
+            }
+        }
+        handleDeclined() {
+            if (!this.currentCall)
+                return;
+            this.audio.stop();
+            this.emit("call_declined", { callId: this.currentCall.callId });
+            this.cleanupCall();
+        }
+        handleMissed() {
+            if (!this.currentCall)
+                return;
+            this.audio.stop();
+            this.emit("call_missed", { callId: this.currentCall.callId });
+            this.cleanupCall();
+        }
+        handleEnded() {
+            if (!this.currentCall)
+                return;
+            this.finishCall();
+        }
+        handleSocketMessage(message) {
+            const type = message?.type;
+            if (type === "incoming_call")
+                this.handleIncomingCall(message.data ?? message);
+            if (type === "call_accepted")
+                this.handleAccepted();
+            if (type === "call_declined")
+                this.handleDeclined();
+            if (type === "call_missed")
+                this.handleMissed();
+            if (type === "call_ended")
+                this.handleEnded();
+        }
+        setState(next) {
+            const prev = this.state;
+            this.state = next;
+            this.emit("state:changed", { oldState: prev, newState: next });
+        }
+        finishCall() {
+            const callId = this.currentCall?.callId ?? "";
+            const start = this.currentCall?.startTime ?? Date.now();
+            const duration = Math.max(0, Math.floor((Date.now() - start) / 1000));
+            this.livekit.disconnectFromRoom();
+            this.emit("call_ended", { callId, duration });
+            this.cleanupCall();
+        }
+        cleanupCall() {
+            this.currentCall = null;
+            this.setState("idle");
+        }
+    }
+
+    function renderIncomingCall(client, data) {
+        const overlay = document.createElement("div");
+        overlay.className = "voip-overlay";
+        const card = document.createElement("div");
+        card.className = "voip-card";
+        const header = document.createElement("div");
+        header.className = "voip-header";
+        const avatar = document.createElement("div");
+        avatar.className = "voip-avatar";
+        const callerName = data?.callerName || "Unknown";
+        avatar.textContent = initials$2(callerName);
+        const meta = document.createElement("div");
+        meta.className = "voip-meta";
+        const title = document.createElement("div");
+        title.className = "voip-title";
+        title.textContent = data?.callerName ? `${data.callerName}` : "Incoming Call";
+        const subtitle = document.createElement("div");
+        subtitle.className = "voip-subtitle";
+        subtitle.textContent = data?.isVideo
+            ? "Incoming video call"
+            : "Incoming audio call";
+        meta.appendChild(title);
+        meta.appendChild(subtitle);
+        header.appendChild(avatar);
+        header.appendChild(meta);
+        const actions = document.createElement("div");
+        actions.className = "voip-actions";
+        const accept = document.createElement("button");
+        accept.className = "voip-btn voip-btn-accept";
+        accept.textContent = "Accept";
+        const decline = document.createElement("button");
+        decline.className = "voip-btn voip-btn-decline";
+        decline.textContent = "Decline";
+        const cleanup = () => {
+            window.removeEventListener("keydown", keyHandler);
+        };
+        const keyHandler = (e) => {
+            if (e.key === "Enter") {
+                if (data?.callId)
+                    client.acceptCall(data.callId);
+                overlay.remove();
+                cleanup();
+            }
+            if (e.key === "Escape") {
+                if (data?.callId)
+                    client.declineCall(data.callId);
+                overlay.remove();
+                cleanup();
+            }
+        };
+        window.addEventListener("keydown", keyHandler);
+        accept.onclick = () => {
+            if (data?.callId)
+                client.acceptCall(data.callId);
+            overlay.remove();
+            cleanup();
+        };
+        decline.onclick = () => {
+            if (data?.callId)
+                client.declineCall(data.callId);
+            overlay.remove();
+            cleanup();
+        };
+        actions.appendChild(accept);
+        actions.appendChild(decline);
+        card.appendChild(header);
+        card.appendChild(actions);
+        overlay.appendChild(card);
+        return overlay;
+    }
+    function initials$2(fullName) {
+        const parts = String(fullName).trim().split(/\s+/);
+        const first = parts[0]?.[0] || "";
+        const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+        return (first + last).toUpperCase() || "U";
+    }
+
+    function renderOutgoingCall(client, data) {
+        const overlay = document.createElement("div");
+        overlay.className = "voip-overlay";
+        const card = document.createElement("div");
+        card.className = "voip-card";
+        const header = document.createElement("div");
+        header.className = "voip-header";
+        const avatar = document.createElement("div");
+        avatar.className = "voip-avatar";
+        const name = data?.calleeName || "Unknown";
+        avatar.textContent = initials$1(name);
+        const meta = document.createElement("div");
+        meta.className = "voip-meta";
+        const title = document.createElement("div");
+        title.className = "voip-title";
+        title.textContent = data?.calleeName
+            ? `Calling ${data.calleeName}`
+            : "Calling";
+        const subtitle = document.createElement("div");
+        subtitle.className = "voip-subtitle";
+        subtitle.textContent = data?.isVideo ? "Video call" : "Audio call";
+        meta.appendChild(title);
+        meta.appendChild(subtitle);
+        header.appendChild(avatar);
+        header.appendChild(meta);
+        const actions = document.createElement("div");
+        actions.className = "voip-actions";
+        const cancel = document.createElement("button");
+        cancel.className = "voip-btn voip-btn-cancel";
+        cancel.textContent = "Cancel";
+        cancel.onclick = () => {
+            if (data?.callId)
+                client.endCall(data.callId);
+            overlay.remove();
+        };
+        actions.appendChild(cancel);
+        card.appendChild(header);
+        card.appendChild(actions);
+        overlay.appendChild(card);
+        return overlay;
+    }
+    function initials$1(fullName) {
+        const parts = String(fullName).trim().split(/\s+/);
+        const first = parts[0]?.[0] || "";
+        const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+        return (first + last).toUpperCase() || "U";
+    }
+
+    function renderActiveCall(client, data) {
+        const overlay = document.createElement("div");
+        overlay.className = "voip-overlay";
+        const card = document.createElement("div");
+        card.className = "voip-card";
+        // allow docking controls inside the card
+        card.style.position = "relative";
+        const header = document.createElement("div");
+        header.className = "voip-header";
+        const avatar = document.createElement("div");
+        avatar.className = "voip-avatar";
+        const displayName = data?.participantName ||
+            data?.calleeName ||
+            data?.callerName ||
+            "Participant";
+        avatar.textContent = initials(displayName);
+        const meta = document.createElement("div");
+        meta.className = "voip-meta";
+        const title = document.createElement("div");
+        title.className = "voip-title";
+        title.textContent = displayName;
+        const subtitle = document.createElement("div");
+        subtitle.className = "voip-subtitle";
+        const timer = document.createElement("span");
+        timer.className = "voip-timer";
+        timer.textContent = "00:00";
+        const start = typeof data?.startTime === "number" ? data.startTime : Date.now();
+        const updateTimer = () => {
+            const secs = Math.max(0, Math.floor((Date.now() - start) / 1000));
+            const m = String(Math.floor(secs / 60)).padStart(2, "0");
+            const s = String(secs % 60).padStart(2, "0");
+            timer.textContent = `${m}:${s}`;
+        };
+        const timerId = window.setInterval(updateTimer, 1000);
+        updateTimer();
+        subtitle.textContent = "In call • ";
+        subtitle.appendChild(timer);
+        meta.appendChild(title);
+        meta.appendChild(subtitle);
+        header.appendChild(avatar);
+        header.appendChild(meta);
+        // Layout container: responsive grid
+        const layout = document.createElement("div");
+        layout.style.display = "grid";
+        layout.style.gap = "16px";
+        const applyCols = () => {
+            layout.style.gridTemplateColumns =
+                window.innerWidth >= 768 ? "1fr 1fr" : "1fr";
+        };
+        applyCols();
+        const onResize = () => applyCols();
+        window.addEventListener("resize", onResize);
+        // Left: remote video container
+        const left = document.createElement("div");
+        const remoteContainer = document.createElement("div");
+        remoteContainer.className = "voip-video-container";
+        const remote = document.createElement("video");
+        remote.autoplay = true;
+        remote.playsInline = true;
+        remoteContainer.appendChild(remote);
+        left.appendChild(remoteContainer);
+        // Right: local preview panel
+        const right = document.createElement("div");
+        right.style.background = "#1f2937"; // gray-800
+        right.style.borderRadius = "12px";
+        right.style.padding = "16px";
+        right.style.height = "260px";
+        right.style.display = "flex";
+        right.style.alignItems = "center";
+        right.style.justifyContent = "center";
+        const local = document.createElement("video");
+        local.autoplay = true;
+        local.muted = true;
+        local.playsInline = true;
+        local.style.maxWidth = "100%";
+        local.style.maxHeight = "100%";
+        right.appendChild(local);
+        layout.appendChild(left);
+        layout.appendChild(right);
+        const controls = document.createElement("div");
+        controls.className = "voip-controls";
+        // dock controls bottom-center similar to the React implementation
+        controls.style.position = "absolute";
+        controls.style.left = "0";
+        controls.style.right = "0";
+        controls.style.bottom = "16px";
+        controls.style.display = "flex";
+        controls.style.justifyContent = "center";
+        controls.style.gap = "12px";
+        let micOn = true;
+        const mute = document.createElement("button");
+        mute.className = "voip-btn voip-btn-primary";
+        const setMicLabel = () => (mute.textContent = micOn ? "Mute" : "Unmute");
+        setMicLabel();
+        mute.onclick = async () => {
+            const next = await client.toggleMicrophone();
+            micOn = next;
+            setMicLabel();
+        };
+        let camOn = false;
+        const vid = document.createElement("button");
+        vid.className = "voip-btn voip-btn-primary";
+        const setCamLabel = () => (vid.textContent = camOn ? "Hide Video" : "Show Video");
+        setCamLabel();
+        vid.onclick = async () => {
+            const next = await client.toggleVideo();
+            camOn = next;
+            setCamLabel();
+        };
+        const end = document.createElement("button");
+        end.className = "voip-btn voip-btn-decline";
+        end.textContent = "End Call";
+        end.onclick = () => {
+            if (data?.callId)
+                client.endCall(data.callId);
+            overlay.remove();
+            window.clearInterval(timerId);
+            window.removeEventListener("resize", onResize);
+        };
+        controls.appendChild(mute);
+        controls.appendChild(vid);
+        controls.appendChild(end);
+        card.appendChild(header);
+        card.appendChild(layout);
+        card.appendChild(controls);
+        overlay.appendChild(card);
+        return overlay;
+    }
+    function initials(fullName) {
+        const parts = String(fullName).trim().split(/\s+/);
+        const first = parts[0]?.[0] || "";
+        const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+        return (first + last).toUpperCase() || "U";
+    }
+
+    class UIManager {
+        constructor(voipClient) {
+            this.client = voipClient;
+        }
+        show() {
+            this.ensureRoot();
+        }
+        hide() {
+            this.root?.remove();
+            this.root = undefined;
+        }
+        setTheme(theme) {
+            this.ensureRoot();
+            if (this.root) {
+                this.root.setAttribute("data-voip-theme", theme);
+            }
+            else {
+                document.documentElement.setAttribute("data-voip-theme", theme);
+            }
+        }
+        showIncomingCall(callData) {
+            this.ensureRoot();
+            const el = renderIncomingCall(this.client, callData);
+            this.root.appendChild(el);
+        }
+        showOutgoingCall(callData) {
+            this.ensureRoot();
+            const el = renderOutgoingCall(this.client, callData);
+            this.root.appendChild(el);
+        }
+        showActiveCall(callData) {
+            this.ensureRoot();
+            const el = renderActiveCall(this.client, callData);
+            this.root.appendChild(el);
+            const videos = el.querySelectorAll("video");
+            const remoteEl = videos[0];
+            const localEl = videos[1];
+            const remoteTracks = this.client.getRemoteTracks();
+            const localTracks = this.client.getLocalTracks();
+            const firstRemote = remoteTracks.find((t) => t?.kind === "video") ?? remoteTracks[0];
+            const firstLocal = localTracks.find((t) => t?.kind === "video") ?? localTracks[0];
+            if (firstRemote && remoteEl)
+                this.client.attachTrack(firstRemote, remoteEl);
+            if (firstLocal && localEl)
+                this.client.attachTrack(firstLocal, localEl);
+        }
+        hideAllModals() {
+            if (!this.root)
+                return;
+            while (this.root.firstChild)
+                this.root.removeChild(this.root.firstChild);
+        }
+        destroy() {
+            this.hide();
+        }
+        ensureRoot() {
+            if (this.root && document.body.contains(this.root))
+                return;
+            this.root = document.createElement("div");
+            document.body.appendChild(this.root);
+        }
+    }
+
+    class ZerorateVoIPClient {
+        constructor(config) {
+            this.emitter = new EventEmitter();
+            this.microphoneEnabled = true;
+            this.videoEnabled = false;
+            this.config = {
+                enableUI: true,
+                autoReconnect: true,
+                debug: false,
+                ...config,
+            };
+            this.ws = new WebSocketManager(this.config.wsUrl, this.config.authToken, !!this.config.autoReconnect, !!this.config.debug, this.config.userId);
+            this.api = new APIClient(this.config.backendUrl, this.config.authToken);
+            this.livekit = new LiveKitManager();
+            this.audio = new AudioManager(this.config.ringTones);
+            this.calls = new CallManager(this.api, this.ws, this.livekit, this.audio, this.config.userId, this.config.userName);
+            if (this.config.enableUI) {
+                this.ui = new UIManager(this);
+            }
+            this.bindEvents();
+            this.audio.preloadRingtones();
+        }
+        bindEvents() {
+            const forward = (e) => (data) => this.emitter.emit(e, data);
+            this.ws.on("connected", forward("connected"));
+            this.ws.on("disconnected", forward("disconnected"));
+            this.ws.on("reconnecting", forward("reconnecting"));
+            this.ws.on("error", forward("error"));
+            this.calls.on("state:changed", (payload) => {
+                forward("state:changed")(payload);
+                if (!this.ui)
+                    return;
+                const state = payload?.newState;
+                if (state === "calling" || state === "connecting") {
+                    this.ui.hideAllModals();
+                    this.ui.showOutgoingCall(this.calls.getCurrentCall() ?? {});
+                }
+                else if (state === "connected") {
+                    this.ui.hideAllModals();
+                    this.ui.showActiveCall(this.calls.getCurrentCall() ?? {});
+                }
+                else if (state === "idle" || state === "ending") {
+                    this.ui.hideAllModals();
+                }
+            });
+            this.calls.on("incoming_call", (data) => {
+                forward("incoming_call")(data);
+                if (this.ui) {
+                    this.ui.hideAllModals();
+                    this.ui.showIncomingCall(data);
+                }
+            });
+            this.calls.on("call_started", (data) => {
+                forward("call_started")(data);
+            });
+            this.calls.on("call_accepted", (data) => {
+                forward("call_accepted")(data);
+            });
+            this.calls.on("call_declined", (data) => {
+                forward("call_declined")(data);
+                if (this.ui)
+                    this.ui.hideAllModals();
+            });
+            this.calls.on("call_missed", (data) => {
+                forward("call_missed")(data);
+                if (this.ui)
+                    this.ui.hideAllModals();
+            });
+            this.calls.on("call_ended", (data) => {
+                forward("call_ended")(data);
+                if (this.ui)
+                    this.ui.hideAllModals();
+            });
+            this.livekit.on("media:microphone-changed", (d) => {
+                this.microphoneEnabled = !!d?.enabled;
+                this.emitter.emit("media:microphone-changed", d);
+            });
+            this.livekit.on("media:video-changed", (d) => {
+                this.videoEnabled = !!d?.enabled;
+                this.emitter.emit("media:video-changed", d);
+            });
+        }
+        async connect() {
+            await this.ws.connect();
+        }
+        disconnect() {
+            this.ws.disconnect();
+        }
+        isConnected() {
+            return this.ws.isConnected();
+        }
+        async initiateCall(userId, userName, options) {
+            await this.calls.initiateCall(userId, userName, !!options?.isVideo);
+        }
+        async acceptCall(callId) {
+            await this.calls.acceptCall(callId);
+        }
+        async declineCall(callId) {
+            await this.calls.declineCall(callId);
+        }
+        async endCall(callId) {
+            await this.calls.endCall(callId);
+        }
+        async toggleMicrophone() {
+            const next = await this.livekit.toggleMicrophone();
+            return next;
+        }
+        async toggleVideo() {
+            const next = await this.livekit.toggleVideo();
+            return next;
+        }
+        async setMicrophoneEnabled(enabled) {
+            if (enabled)
+                await this.livekit.enableMicrophone();
+            else
+                await this.livekit.disableMicrophone();
+        }
+        async setVideoEnabled(enabled) {
+            if (enabled)
+                await this.livekit.enableVideo();
+            else
+                await this.livekit.disableVideo();
+        }
+        getCallState() {
+            return this.calls.getCallState();
+        }
+        getActiveCall() {
+            return this.calls.getCurrentCall();
+        }
+        isInCall() {
+            return (this.getCallState() === "connected" ||
+                this.getCallState() === "connecting" ||
+                this.getCallState() === "ringing" ||
+                this.getCallState() === "calling");
+        }
+        getLocalTracks() {
+            return this.livekit.getLocalTracks();
+        }
+        getRemoteTracks() {
+            return this.livekit.getRemoteTracks();
+        }
+        attachTrack(track, element) {
+            this.livekit.attachTrack(track, element);
+        }
+        detachTrack(track, element) {
+            this.livekit.detachTrack(track, element);
+        }
+        on(event, callback) {
+            this.emitter.on(event, callback);
+        }
+        off(event, callback) {
+            this.emitter.off(event, callback);
+        }
+        once(event, callback) {
+            this.emitter.once(event, callback);
+        }
+        showUI() {
+            if (!this.ui) {
+                this.ui = new UIManager(this);
+            }
+            this.ui.show();
+        }
+        hideUI() {
+            this.ui?.hide();
+        }
+        setTheme(theme) {
+            this.config.theme = theme;
+            this.ui?.setTheme(theme);
+        }
+        destroy() {
+            this.disconnect();
+            this.hideUI();
+        }
+    }
+
+    exports.APIClient = APIClient;
+    exports.AudioManager = AudioManager;
+    exports.CallManager = CallManager;
+    exports.EventEmitter = EventEmitter;
+    exports.LiveKitManager = LiveKitManager;
+    exports.WebSocketManager = WebSocketManager;
+    exports.ZerorateVoIPClient = ZerorateVoIPClient;
+    exports.default = ZerorateVoIPClient;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));