feat(react-native): live stream components for host and viewer

packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/03-livestream.mdx

@@ -297,7 +297,7 @@ await myCall.join({ create: true });
 
 To create the first call object, specify the call type as **livestream** and provide a unique `callId`. The `livestream` call type comes with default settings that are usually suitable for live streams, but you can customize features, permissions, and settings in the dashboard. Additionally, the dashboard allows you to create new call types as required.
 
-Finally, using `call.join(create = true)` will not only create the call object on our servers but also initiate the real-time transport for audio and video. This allows for seamless and immediate engagement in the live stream.
+Finally, using `call.join({ create: true })` will not only create the call object on our servers but also initiate the real-time transport for audio and video. This allows for seamless and immediate engagement in the live stream.
 
 Note that you can also add members to a call and assign them different roles. For more information, see the [Joining & Creating Calls](../../core/joining-and-creating-calls/) docs.
 

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Livestream",
+  "position": 3
+}

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-livestream.mdx

@@ -0,0 +1,117 @@
+---
+id: host-livestream
+title: HostLivestream
+---
+
+import ImageShowcase from '@site/src/components/ImageShowcase';
+import HostLivestreamStart from '../../assets/04-ui-components/livestream/host-livestream-start.png';
+import HostLivestreamEnd from '../../assets/04-ui-components/livestream/host-livestream-end.png';
+
+import HostLivestreamTopView from '../../common-content/ui-components/livestream/host-livestream/host-livestream-top-view.mdx';
+import LivestreamLayout from '../../common-content/ui-components/livestream/livestream-layout.mdx';
+import HostLivestreamControls from '../../common-content/ui-components/livestream/host-livestream/host-livestream-controls.mdx';
+import DurationBadge from '../../common-content/ui-components/livestream/duration-badge.mdx';
+import FollowerCount from '../../common-content/ui-components/livestream/follower-count.mdx';
+import LiveIndicator from '../../common-content/ui-components/livestream/live-indicator.mdx';
+import HostStartStreamButton from '../../common-content/ui-components/livestream/host-livestream/host-start-stream-button.mdx';
+import LiveStreamMediaControls from '../../common-content/ui-components/livestream/livestream-media-controls.mdx';
+import OnStartStreamHandler from '../../common-content/ui-components/livestream/host-livestream/on-start-stream-handler.mdx';
+import OnEndStreamHandler from '../../common-content/ui-components/livestream/host-livestream/on-end-stream-handler.mdx';
+
+The `HostLivestream` is the UI component that allows you to show the live stream view in the app on the host's end with minimal efforts. So you don't need to take care much about each feature that you need to build a video live stream call screen with this component.
+
+Basically what you can do with the `HostLivestream` is:
+
+- A complete live stream UI with ability to stream host's video.
+- Duration of the live stream with live indicator.
+- Whether the stream is live and number of participant's watching the stream.
+- Media controls to control publish and un-publish stream.
+
+<ImageShowcase
+  items={[
+    {
+      image: HostLivestreamStart,
+      caption: 'Host Live Stream Start',
+      alt: 'Host Live Stream Start',
+    },
+    {
+      image: HostLivestreamEnd,
+      caption: 'Host Live Stream End',
+      alt: 'Host Live Stream End',
+    },
+  ]}
+/>
+
+## General usage
+
+Let's see how to show the `HostLivestream` UI:
+
+```tsx
+import {
+  Call,
+  StreamCall,
+  HostLivestream,
+} from '@stream-io/video-react-native-sdk';
+
+const VideoCallUI = () => {
+  let call: Call;
+  // your logic to create a new call or get an existing call
+
+  return (
+    <StreamCall call={call}>
+      // highlight-next-line
+      <HostLivestream />
+    </StreamCall>
+  );
+};
+```
+
+## Props
+
+### `hls`
+
+Enable HTTP live streaming
+
+| Type      | Default |
+| --------- | ------- |
+| `boolean` | false   |
+
+### `HostLivestreamTopView`
+
+<HostLivestreamTopView />
+
+### `LivestreamLayout`
+
+<LivestreamLayout />
+
+### `HostLivestreamControls`
+
+<HostLivestreamControls />
+
+### `DurationBadge`
+
+<DurationBadge />
+
+### `FollowerCount`
+
+<FollowerCount />
+
+### `LiveIndicator`
+
+<LiveIndicator />
+
+### `HostStartStreamButton`
+
+<HostStartStreamButton />
+
+### `LivestreamMediaControls`
+
+<LiveStreamMediaControls />
+
+### `onStartStreamHandler`
+
+<OnStartStreamHandler />
+
+### `onEndStreamHandler`
+
+<OnEndStreamHandler />

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/viewer-livestream.mdx

@@ -0,0 +1,102 @@
+---
+id: viewer-livestream
+title: ViewerLivestream
+---
+
+import ImageShowcase from '@site/src/components/ImageShowcase';
+import ViewerLivestream from '../../assets/04-ui-components/livestream/viewer-livestream.png';
+import ViewerLivestreamScreenShare from '../../assets/04-ui-components/livestream/viewer-livestream-screenshare.png';
+
+import ViewerLivestreamTopView from '../../common-content/ui-components/livestream/viewer-livestream/viewer-livestream-top-view.mdx';
+import LivestreamLayout from '../../common-content/ui-components/livestream/livestream-layout.mdx';
+import ViewerLivestreamControls from '../../common-content/ui-components/livestream/viewer-livestream/viewer-livestream-controls.mdx';
+import DurationBadge from '../../common-content/ui-components/livestream/duration-badge.mdx';
+import FollowerCount from '../../common-content/ui-components/livestream/follower-count.mdx';
+import LiveIndicator from '../../common-content/ui-components/livestream/live-indicator.mdx';
+import FloatingParticipantView from '../../common-content/ui-components/call/call-content/floating-participant-view.mdx';
+import ViewerLeaveStreamButton from '../../common-content/ui-components/livestream/viewer-livestream/viewer-leave-stream-button.mdx';
+import OnLeaveStreamHandler from '../../common-content/ui-components/livestream/viewer-livestream/on-leave-stream-handler.mdx';
+
+The `ViewerLivestream` is the UI component that allows you to show the live stream view in the app with minimal efforts. So you don't need to take care much about each feature that you need to build a video live stream call screen with this component.
+
+Basically what you can do with the `ViewerLivestream` is:
+
+- A complete live stream UI with host's video and screen sharing stream.
+- Duration of the stream.
+- Whether the stream is live and number of participant's watching the stream.
+
+<ImageShowcase
+  items={[
+    {
+      image: ViewerLivestream,
+      caption: 'Viewer Live Stream',
+      alt: 'Viewer Live Stream',
+    },
+    {
+      image: ViewerLivestreamScreenShare,
+      caption: 'Viewer Live Stream Screen Share',
+      alt: 'Viewer Live Stream Screen Share',
+    },
+  ]}
+/>
+
+## General usage
+
+Let's see how to show the `ViewerLivestream` UI:
+
+```tsx {13}
+import {
+  Call,
+  StreamCall,
+  ViewerLivestream,
+} from '@stream-io/video-react-native-sdk';
+
+const VideoCallUI = () => {
+  let call: Call;
+  // your logic to create a new call or get an existing call
+
+  return (
+    <StreamCall call={call}>
+      <ViewerLivestream />
+    </StreamCall>
+  );
+};
+```
+
+## Props
+
+### `ViewerLivestreamTopView`
+
+<ViewerLivestreamTopView />
+
+### `LivestreamLayout`
+
+<LivestreamLayout />
+
+### `ViewerLivestreamControls`
+
+<ViewerLivestreamControls />
+
+### `DurationBadge`
+
+<DurationBadge />
+
+### `FollowerCount`
+
+<FollowerCount />
+
+### `LiveIndicator`
+
+<LiveIndicator />
+
+### `ViewerLeaveStreamButton`
+
+<ViewerLeaveStreamButton />
+
+### `FloatingParticipantView`
+
+<FloatingParticipantView />
+
+### `onLeaveStreamHandler`
+
+<OnLeaveStreamHandler />

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/duration-badge.mdx

@@ -0,0 +1,5 @@
+Component to customize the Duration badge component on the viewer's live stream's top view.
+
+| Type                          | Default Value                                                                                                                                                     |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`DurationBadge`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamTopView/DurationBadge.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/follower-count.mdx

@@ -0,0 +1,5 @@
+Component to customize the Follower count indicator on the viewer's live stream's top view.
+
+| Type                          | Default Value                                                                                                                                                     |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`FollowerCount`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamTopView/FollowerCount.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-livestream/host-livestream-controls.mdx

@@ -0,0 +1,5 @@
+Component to customize the bottom view controls at the host's live stream.
+
+| Type                          | Default Value                                                                                                                                                                        |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `ComponentType`\| `undefined` | [`HostLiveStreamControls`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamControls/HostLiveStreamControls.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-livestream/host-livestream-top-view.mdx

@@ -0,0 +1,5 @@
+Component to customize the top view at the host's live stream.
+
+| Type                          | Default Value                                                                                                                                                                     |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`HostLiveStreamTopView`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamTopView/HostLiveStreamTopView.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-livestream/host-start-stream-button.mdx

@@ -0,0 +1,5 @@
+Component to customize the host's start/end live stream button.
+
+| Type                          | Default Value                                                                                                                                                                      |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`HostStartStreamButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamControls/HostStartStreamButton.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-livestream/on-end-stream-handler.mdx

@@ -0,0 +1,5 @@
+Handler to be called when the End Stream button is pressed.
+
+| Type                        |
+| --------------------------- |
+| `() => void` \| `undefined` |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-livestream/on-start-stream-handler.mdx

@@ -0,0 +1,5 @@
+Handler to be called when the Start Stream button is pressed.
+
+| Type                        |
+| --------------------------- |
+| `() => void` \| `undefined` |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-indicator.mdx

@@ -0,0 +1,5 @@
+Component to customize the Live indicator on the viewer's live stream's top view.
+
+| Type                          | Default Value                                                                                                                                                     |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`LiveIndicator`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamTopView/LiveIndicator.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/livestream-layout.mdx

@@ -0,0 +1,5 @@
+Component to customize the live stream video layout.
+
+| Type                          | Default Value                                                                                                                                                          |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`LiveStreamLayout`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamLayout/LiveStreamLayout.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/livestream-media-controls.mdx

@@ -0,0 +1,5 @@
+Component to customize the host's media control(audio/video) buttons.
+
+| Type                          | Default Value                                                                                                                                                                          |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`LiveStreamMediaControls`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamControls/LiveStreamMediaControls.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-livestream/on-leave-stream-handler.mdx

@@ -0,0 +1,5 @@
+Handler to be called when the viewer's leave stream button is called.
+
+| Type                        |
+| --------------------------- |
+| `() => void` \| `undefined` |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-livestream/viewer-leave-stream-button.mdx

@@ -0,0 +1,5 @@
+Component to customize the leave stream button on the viewer's end live stream.
+
+| Type                          | Default Value                                                                                                                                                                          |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`ViewerLeaveStreamButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamControls/ViewerLeaveStreamButton.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-livestream/viewer-livestream-controls.mdx

@@ -0,0 +1,5 @@
+Component to customize the bottom view controls at the viewer's live stream.
+
+| Type                          | Default Value                                                                                                                                                                            |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`ViewerLiveStreamControls`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamControls/ViewerLiveStreamControls.tsx) |

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-livestream/viewer-livestream-top-view.mdx

@@ -0,0 +1,5 @@
+Component to customize the top view at the viewer's live stream.
+
+| Type                          | Default Value                                                                                                                                                                         |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`ViewerLiveStreamTopView`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LiveStreamTopView/ViewerLiveStreamTopView.tsx) |

packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx

@@ -179,7 +179,7 @@ export const CallContent = ({
   };
 
   return (
-    <View style={[styles.container, callContent.container, landscapeStyles]}>
+    <View style={[styles.container, landscapeStyles, callContent.container]}>
       <View style={[styles.container, callContent.callParticipantsContainer]}>
         <View
           style={[styles.view, callContent.topContainer]}