@chaterafrikang/call-ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -0
- package/dist/index.cjs +1765 -0
- package/dist/index.js +1743 -0
- package/package.json +33 -0
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# @chaterafrikang/call-ui
|
|
2
|
+
|
|
3
|
+
Drop-in, themeable **1:1 voice/video call UI** for [`@chaterafrikang/sdk`](https://www.npmjs.com/package/@chaterafrikang/sdk).
|
|
4
|
+
|
|
5
|
+
It's **symmetric** — both participants render the same component — and **role-neutral**: identities and labels come from config, so it works for doctor↔patient, agent↔customer, tutor↔student, etc. If you'd rather build your own UI, use the headless SDK directly; this is the batteries-included default.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @chaterafrikang/call-ui @chaterafrikang/sdk react react-dom
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```jsx
|
|
16
|
+
import { ChatAfrika } from '@chaterafrikang/sdk';
|
|
17
|
+
import CallUI, { useCall } from '@chaterafrikang/call-ui';
|
|
18
|
+
|
|
19
|
+
function Call({ convo }) { // convo = an SDK conversation you've joined
|
|
20
|
+
const controller = useCall(convo); // one controller drives the whole flow
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<>
|
|
24
|
+
<button onClick={() => controller.actions.openLobby('video')}>Video call</button>
|
|
25
|
+
|
|
26
|
+
<CallUI
|
|
27
|
+
controller={controller}
|
|
28
|
+
config={{
|
|
29
|
+
logoText: 'CA',
|
|
30
|
+
sessionTitle: 'Telemedicine Consultation',
|
|
31
|
+
sessionSubtitle: 'Secured via ChaterAfrika',
|
|
32
|
+
primaryColor: '#2563EB',
|
|
33
|
+
self: { name: 'Kofi Asante', role: 'Patient' },
|
|
34
|
+
peer: { name: 'Dr. Aisha Mensah', role: 'Physician' },
|
|
35
|
+
onRate: (n) => {/* POST /sdk/conversations/:id/call-rating */},
|
|
36
|
+
}}
|
|
37
|
+
/>
|
|
38
|
+
</>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Incoming calls appear automatically (the controller listens for `call_invite`). The overlay renders nothing while idle.
|
|
44
|
+
|
|
45
|
+
## Screens
|
|
46
|
+
|
|
47
|
+
Lobby (device setup + preview) · Incoming · Calling · Active Video · Active Voice · Reconnecting · Call Ended (with rating) · Permission Denied · in-call **Settings** (devices, video quality, noise suppression, echo cancellation, low-bandwidth) · People / Chat panels · screen share · minimize. Responsive desktop → mobile. Self-contained styles (no CSS framework needed).
|
|
48
|
+
|
|
49
|
+
## Config
|
|
50
|
+
|
|
51
|
+
| key | purpose |
|
|
52
|
+
|---|---|
|
|
53
|
+
| `logoText`, `sessionTitle`, `sessionSubtitle` | branding on the call header |
|
|
54
|
+
| `primaryColor` | theme colour |
|
|
55
|
+
| `self`, `peer` | `{ name, role, avatar }` for each participant |
|
|
56
|
+
| `onRate(n)` | post-call star rating (1–5) |
|
|
57
|
+
| `onChat` | optional hook when the chat panel opens |
|
|
58
|
+
|
|
59
|
+
## Requirements
|
|
60
|
+
|
|
61
|
+
- HTTPS (WebRTC / `getUserMedia`)
|
|
62
|
+
- Screen share and speaker selection are Chromium/desktop only
|