fix: accept children in LivestreamPlayer components (#1968)

Allows integrators to provide `children` components to our
`LivestreamPlayer` components to allow easier extension and more
convenient access to the underlying `call` instance.

e.g.:
```tsx
<LivestreamPlayer callType="livestream" callId="123">
  <MyComponent />
</LivestreamPlayer>

const MyComponent = () => {
  // will have access to the `call` instance created by the player
  const call = useCall();
  // do stuff
};
```

Author: oliverlaz

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import {
   ViewerLivestream as DefaultViewerLivestream,
   type ViewerLivestreamProps,
@@ -27,7 +27,7 @@ export type LivestreamPlayerProps = {
    *
    * `"asap"` behavior means joining the call as soon as it is possible
    * (either the `join_ahead_time_seconds` setting allows it, or the user
-   * has a the capability to join backstage).
+   * has the capability to join backstage).
    *
    * `"live"` behavior means joining the call when it goes live.
    *
@@ -41,7 +41,8 @@ export const LivestreamPlayer = ({
   callId,
   ViewerLivestream = DefaultViewerLivestream,
   joinBehavior = 'asap',
-}: LivestreamPlayerProps) => {
+  children,
+}: PropsWithChildren<LivestreamPlayerProps>) => {
   const client = useStreamVideoClient();
 
   const [call, setCall] = useState<Call>();
@@ -82,6 +83,7 @@ export const LivestreamPlayer = ({
   return (
     <StreamCall call={call}>
       <ViewerLivestream joinBehavior={joinBehavior} />
+      {children}
     </StreamCall>
   );
 };

packages/react-sdk/src/wrappers/LivestreamPlayer/LivestreamPlayer.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import { Call, CallingState } from '@stream-io/video-client';
 import {
   useCall,
   useCallStateHooks,
+  useEffectEvent,
   useStreamVideoClient,
 } from '@stream-io/video-react-bindings';
 import {
@@ -12,7 +13,6 @@ import {
   LivestreamLayoutProps,
   StreamCall,
 } from '../../core';
-import { useEffectEvent } from '@stream-io/video-react-bindings';
 
 export type LivestreamPlayerProps = {
   /**
@@ -28,7 +28,7 @@ export type LivestreamPlayerProps = {
    *
    * `"asap"` behavior means joining the call as soon as it is possible
    * (either the `join_ahead_time_seconds` setting allows it, or the user
-   * has a the capability to join backstage).
+   * has the capability to join backstage).
    *
    * `"live"` behavior means joining the call when it goes live.
    *
@@ -49,8 +49,10 @@ export type LivestreamPlayerProps = {
   onError?: (error: any) => void;
 };
 
-export const LivestreamPlayer = (props: LivestreamPlayerProps) => {
-  const { callType, callId, ...restProps } = props;
+export const LivestreamPlayer = (
+  props: PropsWithChildren<LivestreamPlayerProps>,
+) => {
+  const { callType, callId, children, ...restProps } = props;
   const client = useStreamVideoClient();
   const [call, setCall] = useState<Call>();
   const onError = useEffectEvent(props.onError ?? (() => {}));
@@ -78,6 +80,7 @@ export const LivestreamPlayer = (props: LivestreamPlayerProps) => {
   return (
     <StreamCall call={call}>
       <LivestreamCall {...restProps} />
+      {children}
     </StreamCall>
   );
 };