@tmsoft/webphone 1.1.25 → 2.0.6

package/README.md

@@ -1,215 +1,194 @@
-# WebPhone Library (`@tmsoft/webphone`)
+# @tmsoft/webphone
 
-[![NPM Version](https://img.shields.io/npm/v/@tmsoft/webphone)](https://www.npmjs.com/package/@tmsoft/webphone)
+[![npm version](https://img.shields.io/npm/v/@tmsoft/webphone.svg)](https://www.npmjs.com/package/@tmsoft/webphone)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-Librería para Vue 3 con un componente `WebPhone` (softphone) basado en SIP y WebRTC. Incluye teclado DTMF, selección de dispositivos de audio, control de volúmenes y estado de conexión.
+SIP softphone component for Vue 3 and Web Components.
 
+## Installation
 
-### Características
-- Integración SIP sobre WebSocket (basado en JsSIP)
-- Audio WebRTC con manejo de permisos de micrófono
-- Teclado DTMF y estado de llamada (entrante/saliente/en curso)
-- Gestión de dispositivos de audio (micrófonos y altavoces)
-- Reconexión y manejo de estado SIP
-- Diseño compacto y dependencias UI mínimas (PrimeVue para botones/inputs)
-
-
-### Requisitos
-- Vue 3.5+
-- PrimeVue 4.x y PrimeIcons 7.x (peer dependencies)
-- @vueuse/core 13.x (peer dependency)
-- Servidor SIP con WebSocket habilitado (por ejemplo, Asterisk en `/asterisk/ws`, puerto 8089 por defecto)
-- Navegador con HTTPS y permisos de micrófono
-
-
-## Instalación
-
-Instale el paquete y los peer dependencies:
-
-```sh
-npm install @tmsoft/webphone primevue primeicons @vueuse/core
-# o
-yarn add @tmsoft/webphone primevue primeicons @vueuse/core
-# o
-pnpm add @tmsoft/webphone primevue primeicons @vueuse/core
-```
-
-Los estilos del componente se inyectan automáticamente en tiempo de ejecución. No es necesario configurar Tailwind en su proyecto para usar esta librería.
-
-
-## Uso
-
-Puede utilizar la librería como plugin global o importar el componente localmente.
-
-### Opción A: Plugin global
-`main.ts`:
-
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import WebphonePlugin from '@tmsoft/webphone'
-
-const app = createApp(App)
-app.use(WebphonePlugin)
-app.mount('#app')
+```bash
+npm install @tmsoft/webphone
 ```
 
-Luego, en cualquier componente:
-
-```vue
-<script setup lang="ts">
-const extension = '1001'
-const password = 'supersecret'
-const domain = 'sip.example.com' // ver normalización de dominio más abajo
-</script>
-
-<template>
-  <WebPhone :extension="extension" :password="password" :domain="domain" />
-</template>
-```
+## Usage
 
-### Opción B: Importación local del componente
+### Vue 3
 
 ```vue
 <script setup lang="ts">
 import { WebPhone } from '@tmsoft/webphone'
+import type { WebPhoneContact } from '@tmsoft/webphone'
 
-const extension = '1001'
-const password = 'supersecret'
-const domain = 'sip.example.com'
+const contacts: WebPhoneContact[] = [
+  { name: 'Support', number: '1000', type: 'extension' },
+  { name: 'Sales', number: '2000', type: 'extension' },
+]
 </script>
 
 <template>
-  <WebPhone :extension="extension" :password="password" :domain="domain" />
+  <WebPhone
+    host="pbx.example.com"
+    extension="1001"
+    password="your-password"
+    :contacts="contacts"
+    @back="handleBack"
+  />
 </template>
 ```
 
+### Web Component
 
-## API del componente
+```html
+<script src="https://unpkg.com/@tmsoft/webphone/dist/webphone.component.js"></script>
+
+<web-phone
+  host="pbx.example.com"
+  extension="1001"
+  password="your-password"
+  contacts='[{"name":"Support","number":"1000","type":"extension"}]'
+></web-phone>
+```
 
-### Props
+## Props
+
+| Prop        | Type                             | Required | Default  | Description                                                                                          |
+| ----------- | -------------------------------- | -------- | -------- | ---------------------------------------------------------------------------------------------------- |
+| `host`      | `string`                         | Yes      | —        | SIP server host (e.g., `pbx.example.com`). WebSocket URL is built as `wss://<host>:8089/asterisk/ws` |
+| `extension` | `string`                         | Yes      | —        | SIP extension for registration and calls                                                             |
+| `password`  | `string`                         | Yes      | —        | SIP password                                                                                         |
+| `mode`      | `'webcall' \| 'call' \| 'video'` | No       | `'call'` | Operating mode                                                                                       |
+| `logo`      | `string`                         | No       | —        | Logo URL or base64 for `webcall` mode                                                                |
+| `to`        | `string`                         | No       | —        | Destination number for `webcall` mode. Auto-dials when SIP registration is active (~2s)              |
+| `contacts`  | `WebPhoneContact[]`              | No       | `[]`     | Contact list                                                                                         |
+
+## Modes
+
+| Mode      | Description                                                                                                               |
+| --------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `call`    | Standard softphone with keypad, contacts, and call history. Full-featured interface for making and receiving audio calls. |
+| `video`   | Same as `call` mode but with video support enabled. Displays local and remote video streams during calls.                 |
+| `webcall` | Simplified click-to-call widget. Requires `to` and `logo` props. Ideal for embedding a quick-call button on websites.     |
+
+## Types
+
+```typescript
+interface WebPhoneContact {
+  name: string
+  number: string
+  type?: 'tool' | 'extension' | 'contact' | 'voicemail'
+}
+```
 
-| Propiedad   | Tipo                                 | Requerida | Default   | Descripción |
-|------------|--------------------------------------|-----------|-----------|-------------|
-| `extension`| `string`                              | Sí        | —         | Extensión del usuario para registrar y originar llamadas SIP. |
-| `password` | `string`                              | Sí        | —         | Contraseña SIP de la extensión. |
-| `domain`   | `string`                              | Sí        | —         | Dominio o URL del servidor SIP. Se normaliza automáticamente (ver detalle). |
-| `mode`     | `'webcall' \| 'call' \| 'video'`     | No        | `'webcall'` | Modo de uso. Nota: `video` aún no inicia video de forma automática. |
-| `image`    | `string`                              | No        | —         | URL o base64 para mostrar un logotipo en modo `webcall`. |
-| `to`       | `string`                              | No        | —         | Número destino en modo `webcall`. Si se define, se origina la llamada automáticamente cuando el registro SIP está activo (≈ 2 s). |
-| `callback` | `(event: MouseEvent) => void`         | No        | —         | Reservado. Actualmente no se utiliza en el componente. |
+## Emits
 
+| Emit   | Description                         |
+| ------ | ----------------------------------- |
+| `back` | Emitted when back button is pressed |
 
-### Normalización de `domain`
-El componente acepta distintos formatos y construye automáticamente la URL WebSocket para SIP:
-- Si recibe solo host (por ejemplo, `pbx.midominio.com`), se asume `wss://pbx.midominio.com:8089/asterisk/ws`.
-- Si recibe `http://host[:puerto]` se usa `ws://host[:puerto]/asterisk/ws`.
-- Si recibe `https://host[:puerto]` se usa `wss://host[:puerto]/asterisk/ws`.
-- Si indica explícitamente un puerto, se respeta (de lo contrario, se usa 8089 por defecto para Asterisk).
+## Examples
 
-Además, el URI SIP se compone como `sip:<extension>@<host[:puerto]>`.
+### Call Mode (Default)
 
+Standard softphone with full interface.
 
-### Slots
-- `back-button`: slot para renderizar un control de navegación en la cabecera cuando `mode === 'webcall'`.
+```vue
+<WebPhone
+  host="pbx.example.com"
+  extension="1001"
+  password="secret"
+  mode="call"
+  :contacts="contacts"
+/>
+```
 
+### Video Mode
 
-## Uso via CDN
+Softphone with video support.
 
-### ES Module (recomendado)
+```vue
+<WebPhone
+  host="pbx.example.com"
+  extension="1001"
+  password="secret"
+  mode="video"
+  :contacts="contacts"
+/>
+```
 
-```html
-<script type="module">
-  import { createApp } from 'vue'
-  import WebphonePlugin from 'https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone.es.js'
+### WebCall Mode
 
-  const App = {
-    template: '<WebPhone extension="1001" password="supersecret" domain="sip.example.com" />'
-  }
+Click-to-call widget for websites.
 
-  createApp(App).use(WebphonePlugin).mount('#app')
-</script>
+```vue
+<WebPhone
+  host="pbx.example.com"
+  extension="1001"
+  password="secret"
+  mode="webcall"
+  to="5551234567"
+  logo="https://your-site.com/logo.png"
+/>
 ```
 
-### UMD
-
 ```html
-<!-- Vue 3 UMD -->
-<script src="https://unpkg.com/vue@3"></script>
-<!-- WebPhone UMD -->
-<script src="https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone.umd.js"></script>
-<script>
-  const app = Vue.createApp({
-    template: '<WebPhone extension="1001" password="supersecret" domain="sip.example.com" />'
-  })
-  // El paquete UMD expone 'WebPhone' como global; la función por defecto es el plugin
-  app.use(WebPhone.default)
-  app.mount('#app')
-</script>
+<!-- Web Component -->
+<web-phone
+  host="pbx.example.com"
+  extension="1001"
+  password="secret"
+  mode="webcall"
+  to="5551234567"
+  logo="https://your-site.com/logo.png"
+></web-phone>
 ```
 
-### Sin frameworks: Web Component (`<web-phone />`)
+## Development
 
-Para incrustar el softphone en una página HTML sin inicializar Vue ni otros frameworks, use el build UMD específico del Web Component:
+### Prerequisites
 
-```html
-<!-- Carga el Web Component listo para usar -->
-<script src="https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone-element.umd.js"></script>
+- Node.js ^20.19.0 || >=22.12.0
+- Yarn
 
-<!-- Úselo directamente en el DOM -->
-<web-phone extension="1001" password="supersecret" domain="sip.example.com" mode="webcall" to="099999999" image="https://example.com/logo.png"></web-phone>
+### Setup
+
+```bash
+# Install dependencies
+yarn install
+
+# Start development server
+yarn dev
 ```
 
-Notas:
-- Los atributos del elemento corresponden a las props del componente (`extension`, `password`, `domain`, `mode`, `image`, `to`).
-- El build del Web Component incluye internamente Vue, PrimeVue y estilos necesarios; no requiere inicialización adicional.
+### Scripts
 
+| Command              | Description                    |
+| -------------------- | ------------------------------ |
+| `yarn dev`           | Start development server       |
+| `yarn build`         | Build for production           |
+| `yarn build:lib`     | Build library for distribution |
+| `yarn test:unit`     | Run unit tests in watch mode   |
+| `yarn test:coverage` | Run tests with coverage report |
+| `yarn lint`          | Run ESLint                     |
+| `yarn type-check`    | Run TypeScript type checking   |
 
-## Desarrollo
+### Testing
 
-Scripts principales:
+The project uses Vitest for unit testing with the following coverage thresholds:
 
-```sh
-npm run dev        # entorno de desarrollo
-npm run build      # compila ESM/CJS y UMD
-npm run preview    # vista previa local de la build
-npm run test:unit  # pruebas unitarias (Vitest)
-npm run test:e2e   # pruebas E2E (Playwright)
-npm run lint       # lint con ESLint
-npm run format     # formateo con Prettier
-```
+- Statements: 80%
+- Branches: 70%
+- Functions: 70%
+- Lines: 80%
 
-La salida de distribución se genera en `dist/`:
-- `webphone.es.js` (ES Module)
-- `webphone.cjs.js` (CommonJS)
-- `webphone.umd.js` (UMD)
-- `index.d.ts` (tipos TypeScript)
-
-
-## Publicación en NPM
-
-Pasos sugeridos para publicar una versión:
-
-1. Autentíquese en NPM (una vez por entorno):
-   ```sh
-   npm login
-   ```
-2. Compile el paquete:
-   ```sh
-   npm run build
-   ```
-3. Publique con incremento de patch automático:
-   ```sh
-   npm run publish:lib
-   ```
-   Este script ejecuta `npm version patch` y `npm publish --access public`.
-
-Para publicar en un registro local (por ejemplo, Verdaccio):
-```sh
-npm run publish:local
-```
+```bash
+# Run tests
+yarn test:unit
 
+# Run tests with coverage
+yarn test:coverage
+```
 
-## Licencia
+## License
 
-MIT.
+MIT

package/dist/index.d.ts

@@ -1,68 +1,2 @@
-import { ComponentOptionsMixin } from 'vue';
-import { ComponentProvideOptions } from 'vue';
-import { DefineComponent } from 'vue';
-import { PublicProps } from 'vue';
-
-declare const __VLS_component: DefineComponent<WebphoneProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<WebphoneProps> & Readonly<{}>, {
-    mode: "webcall" | "call" | "video";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-    playerRef: HTMLAudioElement;
-    ringerRef: HTMLAudioElement;
-    backRingerRef: HTMLAudioElement;
-    viewerRef: HTMLVideoElement;
-    selfViewerRef: HTMLVideoElement;
-    transcriptRef: HTMLDivElement;
-}, any>;
-
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        'back-button'?(_: {}): any;
-    };
-    refs: {
-        playerRef: HTMLAudioElement;
-        ringerRef: HTMLAudioElement;
-        backRingerRef: HTMLAudioElement;
-        viewerRef: HTMLVideoElement;
-        selfViewerRef: HTMLVideoElement;
-        transcriptRef: HTMLDivElement;
-    };
-    rootEl: any;
-};
-
-declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-
-declare type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-
-export declare const WebPhone: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-
-declare interface WebphoneProps {
-    extension: string;
-    password: string;
-    domain: string;
-    mode: 'webcall' | 'call' | 'video';
-    image?: string;
-    to?: string;
-    callback?: (event: MouseEvent) => void;
-    /**
-     * (Opcional) Habilita la vista de múltiples canales de llamada
-     * Si es false o no se especifica, usa la vista de canal único tradicional
-     */
-    multiChannel?: boolean;
-    /**
-     * (Opcional) Endpoint backend que devuelve el token efímero para OpenAI Realtime.
-     * Si se provee, se asigna a window.__WEBPHONE_TRANSCRIPTION_TOKEN_URL__ automáticamente.
-     */
-    transcriptionTokenUrl?: string;
-    /**
-     * (Opcional) API key para solicitar el token efímero al endpoint indicado en `transcriptionTokenUrl`.
-     * Se envía en el header `api-key`.
-     */
-    transcriptionTokenApiKey?: string;
-}
-
-export { }
+export * from './lib/index'
+export {}

package/dist/lib/index.d.ts

@@ -0,0 +1,3 @@
+import { default as WebPhone } from '../src/components/WebPhone.vue';
+export { WebPhone };
+export * from './types';

package/dist/lib/types.d.ts

@@ -0,0 +1,17 @@
+export interface WebPhoneContact {
+    name: string;
+    number: string;
+    type?: 'tool' | 'extension' | 'contact' | 'voicemail';
+}
+export interface WebPhoneProps {
+    host?: string;
+    extension?: string;
+    password?: string;
+    to?: string;
+    mode?: 'webcall' | 'call' | 'video';
+    logo?: string;
+    contacts?: WebPhoneContact[];
+}
+export interface WebPhoneEmits {
+    back: () => void;
+}

package/dist/src/components/WebPhone.vue.d.ts

@@ -0,0 +1,155 @@
+type __VLS_Props = {
+    host?: string;
+    extension?: string;
+    password?: string;
+    to?: string;
+    mode?: 'webcall' | 'call' | 'video';
+    logo?: string;
+    contacts?: {
+        name: string;
+        number: string;
+        type?: 'tool' | 'extension' | 'contact' | 'voicemail';
+    }[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    back: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBack?: (() => any) | undefined;
+}>, {
+    contacts: {
+        name: string;
+        number: string;
+        type?: "tool" | "extension" | "contact" | "voicemail";
+    }[];
+    mode: "webcall" | "call" | "video";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    phoneRef: HTMLDivElement;
+    standardHandleRef: HTMLDivElement;
+    webcallHandleRef: HTMLDivElement;
+    remoteVideoRef: HTMLVideoElement;
+    localVideoRef: HTMLVideoElement;
+    documentPipRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly remoteStream: MediaStream | null;
+            readonly localStream: MediaStream | null;
+            readonly hasVideo: boolean;
+            readonly remoteNumber: string;
+            readonly isConnected: boolean;
+            readonly callStatus: "idle" | "calling" | "incoming" | "connected" | "held";
+            readonly isMuted: boolean;
+            readonly isHeld: boolean;
+            readonly destination?: string | undefined;
+            readonly isVideo?: boolean | undefined;
+            readonly active?: boolean | undefined;
+            readonly autoOpenOnBlur?: boolean | undefined;
+            readonly onToggleMute?: (() => any) | undefined;
+            readonly onToggleHold?: (() => any) | undefined;
+            readonly onTransfer?: (() => any) | undefined;
+            readonly "onUpdate:active"?: ((isActive: boolean) => any) | undefined;
+            readonly onHangup?: (() => any) | undefined;
+            readonly onAnswer?: ((video: boolean) => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "toggleMute") => void) & ((event: "toggleHold") => void) & ((event: "transfer") => void) & ((event: "update:active", isActive: boolean) => void) & ((event: "hangup") => void) & ((event: "answer", video: boolean) => void);
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            remoteStream: MediaStream | null;
+            localStream: MediaStream | null;
+            hasVideo: boolean;
+            remoteNumber: string;
+            isConnected: boolean;
+            callStatus: "idle" | "calling" | "incoming" | "connected" | "held";
+            isMuted: boolean;
+            isHeld: boolean;
+            destination?: string;
+            isVideo?: boolean;
+            active?: boolean;
+            autoOpenOnBlur?: boolean;
+        }> & Readonly<{
+            onToggleMute?: (() => any) | undefined;
+            onToggleHold?: (() => any) | undefined;
+            onTransfer?: (() => any) | undefined;
+            "onUpdate:active"?: ((isActive: boolean) => any) | undefined;
+            onHangup?: (() => any) | undefined;
+            onAnswer?: ((video: boolean) => any) | undefined;
+        }>, {
+            open: () => Promise<void>;
+            close: () => void;
+            toggle: () => void;
+            isActive: import('vue').Ref<boolean, boolean>;
+            isSupported: import('vue').Ref<boolean, boolean>;
+            canUsePip: import('vue').ComputedRef<boolean>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            toggleMute: () => any;
+            toggleHold: () => any;
+            transfer: () => any;
+            "update:active": (isActive: boolean) => any;
+            hangup: () => any;
+            answer: (video: boolean) => any;
+        }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{
+        remoteStream: MediaStream | null;
+        localStream: MediaStream | null;
+        hasVideo: boolean;
+        remoteNumber: string;
+        isConnected: boolean;
+        callStatus: "idle" | "calling" | "incoming" | "connected" | "held";
+        isMuted: boolean;
+        isHeld: boolean;
+        destination?: string;
+        isVideo?: boolean;
+        active?: boolean;
+        autoOpenOnBlur?: boolean;
+    }> & Readonly<{
+        onToggleMute?: (() => any) | undefined;
+        onToggleHold?: (() => any) | undefined;
+        onTransfer?: (() => any) | undefined;
+        "onUpdate:active"?: ((isActive: boolean) => any) | undefined;
+        onHangup?: (() => any) | undefined;
+        onAnswer?: ((video: boolean) => any) | undefined;
+    }>, "close" | "toggle" | "open" | "isActive" | "isSupported" | "canUsePip"> & import('vue').ShallowUnwrapRef<{
+        open: () => Promise<void>;
+        close: () => void;
+        toggle: () => void;
+        isActive: import('vue').Ref<boolean, boolean>;
+        isSupported: import('vue').Ref<boolean, boolean>;
+        canUsePip: import('vue').ComputedRef<boolean>;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null;
+}, any>;
+export default _default;