feat(react-native): add livestream player component (#1373)

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

@@ -0,0 +1,48 @@
+---
+id: livestream-player
+title: LivestreamPlayer
+---
+
+import ImageShowcase from '@site/src/components/ImageShowcase';
+import ViewerLivestream from '../../assets/04-ui-components/livestream/viewer-livestream.png';
+
+The `LivestreamPlayer` is a UI component that plays a WebRTC livestream given the call ID and the call type. Under the hood, it uses the [`ViewerLivestream`](./02-viewer-livestream.mdx) component.
+
+![Preview of the LivestreamPlayer component.](../../assets/04-ui-components/livestream/viewer-livestream.png)
+
+## General usage
+
+Let's see how to show the `LivestreamPlayer` UI:
+
+```tsx
+import {
+  StreamVideo,
+  LivestreamPlayer,
+} from '@stream-io/video-react-native-sdk';
+
+const LivestreamScreen() {
+  return (
+    <StreamVideo client={client}>
+      <LivestreamPlayer callType="livestream" callId={callId} />
+    </StreamVideo>
+  );
+}
+```
+
+## Props
+
+### `callType`
+
+The call type. Usually `livestream`.
+
+### `callId`
+
+The call ID.
+
+### `ViewerLivestream` 
+
+Component to override the ViewerLivestream component that is used under the hood.
+
+| Type                          | Default Value                                                                                                                                                          |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`ViewerLivestream`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/ViewerLivestream/ViewerLivestream.tsx) |

packages/react-native-sdk/src/components/Livestream/LivestreamPlayer/LivestreamPlayer.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo, useEffect } from 'react';
+import {
+  ViewerLivestream as DefaultViewerLivestream,
+  ViewerLivestreamProps,
+} from '..';
+import { StreamCall, useStreamVideoClient } from '../../..';
+
+export type LivestreamPlayerProps = {
+  /**
+   * The call type. Usually `livestream`.
+   */
+  callType: string;
+  /**
+   * The call ID.
+   */
+  callId: string;
+  /**
+   * Component to override the ViewerLivestream component used under the hood.
+   * **Default** [ViewerLivestream](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/ViewerLivestream/ViewerLivestream.tsx)
+   */
+  ViewerLivestream?: React.ComponentType<ViewerLivestreamProps>;
+};
+
+export const LivestreamPlayer = ({
+  callType,
+  callId,
+  ViewerLivestream = DefaultViewerLivestream,
+}: LivestreamPlayerProps) => {
+  const client = useStreamVideoClient();
+
+  const call = useMemo(
+    () => client?.call(callType, callId),
+    [callType, callId, client],
+  );
+
+  useEffect(() => {
+    if (!call) {
+      return;
+    }
+    call.join().catch((e) => {
+      console.error('Failed to join call', e);
+    });
+    return () => {
+      call.leave().catch((e) => {
+        console.error('Failed to leave call', e);
+      });
+    };
+  }, [call]);
+
+  if (!call) {
+    return null;
+  }
+
+  return (
+    <StreamCall call={call}>
+      <ViewerLivestream />
+    </StreamCall>
+  );
+};

packages/react-native-sdk/src/components/Livestream/LivestreamPlayer/index.ts

@@ -0,0 +1 @@
+export * from './LivestreamPlayer';