@nethesis/phone-island
Version:
NethVoice CTI Phone Island
161 lines (108 loc) • 4.4 kB
Markdown
# NethVoice CTI Phone Island
A fully standalone component for managing calls, video calls, screen sharing and more...
## Builds
Available as component on `npm`
[](https://www.npmjs.com/package/@nethesis/phone-island)
Available as widget on `jsDelivr`
[](https://cdn.jsdelivr.net/gh/nethesis/phone-island/dist-widget/index.widget.js)
[](https://cdn.jsdelivr.net/gh/nethesis/phone-island/dist-widget/index.widget.css)
## Screenshots
### Dark Theme
#### Call started
#### Call incoming
#### Call connected
### Light Theme
#### Call started
#### Call incoming
#### Call connected
## Structure
```mermaid
flowchart LR
Views[Island] --> Call(Call)
Views[Island] --> Play(Player)
Views[Island] --> Chat(Chat)
Call --> CC{{Simple Call}} --- 1CAComp>Audio Component]
Call --> CCC{{Conference Call}} --- 2CAComp>Audio Component]
Call --> CVC{{Video Call}}
CVC{{Video Call}} --- 3CAComp>Audio Component]
CVC{{Video Call}} --- 3CVComp>Video Component]
CVC{{Video Call}} --- 5CVComp>ScreenSharing component]
Call --> CVS{{Video Sources Call}}
CVS{{Video Sources Call}} --- 4CAComp>Audio Component]
CVS{{Video Sources Call}} --- 4CVComp>Video component]
Play --> PA{{Player Voicemail}} --- 6PComp>Player Component]
Play --> PR{{Player Registration}} --- 6PComp>Player Component]
Chat --> CS{{Single Chat}} --- 7CComp>Chat Component]
Chat --> CG{{Group Chat}} --- 7CComp>Chat Component]
```
## Scaffolding
- **widget-build** - contains the build of the widget version
- **widget-example** - contains the usage example of the built widget
- **dist** - contains the component lib build
- **src/index.ts** - is the entry point for the component lib and exports the React component
- **src/index.widget.tsx** - is the entry point for the widget that is built as a single js and css file
## Development
Install deps
```
npm install
```
Run Storybook
```
touch .env.development.local
echo "CONFIG_TOKEN=$(echo -n "<cti_host>:<cti_username>:<cti_token>:<sip_ext>:<sip_secret>" | base64 -w0)" > .env.development.local
npm run dev
```
**Other environment variables can be specified inside the file above:**
```
# The destination number to be called
DEST_NUMBER=<call_destination_number>
# The announcement id to be reproduced as announcement and base64 audio file
ANNOUNCEMENT_ID=<announcement_id>
# The call recording id to be reproduced
CALL_RECORDING_ID=<call_recording_id>
```
The main component can be developed using Storybook. Inside the story is rendered the component exported by the final component library.
Tailwind CSS is enable by default.
## Import locally
Run build and start watch
```
npm run watch
```
Go to the project directory
```
cd <local-project>
```
Link the `./dist` directory
```
npm link <path-to-phone-island/dist>
```
## Build
Build component library
```
npm run build
```
Build widget
```
npm run build:widget
```
Serve the widget
```
npm run serve:widget
```
As you can see the app/component can be built in two ways.
- The component library built with Rollup
- The widget files built with Parcel
```
npm run build-pack
```
It's useful to create a new local version of phone-island that could be imported in any project with some debug command
```
npm run revert-bump
```
It's useful to delete all .tgz created with npm run build-pack command, and reset git version to the original one