diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx index 3b0890a391..49ca69d48a 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx @@ -9,15 +9,13 @@ You can access call, participant and client state using hooks. These hooks are r To observe call state you need to provide a `Call` instance to the [`StreamCall` component](../../ui-components/core/stream-call). -Let's see an example where we use the `useCall` and `useCallCallingState` hooks to display some basic information about the call: +Let's see an example where we use the `useCall`, `useCallCallingState` and `useParticipants` hooks to display some basic information about the call: ```tsx -import { View, Text } from 'react-native'; import { - StreamCall, - useCall, - useCallCallingState, Call, + useCall, + useCallStateHooks, } from '@stream-io/video-react-native-sdk'; export default function App() { @@ -25,20 +23,24 @@ export default function App() { return ( - + ); } -const CallUI = () => { +const MyCallUI = () => { const call = useCall(); + + const { useCallCallingState, useParticipants } = useCallStateHooks(); const callingState = useCallCallingState(); + const participants = useParticipants(); return ( - - Call: {call?.data?.cid} - State: {callingState} - +
+
Call: {call?.cid}
+
State: {callingState}
+
Participants: {participants.length}
+
); }; ``` @@ -47,45 +49,45 @@ This approach makes it possible to access the call state and be notified about c The `StreamCall` component uses the `StreamCallProvider` under the hood. -Here are all the call-related state hooks: +Here is an excerpt of the available call state hooks: | Name | Description | | --------------------------------- | ------------------------------------------------------------------------------------------------------------- | | `useCall` | The `Call` instance that is registered with `StreamCall`. You need the `Call` instance to initiate API calls. | -| `useIsCallRecordingInProgress` | It's' `true` if the call is being recorded. | -| `useIsCallBroadcastingInProgress` | It's `true` if the call is being broadcasted. | -| `useIsCallLive` | It's `true` if the call is currently live. | -| `useCallMembers` | The list of call members | +| `useCallBlockedUserIds` | The list of blocked user IDs. | | `useCallCallingState` | Provides information about the call state. For example, `RINGING`, `JOINED` or `RECONNECTING`. | +| `useCallCreatedAt` | The time the call was created. | +| `useCallCreatedBy` | The user that created the call. | +| `useCallCustomData` | The custom data attached to the call. | +| `useCallMembers` | The list of call members | +| `useCallSettings` | The settings of the call. | | `useCallStartedAt` | The actual start time of the current call session. | +| `useCallStartsAt` | The scheduled start time of the call. | | `useCallStatsReport` | When stats gathering is enabled, this observable will emit a new value at a regular (configurable) interval. | -| `useCallMetadata` | The `CallResponse`, see below for more information. | -| `useCallRecordings` | The latest list of recordings performed during the call. | -| `useHasOngoingScreenShare` | It will return `true` if at least one participant is sharing their screen. | +| `useCallUpdatedAt` | The time the call was last updated. | | `useDominantSpeaker` | The participant that is the current dominant speaker of the call. | -| `useOwnCapabilities` | The capabilities of the local participant. | +| `useHasOngoingScreenShare` | It will return `true` if at least one participant is sharing their screen. | | `useHasPermissions` | Returns `true` if the local participant has all the given permissions. | -| `useCallPermissionRequest` | The latest call permission request. | - -The `CallResponse` object contains the following information: - -| Name | Description | -| ------------------ | ------------------------------------------------------- | -| `backstage` | It's `true` if the call is in backstage mode. | -| `blocked_user_ids` | The users who are blocked from this call. | -| `created_at` | The time the call was created. | -| `created_by` | The creator of the call. | -| `custom` | Custom data attached to the call. | -| `egress` | Broadcasting related information. | -| `ended_at` | When the call was ended. | -| `ingress` | RTMP publishing related information. | -| `recording` | It's `true` if the call is being recorded. | -| `session` | Information related to the current session of the call. | -| `settings` | The settings for this call. | -| `starts_at` | The scheduled start time of the call. | -| `team` | Team that the call is restricted to. | -| `type` | The type of the call. | -| `updated_at` | When the call was updated. | +| `useIsCallLive` | It's `true` if the call is currently live. | +| `useIsCallRecordingInProgress` | It's' `true` if the call is being recorded. | +| `useIsCallBroadcastingInProgress` | It's `true` if the call is being broadcasted. | +| `useIsCallTranscribingInProgress` | It's `true` if the call is being transcribed. | +| `useOwnCapabilities` | The capabilities of the local participant. | + +In your IDE of choice, you can see the full list if you de-structure the `useCallStateHooks` object: + +```ts +import { useCallStateHooks } from '@stream-io/video-react-native-sdk'; + +const { + useCallMembers, + useDominantSpeaker, + useParticipants, + useLocalParticipant, + useIsCallRecordingInProgress, + // ... +} = useCallStateHooks(); +``` ## Participant state @@ -100,33 +102,31 @@ If you want to display information about the joined participants of the call you | `useAnonymousParticipantCount` | The approximate participant count of anonymous users in the active call. | ```tsx -import { View, Text } from 'react-native'; import { - useParticipantCount, - useLocalParticipant, + useCallStateHooks, StreamCall, - Call, } from '@stream-io/video-react-native-sdk'; export default function App() { - let call: Call; + let call: call; return ( - + ); } -const CallUI = () => { +const MyCallUI = () => { + const { useLocalParticipant, useParticipantCount } = useCallStateHooks(); const participantCount = useParticipantCount(); const localParticipant = useLocalParticipant(); return ( - - Number of participants: {participantCount} - Session ID: {localParticipant.sessionId} - +
+
Number of participants: {participantCount}
+
Session ID: {localParticipant.sessionId}
+
); }; ``` @@ -159,18 +159,15 @@ The `StreamVideoLocalParticipant` has these additional properties: ## Client state -To observe client state you need to provide a `StreamVideoClient` instance to the `StreamVideo` context provider: +To observe client state you need to provide a `StreamVideoClient` instance to the `StreamVideo` context provider. +If you want to observe the connected user you can use the `useConnectedUser` hook. Let's see an example: -If you want to observe the connected user you can use the `useConnectedUser` hook. - ```tsx -import { Text, View } from 'react-native'; import { - StreamVideo, - StreamVideoClient, useConnectedUser, + StreamVideoClient, } from '@stream-io/video-react-native-sdk'; export default function App() { @@ -178,18 +175,14 @@ export default function App() { return ( -
+ ); } -const Header = () => { +const MyHeader = () => { const user = useConnectedUser(); - return ( - - {user ? `Logged in: ${user.name}` : 'Logged out'} - - ); + return
{user ? `Logged in: ${user.name}` : 'Logged out'}
; }; ``` diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/04-camera-and-microphone.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/04-camera-and-microphone.mdx index 55797ff81f..6270d5fb5e 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/04-camera-and-microphone.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/04-camera-and-microphone.mdx @@ -10,104 +10,147 @@ Handling audio and video devices in a your application means working with `Media ### Call settings -The default state of the camera is determined by the settings in the call object. The settings can be retrieved using the hook `useCallMetadata`: +The default state of the camera is determined by the settings in the call object. ```ts -const metadata = useCallMetadata(); +import { useCallStateHooks } from '@stream-io/video-react-sdk'; -metadata?.settings?.video.camera_default_on; +const { useCallSettings } = useCallStateHooks(); +const settings = useCallSettings(); + +settings?.video.camera_default_on; ``` -### Manage the camera facing mode +:::note +Make sure, `call.get()` is called at least once in the application, after the call is created. +::: + +### Start-Stop Camera + +We can use the functions `camera.enable()` and `camera.disable()` to control the publishing and un-publishing our video stream. -We can get the facing mode state of the camera and the function to toggle the state using the hook `useMediaStreamManagement`: +Alternatively, you can use `camera.toggle()`. ```ts -const { toggleCameraFacingMode, isCameraOnFrontFacingMode } = useMediaStreamManagement();; +const call = useCall(); -console.log(`Camera facingMode ${isCameraOnFrontFacingMode ? 'user' : 'environment'}`); -toggleCameraFacingMode(); +call.camera.enable(); +call.camera.disable(); +// or +call.camera.toggle(); ``` -### Manage video publishing +### Manage Camera Facing Mode -We can use functions from the hook `useMediaStreamManagement` for publishing and un-publishing our video stream: +We can toggle the camera face from front to back and vice-versa using `camera.flip()` function inside the call object derived from `useCall` hook. ```ts -const { publishVideoStream, stopPublishingVideo } = useMediaStreamManagement();; +const call = useCall(); -publishVideoStream(); -// or -stopPublishingVideo(); +call.camera.flip(); ``` -### Video mute state -We can get the mute state of our video stream bu checking if our tracks are being published: +We can get the facing mode state of the camera by: + +```ts +const { useCameraState } = useCallStateHooks(); +const { direction } = useCameraState(); // direction returns 'front' or 'back'. +``` + +### Video mute status + +We can get the mute state of our video stream by checking the `status` value returned from the `useCameraState` hook: ```ts -const localParticipant = useLocalParticipant(); +const { useCameraState } = useCallStateHooks(); +const { status } = useCameraState(); // status returns enabled, disabled or undefined +``` + +### Show Video Preview + +We can get the video stream from the camera using the utility hook `useLocalVideoStream` and show it using the `RTCView` component from `react-native-webrtc` library: + +```tsx +import { RTCView } from 'react-native-webrtc'; +import { useLocalVideoStream } from '@stream-io/video-react-native-sdk'; + +const localVideoStream = useLocalVideoStream(); -const isVideoMute = !localParticipant?.publishedTracks.includes( - SfuModels.TrackType.VIDEO, -); +return ; ``` + ## Microphone management ### Call settings -The default state of the microphone is determined by the settings in the call object. The settings can be retrieved using the hook `useCallMetadata`: + +The default state of the microphone is determined by the settings in the call object. ```ts -const metadata = useCallMetadata(); +import { useCallStateHooks } from '@stream-io/video-react-sdk'; + +const { useCallSettings } = useCallStateHooks(); +const settings = useCallSettings(); -metadata?.settings?.audio.mic_default_on; +settings?.audio.mic_default_on; ``` -### Manage audio publishing -We can use functions from the hook `useMediaStreamManagement` for publishing and un-publishing our audio stream: -```ts -const { publishAudioStream, stopPublishingAudio } = useMediaStreamManagement(); +:::note +Make sure, `call.get()` is called at least once in the application, after the call is created. +::: -publishAudioStream(); -// or -stopPublishingAudio(); -``` +### Start-Stop Microphone -### Audio mute state +We can use the functions `microphone.enable()` and `microphone.disable()` to control the publishing and un-publishing our audio stream: -We can get the mute state of our video stream bu checking if our tracks are being published: +Alternatively, you can use `microphone.toggle()`. ```ts -const localParticipant = useLocalParticipant(); +const call = useCall(); -const isAudioMute = !localParticipant?.publishedTracks.includes( - SfuModels.TrackType.AUDIO, -); +call.microphone.enable(); +call.microphone.disable(); +// or +call.microphone.toggle(); ``` -## Previewing and manage states before joining a call - -Before joining a call, user may need to preview their streams and decide their mute status. We provide utility functions in the hook `useMediaStreamManagement` for this. - -### Initial mute states +### Audio mute status -The following state variables and toggle functions can be used to determine the mute status of the streams before joining a call: +We can get the mute state of our audio stream by checking the `status` value returned from the `useMicrophoneState` hook: ```ts -const { initialAudioEnabled, initialVideoEnabled, toggleInitialAudioMuteState, toggleInitialVideoMuteState } = useMediaStreamManagement(); +const { useMicrophoneState } = useCallStateHooks(); +const { status } = useMicrophoneState(); // status returns enabled, disabled or undefined ``` -### Show Video Preview +## Client-side settings -We can get the video stream from the camera using the utility hook `useLocalVideoStream` and show it using the `RTCView` component from `react-native-webrtc` library: +Before joining a call, user may need to preview their streams and decide their mute status. We provide utility functions in the hook `useMediaStreamManagement` for this. -```tsx -import { RTCView } from 'react-native-webrtc'; +### Initial mute status + +The initial status of the camera and mic can be pre-selected by the following: + +```tsx {7-10} +export const App = () => { + const call = /* ... */; + + return ( + + + + ); +}; +``` -const localVideoStream = useLocalVideoStream(); +Also, The following toggle functions can be used to toggle the mute/unmute status of the streams before joining a call: -return ( - -); -``` \ No newline at end of file +```ts +const { toggleInitialAudioMuteState, toggleInitialVideoMuteState } = + useMediaStreamManagement(); +``` diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions-and-custom-events.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions-and-custom-events.mdx index ae11ac1d5b..1e1a868c26 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions-and-custom-events.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions-and-custom-events.mdx @@ -49,6 +49,7 @@ Reactions are only delivered to clients that are [watching the call](../../advan The [participant state](../../core/call-and-participant-state/#observe-participant-state) will contain the latest reaction of each participant: ```typescript +const { useParticipants } = useCallStateHooks(); const participants = useParticipants(); const reactions = participants.map((p) => p.reaction); @@ -62,6 +63,7 @@ If you're using the [participant state](../../guides/call-and-participant-state/ ```typescript const call: Call; +const { useParticipants } = useCallStateHooks(); const participants = useParticipants(); call.resetReaction(participants[0].sessionId); diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/11-sorting-api.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/11-sorting-api.mdx index 97e2a80c93..0d854ff403 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/11-sorting-api.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/11-sorting-api.mdx @@ -171,11 +171,12 @@ For this purpose, we have extended the built-in `useParticipants` hook with a `s ```ts import { - useParticipants, combineComparators, name, + useCallStateHooks, } from '@stream-io/video-react-native-sdk'; +const { useParticipants } = useCallStateHooks(); // this will override the call's default sorting criteria // and will return a list of participants sorted by name const participants = useParticipants({ sortBy: name }); @@ -197,6 +198,7 @@ In case you need to use a stateful comparator, please make sure to memoize it us const myStatelessComparator = combineComparators(/* ... */); export const MyComponent = () => { + const { useParticipants } = useCallStateHooks(); // component scope const participants1 = useParticipants({ sortBy: myStatelessComparator }); diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/core/stream-call.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/core/stream-call.mdx index e3828120e8..1689206e0c 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/core/stream-call.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/core/stream-call.mdx @@ -29,7 +29,15 @@ export const App = () => { ### `call` | Type | -|--------| +| ------ | | `Call` | Stream's `Call` instance propagated to the component's children as a part of `StreamCallContext`. Children can access it with `useCall()` hook. + +### `mediaDeviceInitialState` + +Provides the initial status of the media devices(audio and video) to the `MediaStreamManagement`. + +| Type | +| ----------------------------------------------------------------------------------------- | +| `{initialAudioEnabled: boolean`\|`undefined, initialVideoEnabled: boolean`\|`undefined }` | 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 index 968ed0bcca..85994ffb6e 100644 --- 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 @@ -119,8 +119,8 @@ When set to false, the video stream will not be shown even if it is available. 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) +- [Video fallback](../../../ui-cookbook/video-fallback) +- [Network Quality Indicator](../../../ui-cookbook/network-quality-indicator) - [Custom Label](../../../ui-cookbook/participant-label) - [Video Renderer](../../../ui-cookbook/video-renderer) -- [Reaction](../../../ui-cookbook/participant-reaction) +- [Reactions](../../../ui-cookbook/reaction) 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-video-fallback.mdx similarity index 98% rename from packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/07-participant-video-fallback.mdx rename to packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/07-video-fallback.mdx index 9f204d8c68..74b9a196b0 100644 --- 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-video-fallback.mdx @@ -1,5 +1,5 @@ --- -title: Participant Video Fallback +title: Video Fallback description: How to make your own custom participant video fallback --- 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/07-video-renderer.mdx similarity index 98% rename from packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/08-video-renderer.mdx rename to packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/07-video-renderer.mdx index a3b3deaacf..483f2564ce 100644 --- 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/07-video-renderer.mdx @@ -1,5 +1,5 @@ --- -title: Participant Video Renderer +title: Video Renderer description: How to make your own custom participant video renderer --- 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-reactions.mdx similarity index 99% rename from packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/09-participant-reaction.mdx rename to packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/09-reactions.mdx index 7255cada3a..f80f4f1e15 100644 --- 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-reactions.mdx @@ -1,5 +1,5 @@ --- -title: Participant Reaction +title: Reactions description: How to make your own custom participant reaction component --- diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/14-runtime-layout-switching.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/11-runtime-layout-switching.mdx similarity index 100% rename from packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/14-runtime-layout-switching.mdx rename to packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/11-runtime-layout-switching.mdx diff --git a/packages/react-native-sdk/src/providers/StreamCall.tsx b/packages/react-native-sdk/src/providers/StreamCall.tsx index 05b31be3a2..24e0eaf158 100644 --- a/packages/react-native-sdk/src/providers/StreamCall.tsx +++ b/packages/react-native-sdk/src/providers/StreamCall.tsx @@ -9,8 +9,14 @@ import { } from './MediaStreamManagement'; export type StreamCallProps = { + /** + * Stream Call instance propagated to the component's children as a part of StreamCallContext. + * Children can access it with useCall() hook. + */ call: Call; - + /** + * Provides the initial status of the media devices(audio/video) to the `MediaStreamManagement`. + */ mediaDeviceInitialState?: MediaDevicesInitialState; }; /**