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

Commit 67a4921

Browse files
vincentsongvincentsong
authored
Merge pull request #9 from DolbyIO/RC-0.5.11
RC-0.5.11
2 parents 3f37f9d + cb263fe commit 67a4921

File tree

196 files changed

+3796
-1804
lines changed

Some content is hidden

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

196 files changed

+3796
-1804
lines changed

‎README.md

Lines changed: 200 additions & 173 deletions
Large diffs are not rendered by default.

‎__mocks__/MediaStream.mock.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,5 @@ Object.defineProperty(global.navigator, 'mediaDevices', {
6969
enumerateDevices: mockEnumerateDevices,
7070
},
7171
});
72+
73+
export default {};

‎__mocks__/WindowOrientation.mock.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Object.defineProperty(window, 'innerWidth', {
2+
value: {
3+
innerWidth: 1024,
4+
},
5+
});

‎documentation/components/SpeakingIndicator.md renamed to ‎documentation/components/AnimationIndicator.md

Lines changed: 6 additions & 4 deletions
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

‎documentation/components/IconButton.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ The IconButton component is responsible for rectangular buttons that contain ico
44

55
## Props
66

7-
| Name | Type | Default | Description |
8-
| ----------------------- | --------------------------------- | -------- | ------------------------------------------------------------------------------------------------------ |
9-
| `variant` ? | 'square', 'rectangular', 'circle' | 'square' | The variant of style that allows you to distinguish between actions of different importance in the UI. |
10-
| `backgroundColor` ? | ColorKey , [ColorKey, ColorKey] | - | The background color of the button. |
11-
| `iconColor` ? | ColorKey | - | The color of the icon. |
12-
| `badge` ? | boolean | false | The small circular indicator that appears at the top of the button. |
13-
| `badgeColor` ? | ColorKey | - | The color of the badge. |
14-
| `badgeContentColor` ? | ColorKey | - | The color of text that appears is in the badge. |
15-
| `strokeColor` ? | ColorKey | - | The color of the button's border. |
16-
| `size` ? | 'xxs' , 'xs' , 's' , 'm' | 'm' | The size of the button. |
17-
| `disabled` ? | boolean | false | The activity state. |
18-
| `icon` | Icon | - | The name of the icon. |
19-
| `onClick` | Function | - | The event handler property for processing click events on the button. |
20-
| `testID` ? | string | - | The unique E2E test handler. |
21-
| `style` ? | CSSProperties | - | The style of the layout. |
22-
| `...HTMLButtonElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the button element. |
7+
| Name | Type | Default | Description |
8+
| ----------------------- | ------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------ |
9+
| `variant` ? | 'square', 'rectangular', 'circle' | 'square' | The variant of style that allows you to distinguish between actions of different importance in the UI. |
10+
| `backgroundColor` ? | ColorKey , [ColorKey, ColorKey] | - | The background color of the button. |
11+
| `iconColor` ? | ColorKey | - | The color of the icon. |
12+
| `badge` ? | string | number | boolean | false | The small circular indicator that appears at the top of the button. |
13+
| `badgeColor` ? | ColorKey | - | The color of the badge. |
14+
| `badgeContentColor` ? | ColorKey | - | The color of text that appears is in the badge. |
15+
| `strokeColor` ? | ColorKey | - | The color of the button's border. |
16+
| `size` ? | 'xxs' , 'xs' , 's' , 'm', "l" | 'm' | The size of the button. |
17+
| `disabled` ? | boolean | false | The activity state. |
18+
| `icon` | Icon | - | The name of the icon. |
19+
| `onClick` | Function | - | The event handler property for processing click events on the button. |
20+
| `testID` ? | string | - | The unique E2E test handler. |
21+
| `style` ? | CSSProperties | - | The style of the layout. |
22+
| `...HTMLButtonElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the button element. |
2323

2424
## Examples
2525

0 commit comments

Comments
 (0)