From 9458afb6740684bbe8d9329deef727ad38591db2 Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Wed, 11 Oct 2023 15:50:08 +0530 Subject: [PATCH] docs: livestream component docs --- .../livestream/_category_.json | 4 + .../livestream/host-live-stream.mdx | 97 +++++++++++++++++++ .../livestream/viewer-live-stream.mdx | 78 +++++++++++++++ .../livestream/duration-badge.mdx | 5 + .../livestream/follower-count.mdx | 5 + .../host-live-stream-controls.mdx | 5 + .../host-live-stream-top-view.mdx | 5 + .../host-start-stream-button.mdx | 5 + .../on-end-stream-handler.mdx | 5 + .../on-start-stream-handler.mdx | 5 + .../livestream/live-indicator.mdx | 5 + .../livestream/live-stream-layout.mdx | 5 + .../livestream/live-stream-media-controls.mdx | 5 + .../on-leave-stream-handler.mdx | 5 + .../viewer-leave-stream-button.mdx | 5 + .../viewer-live-stream-controls.mdx | 5 + .../viewer-live-stream-top-view.mdx | 5 + .../HostStartStreamButton.tsx | 16 ++- .../HostLiveStreamTopView.tsx | 9 +- 19 files changed, 268 insertions(+), 6 deletions(-) create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/_category_.json create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-live-stream.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/viewer-live-stream.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/duration-badge.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/follower-count.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-live-stream-controls.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-live-stream-top-view.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-start-stream-button.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/on-end-stream-handler.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/on-start-stream-handler.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-indicator.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-stream-layout.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-stream-media-controls.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/on-leave-stream-handler.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-leave-stream-button.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-live-stream-controls.mdx create mode 100644 packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-live-stream-top-view.mdx diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/_category_.json b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/_category_.json new file mode 100644 index 0000000000..9e59f1b262 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Livestream", + "position": 3 +} diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-live-stream.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-live-stream.mdx new file mode 100644 index 0000000000..dd1631da75 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-live-stream.mdx @@ -0,0 +1,97 @@ +--- +id: host-live-stream +title: HostLiveStream +--- + +import HostLiveStreamTopView from '../../common-content/ui-components/livestream/host-live-stream/host-live-stream-top-view.mdx'; +import LiveStreamLayout from '../../common-content/ui-components/livestream/live-stream-layout.mdx'; +import HostLiveStreamControls from '../../common-content/ui-components/livestream/host-live-stream/host-live-stream-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-live-stream/host-start-stream-button.mdx'; +import LiveStreamMediaControls from '../../common-content/ui-components/livestream/live-stream-media-controls.mdx'; +import OnStartStreamHandler from '../../common-content/ui-components/livestream/host-live-stream/on-start-stream-handler.mdx'; +import OnEndStreamHandler from '../../common-content/ui-components/livestream/host-live-stream/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 publishing and unpublishing of stream. + +## General usage + +Let's see how to show the `ViewerLiveStream` UI: + +```tsx {13} +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 ( + + + + ); +}; +``` + +## Props + +### `hls` + +Enable HTTP live streaming + +| Type | Default | +| --------- | ------- | +| `boolean` | false | + +### `HostLiveStreamTopView` + + + +### `LiveStreamLayout` + + + +### `ViewerLiveStreamControls` + + + +### `DurationBadge` + + + +### `FollowerCount` + + + +### `LiveIndicator` + + + +### `HostStartStreamButton` + + + +### `LiveStreamMediaControls` + + + +### `OnStartStreamHandler` + + + +### `OnEndStreamHandler` + + diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/viewer-live-stream.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/viewer-live-stream.mdx new file mode 100644 index 0000000000..ca5b2564ec --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/viewer-live-stream.mdx @@ -0,0 +1,78 @@ +--- +id: viewer-live-stream +title: ViewerLiveStream +--- + +import ViewerLiveStreamTopView from '../../common-content/ui-components/livestream/viewer-live-stream/viewer-live-stream-top-view.mdx'; +import LiveStreamLayout from '../../common-content/ui-components/livestream/live-stream-layout.mdx'; +import ViewerLiveStreamControls from '../../common-content/ui-components/livestream/viewer-live-stream/viewer-live-stream-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 ViewerLeaveStreamButton from '../../common-content/ui-components/livestream/viewer-live-stream/viewer-leave-stream-button.mdx'; +import OnLeaveStreamHandler from '../../common-content/ui-components/livestream/viewer-live-stream/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, screen sharing stream. +- Duration of the stream. +- Whether the stream is live and number of participant's watching the stream. + +## 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 ( + + + + ); +}; +``` + +## Props + +### `ViewerLiveStreamTopView` + + + +### `LiveStreamLayout` + + + +### `ViewerLiveStreamControls` + + + +### `DurationBadge` + + + +### `FollowerCount` + + + +### `LiveIndicator` + + + +### `ViewerLeaveStreamButton` + + + +### `OnLeaveStreamHandler` + + diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/duration-badge.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/duration-badge.mdx new file mode 100644 index 0000000000..30c6eb1397 --- /dev/null +++ b/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) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/follower-count.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/follower-count.mdx new file mode 100644 index 0000000000..31c7533638 --- /dev/null +++ b/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) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-live-stream-controls.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-live-stream-controls.mdx new file mode 100644 index 0000000000..1e49aff0b7 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-live-stream-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) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-live-stream-top-view.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-live-stream-top-view.mdx new file mode 100644 index 0000000000..dda72c6121 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-live-stream-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) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-start-stream-button.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/host-start-stream-button.mdx new file mode 100644 index 0000000000..568d3cd1bf --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/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) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/on-end-stream-handler.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/on-end-stream-handler.mdx new file mode 100644 index 0000000000..cb8eb9b34d --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/on-end-stream-handler.mdx @@ -0,0 +1,5 @@ +Handler to be called when the End Stream button is pressed. + +| Type | +| --------------------------- | +| `() => void` \| `undefined` | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/on-start-stream-handler.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/on-start-stream-handler.mdx new file mode 100644 index 0000000000..24b34b5556 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/host-live-stream/on-start-stream-handler.mdx @@ -0,0 +1,5 @@ +Handler to be called when the Start Stream button is pressed. + +| Type | +| --------------------------- | +| `() => void` \| `undefined` | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-indicator.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-indicator.mdx new file mode 100644 index 0000000000..cb1e0b50bd --- /dev/null +++ b/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) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-stream-layout.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-stream-layout.mdx new file mode 100644 index 0000000000..ab97c13000 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-stream-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) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-stream-media-controls.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-stream-media-controls.mdx new file mode 100644 index 0000000000..1debe6c130 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/live-stream-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) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/on-leave-stream-handler.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/on-leave-stream-handler.mdx new file mode 100644 index 0000000000..7f01bbc222 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/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` | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-leave-stream-button.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-leave-stream-button.mdx new file mode 100644 index 0000000000..3292ec58cb --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/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) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-live-stream-controls.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-live-stream-controls.mdx new file mode 100644 index 0000000000..e1cf0f8864 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-live-stream-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) | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-live-stream-top-view.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-live-stream-top-view.mdx new file mode 100644 index 0000000000..4ef4e1320a --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/livestream/viewer-live-stream/viewer-live-stream-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) | diff --git a/packages/react-native-sdk/src/components/Livestream/LiveStreamControls/HostStartStreamButton.tsx b/packages/react-native-sdk/src/components/Livestream/LiveStreamControls/HostStartStreamButton.tsx index 234fa099c5..336c0c1dad 100644 --- a/packages/react-native-sdk/src/components/Livestream/LiveStreamControls/HostStartStreamButton.tsx +++ b/packages/react-native-sdk/src/components/Livestream/LiveStreamControls/HostStartStreamButton.tsx @@ -43,7 +43,8 @@ export const HostStartStreamButton = ({ hls, }: HostStartStreamButtonProps) => { const [isAwaitingResponse, setIsAwaitingResponse] = useState(false); - const { useIsCallLive } = useCallStateHooks(); + const { useIsCallLive, useIsCallBroadcastingInProgress } = + useCallStateHooks(); const { theme: { colors, @@ -55,8 +56,11 @@ export const HostStartStreamButton = ({ const call = useCall(); const isCallLive = useIsCallLive(); + const isCallBroadcasting = useIsCallBroadcastingInProgress(); const { t } = useI18n(); + const liveOrBroadcasting = isCallLive || isCallBroadcasting; + const onStartStreamButtonPress = async () => { if (onStartStreamHandler) { onStartStreamHandler(); @@ -98,13 +102,15 @@ export const HostStartStreamButton = ({ { backgroundColor: isAwaitingResponse ? colors.dark_gray - : isCallLive + : liveOrBroadcasting ? colors.error : colors.primary, }, hostStartStreamButton.container, ]} - onPress={isCallLive ? onEndStreamButtonPress : onStartStreamButtonPress} + onPress={ + liveOrBroadcasting ? onEndStreamButtonPress : onStartStreamButtonPress + } > {isAwaitingResponse ? ( - ) : isCallLive ? ( + ) : liveOrBroadcasting ? ( ) : ( @@ -131,7 +137,7 @@ export const HostStartStreamButton = ({ > {isAwaitingResponse ? t('Loading...') - : isCallLive + : liveOrBroadcasting ? t('Stop Livestream') : t('Start Livestream')} diff --git a/packages/react-native-sdk/src/components/Livestream/LiveStreamTopView/HostLiveStreamTopView.tsx b/packages/react-native-sdk/src/components/Livestream/LiveStreamTopView/HostLiveStreamTopView.tsx index e1b2d8c80b..36da4a4a17 100644 --- a/packages/react-native-sdk/src/components/Livestream/LiveStreamTopView/HostLiveStreamTopView.tsx +++ b/packages/react-native-sdk/src/components/Livestream/LiveStreamTopView/HostLiveStreamTopView.tsx @@ -13,6 +13,7 @@ import { FollowerCountProps, } from './FollowerCount'; import { useTheme } from '../../../contexts'; +import { useCallStateHooks } from '@stream-io/video-react-bindings'; /** * Props for the HostLiveStreamTopView component. @@ -40,6 +41,12 @@ export const HostLiveStreamTopView = ({ LiveIndicator = DefaultLiveIndicator, FollowerCount = DefaultFollowerCount, }: HostLiveStreamTopViewProps) => { + const { useIsCallLive, useIsCallBroadcastingInProgress } = + useCallStateHooks(); + const isCallLive = useIsCallLive(); + const isBroadcasting = useIsCallBroadcastingInProgress(); + + const liveOrBroadcasting = isCallLive || isBroadcasting; const { theme: { colors, hostLiveStreamTopView }, } = useTheme(); @@ -59,7 +66,7 @@ export const HostLiveStreamTopView = ({ /> - {LiveIndicator && } + {liveOrBroadcasting && LiveIndicator && } {FollowerCount && }