tas-uell-sdk 0.0.1 → 0.0.2

package/README.md

@@ -1,15 +1,15 @@
-# TAS-Uell-SDK
+# TAS UELL SDK
 
-Angular library for TAS (Telemedicine Assistance Service) video call functionality using OpenTok/Vonage Video API.
+Angular library for TAS (Telemedicine Assistance Service) video call functionality using TokBox/Vonage.
 
 ## Features
 
-- 📹 Video call integration with OpenTok/Vonage
-- 🔘 Ready-to-use button component to initiate calls
-- 🖼️ Picture-in-Picture (PiP) mode support
-- 🎤 Mute/unmute functionality
-- 📱 Draggable floating call widget
-- 🔌 Pluggable architecture for HTTP and user data providers
+- 📹 Video call integration with TokBox/Vonage
+- 🪟 Picture-in-Picture (PiP) mode support
+- 🎤 Mute/unmute audio controls
+- 🔄 Swappable video views
+- 📱 Responsive design
+- 🎨 Customizable styling
 
 ## Installation
 
@@ -17,288 +17,181 @@ Angular library for TAS (Telemedicine Assistance Service) video call functionali
 npm install tas-uell-sdk
 ```
 
-### Peer Dependencies
+## Peer Dependencies
 
-Make sure you have these peer dependencies installed:
+Make sure you have the following peer dependencies installed:
 
 ```bash
-npm install @angular/common @angular/core @ng-bootstrap/ng-bootstrap @opentok/client interactjs rxjs
+npm install @ng-bootstrap/ng-bootstrap @opentok/client interactjs
 ```
 
 ## Setup
 
-### 1. Implement Required Adapters
+### 1. Create an HTTP Adapter
 
-The library requires two adapters to integrate with your application:
-
-#### HTTP Client Adapter
-
-Create a service that implements `TasHttpClient`:
+The library requires an HTTP adapter that implements `TasHttpClient` interface:
 
 ```typescript
-import { Injectable } from "@angular/core";
-import { Observable } from "rxjs";
-import { TasHttpClient } from "tas-uell-sdk";
+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 TasHttpAdapter implements TasHttpClient {
+export class TasHttpAdapterService implements TasHttpClient {
   constructor(private http: HttpClient) {}
 
-  post<T>(url: string, body: any, options?: { headers?: Record<string, string> }): Observable<T> {
-    return this.http.post<T>(url, body, { headers: options?.headers });
-  }
-}
-```
-
-#### User Data Provider Adapter
-
-Create a service that implements `TasUserDataProvider`:
-
-```typescript
-import { Injectable } from "@angular/core";
-import { TasUserDataProvider, TasUserData } from "tas-uell-sdk";
-
-@Injectable({ providedIn: 'root' })
-export class TasUserDataAdapter implements TasUserDataProvider {
-  getUserData(): TasUserData | null {
-    // Return the current user's data
-    const user = this.authService.getCurrentUser();
-    if (user) {
-      return {
-        id: user.id,
-        name: user.firstName,
-        surname: user.lastName,
-      };
-    }
-    return null;
-  }
-
-  getTenantId(): string | null {
-    // Return the current tenant ID
-    return this.authService.getTenantId();
+  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. Configure the Module
+### 2. Import the Module
 
-In your root module (e.g., `AppModule`):
+In your `AppModule` (root module):
 
 ```typescript
-import { NgModule } from '@angular/core';
-import { TasModule, TAS_CONFIG, TAS_HTTP_CLIENT, TAS_USER_DATA_PROVIDER } from 'tas-uell-sdk';
-import { TasHttpAdapter } from './adapters/tas-http-adapter.service';
-import { TasUserDataAdapter } from './adapters/tas-user-data-adapter.service';
-import { environment } from '../environments/environment';
+import { TasUellSdkModule } from 'tas-uell-sdk';
+import { TasHttpAdapterService } from './adapters/tas-http-adapter.service';
 
 @NgModule({
   imports: [
-    // ... other imports
-    TasModule
-  ],
-  providers: [
-    {
-      provide: TAS_CONFIG,
-      useValue: {
-        tokBoxApiKey: environment.tokBoxApiKey,
-        apiBaseUrl: environment.apiUrl
-      }
-    },
-    { provide: TAS_HTTP_CLIENT, useExisting: TasHttpAdapter },
-    { provide: TAS_USER_DATA_PROVIDER, useExisting: TasUserDataAdapter }
+    TasUellSdkModule.forRoot({
+      config: { 
+        tokBoxApiKey: 'YOUR_TOKBOX_API_KEY' 
+      },
+      httpClient: TasHttpAdapterService
+    })
   ]
 })
 export class AppModule { }
 ```
 
-### 3. Import in Feature Modules
-
-In any feature module where you want to use the TAS components:
-
-```typescript
-import { TasModule } from 'tas-uell-sdk';
-
-@NgModule({
-  imports: [
-    TasModule
-  ]
-})
-export class MyFeatureModule { }
-```
-
-## Usage
-
-### TAS Button Component
-
-Add the video call button to your template:
-
-```html
-<tas-btn *ngIf="showVideoCall"></tas-btn>
-```
-
-When clicked, this button will:
-1. Create a video room via your API
-2. Generate a session token
-3. Open the video call modal
-
-### Floating Call Component
-
-Add the floating PiP widget to your root component template:
-
-```html
-<router-outlet></router-outlet>
-<tas-floating-call></tas-floating-call>
-```
-
-This component shows a draggable mini video player when the user switches to PiP mode during a call.
-
-## Components
-
-| Component | Selector | Description |
-|-----------|----------|-------------|
-| `TasButtonComponent` | `<tas-btn>` | Button to initiate a video call |
-| `TasVideocallComponent` | `<tas-videocall>` | Full video call modal (opened automatically) |
-| `TasFloatingCallComponent` | `<tas-floating-call>` | Floating PiP widget for minimized calls |
+### 3. Add Global Styles
 
-## Services
+Add the TAS modal styles to your global `styles.scss`:
 
-### TasService
-
-The main service for managing video calls.
-
-```typescript
-import { TasService } from 'tas-uell-sdk';
-
-@Component({...})
-export class MyComponent {
-  constructor(private tasService: TasService) {}
-
-  // Subscribe to call state changes
-  ngOnInit() {
-    this.tasService.callState$.subscribe(state => {
-      console.log('Call state:', state); // IDLE, CONNECTING, CONNECTED, DISCONNECTED, ERROR
-    });
-
-    this.tasService.viewMode$.subscribe(mode => {
-      console.log('View mode:', mode); // FULLSCREEN, PIP
-    });
-
-    this.tasService.isMuted$.subscribe(muted => {
-      console.log('Is muted:', muted);
-    });
+```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;
   }
 }
-```
-
-## Interfaces
-
-### TasConfig
-
-```typescript
-interface TasConfig {
-  tokBoxApiKey: string;  // Your OpenTok/Vonage API Key
-  apiBaseUrl: string;    // Base URL for TAS API endpoints
-}
-```
-
-### TasHttpClient
 
-```typescript
-interface TasHttpClient {
-  post<T>(url: string, body: any, options?: { headers?: Record<string, string> }): Observable<T>;
+/* 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;
+  }
 }
 ```
 
-### TasUserDataProvider
+### 4. Add the Floating Call Component
 
-```typescript
-interface TasUserDataProvider {
-  getUserData(): TasUserData | null;
-  getTenantId(): string | null;
-}
-```
-
-### TasUserData
+Add `<tas-floating-call>` to your root component template (e.g., `app.component.html`):
 
-```typescript
-interface TasUserData {
-  id: string | number;
-  name: string;
-  surname: string;
-}
+```html
+<router-outlet></router-outlet>
+<tas-floating-call></tas-floating-call>
 ```
 
-## API Endpoints
-
-The library expects the following API endpoints to be available:
-
-| Method | Endpoint | Description |
-|--------|----------|-------------|
-| POST | `{apiBaseUrl}/v2/room` | Create a video room |
-| POST | `{apiBaseUrl}/v2/room/token` | Generate session token |
+## Usage
 
-### Create Room Request
+### TAS Button Component
 
-```typescript
-{
-  tenant: string;
-  userId: string;
-  product: string;
-  record: boolean;
-  roomType: string;
-  type: string;
-}
-```
+Use the `<tas-btn>` component to initiate a video call:
 
-### Generate Token Request
+```html
+<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
 
 ```typescript
-{
-  sessionId: string;
+interface TasCurrentUser {
   name: string;
   lastname: string;
+  role: TasUserRole; // 'OWNER' | 'USER' | 'MODERATOR'
 }
 ```
 
-## Styling
+## Exported Components
 
-The library includes default styles for all components. You may need to add global styles for the modal:
+- `TasButtonComponent` - Button to initiate video calls
+- `TasVideocallComponent` - Full-screen video call interface
+- `TasWaitingRoomComponent` - Pre-call waiting room
+- `TasFloatingCallComponent` - Picture-in-Picture floating window
 
-```scss
-// styles.scss
-ngb-modal-window.tas-video-modal {
-  .modal-dialog {
-    max-width: 100vw;
-    height: 100vh;
-    margin: 0;
-  }
-  .modal-content {
-    background-color: transparent;
-    border: none;
-    height: 100%;
-  }
-}
-```
+## Exported Services
 
-## Building the Library
+- `TasService` - Core service for managing video sessions
 
-```bash
-cd TAS-Uell-SDK
-npm install
-npm run build
-```
+## Exported Interfaces & Types
 
-The built library will be in the `dist/` folder.
+- `TasConfig`
+- `TasHttpClient`
+- `TasCurrentUser`
+- `CreateRoomRequest`
+- `CreateRoomResponse`
+- `GenerateTokenRequest`
+- `GenerateTokenResponse`
+- `TasRoomType`
+- `TasSessionType`
+- `TasUserRole`
+- `CallState`
+- `ViewMode`
 
-## Publishing
+## Building the Library
 
 ```bash
-cd dist/tas-uell-sdk
-npm publish
+ng build tas-uell-sdk --configuration=production
 ```
 
 ## License
 
 MIT
-
-