tas-uell-sdk 0.0.5 → 0.1.0

package/lib/services/tas.service.d.ts

@@ -1,9 +1,9 @@
-import { Observable } from "rxjs";
-import * as OT from "@opentok/client";
-import { CreateRoomRequest, CreateRoomResponse, GenerateTokenRequest, GenerateTokenResponse, CallState, ViewMode } from "../interfaces/tas.interfaces";
-import { TasConfig, TasHttpClient } from "../config/tas.config";
+import { Observable } from 'rxjs';
+import * as OT from '@opentok/client';
+import { GenerateTokenResponse, StartSessionRequest, FinishSessionResponse, ProxyVideoStatusRequest, ProxyVideoStatusResponse, ProxyVideoFinishRequest, ProxyVideoUserModifyRequest, UserCallAction, RoomUserStatus, TasBusinessRole, CallState, ViewMode, WaitingRoomUser, TasAppointment, GetAppointmentsRequest } from '../interfaces/tas.interfaces';
+import { TasConfig, TasHttpClient } from '../config/tas.config';
 import * as i0 from "@angular/core";
-export { CallState, ViewMode };
+export { CallState, ViewMode, TasBusinessRole, UserCallAction, RoomUserStatus };
 export declare class TasService {
     private httpClient;
     private config;
@@ -18,12 +18,55 @@ export declare class TasService {
     isMuted$: Observable<boolean>;
     private currentSessionId;
     private currentToken;
+    private readonly STORAGE_KEY;
+    private readonly DISCONNECTED_FLAG_KEY;
+    private isFinishingSession;
+    private proxyVideoSessionId;
+    private proxyVideoToken;
+    private currentBusinessRole;
+    private waitingRoomUsersSubject;
+    waitingRoomUsers$: Observable<WaitingRoomUser[]>;
+    private ownerHasJoinedSubject;
+    ownerHasJoined$: Observable<boolean>;
+    private ownerHasLeftSubject;
+    ownerHasLeft$: Observable<boolean>;
+    private joinableSubject;
+    joinable$: Observable<boolean>;
+    private activateGeoSubject;
+    activateGeo$: Observable<boolean>;
+    private geoRequestActiveSubject;
+    geoRequestActive$: Observable<boolean>;
+    private allGeoGrantedSubject;
+    allGeoGranted$: Observable<boolean>;
+    private statusPollingInterval;
+    private readonly DEFAULT_POLL_INTERVAL_MS;
+    private wasOwnerPresent;
+    private currentAppointmentId;
+    private currentVideoCallId;
+    private currentTenant;
     constructor(httpClient: TasHttpClient, config: TasConfig);
+    /**
+     * Start automatic status polling for the current session.
+     * Status is polled every intervalMs (default 30s).
+     */
+    startStatusPolling(params: ProxyVideoStatusRequest, intervalMs?: number): void;
+    /**
+     * Stop automatic status polling.
+     */
+    stopStatusPolling(): void;
+    /**
+     * Reset polling state (waiting room, owner status, etc)
+     * Call this when completely exiting the flow
+     */
+    resetPollingState(): void;
     get currentSession(): OT.Session | null;
     get currentPublisher(): OT.Publisher | null;
     get currentSubscribers(): OT.Subscriber[];
     get sessionId(): string | null;
     get token(): string | null;
+    get proxySessionId(): string | null;
+    get proxyToken(): string | null;
+    get businessRole(): TasBusinessRole;
     get isMuted(): boolean;
     setViewMode(mode: ViewMode): void;
     enterPipMode(): void;
@@ -31,14 +74,60 @@ export declare class TasService {
     isPipMode(): boolean;
     toggleMute(): void;
     setMute(muted: boolean): void;
-    disconnectSession(): void;
+    disconnectSession(clearStorage?: boolean): void;
     isCallActive(): boolean;
-    createRoom(payload: CreateRoomRequest): Observable<CreateRoomResponse>;
-    generateToken(payload: GenerateTokenRequest): Observable<GenerateTokenResponse>;
+    private saveSessionState;
+    private clearSessionState;
+    canRestoreSession(): boolean;
+    restoreSession(containerId: string): void;
+    /**
+     * PROXY circuit token: /v2/proxy/video/start
+     */
+    startProxyVideoSession(payload: StartSessionRequest): Observable<GenerateTokenResponse>;
+    /**
+     * PROXY circuit status: /v2/proxy/video/status
+     */
+    getProxyVideoStatus(payload: ProxyVideoStatusRequest): Observable<ProxyVideoStatusResponse>;
+    /**
+     * PROXY circuit user modification: /v2/proxy/video/user/modify
+     */
+    modifyProxyVideoUser(payload: ProxyVideoUserModifyRequest): Observable<any>;
+    finishProxyVideoSession(payload: ProxyVideoFinishRequest): Observable<FinishSessionResponse>;
+    /**
+     * Get user appointments within a date range.
+     * @param params Date range for querying appointments
+     * @returns Observable of appointment array
+     */
+    getAppointments(params: GetAppointmentsRequest): Observable<TasAppointment[]>;
+    /**
+     * Start automatic status polling for the current session.
+     * Status is polled every STATUS_POLL_INTERVAL_MS milliseconds.
+     */
+    /**
+     * Stop automatic status polling.
+     */
+    /**
+     * Fetch status and process the response.
+     */
+    private fetchAndProcessStatus;
+    /**
+     * Process status response to update waiting room users and owner join status.
+     */
+    private processStatusResponse;
+    /**
+     * Check if at least one OWNER has joined the call.
+     */
+    private checkIfOwnerJoined;
+    /**
+     * Admit a user from the waiting room by changing their status.
+     */
+    admitUserFromWaitingRoom(userId: number, videoCallId: number): Observable<any>;
+    get appointmentId(): number | null;
+    get videoCallId(): number | null;
     /**
      * Connects to a TokBox video session
      */
-    connectSession(sessionId: string, token: string, publisherElement: string, subscriberElement: string): Promise<void>;
+    connectSession(sessionId: string, token: string, publisherElement: string, subscriberElement: string, businessRole?: TasBusinessRole): Promise<void>;
     movePublisherTo(newContainerId: string): void;
     moveSubscribersTo(newContainerId: string): void;
     /**

package/lib/tas-uell-sdk.module.d.ts

@@ -5,8 +5,11 @@ import * as i1 from "./components/tas-btn/tas-btn.component";
 import * as i2 from "./components/tas-videocall/tas-videocall.component";
 import * as i3 from "./components/tas-floating-call/tas-floating-call.component";
 import * as i4 from "./components/tas-waiting-room/tas-waiting-room.component";
-import * as i5 from "@angular/common";
-import * as i6 from "@angular/forms";
+import * as i5 from "./components/tas-avatar/tas-avatar.component";
+import * as i6 from "./components/tas-incoming-appointment/tas-incoming-appointment.component";
+import * as i7 from "@angular/common";
+import * as i8 from "@angular/forms";
+import * as i9 from "@ng-bootstrap/ng-bootstrap";
 export declare class TasUellSdkModule {
     /**
      * Use forRoot() to configure the TAS SDK module with required dependencies.
@@ -42,6 +45,6 @@ export declare class TasUellSdkModule {
         httpClient: new (...args: any[]) => TasHttpClient;
     }): ModuleWithProviders<TasUellSdkModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TasUellSdkModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TasUellSdkModule, [typeof i1.TasButtonComponent, typeof i2.TasVideocallComponent, typeof i3.TasFloatingCallComponent, typeof i4.TasWaitingRoomComponent], [typeof i5.CommonModule, typeof i6.FormsModule], [typeof i1.TasButtonComponent, typeof i2.TasVideocallComponent, typeof i3.TasFloatingCallComponent, typeof i4.TasWaitingRoomComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TasUellSdkModule, [typeof i1.TasButtonComponent, typeof i2.TasVideocallComponent, typeof i3.TasFloatingCallComponent, typeof i4.TasWaitingRoomComponent, typeof i5.TasAvatarComponent, typeof i6.TasIncomingAppointmentComponent], [typeof i7.CommonModule, typeof i8.FormsModule, typeof i9.NgbTooltipModule], [typeof i1.TasButtonComponent, typeof i2.TasVideocallComponent, typeof i3.TasFloatingCallComponent, typeof i4.TasWaitingRoomComponent, typeof i5.TasAvatarComponent, typeof i6.TasIncomingAppointmentComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TasUellSdkModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tas-uell-sdk",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "TAS (Telemedicine Assistance Service) SDK for Angular applications - Video call functionality using TokBox/Vonage",
   "peerDependencies": {
     "@angular/common": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",

package/public-api.d.ts

@@ -1,8 +1,11 @@
 export * from './lib/config/tas.config';
 export * from './lib/interfaces/tas.interfaces';
 export * from './lib/services/tas.service';
+export * from './lib/services/geolocation.service';
 export * from './lib/components/tas-btn/tas-btn.component';
 export * from './lib/components/tas-waiting-room/tas-waiting-room.component';
 export * from './lib/components/tas-videocall/tas-videocall.component';
 export * from './lib/components/tas-floating-call/tas-floating-call.component';
+export * from './lib/components/tas-avatar/tas-avatar.component';
+export * from './lib/components/tas-incoming-appointment/tas-incoming-appointment.component';
 export * from './lib/tas-uell-sdk.module';

package/src/lib/styles/tas-global.scss

@@ -2,36 +2,35 @@
 
 /* TAS Video Modal - global styles for NgbModal wrapper */
 .tas-video-modal {
-	.modal-dialog {
-		max-width: 100vw;
-		margin: 0;
-		height: 100vh;
-	}
-	.modal-content {
-		height: 100vh;
-		border: none;
-		border-radius: 0;
-		background: #000;
-	}
-	.modal-body {
-		padding: 0;
-	}
+  .modal-dialog {
+    max-width: 100vw;
+    margin: 0;
+    height: 100vh;
+  }
+  .modal-content {
+    height: 100vh;
+    border: none;
+    border-radius: 0;
+    background: #000;
+  }
+  .modal-body {
+    padding: 0;
+  }
 }
 
 /* TAS Waiting Room Modal - global styles for NgbModal wrapper */
 .tas-waiting-room-modal {
-	.modal-dialog {
-		max-width: 480px;
-	}
-	.modal-content {
-		border: none;
-		border-radius: 5px;
-		background: #ffffff;
-		overflow: hidden;
-		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-	}
-	.modal-body {
-		padding: 0;
-	}
+  .modal-dialog {
+    max-width: 480px;
+  }
+  .modal-content {
+    border: none;
+    border-radius: 5px;
+    background: #ffffff;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  }
+  .modal-body {
+    padding: 0;
+  }
 }
-

package/INSTALL_AND_TEST.md

@@ -1,427 +0,0 @@
-# TAS-UELL-SDK Library Installation & Testing Guide
-
-This guide provides step-by-step instructions for installing and testing the `tas-uell-sdk` Angular library.
-
----
-
-## Prerequisites
-
-- Angular 13+ project
-- Node.js and npm installed
-- A TokBox/Vonage API Key (for video call functionality)
-
----
-
-## Installation Steps
-
-### Step 1: Install the Library
-
-Install from npm:
-
-```bash
-npm install tas-uell-sdk --legacy-peer-deps
-```
-
-### Step 2: Install Peer Dependencies
-
-```bash
-npm install @ng-bootstrap/ng-bootstrap @opentok/client interactjs --legacy-peer-deps
-```
-
-### Step 3: Install Style Dependencies (IMPORTANT!)
-
-The library uses **Font Awesome icons** and **Bootstrap** for styling:
-
-```bash
-npm install font-awesome bootstrap --legacy-peer-deps
-```
-
-### Step 4: Add Styles to angular.json
-
-Update your `angular.json` file to include the required CSS files in the `styles` array:
-
-```json
-{
-  "projects": {
-    "your-project-name": {
-      "architect": {
-        "build": {
-          "options": {
-            "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/font-awesome/css/font-awesome.min.css",
-              "src/styles.scss"
-            ]
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-**Important:** Make sure Bootstrap and Font Awesome are added BEFORE your custom styles.
-
----
-
-## Configuration Steps
-
-### Step 5: Create HTTP Adapter Service
-
-Create a new file at `src/app/adapters/tas-http-adapter.service.ts`:
-
-```typescript
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { TasHttpClient } from 'tas-uell-sdk';
-
-@Injectable({ providedIn: 'root' })
-export class TasHttpAdapterService implements TasHttpClient {
-  // IMPORTANT: Change this to your actual API URL
-  private apiUrl = 'https://your-api-url.com';
-
-  constructor(private http: HttpClient) {}
-
-  post<T>(url: string, options: { body: any; headers?: Record<string, string> }): Observable<T> {
-    return this.http.post<T>(`${this.apiUrl}/${url}`, options.body, { 
-      headers: options.headers 
-    });
-  }
-}
-```
-
-### Step 6: Update AppModule
-
-Update `src/app/app.module.ts` to import and configure the TAS SDK:
-
-```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
-// Import TAS SDK
-import { TasUellSdkModule } from 'tas-uell-sdk';
-import { TasHttpAdapterService } from './adapters/tas-http-adapter.service';
-
-// IMPORTANT: Replace with your actual TokBox API Key
-const TOKBOX_API_KEY = 'YOUR_TOKBOX_API_KEY';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    // ... your other components
-  ],
-  imports: [
-    BrowserModule,
-    HttpClientModule,
-    NgbModule,
-    
-    // TAS SDK configuration
-    TasUellSdkModule.forRoot({
-      config: { tokBoxApiKey: TOKBOX_API_KEY },
-      httpClient: TasHttpAdapterService
-    })
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-### Step 7: Add Global Modal Styles
-
-Add these styles to your `src/styles.scss` (or `src/styles.css`):
-
-```scss
-/* TAS Video Modal - Full screen video call */
-.tas-video-modal {
-  .modal-dialog {
-    max-width: 100vw;
-    margin: 0;
-    height: 100vh;
-  }
-  .modal-content {
-    height: 100vh;
-    border: none;
-    border-radius: 0;
-    background: #000;
-  }
-  .modal-body {
-    padding: 0;
-  }
-}
-
-/* TAS Waiting Room Modal */
-.tas-waiting-room-modal {
-  .modal-dialog {
-    max-width: 480px;
-  }
-  .modal-content {
-    border: none;
-    border-radius: 5px;
-    background: #ffffff;
-    overflow: hidden;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-  }
-  .modal-body {
-    padding: 0;
-  }
-}
-```
-
-### Step 8: Add Floating Call Component
-
-Update `src/app/app.component.html` to include the floating call component at the end:
-
-```html
-<!-- Your existing content -->
-<router-outlet></router-outlet>
-
-<!-- Add this line at the end for Picture-in-Picture support -->
-<tas-floating-call></tas-floating-call>
-```
-
----
-
-## Usage - Create a Test Component
-
-### Step 9: Create a Test Component
-
-Create `src/app/tas-test/tas-test.component.ts`:
-
-```typescript
-import { Component } from '@angular/core';
-import { TasCurrentUser, TasUserRole } from 'tas-uell-sdk';
-
-@Component({
-  selector: 'app-tas-test',
-  template: `
-    <div style="padding: 40px; text-align: center;">
-      <h1>TAS SDK Test</h1>
-      <p>Click the button below to test the video call functionality:</p>
-      
-      <tas-btn
-        [appointmentId]="appointmentId"
-        [product]="product"
-        [tenantId]="tenantId"
-        [currentUser]="currentUser"
-        [ownerUserIds]="[userId]"
-        [regularUserIds]="[]"
-        [moderatorUserIds]="[]"
-      ></tas-btn>
-      
-      <hr style="margin: 40px 0;">
-      
-      <h3>Test Configuration:</h3>
-      <pre style="text-align: left; background: #f5f5f5; padding: 20px; border-radius: 8px;">
-User ID: {{ userId }}
-Appointment ID: {{ appointmentId }}
-Product: {{ product }}
-Tenant ID: {{ tenantId }}
-Current User: {{ currentUser | json }}
-      </pre>
-    </div>
-  `
-})
-export class TasTestComponent {
-  // Test configuration - modify these values as needed
-  userId = 12345;
-  appointmentId = 1;
-  product = 'test-product';
-  tenantId = 'test-tenant';
-  
-  currentUser: TasCurrentUser = {
-    name: 'Test',
-    lastname: 'User',
-    role: TasUserRole.OWNER
-  };
-}
-```
-
-### Step 10: Register the Test Component
-
-Add the test component to your module declarations in `app.module.ts`:
-
-```typescript
-import { TasTestComponent } from './tas-test/tas-test.component';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    TasTestComponent,  // Add this
-    // ... other components
-  ],
-  // ...
-})
-```
-
-### Step 11: Add Route or Use Directly
-
-**Option A - Add a route** in `app-routing.module.ts`:
-
-```typescript
-const routes: Routes = [
-  { path: 'tas-test', component: TasTestComponent },
-  // ... other routes
-];
-```
-
-**Option B - Use directly** in `app.component.html`:
-
-```html
-<app-tas-test></app-tas-test>
-<tas-floating-call></tas-floating-call>
-```
-
----
-
-## Run and Test
-
-### Step 12: Start the Application
-
-```bash
-ng serve
-```
-
-### Step 13: Navigate to Test Page
-
-Open your browser and go to:
-- `http://localhost:4200/tas-test` (if using route)
-- Or `http://localhost:4200` (if using directly in app.component)
-
-### Step 14: Test the Video Call
-
-1. Click the **"Iniciar TAS"** button
-2. The waiting room modal should appear
-3. Click **"Create Room"** to create a video room
-4. Click **"Join Session"** to enter the video call
-5. Test the controls: mute, swap views, minimize to PiP
-6. Test the floating window (PiP mode)
-7. Click hang up to end the call
-
----
-
-## Style Dependencies Summary
-
-| Dependency | Purpose | Required |
-|------------|---------|----------|
-| `bootstrap` | Button styles, modal layout | ✅ Yes |
-| `font-awesome` | Icons (video, phone, mute, etc.) | ✅ Yes |
-| Global modal styles | Modal positioning | ✅ Yes (add to styles.scss) |
-
----
-
-## API Endpoints Required
-
-Your backend API must provide these endpoints:
-
-| Method | Endpoint | Description |
-|--------|----------|-------------|
-| POST | `v2/room` | Creates a new video room |
-| POST | `v2/room/token` | Generates a session token |
-
-### Request/Response Examples
-
-**POST v2/room**
-```json
-// Request
-{
-  "roomType": "TAS",
-  "type": "SPONTANEOUS",
-  "tenant": "tenant-id",
-  "appointmentId": 123,
-  "users": [{ "userExternalId": 12345, "rol": "OWNER" }],
-  "product": "product-name"
-}
-
-// Response
-{
-  "content": {
-    "sessionId": "session-id-from-tokbox",
-    "roomId": 456
-  }
-}
-```
-
-**POST v2/room/token**
-```json
-// Request
-{
-  "sessionId": "session-id-from-tokbox",
-  "name": "John",
-  "lastname": "Doe",
-  "roleVC": "OWNER"
-}
-
-// Response
-{
-  "content": {
-    "token": "tokbox-token-string"
-  }
-}
-```
-
----
-
-## Troubleshooting
-
-### Styles not applying
-- ✅ Check that `bootstrap` and `font-awesome` are installed
-- ✅ Check that styles are added to `angular.json` in the correct order
-- ✅ Check that global modal styles are in `styles.scss`
-- ✅ Restart `ng serve` after modifying `angular.json`
-
-### Icons not showing
-- ✅ Verify `font-awesome` is installed: `npm list font-awesome`
-- ✅ Verify the CSS is in `angular.json`: `"node_modules/font-awesome/css/font-awesome.min.css"`
-
-### "Cannot find module 'tas-uell-sdk'"
-- ✅ Verify installation: `npm list tas-uell-sdk`
-
-### "No provider for TAS_CONFIG"
-- ✅ Ensure `TasUellSdkModule.forRoot()` is called in AppModule
-
-### "No provider for TAS_HTTP_CLIENT"
-- ✅ Ensure `httpClient` is passed to `forRoot()`
-
-### NgbModal errors
-- ✅ Ensure `NgbModule` is imported in AppModule
-
-### Video not working
-- ✅ Check browser console for TokBox errors
-- ✅ Verify TokBox API key is correct
-- ✅ Check camera/microphone permissions
-
----
-
-## Checklist
-
-- [ ] Library installed (`npm install tas-uell-sdk`)
-- [ ] Peer dependencies installed (`@ng-bootstrap/ng-bootstrap`, `@opentok/client`, `interactjs`)
-- [ ] Style dependencies installed (`bootstrap`, `font-awesome`)
-- [ ] Styles added to `angular.json`
-- [ ] HTTP Adapter service created
-- [ ] AppModule updated with `TasUellSdkModule.forRoot()`
-- [ ] Global modal styles added to `styles.scss`
-- [ ] `<tas-floating-call>` added to app.component.html
-- [ ] Test component created
-- [ ] TokBox API key configured
-- [ ] Backend API endpoints available
-
----
-
-## Success Criteria
-
-The library is working correctly if:
-1. ✅ The TAS button renders with proper styling (pink/magenta button with video icon)
-2. ✅ Clicking the button opens the waiting room modal
-3. ✅ "Create Room" successfully calls the API
-4. ✅ "Join Session" opens the full-screen video call
-5. ✅ Video from camera is displayed
-6. ✅ Mute/unmute works (icon changes)
-7. ✅ Minimize to PiP works
-8. ✅ Expand from PiP works
-9. ✅ Hang up ends the call properly
-