tas-uell-sdk 0.0.1

package/fesm2015/tas-uell-sdk.mjs

@@ -0,0 +1,705 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, Component, Input, ViewChild, NgModule } from '@angular/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { map, catchError, switchMap } from 'rxjs/operators';
+import * as OT from '@opentok/client';
+import interact from 'interactjs';
+
+/**
+ * Injection token for TAS configuration
+ */
+const TAS_CONFIG = new InjectionToken("TAS_CONFIG");
+/**
+ * Injection token for HTTP client
+ */
+const TAS_HTTP_CLIENT = new InjectionToken("TAS_HTTP_CLIENT");
+/**
+ * Injection token for user data provider
+ */
+const TAS_USER_DATA_PROVIDER = new InjectionToken("TAS_USER_DATA_PROVIDER");
+
+var CallState;
+(function (CallState) {
+    CallState["IDLE"] = "IDLE";
+    CallState["CONNECTING"] = "CONNECTING";
+    CallState["CONNECTED"] = "CONNECTED";
+    CallState["DISCONNECTED"] = "DISCONNECTED";
+    CallState["ERROR"] = "ERROR";
+})(CallState || (CallState = {}));
+var ViewMode;
+(function (ViewMode) {
+    ViewMode["FULLSCREEN"] = "FULLSCREEN";
+    ViewMode["PIP"] = "PIP";
+})(ViewMode || (ViewMode = {}));
+class TasService {
+    constructor(config, httpClient) {
+        this.config = config;
+        this.httpClient = httpClient;
+        this.session = null;
+        this.publisher = null;
+        this.subscribers = [];
+        this.callStateSubject = new BehaviorSubject(CallState.IDLE);
+        this.callState$ = this.callStateSubject.asObservable();
+        this.viewModeSubject = new BehaviorSubject(ViewMode.FULLSCREEN);
+        this.viewMode$ = this.viewModeSubject.asObservable();
+        this.isMutedSubject = new BehaviorSubject(false);
+        this.isMuted$ = this.isMutedSubject.asObservable();
+        // Session info for PiP mode restoration
+        this.currentSessionId = null;
+        this.currentToken = null;
+        if (!this.config || !this.httpClient) {
+            console.warn("TasService: Configuration not provided. Make sure to use TasModule.forRoot()");
+        }
+    }
+    // Getters
+    get currentSession() {
+        return this.session;
+    }
+    get currentPublisher() {
+        return this.publisher;
+    }
+    get currentSubscribers() {
+        return this.subscribers;
+    }
+    get sessionId() {
+        return this.currentSessionId;
+    }
+    get token() {
+        return this.currentToken;
+    }
+    get isMuted() {
+        return this.isMutedSubject.getValue();
+    }
+    // View Mode Methods
+    setViewMode(mode) {
+        this.viewModeSubject.next(mode);
+    }
+    enterPipMode() {
+        this.viewModeSubject.next(ViewMode.PIP);
+    }
+    exitPipMode() {
+        this.viewModeSubject.next(ViewMode.FULLSCREEN);
+    }
+    isPipMode() {
+        return this.viewModeSubject.getValue() === ViewMode.PIP;
+    }
+    // Audio Control
+    toggleMute() {
+        if (this.publisher) {
+            const newMuteState = !this.isMutedSubject.getValue();
+            this.publisher.publishAudio(!newMuteState);
+            this.isMutedSubject.next(newMuteState);
+        }
+    }
+    setMute(muted) {
+        if (this.publisher) {
+            this.publisher.publishAudio(!muted);
+            this.isMutedSubject.next(muted);
+        }
+    }
+    // Session Management
+    disconnectSession() {
+        if (this.session) {
+            this.session.disconnect();
+            this.session = null;
+        }
+        this.publisher = null;
+        this.subscribers = [];
+        this.currentSessionId = null;
+        this.currentToken = null;
+        this.isMutedSubject.next(false);
+        this.viewModeSubject.next(ViewMode.FULLSCREEN);
+        this.callStateSubject.next(CallState.DISCONNECTED);
+    }
+    isCallActive() {
+        return this.callStateSubject.getValue() === CallState.CONNECTED;
+    }
+    // API Methods
+    createRoom(payload) {
+        if (!this.config || !this.httpClient) {
+            throw new Error("TasService not configured. Use TasModule.forRoot()");
+        }
+        const url = `${this.config.apiBaseUrl}/v2/room`;
+        return this.httpClient.post(url, payload).pipe(map((response) => response), catchError((error) => {
+            console.error("TAS Service: createRoom failed", error);
+            throw error;
+        }));
+    }
+    generateToken(payload) {
+        if (!this.config || !this.httpClient) {
+            throw new Error("TasService not configured. Use TasModule.forRoot()");
+        }
+        const url = `${this.config.apiBaseUrl}/v2/room/token`;
+        return this.httpClient.post(url, payload).pipe(map((response) => response), catchError((error) => {
+            console.error("TAS Service: generateToken failed", error);
+            throw error;
+        }));
+    }
+    /**
+     * Connects to a TokBox video session
+     */
+    connectSession(sessionId, token, publisherElement, subscriberElement) {
+        this.callStateSubject.next(CallState.CONNECTING);
+        this.currentSessionId = sessionId;
+        this.currentToken = token;
+        return new Promise((resolve, reject) => {
+            if (!this.config) {
+                this.callStateSubject.next(CallState.ERROR);
+                reject(new Error("TasService not configured. Use TasModule.forRoot()"));
+                return;
+            }
+            if (!OT.checkSystemRequirements()) {
+                this.callStateSubject.next(CallState.ERROR);
+                reject(new Error("Browser not compatible with TokBox"));
+                return;
+            }
+            this.session = OT.initSession(this.config.tokBoxApiKey, sessionId);
+            // Handle new streams (remote participants joining)
+            this.session.on("streamCreated", (event) => {
+                var _a;
+                const subscriber = (_a = this.session) === null || _a === void 0 ? void 0 : _a.subscribe(event.stream, subscriberElement, {
+                    insertMode: "append",
+                    width: "100%",
+                    height: "100%",
+                }, (error) => {
+                    if (error) {
+                        console.error("Error subscribing to stream:", error);
+                    }
+                });
+                if (subscriber) {
+                    this.subscribers.push(subscriber);
+                }
+            });
+            // Handle streams ending (remote participants leaving)
+            this.session.on("streamDestroyed", (event) => {
+                this.subscribers = this.subscribers.filter((sub) => { var _a; return ((_a = sub.stream) === null || _a === void 0 ? void 0 : _a.streamId) !== event.stream.streamId; });
+            });
+            // Handle session disconnection
+            this.session.on("sessionDisconnected", () => {
+                this.callStateSubject.next(CallState.DISCONNECTED);
+            });
+            // Connect to session
+            this.session.connect(token, (error) => {
+                if (error) {
+                    console.error("Error connecting to session:", error);
+                    this.callStateSubject.next(CallState.ERROR);
+                    reject(error);
+                    return;
+                }
+                // Initialize publisher (local video)
+                this.publisher = OT.initPublisher(publisherElement, {
+                    insertMode: "append",
+                    width: "100%",
+                    height: "100%",
+                }, (err) => {
+                    var _a;
+                    if (err) {
+                        console.error("Error initializing publisher:", err);
+                        this.callStateSubject.next(CallState.ERROR);
+                        reject(err);
+                        return;
+                    }
+                    // Publish to session
+                    (_a = this.session) === null || _a === void 0 ? void 0 : _a.publish(this.publisher, (pubErr) => {
+                        if (pubErr) {
+                            console.error("Error publishing stream:", pubErr);
+                            this.callStateSubject.next(CallState.ERROR);
+                            reject(pubErr);
+                        }
+                        else {
+                            this.callStateSubject.next(CallState.CONNECTED);
+                            resolve();
+                        }
+                    });
+                });
+            });
+        });
+    }
+    // Video Element Movement Methods
+    movePublisherTo(newContainerId) {
+        if (!this.publisher)
+            return;
+        const publisherElement = this.publisher.element;
+        const newContainer = document.getElementById(newContainerId);
+        if (publisherElement && newContainer) {
+            newContainer.appendChild(publisherElement);
+        }
+    }
+    moveSubscribersTo(newContainerId) {
+        const newContainer = document.getElementById(newContainerId);
+        if (!newContainer)
+            return;
+        this.subscribers.forEach((subscriber) => {
+            const subscriberElement = subscriber.element;
+            if (subscriberElement) {
+                newContainer.appendChild(subscriberElement);
+            }
+        });
+    }
+    /**
+     * Moves the main video (subscriber if available, otherwise publisher) to a container.
+     * Used for PiP mode to show only one video.
+     */
+    moveMainVideoTo(newContainerId) {
+        var _a;
+        const newContainer = document.getElementById(newContainerId);
+        if (!newContainer)
+            return;
+        // Prefer remote video (subscriber) as main
+        if (this.subscribers.length > 0 && this.subscribers[0].element) {
+            newContainer.appendChild(this.subscribers[0].element);
+            return;
+        }
+        // Fall back to local video (publisher)
+        if ((_a = this.publisher) === null || _a === void 0 ? void 0 : _a.element) {
+            newContainer.appendChild(this.publisher.element);
+        }
+    }
+    /**
+     * Moves videos back to fullscreen containers
+     */
+    moveVideosToFullscreen() {
+        this.moveSubscribersTo("subscriber-container");
+        this.movePublisherTo("publisher-container");
+    }
+}
+TasService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasService, deps: [{ token: TAS_CONFIG, optional: true }, { token: TAS_HTTP_CLIENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+TasService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TAS_CONFIG]
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TAS_HTTP_CLIENT]
+                    }] }];
+    } });
+
+class TasVideocallComponent {
+    constructor(activeModal, tasService) {
+        this.activeModal = activeModal;
+        this.tasService = tasService;
+        this.isReturningFromPip = false;
+        this.isPublisherSmall = true;
+        this.callState = CallState.IDLE;
+        this.isMuted = false;
+        this.subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.setupSubscriptions();
+        this.initializeCall();
+    }
+    ngAfterViewInit() {
+        this.initInteract();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        if (!this.tasService.isPipMode()) {
+            this.tasService.disconnectSession();
+        }
+        interact(".publisher-view").unset();
+    }
+    // Public Methods
+    hangUp() {
+        this.tasService.disconnectSession();
+    }
+    toggleMute() {
+        this.tasService.toggleMute();
+    }
+    minimize() {
+        this.tasService.moveMainVideoTo("pip-main-video");
+        setTimeout(() => this.tasService.enterPipMode(), 50);
+    }
+    toggleSwap() {
+        this.isPublisherSmall = !this.isPublisherSmall;
+        this.resetVideoPositions();
+        setTimeout(() => this.initInteract());
+    }
+    onDoubleClick() {
+        this.toggleSwap();
+    }
+    // Private Methods
+    setupSubscriptions() {
+        this.subscriptions.add(this.tasService.callState$.subscribe((state) => {
+            this.callState = state;
+            if (state === CallState.DISCONNECTED) {
+                this.activeModal.close("hangup");
+            }
+        }));
+        this.subscriptions.add(this.tasService.viewMode$.subscribe((mode) => {
+            if (mode === ViewMode.PIP) {
+                this.activeModal.close("pip");
+            }
+        }));
+        this.subscriptions.add(this.tasService.isMuted$.subscribe((muted) => {
+            this.isMuted = muted;
+        }));
+    }
+    initializeCall() {
+        if (this.isReturningFromPip) {
+            setTimeout(() => this.tasService.moveVideosToFullscreen(), 100);
+        }
+        else if (this.sessionId && this.token) {
+            this.tasService
+                .connectSession(this.sessionId, this.token, "publisher-container", "subscriber-container")
+                .catch((err) => {
+                console.error("Error connecting to video call:", err);
+            });
+        }
+    }
+    resetVideoPositions() {
+        var _a, _b;
+        const publisherEl = (_a = this.publisherContainer) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        const subscriberEl = (_b = this.subscriberContainer) === null || _b === void 0 ? void 0 : _b.nativeElement;
+        if (publisherEl) {
+            publisherEl.removeAttribute("style");
+            publisherEl.removeAttribute("data-x");
+            publisherEl.removeAttribute("data-y");
+        }
+        if (subscriberEl) {
+            subscriberEl.removeAttribute("style");
+            subscriberEl.removeAttribute("data-x");
+            subscriberEl.removeAttribute("data-y");
+        }
+    }
+    initInteract() {
+        interact(".publisher-view").unset();
+        interact(".publisher-view")
+            .draggable({
+            inertia: true,
+            modifiers: [
+                interact.modifiers.restrictRect({
+                    restriction: "parent",
+                    endOnly: true,
+                }),
+            ],
+            autoScroll: true,
+            listeners: {
+                move: (event) => {
+                    const target = event.target;
+                    const x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
+                    const y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
+                    target.style.transform = `translate(${x}px, ${y}px)`;
+                    target.setAttribute("data-x", String(x));
+                    target.setAttribute("data-y", String(y));
+                },
+            },
+        })
+            .resizable({
+            edges: { left: false, right: true, bottom: true, top: false },
+            listeners: {
+                move: (event) => {
+                    const target = event.target;
+                    let x = parseFloat(target.getAttribute("data-x")) || 0;
+                    let y = parseFloat(target.getAttribute("data-y")) || 0;
+                    target.style.width = `${event.rect.width}px`;
+                    target.style.height = `${event.rect.height}px`;
+                    x += event.deltaRect.left;
+                    y += event.deltaRect.top;
+                    target.style.transform = `translate(${x}px, ${y}px)`;
+                    target.setAttribute("data-x", String(x));
+                    target.setAttribute("data-y", String(y));
+                },
+            },
+            modifiers: [
+                interact.modifiers.restrictEdges({ outer: "parent" }),
+                interact.modifiers.restrictSize({ min: { width: 150, height: 100 } }),
+                interact.modifiers.aspectRatio({ ratio: "preserve" }),
+            ],
+            inertia: true,
+        });
+    }
+}
+TasVideocallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasVideocallComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }], target: i0.ɵɵFactoryTarget.Component });
+TasVideocallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TasVideocallComponent, selector: "tas-videocall", inputs: { sessionId: "sessionId", token: "token", isReturningFromPip: "isReturningFromPip" }, viewQueries: [{ propertyName: "publisherContainer", first: true, predicate: ["publisherContainer"], descendants: true }, { propertyName: "subscriberContainer", first: true, predicate: ["subscriberContainer"], descendants: true }], ngImport: i0, template: "<div class=\"tas-videocall-container\">\n  <div\n    id=\"subscriber-container\"\n    [class.subscriber-view]=\"isPublisherSmall\"\n    [class.publisher-view]=\"!isPublisherSmall\"\n    #subscriberContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <div\n    id=\"publisher-container\"\n    [class.publisher-view]=\"isPublisherSmall\"\n    [class.subscriber-view]=\"!isPublisherSmall\"\n    #publisherContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <div class=\"controls-container\">\n    <button class=\"btn swap-btn\" (click)=\"toggleSwap()\" title=\"Cambiar vista\">\n      <i class=\"fa fa-refresh\"></i>\n    </button>\n    <button\n      class=\"btn pip-btn\"\n      (click)=\"minimize()\"\n      title=\"Minimizar (Picture in Picture)\"\n    >\n      <i class=\"fa fa-compress\"></i>\n    </button>\n    <button\n      class=\"btn mute-btn\"\n      [class.muted]=\"isMuted\"\n      (click)=\"toggleMute()\"\n      [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n    >\n      <i\n        class=\"fa\"\n        [class.fa-microphone]=\"!isMuted\"\n        [class.fa-microphone-slash]=\"isMuted\"\n      ></i>\n    </button>\n    <button class=\"btn hangup-btn\" (click)=\"hangUp()\" title=\"Colgar\">\n      <i class=\"fa fa-phone\" style=\"transform: rotate(135deg)\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".tas-videocall-container{position:relative;width:100vw;height:100vh;background-color:#000;overflow:hidden}.tas-videocall-container ::ng-deep .OT_edge-bar-item,.tas-videocall-container ::ng-deep .OT_mute,.tas-videocall-container ::ng-deep .OT_audio-level-meter,.tas-videocall-container ::ng-deep .OT_bar,.tas-videocall-container ::ng-deep .OT_name{display:none!important}.tas-videocall-container .subscriber-view{width:100%;height:100%;z-index:1}.tas-videocall-container .publisher-view{position:absolute;top:20px;right:20px;width:200px;height:150px;z-index:2;border:2px solid #fff;border-radius:8px;background-color:#333}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:20px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#00000080;padding:15px 25px;border-radius:50px;backdrop-filter:blur(5px)}.tas-videocall-container .controls-container .hangup-btn,.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn,.tas-videocall-container .controls-container .mute-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:none;box-shadow:0 4px 6px #0000004d;transition:all .2s ease}.tas-videocall-container .controls-container .hangup-btn i,.tas-videocall-container .controls-container .swap-btn i,.tas-videocall-container .controls-container .pip-btn i,.tas-videocall-container .controls-container .mute-btn i{color:#fff}.tas-videocall-container .controls-container .hangup-btn{background:#dc3545}.tas-videocall-container .controls-container .hangup-btn:hover{background:#c82333;transform:scale(1.05)}.tas-videocall-container .controls-container .swap-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .swap-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .pip-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .pip-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .mute-btn.muted:hover{background:#e67e22}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasVideocallComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tas-videocall", template: "<div class=\"tas-videocall-container\">\n  <div\n    id=\"subscriber-container\"\n    [class.subscriber-view]=\"isPublisherSmall\"\n    [class.publisher-view]=\"!isPublisherSmall\"\n    #subscriberContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <div\n    id=\"publisher-container\"\n    [class.publisher-view]=\"isPublisherSmall\"\n    [class.subscriber-view]=\"!isPublisherSmall\"\n    #publisherContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <div class=\"controls-container\">\n    <button class=\"btn swap-btn\" (click)=\"toggleSwap()\" title=\"Cambiar vista\">\n      <i class=\"fa fa-refresh\"></i>\n    </button>\n    <button\n      class=\"btn pip-btn\"\n      (click)=\"minimize()\"\n      title=\"Minimizar (Picture in Picture)\"\n    >\n      <i class=\"fa fa-compress\"></i>\n    </button>\n    <button\n      class=\"btn mute-btn\"\n      [class.muted]=\"isMuted\"\n      (click)=\"toggleMute()\"\n      [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n    >\n      <i\n        class=\"fa\"\n        [class.fa-microphone]=\"!isMuted\"\n        [class.fa-microphone-slash]=\"isMuted\"\n      ></i>\n    </button>\n    <button class=\"btn hangup-btn\" (click)=\"hangUp()\" title=\"Colgar\">\n      <i class=\"fa fa-phone\" style=\"transform: rotate(135deg)\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".tas-videocall-container{position:relative;width:100vw;height:100vh;background-color:#000;overflow:hidden}.tas-videocall-container ::ng-deep .OT_edge-bar-item,.tas-videocall-container ::ng-deep .OT_mute,.tas-videocall-container ::ng-deep .OT_audio-level-meter,.tas-videocall-container ::ng-deep .OT_bar,.tas-videocall-container ::ng-deep .OT_name{display:none!important}.tas-videocall-container .subscriber-view{width:100%;height:100%;z-index:1}.tas-videocall-container .publisher-view{position:absolute;top:20px;right:20px;width:200px;height:150px;z-index:2;border:2px solid #fff;border-radius:8px;background-color:#333}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:20px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#00000080;padding:15px 25px;border-radius:50px;backdrop-filter:blur(5px)}.tas-videocall-container .controls-container .hangup-btn,.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn,.tas-videocall-container .controls-container .mute-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:none;box-shadow:0 4px 6px #0000004d;transition:all .2s ease}.tas-videocall-container .controls-container .hangup-btn i,.tas-videocall-container .controls-container .swap-btn i,.tas-videocall-container .controls-container .pip-btn i,.tas-videocall-container .controls-container .mute-btn i{color:#fff}.tas-videocall-container .controls-container .hangup-btn{background:#dc3545}.tas-videocall-container .controls-container .hangup-btn:hover{background:#c82333;transform:scale(1.05)}.tas-videocall-container .controls-container .swap-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .swap-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .pip-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .pip-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .mute-btn.muted:hover{background:#e67e22}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }]; }, propDecorators: { sessionId: [{
+                type: Input
+            }], token: [{
+                type: Input
+            }], isReturningFromPip: [{
+                type: Input
+            }], publisherContainer: [{
+                type: ViewChild,
+                args: ["publisherContainer"]
+            }], subscriberContainer: [{
+                type: ViewChild,
+                args: ["subscriberContainer"]
+            }] } });
+
+class TasButtonComponent {
+    constructor(tasService, modalService, userDataProvider) {
+        this.tasService = tasService;
+        this.modalService = modalService;
+        this.userDataProvider = userDataProvider;
+        this.isLoading = false;
+        this.userData = null;
+        this.tenantId = null;
+        this.subscriptions = new Subscription();
+        this.currentModalRef = null;
+    }
+    ngOnInit() {
+        this.loadUserData();
+        this.setupViewModeSubscription();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    onClick() {
+        if (!this.userData || !this.tenantId) {
+            console.error("User data or tenant ID not available");
+            return;
+        }
+        this.isLoading = true;
+        this.subscriptions.add(this.tasService
+            .createRoom({
+            tenant: this.tenantId,
+            userId: this.userData.id.toString(),
+            product: "Uell",
+            record: true,
+            roomType: "TAS",
+            type: "SPONTANEOUS",
+        })
+            .pipe(switchMap((response) => {
+            const sessionId = response.content.sessionId;
+            return this.tasService
+                .generateToken({
+                sessionId: sessionId,
+                name: this.userData.name,
+                lastname: this.userData.surname,
+            })
+                .pipe(switchMap((tokenResponse) => {
+                return [
+                    {
+                        sessionId,
+                        token: tokenResponse.content.token,
+                    },
+                ];
+            }));
+        }))
+            .subscribe({
+            next: ({ sessionId, token }) => {
+                this.isLoading = false;
+                this.openVideoCallModal(sessionId, token);
+            },
+            error: (err) => {
+                console.error("Error starting video call:", err);
+                this.isLoading = false;
+            },
+        }));
+    }
+    // Private Methods
+    loadUserData() {
+        if (!this.userDataProvider) {
+            console.warn("TasButtonComponent: UserDataProvider not configured");
+            return;
+        }
+        this.userData = this.userDataProvider.getUserData();
+        this.tenantId = this.userDataProvider.getTenantId();
+    }
+    setupViewModeSubscription() {
+        this.subscriptions.add(this.tasService.viewMode$.subscribe((mode) => {
+            if (mode === ViewMode.FULLSCREEN &&
+                this.tasService.isCallActive() &&
+                !this.currentModalRef) {
+                const sessionId = this.tasService.sessionId;
+                const token = this.tasService.token;
+                if (sessionId && token) {
+                    this.openVideoCallModal(sessionId, token, true);
+                }
+            }
+        }));
+    }
+    openVideoCallModal(sessionId, token, isReturningFromPip = false) {
+        this.currentModalRef = this.modalService.open(TasVideocallComponent, {
+            size: "xl",
+            windowClass: "tas-video-modal",
+            backdrop: "static",
+            keyboard: false,
+        });
+        this.currentModalRef.componentInstance.sessionId = sessionId;
+        this.currentModalRef.componentInstance.token = token;
+        this.currentModalRef.componentInstance.isReturningFromPip =
+            isReturningFromPip;
+        this.currentModalRef.result.then(() => {
+            this.currentModalRef = null;
+        }, () => {
+            this.currentModalRef = null;
+        });
+    }
+}
+TasButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasButtonComponent, deps: [{ token: TasService }, { token: i1.NgbModal }, { token: TAS_USER_DATA_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TasButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TasButtonComponent, selector: "tas-btn", ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"btn btn-primary boton\"\n  (click)=\"onClick()\"\n  [disabled]=\"isLoading\"\n>\n  <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n  <span *ngIf=\"!isLoading\"> Iniciar TAS</span>\n  <span *ngIf=\"isLoading\"> Processing...</span>\n</button>\n", styles: [":host{display:inline-block}.boton{background-color:#ee316b!important;color:#fff!important;margin-right:24px}.boton:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.boton i{margin-right:5px}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tas-btn", template: "<button\n  type=\"button\"\n  class=\"btn btn-primary boton\"\n  (click)=\"onClick()\"\n  [disabled]=\"isLoading\"\n>\n  <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n  <span *ngIf=\"!isLoading\"> Iniciar TAS</span>\n  <span *ngIf=\"isLoading\"> Processing...</span>\n</button>\n", styles: [":host{display:inline-block}.boton{background-color:#ee316b!important;color:#fff!important;margin-right:24px}.boton:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.boton i{margin-right:5px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: TasService }, { type: i1.NgbModal }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TAS_USER_DATA_PROVIDER]
+                    }] }];
+    } });
+
+class TasFloatingCallComponent {
+    constructor(tasService) {
+        this.tasService = tasService;
+        this.isVisible = false;
+        this.isMuted = false;
+        this.subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.setupSubscriptions();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        interact(".tas-floating-container").unset();
+    }
+    // Public Methods
+    onExpand() {
+        this.tasService.exitPipMode();
+    }
+    onHangUp() {
+        this.tasService.disconnectSession();
+    }
+    toggleMute() {
+        this.tasService.toggleMute();
+    }
+    // Private Methods
+    setupSubscriptions() {
+        this.subscriptions.add(this.tasService.callState$.subscribe((state) => {
+            if (state === CallState.DISCONNECTED) {
+                this.isVisible = false;
+            }
+        }));
+        this.subscriptions.add(this.tasService.viewMode$.subscribe((mode) => {
+            this.isVisible =
+                mode === ViewMode.PIP && this.tasService.isCallActive();
+            if (this.isVisible) {
+                setTimeout(() => this.initInteract(), 100);
+            }
+        }));
+        this.subscriptions.add(this.tasService.isMuted$.subscribe((muted) => {
+            this.isMuted = muted;
+        }));
+    }
+    initInteract() {
+        interact(".tas-floating-container").unset();
+        interact(".tas-floating-container").draggable({
+            inertia: true,
+            modifiers: [
+                interact.modifiers.restrictRect({
+                    restriction: "body",
+                    endOnly: true,
+                }),
+            ],
+            autoScroll: false,
+            listeners: {
+                move: (event) => {
+                    const target = event.target;
+                    const x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
+                    const y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
+                    target.style.transform = `translate(${x}px, ${y}px)`;
+                    target.setAttribute("data-x", String(x));
+                    target.setAttribute("data-y", String(y));
+                },
+            },
+        });
+    }
+}
+TasFloatingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasFloatingCallComponent, deps: [{ token: TasService }], target: i0.ɵɵFactoryTarget.Component });
+TasFloatingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TasFloatingCallComponent, selector: "tas-floating-call", ngImport: i0, template: "<div class=\"tas-floating-container\" [class.visible]=\"isVisible\">\n  <div class=\"floating-content\">\n    <div id=\"pip-main-video\" class=\"pip-main-video\"></div>\n\n    <div class=\"floating-controls\">\n      <button\n        class=\"action-btn expand-btn\"\n        (click)=\"onExpand()\"\n        title=\"Expandir a pantalla completa\"\n      >\n        <i class=\"fa fa-expand\"></i>\n      </button>\n      <button\n        class=\"action-btn mute-btn\"\n        [class.muted]=\"isMuted\"\n        (click)=\"toggleMute()\"\n        [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n      >\n        <i\n          class=\"fa\"\n          [class.fa-microphone]=\"!isMuted\"\n          [class.fa-microphone-slash]=\"isMuted\"\n        ></i>\n      </button>\n      <button\n        class=\"action-btn hangup-btn\"\n        (click)=\"onHangUp()\"\n        title=\"Colgar llamada\"\n      >\n        <i class=\"fa fa-phone\" style=\"transform: rotate(135deg)\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".tas-floating-container{position:fixed;bottom:20px;right:20px;width:280px;height:180px;background:#000;border-radius:12px;box-shadow:0 8px 32px #00000080;z-index:9999;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;transition:opacity .3s ease,visibility .3s ease;opacity:0;visibility:hidden;pointer-events:none}.tas-floating-container.visible{opacity:1;visibility:visible;pointer-events:auto}.floating-content{position:relative;width:100%;height:100%;overflow:hidden}.pip-main-video{position:absolute;top:0;left:0;width:100%;height:100%;background:#000}.pip-main-video ::ng-deep video{width:100%;height:100%;object-fit:cover}.pip-main-video ::ng-deep .OT_subscriber,.pip-main-video ::ng-deep .OT_publisher{width:100%!important;height:100%!important}.pip-main-video ::ng-deep .OT_edge-bar-item,.pip-main-video ::ng-deep .OT_mute,.pip-main-video ::ng-deep .OT_audio-level-meter,.pip-main-video ::ng-deep .OT_bar,.pip-main-video ::ng-deep .OT_name{display:none!important}.floating-controls{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:12px;padding:6px 14px;background:rgba(0,0,0,.7);border-radius:24px;backdrop-filter:blur(8px)}.action-btn{width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s ease}.action-btn.expand-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.expand-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn.muted{background:#f39c12;color:#fff}.action-btn.mute-btn.muted:hover{background:#e67e22}.action-btn.hangup-btn{background:#dc3545;color:#fff}.action-btn.hangup-btn:hover{background:#c82333;transform:scale(1.1)}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasFloatingCallComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tas-floating-call", template: "<div class=\"tas-floating-container\" [class.visible]=\"isVisible\">\n  <div class=\"floating-content\">\n    <div id=\"pip-main-video\" class=\"pip-main-video\"></div>\n\n    <div class=\"floating-controls\">\n      <button\n        class=\"action-btn expand-btn\"\n        (click)=\"onExpand()\"\n        title=\"Expandir a pantalla completa\"\n      >\n        <i class=\"fa fa-expand\"></i>\n      </button>\n      <button\n        class=\"action-btn mute-btn\"\n        [class.muted]=\"isMuted\"\n        (click)=\"toggleMute()\"\n        [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n      >\n        <i\n          class=\"fa\"\n          [class.fa-microphone]=\"!isMuted\"\n          [class.fa-microphone-slash]=\"isMuted\"\n        ></i>\n      </button>\n      <button\n        class=\"action-btn hangup-btn\"\n        (click)=\"onHangUp()\"\n        title=\"Colgar llamada\"\n      >\n        <i class=\"fa fa-phone\" style=\"transform: rotate(135deg)\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".tas-floating-container{position:fixed;bottom:20px;right:20px;width:280px;height:180px;background:#000;border-radius:12px;box-shadow:0 8px 32px #00000080;z-index:9999;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;transition:opacity .3s ease,visibility .3s ease;opacity:0;visibility:hidden;pointer-events:none}.tas-floating-container.visible{opacity:1;visibility:visible;pointer-events:auto}.floating-content{position:relative;width:100%;height:100%;overflow:hidden}.pip-main-video{position:absolute;top:0;left:0;width:100%;height:100%;background:#000}.pip-main-video ::ng-deep video{width:100%;height:100%;object-fit:cover}.pip-main-video ::ng-deep .OT_subscriber,.pip-main-video ::ng-deep .OT_publisher{width:100%!important;height:100%!important}.pip-main-video ::ng-deep .OT_edge-bar-item,.pip-main-video ::ng-deep .OT_mute,.pip-main-video ::ng-deep .OT_audio-level-meter,.pip-main-video ::ng-deep .OT_bar,.pip-main-video ::ng-deep .OT_name{display:none!important}.floating-controls{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:12px;padding:6px 14px;background:rgba(0,0,0,.7);border-radius:24px;backdrop-filter:blur(8px)}.action-btn{width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s ease}.action-btn.expand-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.expand-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn.muted{background:#f39c12;color:#fff}.action-btn.mute-btn.muted:hover{background:#e67e22}.action-btn.hangup-btn{background:#dc3545;color:#fff}.action-btn.hangup-btn:hover{background:#c82333;transform:scale(1.1)}\n"] }]
+        }], ctorParameters: function () { return [{ type: TasService }]; } });
+
+class TasModule {
+    /**
+     * Use this method in your app module to configure the TAS SDK
+     *
+     * @example
+     * ```typescript
+     * TasModule.forRoot({
+     *   config: {
+     *     tokBoxApiKey: environment.tokBox,
+     *     apiBaseUrl: environment.apiUrl
+     *   },
+     *   httpClient: MyHttpClientAdapter,
+     *   userDataProvider: MyUserDataProvider
+     * })
+     * ```
+     */
+    static forRoot(moduleConfig) {
+        const providers = [
+            {
+                provide: TAS_CONFIG,
+                useValue: moduleConfig.config,
+            },
+        ];
+        if (moduleConfig.httpClient) {
+            providers.push({
+                provide: TAS_HTTP_CLIENT,
+                useClass: moduleConfig.httpClient,
+            });
+        }
+        if (moduleConfig.userDataProvider) {
+            providers.push({
+                provide: TAS_USER_DATA_PROVIDER,
+                useClass: moduleConfig.userDataProvider,
+            });
+        }
+        return {
+            ngModule: TasModule,
+            providers,
+        };
+    }
+}
+TasModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TasModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasModule, declarations: [TasButtonComponent,
+        TasVideocallComponent,
+        TasFloatingCallComponent], imports: [CommonModule, NgbModalModule], exports: [TasButtonComponent,
+        TasVideocallComponent,
+        TasFloatingCallComponent] });
+TasModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasModule, imports: [[CommonModule, NgbModalModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TasButtonComponent,
+                        TasVideocallComponent,
+                        TasFloatingCallComponent,
+                    ],
+                    imports: [CommonModule, NgbModalModule],
+                    exports: [
+                        TasButtonComponent,
+                        TasVideocallComponent,
+                        TasFloatingCallComponent,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of tas-uell-sdk
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CallState, TAS_CONFIG, TAS_HTTP_CLIENT, TAS_USER_DATA_PROVIDER, TasButtonComponent, TasFloatingCallComponent, TasModule, TasService, TasVideocallComponent, ViewMode };
+//# sourceMappingURL=tas-uell-sdk.mjs.map