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

Commit 2af5dce

Browse files
authored
Merge pull request #10 from dolbyio-samples/rc-1.5.4
RC 1.5.4
2 parents f609277 + fd1c8cc commit 2af5dce

File tree

94 files changed

+2370
-442
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+2370
-442
lines changed

README.md

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44

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

7-
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>
7+
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>.
88

9-
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:
9+
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:
1010
<https://dolby.io/products/video-call/>
1111

1212
Its scope covers:
@@ -19,11 +19,11 @@ Its scope covers:
1919

2020
## Getting Started
2121

22-
The steps below will quickly get you started testing Dolby.io’s capabilities
22+
The steps below will quickly get you started testing Dolby.io’s capabilities.
2323

2424
### How to get a Dolby.io account
2525

26-
Dolby.io Comms API requires you to create a Dolby.io account.
26+
Dolby.io Communications APIs requires you to create a Dolby.io account.
2727
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.
2828

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

3535
### How to obtain access token
3636

37-
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.
37+
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.
3838

3939
## How to run the Video Conferencing app
4040

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

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

4949
### Install dependencies
5050

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

5353
```bash
5454
yarn
5555
```
5656

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

5959
```bash
6060
npm install
6161
```
6262

6363
### Paste the token
6464

65-
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:
65+
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:
6666

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

7979
### Start the app
8080

81-
After installing the dependencies, execute the command
81+
After installing the dependencies, execute the following command:
8282

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

9999
#### Base URL configuration
100100

101-
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:
101+
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:
102102

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

109109
## How to build the Video Conferencing app
110110

111-
Follow the steps of installing dependencies & token configuration from "How to run" section
111+
Follow the steps of installing dependencies & token configuration from the "How to run the Video Conferencing app" section
112+
113+
After installing the dependencies, execute the following command:
112114

113-
After installing the dependencies, execute the command
114115
`yarn build`
116+
115117
This command generated distribution packages in `/dist` directory.
116118

117119
## Known issues & limitations
118120

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

124126
## Requirements & supported platforms
125127

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
# SpeakingIndicator
1+
# AnimationIndicator
22

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

55
## Props
66

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

1920
```javascript
20-
return <SpeakingIndicator size="small" />;
21+
import animationData from '<your lottie animation data path>'
22+
return <AnimationIndicator animationData={animationData} />;
2123
```

documentation/components/Badge.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ The Badge component generates a small label that can contain additional descript
44

55
## Props
66

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

1515
## Examples
1616

documentation/components/CopyConferenceLinkButton.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ The CopyConferenceLinkButton component is responsible for copying the conference
44

55
## Props
66

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

1818
### React

documentation/components/DeviceInfo.md

Lines changed: 0 additions & 21 deletions
This file was deleted.

documentation/components/Icon.md

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,39 @@ The Icon component is responsible for displaying icon files in SVG format.
44

55
## Props
66

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

1616
## Available icons
1717

1818
| Name | Icon |
1919
| --------------- | ----------------------------------------------------------------------- |
20-
| camera | ![Alt text](../../packages/common/src/assets/icons/camera.svg) |
21-
| camera-off | ![Alt text](../../packages/common/src/assets/icons/camera-off.svg) |
22-
| camera-reverse | ![Alt text](../../packages/common/src/assets/icons/camera-reverse.svg) |
23-
| chat | ![Alt text](../../packages/common/src/assets/icons/chat.svg) |
24-
| copy | ![Alt text](../../packages/common/src/assets/icons/copy.svg) |
25-
| dots-horizontal | ![Alt text](../../packages/common/src/assets/icons/dots-horizontal.svg) |
26-
| dots-vertical | ![Alt text](../../packages/common/src/assets/icons/dots-vertical.svg) |
27-
| handset | ![Alt text](../../packages/common/src/assets/icons/handset.svg) |
28-
| headphones | ![Alt text](../../packages/common/src/assets/icons/headphones.svg) |
29-
| info | ![Alt text](../../packages/common/src/assets/icons/info.svg) |
30-
| microphone | ![Alt text](../../packages/common/src/assets/icons/microphone.svg) |
31-
| microphone-off | ![Alt text](../../packages/common/src/assets/icons/microphone-off.svg) |
32-
| participants | ![Alt text](../../packages/common/src/assets/icons/participants.svg) |
33-
| pin | ![Alt text](../../packages/common/src/assets/icons/pin.svg) |
34-
| present | ![Alt text](../../packages/common/src/assets/icons/present.svg) |
35-
| record | ![Alt text](../../packages/common/src/assets/icons/record.svg) |
36-
| send-message | ![Alt text](../../packages/common/src/assets/icons/send-message.svg) |
37-
| settings | ![Alt text](../../packages/common/src/assets/icons/settings.svg) |
38-
| speaker | ![Alt text](../../packages/common/src/assets/icons/speaker.svg) |
39-
| speaker-off | ![Alt text](../../packages/common/src/assets/icons/speaker-off.svg) |
20+
| camera | ![Alt text](./IconComponents/Camera.tsx) |
21+
| camera-off | ![Alt text](./IconComponents/CameraOff.tsx) |
22+
| camera-reverse | ![Alt text](./IconComponents/CameraReverse.tsx) |
23+
| chat | ![Alt text](./IconComponents/Chat.tsx) |
24+
| copy | ![Alt text](./IconComponents/Copy.tsx) |
25+
| dots-horizontal | ![Alt text](./IconComponents/DotsHorizontal.tsx) |
26+
| dots-vertical | ![Alt text](./IconComponents/DotsVertical.tsx) |
27+
| handset | ![Alt text](./IconComponents/Handset.tsx) |
28+
| headphones | ![Alt text](./IconComponents/Headphones.tsx) |
29+
| info | ![Alt text](./IconComponents/info.tsx) |
30+
| microphone | ![Alt text](./IconComponents/Microphone.tsx) |
31+
| microphone-off | ![Alt text](./IconComponents/Microphone-off.tsx) |
32+
| participants | ![Alt text](./IconComponents/Participants.tsx) |
33+
| pin | ![Alt text](./IconComponents/Pin.tsx) |
34+
| present | ![Alt text](./IconComponents/Present.tsx) |
35+
| record | ![Alt text](./IconComponents/Record.tsx) |
36+
| send-message | ![Alt text](./IconComponents/Send-message.tsx) |
37+
| settings | ![Alt text](./IconComponents/Settings.tsx) |
38+
| speaker | ![Alt text](./IconComponents/Speaker.tsx) |
39+
| speaker-off | ![Alt text](./IconComponents/Speaker-off.tsx) |
4040

4141
## Examples
4242

0 commit comments

Comments
 (0)