TAS UELL SDK

Angular library for TAS (Telemedicine Assistance Service) video call functionality using TokBox/Vonage.

Features

• 📹 Video call integration with TokBox/Vonage
• 🪟 Picture-in-Picture (PiP) mode support
• 🎤 Mute/unmute audio controls
• 🔄 Swappable video views
• 📱 Responsive design
• 🎨 Customizable styling

Installation

npm install tas-uell-sdk

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @ng-bootstrap/ng-bootstrap @opentok/client interactjs

Setup

1. Create an HTTP Adapter

The library requires an HTTP adapter that implements the TasHttpClient interface:

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 {
  constructor(private http: HttpClient) {}

  get<T>(url: string, options: { headers?: Record<string, string> }): Observable<T> {
    return this.http.get<T>(`https://your-api.com/${url}`, {
      headers: options.headers,
    });
  }

  post<T>(url: string, options: { body: any; headers?: Record<string, string> }): Observable<T> {
    return this.http.post<T>(`https://your-api.com/${url}`, options.body, {
      headers: options.headers,
    });
  }

  patch<T>(url: string, options: { body: any; headers?: Record<string, string> }): Observable<T> {
    return this.http.patch<T>(`https://your-api.com/${url}`, options.body, {
      headers: options.headers,
    });
  }
}

2. Import the Module

In your AppModule (root module):

import { TasUellSdkModule } from 'tas-uell-sdk';
import { TasHttpAdapterService } from './adapters/tas-http-adapter.service';

@NgModule({
  imports: [
    TasUellSdkModule.forRoot({
      config: {
        tokBoxApiKey: 'YOUR_TOKBOX_API_KEY',
        // apiBaseUrl: 'https://your-api.com/v2', // Optional
      },
      httpClient: TasHttpAdapterService,
    }),
  ],
})
export class AppModule {}

3. No Global Bootstrap CSS Needed

No host CSS import is required.

The SDK injects its own TAS-scoped modal/backdrop/tooltip styles at runtime (.tas-* classes only), so host apps should not import bootstrap.min.css or any TAS stylesheet just for TAS UI rendering.

4. Add the Floating Call Component

Add <tas-floating-call> to your root component template (e.g., app.component.html):

<router-outlet></router-outlet>
<tas-floating-call></tas-floating-call>

Usage

Note: The appointment/room must be pre-created in your backend before using this library.

TAS Button Component

Use the <tas-btn> component to initiate a video call:

<tas-btn
  [roomType]="'TAS'"
  [entityId]="appointment.entityId"
  [tenant]="tenantId"
  [businessRole]="'BACKOFFICE'"
  [currentUser]="currentUser"
></tas-btn>

Input Properties

| Property | Type | Required | Default | Description | | :--- | :--- | :--- | :--- | :--- | | entityId | number | Yes | - | The entity/ausencia ID | | tenant | string | Yes | - | Tenant identifier | | roomType | TasRoomType | No | 'TAS' | Room type (TAS, JM, WEBINAR, WELLNESS_MANAGER) | | businessRole | TasBusinessRole | No | 'USER' | Role (ADMIN_MANAGER, MANAGER, BACKOFFICE, USER) | | currentUser | TasCurrentUser | Yes | - | Current user info (name, lastname, role) |

Waiting Room Behavior

When clicking the TAS button, a waiting room modal opens:

1. Status Check: The library calls /v2/proxy/video/status to get session info
2. Token Acquisition: Calls /v2/proxy/video/start to get the video call token

Owner/Backoffice Users (businessRole: 'BACKOFFICE' or user with role: 'OWNER'):

• Token is obtained immediately after status check
• Once token is received, the "Join" button appears
• If /start fails, an error screen is shown with a "Retry" button

Non-Owner Users (regular attendees):

• See "Medicina laboral te va a admitir en unos instantes..."
• Wait until the backend marks the session as joinable: true
• Once joinable, the token is obtained and the "Join" button appears

Error Handling

The library handles errors gracefully:

• If /status fails: Shows error with retry option
• If /start fails: Shows error message from backend, stops polling, shows retry option
• Network errors: Displays user-friendly error message

Interfaces & Enums

TasCurrentUser

interface TasCurrentUser {
  id: number;
  name: string;
  lastname: string;
  role: TasUserRole;
}

TasCallConfig

interface TasCallConfig {
  roomType: TasRoomType;
  entityId: number;
  tenant: string;
  businessRole: TasBusinessRole;
  currentUser: TasCurrentUser;
}

TasAppointment

interface TasAppointment {
  id: number;
  agendaId: number;
  date: string;       // "YYYY-MM-DD"
  startTime: string;  // "HH:mm"
  endTime: string;    // "HH:mm"
  bookingType: string;
  status: AppointmentStatus;
  title: string;
  notes: string;
  entityId: number;      // Entity/ausencia ID
  roomType: TasRoomType; // Room type (always TAS)
}

Enums

• TasUserRole: OWNER, USER, MODERATOR
• TasBusinessRole: ADMIN_MANAGER, MANAGER, BACKOFFICE, USER
• TasRoomType: TAS, JM, WEBINAR, WELLNESS_MANAGER
• CallState: IDLE, CONNECTING, CONNECTED, DISCONNECTED, ERROR
• ViewMode: FULLSCREEN, PIP
• AppointmentStatus: CONFIRMED, CANCELLED, RESCHEDULED
• GeoStatus: PENDING, GRANTED, DENIED

Exported Services

TasService

Core service for managing video sessions and state.

Public API:

• callState$: Observable<CallState> - Current connection status
• viewMode$: Observable<ViewMode> - Current view mode
• isMuted$: Observable<boolean> - Local audio mute state
• joinable$: Observable<boolean> - Whether the call is joinable
• ownerHasJoined$: Observable<boolean> - Whether an owner has joined
• toggleMute() - Toggles local audio
• disconnectSession() - Ends the current session
• getProxyVideoStatus(params) - Gets session status
• getAppointments(params) - Gets user appointments within date range

Exported Components

TasButtonComponent - <tas-btn>

Initiates video calls. Supports style variants:

<!-- Default (pink) -->
<tas-btn [entityId]="123" [tenant]="'tenant'" [currentUser]="user"></tas-btn>

<!-- Teal variant with custom label -->
<tas-btn variant="teal" buttonLabel="Ingresar" [entityId]="123" [tenant]="'tenant'" [currentUser]="user"></tas-btn>

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | variant | 'default' \| 'teal' | 'default' | Button style variant | | buttonLabel | string | 'Iniciar TAS' | Button text | | skipStatusCheck | boolean | false | When true, shows button immediately without API status check | | devOpenFeedbackModal | boolean | false | DEV ONLY: Clicking button opens feedback modal directly |

TasIncomingAppointmentComponent - <tas-incoming-appointment>

Displays a list of appointments within a date range or an empty state. Uses <tas-btn> internally and only shows the button for appointments with CONFIRMED or ACTIVE status.

<tas-incoming-appointment
  [entityId]="123"
  [tenant]="'tenant'"
  [fromDate]="'2024-01-01'"
  [toDate]="'2024-01-31'"
  [currentUser]="user"
  [businessRole]="'USER'"
  (enterCall)="onEnterCall($event)"
></tas-incoming-appointment>

| Property | Type | Required | Default | Description | | :--- | :--- | :--- | :--- | :--- | | entityId | number | Yes | - | Entity/ausencia ID | | tenant | string | Yes | - | Tenant identifier | | fromDate | string | Yes | - | Start date (YYYY-MM-DD) | | toDate | string | Yes | - | End date (YYYY-MM-DD) | | currentUser | TasCurrentUser | Yes | - | Current user info | | roomType | TasRoomType | No | 'TAS' | Room type | | businessRole | TasBusinessRole | No | 'USER' | User's business role |

| Output | Type | Description | | :--- | :--- | :--- | | enterCall | EventEmitter<TasAppointment> | Emits appointment when clicking "Ingresar" |

Date format: Dates must be in YYYY-MM-DD format (e.g., 2024-01-15). If fromDate and toDate are the same, the API will be called with a single initDate parameter.

Note: Requires the TasHttpClient adapter to implement the get() method.

Other Components

• TasVideocallComponent - Full-screen video call interface
• TasWaitingRoomComponent - Pre-call waiting room
• TasFloatingCallComponent - <tas-floating-call>
• TasAvatarComponent - <tas-avatar>

License

MIT

Migration Note (0.4.6)

• Removed host global styling requirement for TAS modals and controls.
• You can remove any TAS-specific @import '.../tas-global.scss' from host styles.scss.
• Host apps no longer need to import bootstrap.min.css for TAS components to render correctly.