voxnix 1.0.1 → 1.0.2

package/README.md

@@ -4,7 +4,7 @@ A React Component SDK for seamless Voice PABX Integration.
 
 ## Overview
 
-Voxnix is a ready-to-use SDK designed to quickly integrate voice and PABX calling features into your React applications. It provides a self-contained dialer UI and automatically handles voice engine connectivity.
+Voxnix is a ready-to-use SDK designed to quickly integrate voice and PABX calling features into your React applications. It provides a self-contained dialer UI and automatically handles voice engine connectivity, including remote media stream attachment and cleanup for Sip.js.
 
 ## Installation
 
@@ -16,13 +16,15 @@ yarn add voxnix
 
 ## Usage
 
-You can use the `Voxnix` component directly in your React application. Pass the required PABX configuration credentials through the `config` prop and use the event callbacks to listen for call states.
+You can use the `Voxnix` component directly in your React application. Pass the required PABX configuration credentials through the `config` prop and use the event callbacks to listen for call states. You can also use a React `ref` to imperatively control the call (e.g., answer, hold, mute, hangup) from your parent component.
 
 ```jsx
-import React, { useState } from 'react';
+import React, { useRef } from 'react';
 import { Voxnix } from 'voxnix';
 
 const App = () => {
+  const voxnixRef = useRef(null);
+
   const pabxConfig = {
     auth: {
       username: "YOUR_USERNAME",
@@ -33,6 +35,8 @@ const App = () => {
 
   const handleIncomingCall = (callData) => {
     console.log('Incoming call notification:', callData);
+    // You can answer programmatically
+    // voxnixRef.current.answer();
   };
 
   const handleCallAnswered = () => {
@@ -47,12 +51,18 @@ const App = () => {
     console.log('PABX Registration Status:', status); // "REGISTERED" | "FAILED"
   };
 
+  // Example Call Controls
+  const toggleMute = (isMuted) => voxnixRef.current?.mute(isMuted);
+  const toggleHold = (isOnHold, setIsOnHold) => voxnixRef.current?.hold(isOnHold, setIsOnHold);
+  const endCall = () => voxnixRef.current?.hangup();
+
   return (
     <div style={{ padding: '20px' }}>
       <h1>Voice Integration App</h1>
       
       {/* Voxnix Voice Engine & UI Component */}
       <Voxnix 
+        ref={voxnixRef}
         config={pabxConfig}
         onIncomingCall={handleIncomingCall}
         onCallAnswered={handleCallAnswered}
@@ -77,6 +87,22 @@ export default App;
 | `onCallUnanswered` | `Function` | Callback triggered when an incoming call is not answered. |
 | `onRegisterStatus` | `Function` | Callback triggered when the PABX registration status changes. |
 
+## Ref API (Call Controls)
+
+You can access these methods by passing a `ref` to the `Voxnix` component:
+
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `answer()` | - | Answers an incoming call. |
+| `reject()` | - | Rejects an incoming call. |
+| `hangup()` | - | Ends the current active call. |
+| `mute(isMuted)` | `isMuted: boolean` | Mutes or unmutes the local microphone. |
+| `hold(isOnHold, setIsOnHold)` | `isOnHold: boolean, setIsOnHold: function` | Puts the call on hold or resumes it. Passes `setIsOnHold` to allow the SDK to asynchronously update the parent UI state when the re-INVITE succeeds. |
+
+## Media Handling (Sip.js)
+
+Voxnix handles remote media setup automatically. When a call state becomes `Established`, Voxnix will attach the incoming audio stream to an invisible `<audio id="voxnix-remote-audio" />` element. When the call is terminated, the media is safely cleaned up.
+
 ## Development
 
 To run the project locally for development: