Skip to content
This repository has been archived by the owner on Aug 30, 2024. It is now read-only.

Commit

Permalink
Merge pull request #10 from dolbyio-samples/rc-1.5.4
Browse files Browse the repository at this point in the history 
RC 1.5.4
  • Loading branch information
@vincentsong
vincentsong authored Aug 31, 2022
2 parents f609277 + fd1c8cc commit 2af5dce
Show file tree
Hide file tree
Showing 94 changed files with 2,370 additions and 442 deletions.
34 changes: 18 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@

The application available in this repository demonstrates the capabilities of Dolby.io's video call solution for browser applications, built using React.

This repository will demonstrate how to develop the core Dolby.io features and will also provide an understanding of how our service works. If you run into problems, the full Dolby.io React SDK documentation can be found at <https://docs.dolby.io/communications-apis/docs/js-overview>
This repository demonstrates how to develop the core Dolby.io features and also provides an understanding of how our service works. If you run into problems, the full Dolby.io Communications SDK for JavaScript documentation can be found at <https://docs.dolby.io/communications-apis/docs/js-overview>.

The application provided allows you to evaluate solutions offered by Dolby.io Comms API. You can download the repository yourself, run the application locally and verify that it meets your requirements. If you are interested in more details about Dolby.io’s video conference call capabilities, more information can be found here:
The application provided allows you to evaluate solutions offered by Dolby.io Communications APIs. You can download the repository yourself, run the application locally and verify that it meets your requirements. If you are interested in more details about Dolby.io’s video conference call capabilities, more information can be found here:
<https://dolby.io/products/video-call/>

Its scope covers:
Expand All @@ -19,11 +19,11 @@ Its scope covers:

## Getting Started

The steps below will quickly get you started testing Dolby.io’s capabilities
The steps below will quickly get you started testing Dolby.io’s capabilities.

### How to get a Dolby.io account

Dolby.io Comms API requires you to create a Dolby.io account.
Dolby.io Communications APIs requires you to create a Dolby.io account.
To set it up, you need to go to <https://dashboard.dolby.io/signup/> and complete the form. After confirming your email address, you will be logged in.

### Dolby.io dashboard
Expand All @@ -34,7 +34,7 @@ From this page <https://dashboard.dolby.io/dashboard/applications/summary> you c

### How to obtain access token

To run the application, you need to generate a special access token and paste it into the source code of the app. Go to the _Dashboard_, and find the _Launch Demos_ button. On the next screen, will be a token field where you can copy the client access token to your clipboard. The generated token is active for 12 hours.
To run the application, you need to generate a special access token and paste it into the source code of the app. Go to the _Dashboard_, and find the _Launch Demos_ button. On the next screen, there is a token field where you can copy the client access token to your clipboard. The generated token is active for 12 hours.

## How to run the Video Conferencing app

Expand All @@ -44,25 +44,25 @@ Below is a list of steps necessary to run the application locally.

Use git to clone the repository with
`git clone git@github.com:dolbyio-samples/comms-app-react-videoconference.git`
or simply download using the green button on the top of this page and unzip the repository
or simply download using the green button on the top of this page and unzip the repository.

### Install dependencies

Open the main directory with the terminal. If you are using [Yarn](https://yarnpkg.com/), install dependencies with command
Open the main directory with the terminal. If you are using [Yarn](https://yarnpkg.com/), install dependencies with the following command:

```bash
yarn
```

and if you are using [NPM](https://www.npmjs.com/), type command
and if you are using [NPM](https://www.npmjs.com/), type the following command:

```bash
npm install
```

### Paste the token

Open file [src/App.tsx](https://github.com/dolbyio-samples/comms-app-react-videocall/blob/main/src/App.tsx), find and replace `{YOUR_TOKEN}` with your access token string, prepared previously in [this step](#how-to-obtain-access-token). It should look like this:
Open file [src/App.tsx](./src/App.tsx), find line 14 and replace `{YOUR_TOKEN}` with your access token string, prepared previously in [this step](#how-to-obtain-access-token). It should look like this:

```javascript
return (
Expand All @@ -78,7 +78,7 @@ Open file [src/App.tsx](https://github.com/dolbyio-samples/comms-app-react-video

### Start the app

After installing the dependencies, execute the command
After installing the dependencies, execute the following command:

```bash
yarn dev
Expand All @@ -98,7 +98,7 @@ After printing the appropriate message in the terminal window, open <http://loca

#### Base URL configuration

In case you need to fully configure the application path (e.g. extend localhost:3000/ to localhost:3000/videoconference/) please add the `/.env.production` file with such content:
In case you need to fully configure the application path (e.g. extend localhost:3000/ to localhost:3000/videoconference/) please add the `/.env.production` file with the following content:

```
BASE_URL=<YOUR BASE URL PATH>
Expand All @@ -108,18 +108,20 @@ Change the BASE_URL environment variable and restart the application.

## How to build the Video Conferencing app

Follow the steps of installing dependencies & token configuration from "How to run" section
Follow the steps of installing dependencies & token configuration from the "How to run the Video Conferencing app" section

After installing the dependencies, execute the following command:

After installing the dependencies, execute the command
`yarn build`

This command generated distribution packages in `/dist` directory.

## Known issues & limitations

- Speaker device output selection available only on Chrome
- Speaker selection is available only on Chrome
- Copy conference link works only for root directories by default
- In some cases entering conference may take more than 3 seconds
- On Safari 15.4 and below local user can hear echo
- In some cases entering a conference may take more than three seconds
- On Safari 15.4 and below, the local user can hear echo

## Requirements & supported platforms

Expand Down
10 changes: 6 additions & 4 deletions ...mentation/components/SpeakingIndicator.md → ...entation/components/AnimationIndicator.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
# SpeakingIndicator
# AnimationIndicator

The SpeakingIndicator component is responsible for indicating if a participant is actively talking.
The AnimationIndicator component is responsible for indicating status update by playing a specific animation.

## Props

| Name | Type | Default | Description |
| -------------------- | ----------------------- | ------- | --------------------------------------------------------- |
| `backgroundColor`? | ColorKey | - | The background color of the indicator. |
| `iconColor` ? | ColorKey | - | The color of the displayed speaking icon. |
| `contentColor` ? | ColorKey | - | The color of the animation content. |
| `animationData` | Record<string, unknown> | - | The animation data which could be played by lottie-web
| `size` ? | 's' , 'm' | 'm' | The size of the indicator. |
| `testID` ? | string | - | The unique E2E test handler. |
| `...HTMLDivElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the div element. |
Expand All @@ -17,5 +18,6 @@ The SpeakingIndicator component is responsible for indicating if a participant i
### React

```javascript
return <SpeakingIndicator size="small" />;
import animationData from '<your lottie animation data path>'
return <AnimationIndicator animationData={animationData} />;
```
14 changes: 7 additions & 7 deletions documentation/components/Badge.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ The Badge component generates a small label that can contain additional descript

## Props

| Name | Type | Default | Description |
| -------------------- | ----------------------- | ---------- | --------------------------------------------------------- |
| `content`? | ReactNode | - | The content of the badge. |
| `backgroundColor`? | ColorKey | 'grey.700' | The background color of the badge. |
| `contentColor`? | ColorKey | 'white' | The color of the badge's content. |
| `testID`? | string | | The unique E2E test handler. |
| `...HTMLDivElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the div element. |
| Name | Type | Default | Description |
| -------------------- | ------------------------- | ---------- | --------------------------------------------------------- |
| `content`? | string | number | boolean | - | The content of the badge. |
| `backgroundColor`? | ColorKey | 'grey.700' | The background color of the badge. |
| `contentColor`? | ColorKey | 'white' | The color of the badge's content. |
| `testID`? | string | | The unique E2E test handler. |
| `...HTMLDivElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the div element. |

## Examples

Expand Down
18 changes: 9 additions & 9 deletions documentation/components/CopyConferenceLinkButton.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ The CopyConferenceLinkButton component is responsible for copying the conference

## Props

| Name | Type | Default | Description |
| --------------------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------- |
| `url` | string | - | The conference URL that will be copied to clipboard after clicking. |
| `tooltipText` | string | - | The informative text to display inside the Tooltip component. |
| `successText` | string | - | The text to display for one second in the Tooltip component after a successful completion of the copy action. |
| `tooltipPosition`? | TooltipProps['position'] | top | The position of the Tooltip element. |
| `...IconButtonProps`? | Partial(IconButtonProps) | - | Props to pass to the IconButton component. |
| `testID` ? | string | - | The unique E2E test handler. |

| Name | Type | Default | Description |
|-----------------------|--------------------------|---------|-----------------------------------------------------------------------------------------------------------------------------------|
| `url` | string | - | The conference URL that will be copied to clipboard after clicking. |
| `tooltipText`? | string | - | The informative text to display inside the Tooltip component. |
| `successText`? | string | - | The text to display for one second in the Tooltip component after a successful completion of the copy action. |
| `tooltipPosition`? | TooltipProps['position'] | top | The position of the Tooltip element. |
| `...IconButtonProps`? | Partial(IconButtonProps) | - | Props to pass to the IconButton component. |
| `testID` ? | string | - | The unique E2E test handler. |
| `children`? | ReactNode | - | Children prop for labeled copy button - while using children component is rendered as a regular button with share functionalities |
## Examples

### React
Expand Down
21 changes: 0 additions & 21 deletions documentation/components/DeviceInfo.md
View file

This file was deleted.

56 changes: 28 additions & 28 deletions documentation/components/Icon.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,39 @@ The Icon component is responsible for displaying icon files in SVG format.

## Props

| Name | Type | Default | Description |
| -------------------- | ---------------------------- | --------- | --------------------------------------------------------- |
| `name` | IconsKeys | - | The name of the icon file. |
| `color`? | ColorKey | - | The color of the icon. |
| `colorTone`? | 'light' / 'default' / 'dark' | 'default' | The color tone of the icon. |
| `size`? | 'xxs' / 'xs' / 's' / 'm' | 'm' | The size of the icon. |
| `testID`? | string | - | The unique E2E test handler. |
| `...HTMLDivElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the div element. |
| Name | Type | Default | Description |
| -------------------- | ------------------------------ | --------- | --------------------------------------------------------- |
| `name` | IconComponentName | - | The name of the icon file. |
| `color`? | ColorKey | - | The color of the icon. |
| `colorTone`? | 'light' / 'default' / 'dark' | 'default' | The color tone of the icon. |
| `size`? | 'xxs' / 'xs' / 's' / 'm' / 'l' | 'm' | The size of the icon. |
| `testID`? | string | - | The unique E2E test handler. |
| `...HTMLDivElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the div element. |

## Available icons

| Name | Icon |
| --------------- | ----------------------------------------------------------------------- |
| camera | ![Alt text](../../packages/common/src/assets/icons/camera.svg) |
| camera-off | ![Alt text](../../packages/common/src/assets/icons/camera-off.svg) |
| camera-reverse | ![Alt text](../../packages/common/src/assets/icons/camera-reverse.svg) |
| chat | ![Alt text](../../packages/common/src/assets/icons/chat.svg) |
| copy | ![Alt text](../../packages/common/src/assets/icons/copy.svg) |
| dots-horizontal | ![Alt text](../../packages/common/src/assets/icons/dots-horizontal.svg) |
| dots-vertical | ![Alt text](../../packages/common/src/assets/icons/dots-vertical.svg) |
| handset | ![Alt text](../../packages/common/src/assets/icons/handset.svg) |
| headphones | ![Alt text](../../packages/common/src/assets/icons/headphones.svg) |
| info | ![Alt text](../../packages/common/src/assets/icons/info.svg) |
| microphone | ![Alt text](../../packages/common/src/assets/icons/microphone.svg) |
| microphone-off | ![Alt text](../../packages/common/src/assets/icons/microphone-off.svg) |
| participants | ![Alt text](../../packages/common/src/assets/icons/participants.svg) |
| pin | ![Alt text](../../packages/common/src/assets/icons/pin.svg) |
| present | ![Alt text](../../packages/common/src/assets/icons/present.svg) |
| record | ![Alt text](../../packages/common/src/assets/icons/record.svg) |
| send-message | ![Alt text](../../packages/common/src/assets/icons/send-message.svg) |
| settings | ![Alt text](../../packages/common/src/assets/icons/settings.svg) |
| speaker | ![Alt text](../../packages/common/src/assets/icons/speaker.svg) |
| speaker-off | ![Alt text](../../packages/common/src/assets/icons/speaker-off.svg) |
| camera | ![Alt text](./IconComponents/Camera.tsx) |
| camera-off | ![Alt text](./IconComponents/CameraOff.tsx) |
| camera-reverse | ![Alt text](./IconComponents/CameraReverse.tsx) |
| chat | ![Alt text](./IconComponents/Chat.tsx) |
| copy | ![Alt text](./IconComponents/Copy.tsx) |
| dots-horizontal | ![Alt text](./IconComponents/DotsHorizontal.tsx) |
| dots-vertical | ![Alt text](./IconComponents/DotsVertical.tsx) |
| handset | ![Alt text](./IconComponents/Handset.tsx) |
| headphones | ![Alt text](./IconComponents/Headphones.tsx) |
| info | ![Alt text](./IconComponents/info.tsx) |
| microphone | ![Alt text](./IconComponents/Microphone.tsx) |
| microphone-off | ![Alt text](./IconComponents/Microphone-off.tsx) |
| participants | ![Alt text](./IconComponents/Participants.tsx) |
| pin | ![Alt text](./IconComponents/Pin.tsx) |
| present | ![Alt text](./IconComponents/Present.tsx) |
| record | ![Alt text](./IconComponents/Record.tsx) |
| send-message | ![Alt text](./IconComponents/Send-message.tsx) |
| settings | ![Alt text](./IconComponents/Settings.tsx) |
| speaker | ![Alt text](./IconComponents/Speaker.tsx) |
| speaker-off | ![Alt text](./IconComponents/Speaker-off.tsx) |

## Examples

Expand Down
Loading

0 comments on commit 2af5dce

Please sign in to comment.