npm:wwtc-sdk | Skypack

README

Getting started
Available Scripts
- npm start
- npm run build
Components
Conference
State Provider
Languages
Override CSS

Getting Started

This SDK provides the components to develop each version of WWTC stack.

npm install --save wwtc-sdk

The library is developed with React.js (> v.0.16), include React Hooks and some Class Component.

IMPORTANT: Must add stylesheet at the top of the main file. If you would like to override some styles, you have to add the .css files after the main styles of the library.

import React, { useEffect } from 'react';

import { Subtitles, Chat, MainWrapper } from 'wwtc-sdk';
import 'wwtc-sdk/dist/index.css';

// override styles
import 'css/override.css'

const endpointSession = {
    method: 'GET',
    url: 'https://api.worldwidetechconnections.com/api/Session',
};

const endpointTranslate = {
    method: 'GET',
    url:
        'https://exampleurl.com/api/Translation?text=:text&sourceLanguage=:sourceLanguage&targetLanguage=:targetLanguage&vendor=:vendor&token=:token',
    valueResponse: 'targetText', // Value name that have the text translated in the API endpoint response
};

// You can set static token to don't make API request /Session
// NOTE: set token undefined if the endpoint must request authorization token
const vendors = {
    ttt: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "static token" || undefined
        },
        ...
    ],
    stt: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "static token" || undefined
        },
        ...
    ],
    tts: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "static token" || undefined
        },
        ...
    ],
};

function App() {
    return (
        <div>
            <MainWrapper
                audio={true}
                video={true}
                endpointSession={endpointSession}
                vendors={vendors}
            >
                <WrapperComponents />
            </MainWrapper>
        </div>
    );
}

function WrapperComponents(props) {
    // values from autologin
    const { initName, initLanguage, initGender } = props;

    return (
        <div>
            <Chat.ChatUI
                username="John Doe"
                initialSourceLanguage="english-united-states"
                initialTargetLanguage="english-united-states"
                initialVisible={true}
                endpoint={endpointTranslate}
                style={{
                    width: '98%',
                    height: 'calc(65% - 1em)',
                    margin: '1em auto',
                }}
            />
            <Subtitles.SubtitlesUI
                username="John Doe"
                initialSourceLanguage="english-united-states"
                initialTargetLanguage="english-united-states"
                initialVisible={true}
                endpoint={endpointTranslate}
                style={{
                    width: '98%',
                    height: 'calc(65% - 1em)',
                    margin: '1em auto',
                }}

            />
        </div>
    );
}

export default App;

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Components

This project setup supports ES6 modules thanks to Babel.
While you can still use require() and module.exports, we encourage you to use import and export instead.

`MainWrapper`

Main component that wrap the initial setup of the interface. Set providers list, API endpoint (/Session) to get tokens of providers, handle values to test offline/online interface.

Props

name	type	required	default	detail
autologin	bool	false	true	Get Username, roomName, language and gender from URL (autologin = true) or from MainWrapper props (auu
debugInterface	bool	false	false	Allow test only UI or components logic without calling API endpoint /Session
endpointSession	object	false	{ method: "", url: ""}	API endpoint to get tokens from api_key given
gender	string	true	"male"	User gender to play TTS
language	string	true	""	Code of language. e.g. en-US
roomName	string	true	""	Name of channel/conference to connect users
userName	string	true	""	Name of user
vendors	object	false	{ ttt: [], stt: [], tts: [] }	List of providers api_keys. See object below.

// vendors/provider list
// VENDOR_NAME i.e. "google", "microsoft", "yandex", etc.

const vendors = {
    ttt: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "STATIC_TOKEN" || null
        },
        ...
    ],
    stt: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "STATIC_TOKEN" || null
        },
        ...
    ],
    tts: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "STATIC_TOKEN" || null
        },
        ...
    ],
};

`Subtitles`

This component include:

SubtitlesUI
buildMessageSubtitle

import { Subtitles } from 'wwtc-sdk';

// Must set params with ":" at start. This allows handling dynamic request params
const endpointTranslate = {
    method: 'GET',
    url:
        'https://core.worldwidetechconnections.com/services/ttt/:sourceLanguage/:targetLanguage?text=:text',
    valueResponse: 'translated_text', // Value name that have the text translated in the API endpoint response_
};

function WrapperComponents() {
    return (
        <Subtitles.SubtitlesUI
            username="John Doe"
            initialSourceLanguage="spanish-international"
            initialTargetLanguage="spanish-international"
            initialVisible={true}
            defaultBilingual={false}
            provider="pubnub"
            endpoint={endpointTranslate}
        />
    );
}

export default WrapperComponents;

Props

Subtitles component accept following props. Instructions on how to use them are below.

name	type	required	default	detail	example
username	string	true	""	Subtitle text sender.	John Doe
initialSourceLanguage	string	true	""	Code of source language.	en, es, fr
initialTargetLanguage	string	true	""	Code of target language	es, fr, en
initialVisible	bool	false	true	Show/hide visual component	true
provider	string	true	""	Third party services that handles p2p communication	"pubnub"
style	object	false	{}	Set custom styles to wrapper of Subtitles component, used to set width and/or height of wrapper.	{ width: 300px, height: 500px}
showInput	bool	false	true	Show/hide input text	true, false
showButtonCloseComponent	bool	false	true	Show/hide (X) to close Subtitles component. Useful when Subtitles is the only component in the interface.	true, false
showSourceLanguageSelect	bool	false	true	Show/hide Source language select
showTargetLanguageSelect	bool	false	true	Show/hide Target language select
endpoint	object	true	{}	Endpoint to request translation language	{ method: 'GET', url: 'https://core.worldwidetechconnections.com/services/ttt/:sourceLanguage/:targetLanguage?text=:text' };
speechRecognition	bool	false	false	Allows get speech recognition. Text recognized will be shown in the chat component	true, false
ttsOption	bool	false	false	Allows play resulted audio from /TextToSpeech endpoint	true, false
postRequestSubtitles	function	false	()	Handle the text, sourceLanguage, targetLanguage and vendor after API response	See example below
render	function	false	()	Useful to add functions to the Options Header of the Component. i.e.: Download content button	https://reactjs.org/docs/render-props.html
languagesPreTranslate	array	false	null	Useful to fetch translations before send pubnub message with text translated	["spanish_united_states", "french-france"]
defaultBilingual	bool	false	false	Enable/Disable bilingual option by default	["spanish_united_states", "french-france"]

// i.e. preRequestSubtitles()

function WrapperComponents() {
    const preRequestSubtitles = async (text, sourceLanguage, targetLanguage, vendor) => {
        var newText = null;
        if (sourceLanguage === 'english-united-states' && targetLanguage === 'french') {
            newText = text.replace('someWordToDelete', '');
        } else {
            newText = text;
        }

        // Must return the same object structure
        return {
            text: newText,
            sourceLanguage,
            targetLanguage,
            vendor,
        };
    };
    return <Subtitles.SubtitlesUI {...props} preRequestSubtitles={preRequestSubtitles} />;
}

`Chat`

This component include:

ChatUI
buildMessageChat

import { Chat } from 'wwtc-sdk';

// Must set params with ":" at start. This allows handling dynamic request params
const endpointTranslate = {
    method: 'GET',
    url:
        'https://core.worldwidetechconnections.com/services/ttt/:sourceLanguage/:targetLanguage?text=:text',
    valueResponse: 'translated_text', // Value name that have the text translated in the API endpoint response_
};

function WrapperComponents() {
    return (
        <Chat.ChatUI
            username="John Doe"
            initialSourceLanguage="spanish-international"
            initialTargetLanguage="spanish-international"
            initialVisible={true}
            provider="pubnub"
            endpoint={endpointTranslate}
        />
    );
}

export default WrapperComponents;

Props

Chat component accept following props. Instructions on how to use them are below.

name	type	required	default	detail	example
username	string	true	""	Subtitle text sender.
initialSourceLanguage	string	true	""	Code of source language.	en, es, fr
initialTargetLanguage	string	true	""	Code of target language	es, fr, en
initialVisible	bool	false	true	Show/hide visual component	true
provider	string	true	""	Third party services that handles p2p communication	"pubnub"
style	object	false	{}	Set custom styles to wrapper of Subtitles component, used to set width and/or height of wrapper.	{ width: 300px, height: 500px}
endpoint	object	true	{}	Endpoint to request translation language	{ method: 'GET', url: 'https://core.worldwidetechconnections.com/services/ttt/:sourceLanguage/:targetLanguage?text=:text' };
speechRecognition	bool	false	false	Allows get speech recognition. Text recognized will be shown in the chat component	true, false

`Text to Speech`

This component include:

TextToSpeechUI

import { TextToSpeech } from 'wwtc-sdk';

const endpointTextToSpeech = {
    method: 'GET',
    url:
        'https://api.worldwidetechconnections.com/api/TextToSpeech?text=:text&sourceLanguage=:sourceLanguage&voice=:voice&vendor=:vendor&token=:token',
};

// Used with hook (functional component)
function WrapperComponents() {
    const [{ tts }, dispatch] = useStateValue();

    // Dispatch action to start/stop play audio of text
    const handleTTS = () => {
        dispatch({
            type: 'TTS_changeActive',
            value: !tts.active,
        });
    };
    return (
        <div>
            <button type="button" onClick={handleSTT}>
                {tts.active ? 'Stop' : 'Start'} TTS
            </button>
            <TextToSpeech.TextToSpeechUI
                initialVendor="readspeaker"
                initialLanguage="en"
                initialGender="male"
                endpoint={endpointTextToSpeech}
                style={{
                    width: '98%',
                    height: 'calc(35% - 1em)',
                    margin: '1em auto',
                }}
            />
        </div>
    );
}

export default WrapperComponents;

Props

name	type	required	default	detail	example
initialLanguage	string	true	""	Language code	en
initialGender	string	true	""	User gender	male
initialVisible	bool	true	false	Visible component	true
initialActive	bool	true	false	Active component logic function (play audio)	true
withUI	bool	true	false	This component can work without showing visual element. This flag allow show or hide visual component, the logic function still working anyway.	true
style	object	false	{}	Set custom styles to wrapper of Subtitles component, used to set width and/or height of wrapper.	{ width: 300px, height: 500px }
endpoint	object	true	{}	Endpoint to request audio from text given	endpointTextToSpeech example above
fetchCustom	function	false	null	Function to make custom API request and handle response. Object must be returned: { downloadUrl, indexCall }

`Speech to Text`

This component include:

SpeechToTextUI

import { SpeechToText } from 'wwtc-sdk';

const endpointSpeechToText = {
    method: 'POST',
    url:
        'https://api.worldwidetechconnections.com/api/SpeechToText?sourceLanguage=:sourceLanguage&vendor=:vendor&token=:token',
};

// Used with hook (functional component)
function WrapperComponents() {
    const [{ stt }, dispatch] = useStateValue();

    // Dispatch action to start/stop capture audio
    // and handle recognized speech to send request to API endpoint
    const handleSTT = () => {
        dispatch({
            type: 'STT_changeActive',
            value: !stt.active,
        });
    };

    return (
        <div>
            <button type="button" onClick={handleSTT}>
                {stt.active ? 'Stop' : 'Start'} speech recognition
            </button>
            <SpeechToText.SpeechToTextUI
                username="John Doe"
                initialLanguage="en-US" // right format: xx-XX
                initialTarget="subtitles" // chat or subtitles
                endpoint={endpointSpeechToText}
                style={{
                    width: '98%',
                    height: 'calc(35% - 1em)',
                    margin: '1em auto',
                }}
            />
        </div>
    );
}

export default WrapperComponents;

Props

name	type	required	default	detail	example
username	string	true	""	Username to send Subtitles (component) message	John Doe
initialLanguage	string	true	""	Language code	en
initialTarget	string	true	"subtitles"	Target component where the recognized text will be sent	"subtitles" \|\| "chat"
initialVisible	bool	false	true	Show/hide component when is mounted	true
initialActive	bool	false	false	Active component logic function (play audio) when component is mounted	true
withUI	bool	false	true	This component works without showing visual element. This prop allow show or hide visual component, the logic function still working anyway.	true
style	object	false	{}	Set custom styles to wrapper of Subtitles component, used to set width and/or height of wrapper.	{ width: 300px, height: 500px }
endpoint	object	true	{}	Endpoint to request text recognition	endpointSpeechToText example above

`State Provider`

The state provider is the main component of the sdk. It handle the global state of the app, like Redux. StateProvider is a upgraded version of React Context to handle reducers and states of each component (Subtitles, Chat, Speech To Text, Text To Speech, etc). This component would be at the top layer of the main app.

import { StateProvider } from 'wwtc-sdk';

function WrapperComponents() {
    return (
        <div>
            <StateProvider>
                <WrapperComponents />
            </StateProvider>
        </div>
    );
}

export default WrapperComponents;

You can access to the component state trough useStateValue, it's the Context similarly to React Context. Must be used inside a functional component (React hook)

To get state component information:

import { useStateValue, Chat } from 'wwtc-sdk';

function WrapperComponents() {
    const [{ chat, subtitles }, dispatch] = useStateValue();

    /*
        state chat:
        chat = {
            sourceLanguage: "",
            targetLanguage: "",
            visible: true,
        }
    */
    const chatIsVisible = () => {
        console.log(chat.visible);
    };

    const showChat = () => {
        dispatch({
            type: 'CHAT_changeVisible',
            value: true,
        });
    };

    const hideChat = () => {
        dispatch({
            type: 'CHAT_changeVisible',
            value: false,
        });
    };
    return (
        <div>
            <Chat.ChatUI />
        </div>
    );
}

export default WrapperComponents;

Action list by Component

To change the state of any component, you need to dispatch an action.

dispatch({
    type: 'action_name',
    value: 'value_action',
});

Chat

type	value	detail	example
CHAT_changeSourceLanguage	string	Change source language (typing)	{id: 0, label: 'English, USA ', value: 'en', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png'}
CHAT_changeTargetLanguage	string	Change target language	{id: 0, label: 'English, USA ', value: 'en', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png'}
CHAT_changeVisible	bool	Visible component	true

Subtitles

type	value	detail	example
SUBTITLES_changeSourceLanguage	object	Change source language (typing)	{id: 0, label: 'English, USA ', value: 'en', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png'}
SUBTITLES_changeTargetLanguage	object	Change target language	{id: 0, label: 'English, USA ', value: 'en', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png'}
SUBTITLES_changeVisible	bool	Visible component	true
SUBTITLES_setSttToSubs	object	Object to display new subtitle in the component from other componente. e.g. Text recognized from STT module.	{ name: 'username', speakerLanguage: 'en', text: 'This is a test' }

STT (Speech to text)

type	value	detail	example
STT_changeLanguage	object	Change language	{id: 0, label: 'English, USA ', value: 'en-US', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png'}
STT_changeActive	bool	Logic component (start or stop capture recognition)	true
STT_changeVisible	bool	Visible component	true

TTS (Speech to text)

type	value	detail	example
TTS_changeLanguage	object	Change language	{id: 0, label: 'English, USA ', value: 'en-US', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png',}
TTS_changeActive	bool	Logic component (play audio of text)	true
TTS_changeVisible	bool	Visible component	true
TTS_changeGender	string	Change gender voice	male
TTS_setNewTTS	object	Object to play new audio TTS. e.g. Text from subtitle component.	{ language: 'en', text: 'This is a test' }

`Override CSS`

wwtc-sdk includes the dictionaries function. You must provide a JSON file in the /public/dictionaries path named dictionaries.json That file must contain one array of "dictionaries" translations to replace text in Subtitles Component.

Dictionaries works if you provide the dictionaries.json file. If you don't provide it, nothing happens.

/*
// dictionaries.json
[
    {
        "sourceLanguage": "english",
        "targetLanguage": "french",
        "replacements": [
            {
                "from": "4AMLD",
                "to": "4AMLD"
            },
            {
                "from": "5AMLD",
                "to": "5AMLD"
            },
            {
                ...
            }
        ]
    },
    {
        "sourceLanguage": "english",
        "targetLanguage": "spanish",
        "replacements": [
            {
                "from": "4AMLD",
                "to": "4AMLD"
            },
            {
                "from": "5AMLD",
                "to": "5AMLD"
            },
            {
                ...
            }
        ]
    }
*/

`Languages`

This function provide languages-idioms of differents vendor. We handle Google, Microsoft, Deepl, Yandex, Sogou for Translate. By default, these languages are included in any component of the library (Chat, Subtitles, Speech to Text, Text to Speech).

import { fetchLanguages } from 'wwtc-sdk';

console.log(languages.chatDefaultLanguages);
/*
[
    {
        id: 0,
        text: 'English United States',
        code: 'english-united-states',
        flag: 'united_states',
    },
    { ... }
]
*/

`Override CSS`

If you wants to change some styles of the components, like header, buttons or backgrounds colors, etc. Only have to override some CSS variables.

:root {
    --main-primary: red; // primary color
    --main-default: black; // default color
}

List of variables by default:

--main-primary: #337ab7;
--main-default: #acaeb7;
--main-secondary: #555;
--main-white: white;
--main-white-dark: #eeeeee;
--main-gray: gray;
--main-gray-dark: #444;
--main-gray-light: #ccc;

To apply changes, needs to write the new styles at the top of the CSS document (index.css).

/index.css

:root {
    --main-primary: red;
    --main-default: black;
}

wwtc-sdk

Usage no npm install needed!

README

Table of Contents

Getting Started

Available Scripts

`npm start`

`npm run build`

Components

`MainWrapper`

Props

`Subtitles`

Props

`Chat`

Props

`Text to Speech`

Props

`Speech to Text`

Props

`State Provider`

Action list by Component

Chat

Subtitles

STT (Speech to text)

TTS (Speech to text)

`Override CSS`

`Languages`

`Override CSS`