react-sip-kit 0.3.62 → 0.5.19

package/README.md

@@ -8,11 +8,11 @@ Supports **audio/video calls**, **recording**, **screen sharing**, and **device
 ## ✨ Features
 
 * 📞 **Audio & Video Calls** — with automatic device detection
-* 🎥 **Video support** — manage local & remote streams seamlessly
+* 🎥 **Video Support** — manage local & remote streams seamlessly
 * 🔴 **Call Recording** — audio and video recording out of the box
 * 🖥️ **Screen Sharing** — during video calls
 * 🎧 **Device Management** — select audio/video input & output devices
-* 🔄 **Multi-line Support** — handle multiple concurrent calls
+* 🔄 **Multi-account & Multi-line Support** — handle multiple SIP accounts and concurrent calls
 * ⚡ **TypeScript-first** — fast, modular, type-safe APIs
 * 🛠️ **Configurable & Extensible** — tailor to your SIP setup
 
@@ -30,41 +30,72 @@ yarn add react-sip-kit
 
 ## 🚀 Basic Usage
 
-### 1. Wrap your app with `SipProvider`
+### 1. Initialize a global `SipManager`
 
-```tsx
-import { SipProvider } from 'react-sip-kit';
+Instead of wrapping your app with a provider, you now create a single `SipManager` instance and add accounts dynamically.
 
-<SipProvider
-  configs={{
+```tsx
+// main.ts
+import App from './App';
+import { SipManager } from 'react-sip-kit';
+import { StrictMode, useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+------------------------------------------------------------
+export const SipConnection = new SipManager(); // Initilizing SipManager
+------------------------------------------------------------
+const Providers = () => {
+  const configs = [{
     account: {
-      domain: 'your.sip.domain',
-      username: 'your-username',
-      password: 'your-password',
-      wssServer: 'your.sip.domain',
+      domain: 'sip.example.com',
+      username: '1010',
+      password: 'password',
+      wssServer: 'sip.example.com',
       webSocketPort: '8089',
       serverPath: '/ws',
     },
-  }}
->
-  <App />
-</SipProvider>
+    // ...(other configs)
+  }]
+
+  useEffect(() => {
+    // Add new configs dynamically
+    configs.forEach((config) => {
+      SipConnection.add(config);
+    });
+  }, [configs]);
+
+  return (
+    <StrictMode>
+      {configs.map((config) => (
+        <App key={config.account.username} username={config.account.username} />
+      ))}
+    </StrictMode>
+  );
+};
+
+createRoot(document.getElementById('root')!).render(<Providers />);
 ```
 
 ---
 
-### 2. Make calls with hooks
+### 2. Access SIP state and methods (per account)
+
+Each account is keyed by its **username**.
+You can fetch **methods** and **watch state** like this:
 
 ```tsx
-import { useSipProvider, useSessionMethods } from 'react-sip-kit';
+// App.tsx
+import { SipConnection } from './main';
 
-function DialPad() {
-  const { status } = useSipProvider();
-  const { dialByNumber } = useSessionMethods();
+function App({ username }: { username: string }) {
+  const { dialByNumber } = SipConnection.methods(username);
+  const { watch } = SipConnection.get(username);
+  const { lines, status } = watch();
 
   return (
     <>
-      <p>Status: {status}</p>
+      <h2>
+        Web Phone {username} — {status}
+      </h2>
       <button onClick={() => dialByNumber('audio', '1012')}>Call 1012</button>
       <button onClick={() => dialByNumber('video', '1012')}>Video Call 1012</button>
     </>
@@ -74,7 +105,37 @@ function DialPad() {
 
 ---
 
-### 3. Render media streams
+### 3. Watch line/session data with `useWatchSessionData`
+
+For fine-grained updates, subscribe to session fields:
+
+```tsx
+import { useWatchSessionData } from 'react-sip-kit';
+
+function RecordingStatus({ lineNumber }: { lineNumber: number }) {
+  const isRecording = useWatchSessionData({
+    lineNumber,
+    name: 'recordMedia.recording',
+  });
+
+  return <p>Recording: {isRecording ? 'Yes' : 'No'}</p>;
+}
+```
+
+You can also watch multiple fields:
+
+```tsx
+const [localMediaStreamStatus, isRecording] = useWatchSessionData({
+  lineNumber: 1,
+  name: ['localMediaStreamStatus', 'recordMedia.recording'],
+});
+```
+
+---
+
+### 4. Render media streams
+
+Media components (`<Video/>` & `<Audio/>`) are bound per line:
 
 ```tsx
 import { VideoStream, AudioStream } from 'react-sip-kit';
@@ -89,14 +150,24 @@ import { VideoStream, AudioStream } from 'react-sip-kit';
 
 ## ⚙️ Configuration
 
-All SIP and media settings can be customized via the `configs` prop.
-See [types.ts](https://github.com/shervin-ghajar/react-sip-kit/blob/main/src/configs/types.ts) for the full options.
+Each account supports SIP and media options:
 
 ```ts
 {
-  account: { ... },
+  account: {
+    domain: 'your.sip.domain',
+    username: 'user',
+    password: 'secret',
+    wssServer: 'your.sip.domain',
+    webSocketPort: '8089',
+    serverPath: '/ws',
+  },
   features: { enableVideo: true },
-  media: { audioInputDeviceId: 'default' },
+  media: {
+    audioInputDeviceId: 'default',
+    audioOutputDeviceId: 'default',
+    videoInputDeviceId: 'default',
+  },
   registration: { registerExpires: 3600 },
 }
 ```
@@ -105,26 +176,24 @@ See [types.ts](https://github.com/shervin-ghajar/react-sip-kit/blob/main/src/con
 
 ## 💡 Best Practices
 
-* Use hooks (`useSipProvider`, `useSessionMethods`) for SIP state & actions.
-* Render media components only for active calls.
-* Handle device permissions and selection gracefully.
-* Reinitialize streams with `initiateRemoteMediaStreams` or `initiateLocalMediaStreams` if `<video>`/`<audio>` is rendered after the call starts.
-* Prefer TypeScript for better DX and safety.
+* Always pass the `username` when calling `SipConnection.methods(username)` or `SipConnection.get(username)`.
+* Use `.watch()` for reactive state (`lines`, `status`).
+* Use `useWatchSessionData` for **line-specific** updates (mute, hold, video state, recording, etc.).
+* Render `<VideoStream>` and `<AudioStream>` **only for active calls**.
+* Manage device permissions (mic/camera) upfront.
+* If adding accounts dynamically, call `SipConnection.add(config)` for each.
 
 ---
 
 ## 🧑‍💻 Full Example
 
-A full working demo (with call controls, transfer, hold, recording, etc.) is available in the
-[`/example`](https://github.com/shervin-ghajar/react-sip-kit/tree/main/example) folder of this repo.
-
-This example demonstrates:
+See the [`/example`](https://github.com/shervin-ghajar/react-sip-kit/tree/main/example) folder for:
 
-* Multi-line SIP handling
-* Answering/rejecting calls
-* Call transfer, hold, mute
-* Recording and screen sharing
-* Local/remote audio & video streams
+* Multiple SIP accounts in one UI
+* Audio & video calls
+* Hold, mute, attended transfer
+* Call recording & screen sharing
+* Local & remote media rendering
 
 ---
 
@@ -140,5 +209,4 @@ MIT License
 
 * GitHub: [@shervin-ghajar](https://github.com/shervin-ghajar)
 * NPM: [react-sip-kit](https://www.npmjs.com/package/react-sip-kit)
-* Repository: [react-sip-kit](https://github.com/shervin-ghajar/react-sip-kit)
-
+* Repository: [react-sip-kit](https://github.com/shervin-ghajar/react-sip-kit)

package/dist/configs/types.d.ts

@@ -36,8 +36,8 @@ export interface SipAdvancedConfig {
     chatEngine: string;
 }
 export interface SipRecordingConfig {
-    videoResampleSize: 'HD' | 'FHD';
-    recordingVideoSize: 'HD' | 'FHD';
+    videoResampleSize: string;
+    recordingVideoSize: string;
     recordingVideoFps: number;
     recordingLayout: string;
 }

package/dist/constructors/index.d.ts

@@ -1,2 +1 @@
 export * from './line';
-export * from './audioBlobs';

package/dist/events/registration/index.d.ts

@@ -1,15 +1,16 @@
+import { SipAccountConfig } from '../../configs/types';
 import { SipUserAgent } from '../../types';
 /**
  * Called when account is registered
  */
-export declare function onRegistered(userAgent: SipUserAgent): void;
+export declare function onRegistered(username: SipAccountConfig['username'], userAgent: SipUserAgent): void;
 /**
  * Called if UserAgent can connect, but not register.
  * @param {string} response Incoming request message
  * @param {string} cause Cause message. Unused
  **/
-export declare function onRegisterFailed(response: any, cause: any): void;
+export declare function onRegisterFailed(username: SipAccountConfig['username'], response: any, cause: any): void;
 /**
  * Called when Unregister is requested
  */
-export declare function onUnregistered(userAgent: SipUserAgent): void;
+export declare function onUnregistered(username: SipAccountConfig['username'], userAgent: SipUserAgent): void;

package/dist/{hooks/useSessionEvents → events/session}/index.d.ts

@@ -1,8 +1,11 @@
+import { SipAccountConfig } from '../../configs/types';
 import { LineType, SipSessionDescriptionHandler, SipSessionType } from '../../store/types';
 import { CallbackFunction } from '../../types';
 import { Bye, Message } from 'sip.js';
 import { IncomingRequestMessage, IncomingResponse } from 'sip.js/lib/core';
-export declare const useSessionEvents: () => {
+export declare const sessionEvents: ({ username }: {
+    username: SipAccountConfig["username"];
+}) => {
     onInviteCancel: (lineObj: LineType, response: IncomingRequestMessage, callback?: CallbackFunction<any>) => void;
     onInviteAccepted: (lineObj: LineType, videoEnabled: boolean, response?: IncomingResponse) => Promise<void>;
     onInviteTrying: (lineObj: LineType, response: IncomingResponse) => void;

package/dist/events/transport/index.d.ts

@@ -1,5 +1,6 @@
+import { SipAccountConfig } from '../../configs/types';
 import { SipUserAgent } from '../../types';
-export declare function onTransportConnected(userAgent?: SipUserAgent | undefined): void;
-export declare function onTransportConnectError(error: Error, userAgent?: SipUserAgent | undefined): void;
-export declare function onTransportDisconnected(userAgent: SipUserAgent): void;
-export declare function reconnectTransport(userAgent?: SipUserAgent | undefined): void;
+export declare function onTransportConnected(username: SipAccountConfig['username'], userAgent?: SipUserAgent | null): void;
+export declare function onTransportConnectError(error: Error, username: SipAccountConfig['username'], userAgent?: SipUserAgent | null): void;
+export declare function onTransportDisconnected(username: SipAccountConfig['username'], userAgent: SipUserAgent): void;
+export declare function reconnectTransport(username: SipAccountConfig['username'], userAgent?: SipUserAgent | null): void;

package/dist/hooks/index.d.ts

@@ -1,2 +1,2 @@
-export * from './useSessionMethods';
-export * from './useSessionEvents';
+export * from './useSipManager';
+export * from './useWatchSessionData';

package/dist/hooks/useDeep/index.d.ts

@@ -0,0 +1 @@
+export declare function useDeep<S, U>(selector: (state: S) => U): (state: S) => U;

package/dist/hooks/useSipManager/index.d.ts

@@ -0,0 +1,8 @@
+import { SipAccountConfig } from '../../configs/types';
+import { LineType } from '../../store/types';
+export declare function useSipManager({ username }: {
+    username: SipAccountConfig['username'];
+}): () => {
+    status: import("../../store/types").SipUserAgentStatus | undefined;
+    lines: LineType[];
+};

package/dist/hooks/useWatchSessionData/index.d.ts

@@ -0,0 +1,23 @@
+import { SipSessionDataType } from '../../store/types';
+type Primitive = string | number | boolean | symbol | null | undefined;
+type Path<T> = {
+    [K in keyof T & string]: T[K] extends Primitive | Array<any> ? K : K | `${K}.${Path<T[K]>}`;
+}[keyof T & string];
+/** Resolve the value type of a dot-path string. */
+type PathValue<T, P extends string> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? Rest extends string ? PathValue<T[K], Rest> : never : never : P extends keyof T ? T[P] : never;
+/** ---------- Hook overloads ---------- */
+export declare function useWatchSessionData(props: {
+    lineNumber: number;
+    name?: undefined;
+}): SipSessionDataType;
+export declare function useWatchSessionData<P extends Path<SipSessionDataType>>(props: {
+    lineNumber: number;
+    name: P;
+}): PathValue<SipSessionDataType, P>;
+export declare function useWatchSessionData<const P extends readonly Path<SipSessionDataType>[]>(props: {
+    lineNumber: number;
+    name: P;
+}): {
+    [K in keyof P]: PathValue<SipSessionDataType, P[K] & string>;
+};
+export {};