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. Add Global Styles

Add the TAS modal styles to your global styles.scss. You can either import the library's global styles or copy the CSS below:

/* Option 1: Import from library */
@import 'tas-uell-sdk/src/lib/styles/tas-global.scss';

/* Option 2: Manual styles */
.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 {
  .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;
  }
}

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

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>

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>

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