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 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) {}

  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 
    });
  }
}

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' 
      },
      httpClient: TasHttpAdapterService
    })
  ]
})
export class AppModule { }

3. Add Global Styles

Add the TAS modal styles to your global styles.scss:

/* TAS Video Modal */
.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;
  }
}

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

TAS Button Component

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

<tas-btn
  [appointmentId]="appointment.id"
  [product]="'your-product'"
  [tenantId]="tenantId"
  [currentUser]="currentUser"
  [ownerUserIds]="[ownerId]"
  [regularUserIds]="regularUserIds"
  [moderatorUserIds]="moderatorUserIds"
></tas-btn>

Input Properties

| Property | Type | Required | Description | |----------|------|----------|-------------| | appointmentId | number | Yes | The appointment/session ID | | product | string | Yes | Product identifier | | tenantId | string | Yes | Tenant identifier | | currentUser | TasCurrentUser | Yes | Current user info (name, lastname, role) | | ownerUserIds | number[] | Yes | Array with exactly one owner user ID | | regularUserIds | number[] | No | Array of regular participant user IDs | | moderatorUserIds | number[] | No | Array of moderator user IDs |

TasCurrentUser Interface

interface TasCurrentUser {
  name: string;
  lastname: string;
  role: TasUserRole; // 'OWNER' | 'USER' | 'MODERATOR'
}

Exported Components

• TasButtonComponent - Button to initiate video calls
• TasVideocallComponent - Full-screen video call interface
• TasWaitingRoomComponent - Pre-call waiting room
• TasFloatingCallComponent - Picture-in-Picture floating window

Exported Services

• TasService - Core service for managing video sessions

Exported Interfaces & Types

• TasConfig
• TasHttpClient
• TasCurrentUser
• CreateRoomRequest
• CreateRoomResponse
• GenerateTokenRequest
• GenerateTokenResponse
• TasRoomType
• TasSessionType
• TasUserRole
• CallState
• ViewMode

Building the Library

ng build tas-uell-sdk --configuration=production

License

MIT