docs(react-native): UI component - ParticipantView, LocalParticipantV…

…iew (#935)

LocalParticipantView has no props right now as per the PR #933, so the
props section is removed.

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 <LocalParticipantView />;
 };
 ```
-
-### 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.

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).
+:::
+
+<ImageShowcase
+  items={[
+    {
+      image: ParticipantCameraOn,
+      caption: 'Participant Camera On',
+      alt: 'Participant Camera On',
+    },
+    {
+      image: ParticipantCameraOff,
+      caption: 'Participant Camera Off',
+      alt: 'Participant Camera Off',
+    },
+  ]}
+/>
+
+## 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 <ParticipantView participant={participants[0]} />;
+};
+```
+
+## Props
+
+### `participant`
+
+<Participant />
+
+### `videoMode`
+
+<VideoMode />
+
+### `style`
+
+<ParticipantViewStyle />
+
+### `isVisible`
+
+<IsVisible />
+
+### `ParticipantLabel`
+
+<ParticipantLabel />
+
+### `ParticipantReaction`
+
+<ParticipantReaction />
+
+### `ParticipantVideoFallback`
+
+<ParticipantVideoFallback />
+
+### `ParticipantNetworkQualityIndicator`
+
+<ParticipantNetworkQualityIndicator />
+
+### `VideoRenderer`
+
+<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)

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

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

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

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) |

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) |

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) |