diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/local-participant-view.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/local-participant-view.mdx index 11d97f6578..beceeaa1c7 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/local-participant-view.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/local-participant-view.mdx @@ -3,9 +3,9 @@ id: local-participant-view title: LocalParticipantView --- -LocalParticipantView displays the local video stream of the local participant if the video is unmuted. It can be used as both a floating or full-screen view. +LocalParticipantView displays the local video stream of the local participant. It is a floating view by default that can be dragged in the call area. -When the video is muted, the avatar of the local participant is shown, while when the view is floating, the video disabled icon is shown, both with a disabled background. +When the video is muted, the video muted icon is shown in a disabled background. :::note By default, the `LocalParticipantView` renders in a floating mode. @@ -24,21 +24,3 @@ const App = () => { return ; }; ``` - -### Props - -### `layout` - -| Type | Default Value | -| -------------------------- | ------------- | -| `floating` \| `fullscreen` | `floating` | - -Allows configuring the view to render in either a floating or a full-screen mode. - -### `style` - -| Type | -| ---------------------------------------------------------- | -| [ViewStyle](https://reactnative.dev/docs/view-style-props) | - -This allows overriding the styles of the floating or the full-screen view container. diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participant-info-badge.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participant-info-badge.mdx deleted file mode 100644 index b9a7bfebbd..0000000000 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participant-info-badge.mdx +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: participant-info-badge -title: ParticipantInfoBadge ---- - -ParticipantsInfoBadge is a [Pressable](https://reactnative.dev/docs/pressable) View that shows the count of the participants in the form of a badge, currently in the call. - -This, when pressed, opens up the [ParticipantsInfoListView](../participants-info-list-view.mdx) in the form of a [Modal View](https://reactnative.dev/docs/modal). - -![Preview of the ParticipantsInfoBadge component.](../../assets/04-ui-components/participants-info-badge.png) - -## General Usage - -In order to use the `ParticipantsInfoBadge` as a standalone component, you should use the following code: - -```tsx -import { ParticipantsInfoBadge } from '@stream-io/video-react-native-sdk'; - -const App = () => { - return ; -}; -``` - -## Props - -### `style` - -| Type | -| --------------------------------------------------------- | -| [ViewStyle](https://reactnative.dev/docs/pressable#style) | - -This allows overriding the styles of the container wrapping the participant icon and the badge. diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participant-view.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participant-view.mdx new file mode 100644 index 0000000000..76ee65c748 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participant-view.mdx @@ -0,0 +1,115 @@ +--- +id: participant-view +title: ParticipantView +--- + +import ImageShowcase from '@site/src/components/ImageShowcase'; +import ParticipantCameraOn from '../../assets/04-ui-components/participant-camera-on.png'; +import ParticipantCameraOff from '../../assets/04-ui-components/participant-camera-off.png'; + +import Participant from '../../common-content/ui-components/participant/participant-view/participant.mdx'; +import VideoMode from '../../common-content/ui-components/participant/participant-view/video-mode.mdx'; +import IsVisible from '../../common-content/ui-components/participant/participant-view/is-visible.mdx'; +import ParticipantViewStyle from '../../common-content/ui-components/participant/participant-view/style.mdx'; + +import ParticipantLabel from '../../common-content/ui-components/call/call-content/participant-label.mdx'; +import ParticipantReaction from '../../common-content/ui-components/call/call-content/participant-reaction.mdx'; +import ParticipantNetworkQualityIndicator from '../../common-content/ui-components/call/call-content/participant-network-quality-indicator.mdx'; +import ParticipantVideoFallback from '../../common-content/ui-components/call/call-content/participant-video-fallback.mdx'; +import VideoRenderer from '../../common-content/ui-components/call/call-content/video-renderer.mdx'; + +The `ParticipantView` component renders a participant's video and displays related information of the participant. It can also be used to display the screen sharing view. + +It displays the participant info such as + +- Name +- Audio/video mute/unmute state +- Reaction +- Network quality indicator + +It can toggle between video and avatar based on the participant's video state. It also provides action buttons (for example, to unpin the participant). + +:::note +It is used as a building block to render individual item of participants in [CallContent](../call/call-content.mdx) and [CallParticipantsList](../call/call-participants-list.mdx). +::: + + + +## General Usage + +In order to use the `ParticipantView` as a standalone component, you should use the following code: + +```tsx +import { + ParticipantView, + useParticipants, +} from '@stream-io/video-react-native-sdk'; + +const App = () => { + const participants = useParticipants(); + + // Here to show the demo, we pass only first participant. You can pass any of the participant. + return ; +}; +``` + +## Props + +### `participant` + + + +### `videoMode` + + + +### `style` + + + +### `isVisible` + + + +### `ParticipantLabel` + + + +### `ParticipantReaction` + + + +### `ParticipantVideoFallback` + + + +### `ParticipantNetworkQualityIndicator` + + + +### `VideoRenderer` + + + +## Customization + +Our [UI cookbook](../../../ui-cookbook/overview) tells all the important information about the component customizations. + +- [Video fallback](../../../ui-cookbook/participant-video-fallback) +- [Connection Quality Indicator](../../../ui-cookbook/connection-quality-indicator) +- [Custom Label](../../../ui-cookbook/participant-label) +- [Video Renderer](../../../ui-cookbook/video-renderer) +- [Reaction](../../../ui-cookbook/participant-reaction) diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participant.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participant.mdx deleted file mode 100644 index 301c3a3c65..0000000000 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participant.mdx +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: participant -title: Participant ---- - -import ImageShowcase from '@site/src/components/ImageShowcase'; -import ParticipantCameraOn from '../../assets/04-ui-components/participant-camera-on.png'; -import ParticipantCameraOff from '../../assets/04-ui-components/participant-camera-off.png'; - -The Participant component renders a participant's video and plays the participant's audio. It can also be used to display the screen sharing view. - -It displays the participant info such as - -- Name -- Audio/video mute/unmute state -- Reaction -- Network quality indicator - -It can toggle between video and avatar based on the participant's video state. It also provides action buttons (for example, to unpin the participant). - -:::note -It is used as a building block to render individual item of participants in [CallContent](../call/call-content.mdx) and [CallParticipantsList](../call/call-participants-list.mdx). -::: - - - -## General Usage - -In order to use the `Participant` as a standalone component, you should use the following code: - -```tsx -import { - Participant, - useParticipants, -} from '@stream-io/video-react-native-sdk'; - -const App = () => { - const participants = useParticipants(); - - // Here to show the demo, we pass only first participant. You can pass any of the participant. - return ; -}; -``` - -## Props - -### `participant` - -| Type | -| --------------------------------------------------------------------------------------------------------------- | -| [`StreamVideoParticipant`](https://github.com/GetStream/stream-video-js/blob/main/packages/client/src/types.ts) | - -The participants to be rendered in the `Participant`. - -### `kind` - -| Type | -| ------------------- | -| `video` \| `screen` | - -The type of the participant stream to be rendered. Eg: screen sharing or participant's video stream. - -### `containerStyle` - -| Type | -| ---------------------------------------------------------- | -| [ViewStyle](https://reactnative.dev/docs/view-style-props) | - -This prop is used to override the root container style of the component. - -### `videoRendererStyle` - -| Type | -| ---------------------------------------------------------- | -| [ViewStyle](https://reactnative.dev/docs/view-style-props) | - -This prop can be used to override the video stream renderer styles. - -### `isVisible` - -| Type | Default Value | -| --------- | ------------- | -| `boolean` | `true` | - -When set to false, the video stream will not be shown even if it is available. - -### `disableAudio` - -| Type | -| --------- | -| `boolean` | - -When set to true, the audio stream will not be played even if it is available. diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participants-info-list.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participants-info-list.mdx deleted file mode 100644 index c63ab4bf6e..0000000000 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participants-info-list.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: participants-info-list -title: ParticipantsInfoList ---- - -ParticipantsInfoList shows the list of participants in the call and their information such as: - -- Name -- Participant's Audio/Video mute/unmute status. -- Whether screen is been shared by the participants or not. - -It also has an options menu, which opens up on tapping an individual participant and lists all the options for the participant, such as: - -- Disable/Enable audio/video/screen sharing. -- Pin a participant. -- Block a participant. - -:::note -Some of the options are only visible to the creator of the call. -::: - -The `ParticipantsInfoList` also allows muting all participants and inviting participants in the call. - -![Preview of the ParticipantsInfoList component.](../../assets/04-ui-components/participants-info-list.jpg) - -## General Usage - -In order to use the `ParticipantsInfoList` as a standalone component, you should use the following code: - -```tsx -import { useState, useCallback } from 'react'; -import { ParticipantsInfoList } from '@stream-io/video-react-native-sdk'; - -const App = () => { - const [isCallParticipantsInfoVisible, setIsCallParticipantsInfoVisible] = - useState(false); - - return ( - - ); -}; -``` - -### Props - -### `isCallParticipantsInfoVisible` - -| Type | -| --------- | -| `boolean` | - -Boolean that decides whether the CallParticipantsInfo modal should be open or not. - -### `setIsCallParticipantsInfoVisible` - -| Type | -| ----------------------- | -| React SetState function | - -SetState function to set the value of the boolean field [`isCallParticipantsVisible`](#iscallparticipantsinfovisible) depending upon whether the `CallParticipantsInfo` modal should be open or not. diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/07-participant-video-fallback.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/07-participant-video-fallback.mdx new file mode 100644 index 0000000000..a7923e66f1 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/07-participant-video-fallback.mdx @@ -0,0 +1,8 @@ +--- +title: Participant Video Fallback +description: How to make your own custom participant video fallback +--- + +:::note +This will be added soon +::: diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/08-video-renderer.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/08-video-renderer.mdx new file mode 100644 index 0000000000..e60ab21c33 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/08-video-renderer.mdx @@ -0,0 +1,8 @@ +--- +title: Participant Video Renderer +description: How to make your own custom participant video renderer +--- + +:::note +This will be added soon +::: diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/09-participant-reaction.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/09-participant-reaction.mdx new file mode 100644 index 0000000000..f802936e66 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/09-participant-reaction.mdx @@ -0,0 +1,8 @@ +--- +title: Participant Reaction +description: How to make your own custom participant reaction component +--- + +:::note +This will be added soon +::: diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-label.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-label.mdx new file mode 100644 index 0000000000..12c9282160 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-label.mdx @@ -0,0 +1,5 @@ +Component to customize the Label of the participant. + +| Type | Default Value | +| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ComponentType`\| `undefined` | [`ParticipantLabel`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-network-quality-indicator.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-network-quality-indicator.mdx new file mode 100644 index 0000000000..5880d8d3ab --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-network-quality-indicator.mdx @@ -0,0 +1,5 @@ +Component to customize the network quality indicator of the participant. + +| Type | Default Value | +| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ComponentType`\| `undefined` | [`ParticipantNetworkQualityIndicator`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantNetworkQualityIndicator.tsx) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-reaction.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-reaction.mdx new file mode 100644 index 0000000000..7af4f0268e --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-reaction.mdx @@ -0,0 +1,5 @@ +Component to customize the component that displays the reaction of the participant. + +| Type | Default Value | +| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ComponentType`\| `undefined` | [`ParticipantReaction`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantReaction.tsx) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-video-fallback.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-video-fallback.mdx new file mode 100644 index 0000000000..ebaab934db --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participant-video-fallback.mdx @@ -0,0 +1,5 @@ +Component to customize the video fallback of the participant, when the video is disabled. + +| Type | Default Value | +| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ComponentType`\| `undefined` | [`ParticipantVideoFallback`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantVideoFallback.tsx) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/video-renderer.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/video-renderer.mdx new file mode 100644 index 0000000000..0fbf755462 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/video-renderer.mdx @@ -0,0 +1,5 @@ +Component to customize the video component of the participant. It is also responsible to display the [`ParticipantVideoFallback`](#participantvideofallback). + +| Type | Default Value | +| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ComponentType`\| `undefined` | [`VideoRenderer`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Participant/ParticipantView/VideoRenderer.tsx) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/is-visible.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/is-visible.mdx new file mode 100644 index 0000000000..88d59ac552 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/is-visible.mdx @@ -0,0 +1,5 @@ +When set to false, the video stream will not be shown even if it is available. + +| Type | Default Value | +| --------- | ------------- | +| `boolean` | `true` | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/participant.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/participant.mdx new file mode 100644 index 0000000000..436250863d --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/participant.mdx @@ -0,0 +1,5 @@ +The participant to be rendered in the `ParticipantView`. + +| Type | +| --------------------------------------------------------------------------------------------------------------- | +| [`StreamVideoParticipant`](https://github.com/GetStream/stream-video-js/blob/main/packages/client/src/types.ts) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/style.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/style.mdx new file mode 100644 index 0000000000..30137a312e --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/style.mdx @@ -0,0 +1,5 @@ +This prop is used to override the root container style of the component. + +| Type | +| ---------------------------------------------------------- | +| [ViewStyle](https://reactnative.dev/docs/view-style-props) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/video-mode.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/video-mode.mdx new file mode 100644 index 0000000000..247d3abfad --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/participant/participant-view/video-mode.mdx @@ -0,0 +1,5 @@ +The type of the participant stream to be rendered. Eg: screen sharing or participant's video stream. + +| Type | +| ------------------- | +| `video` \| `screen` | diff --git a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx index 4f739d57e0..87fb21906d 100644 --- a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx +++ b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx @@ -8,11 +8,17 @@ import { ComponentTestIds } from '../../../constants/TestIds'; import { ParticipantViewProps } from './ParticipantView'; import { Z_INDEX } from '../../../constants'; +/** + * Props for the ParticipantLabel component. + */ export type ParticipantLabelProps = Pick< ParticipantViewProps, 'videoMode' | 'participant' >; +/** + * This component is used to display the participant label that contains the participant name, video/audio mute/unmute status. + */ export const ParticipantLabel = ({ participant, videoMode, diff --git a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantNetworkQualityIndicator.tsx b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantNetworkQualityIndicator.tsx index e3fe2cf5a5..543780c888 100644 --- a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantNetworkQualityIndicator.tsx +++ b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantNetworkQualityIndicator.tsx @@ -5,14 +5,18 @@ import { SfuModels } from '@stream-io/video-client'; import React from 'react'; import { Z_INDEX } from '../../../constants'; import { ParticipantViewProps } from './ParticipantView'; + /** - * Props to be passed for the NetworkQualityIndicator component. + * Props for the NetworkQualityIndicator component. */ export type ParticipantNetworkQualityIndicatorProps = Pick< ParticipantViewProps, 'participant' >; +/** + * This component is used to display the network quality indicator of the participant. + */ const connectionQualitySignalColors: Record< SfuModels.ConnectionQuality, string[] diff --git a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantReaction.tsx b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantReaction.tsx index 5dd21d7b6d..7528d8b014 100644 --- a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantReaction.tsx +++ b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantReaction.tsx @@ -6,6 +6,9 @@ import { StreamVideoRN } from '../../../utils'; import { Z_INDEX } from '../../../constants'; import { ParticipantViewProps } from './ParticipantView'; +/** + * Props for the ParticipantReaction component. + */ export type ParticipantReactionProps = Pick< ParticipantViewProps, 'participant' @@ -18,6 +21,9 @@ export type ParticipantReactionProps = Pick< hideAfterTimeoutInMs?: number; }; +/** + * This component is used to display the current participant reaction. + */ export const ParticipantReaction = (props: ParticipantReactionProps) => { const { supportedReactions } = StreamVideoRN.getConfig(); const { participant, hideAfterTimeoutInMs = 5500 } = props; diff --git a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantVideoFallback.tsx b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantVideoFallback.tsx index e94c5898c8..178a9f45e3 100644 --- a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantVideoFallback.tsx +++ b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantVideoFallback.tsx @@ -4,11 +4,17 @@ import { Avatar } from '../../utility'; import { theme } from '../../../theme'; import { ParticipantViewProps } from './ParticipantView'; +/** + * Props for the ParticipantVideoFallback component. + */ export type ParticipantVideoFallbackProps = Pick< ParticipantViewProps, 'participant' >; +/** + * This component is used to customize the video fallback of the participant, when the video is disabled. + */ export const ParticipantVideoFallback = ({ participant, }: ParticipantVideoFallbackProps) => { diff --git a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantView.tsx b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantView.tsx index 7dd4b65aa5..2a955d2c2e 100644 --- a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantView.tsx +++ b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantView.tsx @@ -15,15 +15,15 @@ export type ParticipantVideoType = 'video' | 'screen'; */ export type ParticipantViewProps = { /** - * The participant that will be displayed + * The participant that will be displayed. */ participant: StreamVideoParticipant; /** - * The video kind that will be displayed + * The video kind that will be displayed. */ videoMode: ParticipantVideoType; /** - * Any custom style to be merged with the participant view + * Any custom style to be merged with the participant view. */ style?: StyleProp; /** diff --git a/packages/react-native-sdk/src/components/Participant/ParticipantView/VideoRenderer.tsx b/packages/react-native-sdk/src/components/Participant/ParticipantView/VideoRenderer.tsx index a71b237cff..8ed4ee6a76 100644 --- a/packages/react-native-sdk/src/components/Participant/ParticipantView/VideoRenderer.tsx +++ b/packages/react-native-sdk/src/components/Participant/ParticipantView/VideoRenderer.tsx @@ -12,7 +12,7 @@ import { useMediaStreamManagement } from '../../../providers'; import { Z_INDEX } from '../../../constants'; /** - * Props to be passed for the VideoRenderer component. + * Props for the VideoRenderer component. */ export type VideoRendererProps = Pick< ParticipantViewProps, @@ -20,7 +20,9 @@ export type VideoRendererProps = Pick< >; /** - * Lower level component, that represents only the video part (wrapper around the WebRTC) + * This component is used to display the video of the participant and fallback when the video is muted. + * + * It internally used `RTCView` to render video stream. */ export const VideoRenderer = ({ videoMode,