docs: livestream component docs

GetStream · Oct 11, 2023 · 9458afb · 9458afb
1 parent 353b3e2
commit 9458afb
Show file tree

Hide file tree

Showing 19 changed files with 268 additions and 6 deletions.
diff --git a/.../react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/_category_.json b/.../react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Livestream",
+  "position": 3
+}
diff --git a/...dk/docusaurus/docs/reactnative/04-ui-components/livestream/host-live-stream.mdx b/...dk/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 (
+    <StreamCall call={call}>
+      <HostLiveStream />
+    </StreamCall>
+  );
+};
+```
+
+## Props
+
+### `hls`
+
+Enable HTTP live streaming
+
+| Type      | Default |
+| --------- | ------- |
+| `boolean` | false   |
+
+### `HostLiveStreamTopView`
+
+<HostLiveStreamTopView />
+
+### `LiveStreamLayout`
+
+<LiveStreamLayout />
+
+### `ViewerLiveStreamControls`
+
+<HostLiveStreamControls />
+
+### `DurationBadge`
+
+<DurationBadge />
+
+### `FollowerCount`
+
+<FollowerCount />
+
+### `LiveIndicator`
+
+<LiveIndicator />
+
+### `HostStartStreamButton`
+
+<HostStartStreamButton />
+
+### `LiveStreamMediaControls`
+
+<LiveStreamMediaControls />
+
+### `OnStartStreamHandler`
+
+<OnStartStreamHandler />
+
+### `OnEndStreamHandler`
+
+<OnEndStreamHandler />
diff --git a/.../docusaurus/docs/reactnative/04-ui-components/livestream/viewer-live-stream.mdx b/.../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 (
+    <StreamCall call={call}>
+      <ViewerLiveStream />
+    </StreamCall>
+  );
+};
+```
+
+## Props
+
+### `ViewerLiveStreamTopView`
+
+<ViewerLiveStreamTopView />
+
+### `LiveStreamLayout`
+
+<LiveStreamLayout />
+
+### `ViewerLiveStreamControls`
+
+<ViewerLiveStreamControls />
+
+### `DurationBadge`
+
+<DurationBadge />
+
+### `FollowerCount`
+
+<FollowerCount />
+
+### `LiveIndicator`
+
+<LiveIndicator />
+
+### `ViewerLeaveStreamButton`
+
+<ViewerLeaveStreamButton />
+
+### `OnLeaveStreamHandler`
+
+<OnLeaveStreamHandler />
diff --git a/...rus/docs/reactnative/common-content/ui-components/livestream/duration-badge.mdx b/...rus/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/...rus/docs/reactnative/common-content/ui-components/livestream/follower-count.mdx b/...rus/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/...content/ui-components/livestream/host-live-stream/host-live-stream-controls.mdx b/...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/...content/ui-components/livestream/host-live-stream/host-live-stream-top-view.mdx b/...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/...-content/ui-components/livestream/host-live-stream/host-start-stream-button.mdx b/...-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/...mon-content/ui-components/livestream/host-live-stream/on-end-stream-handler.mdx b/...mon-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/...n-content/ui-components/livestream/host-live-stream/on-start-stream-handler.mdx b/...n-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/...rus/docs/reactnative/common-content/ui-components/livestream/live-indicator.mdx b/...rus/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/...docs/reactnative/common-content/ui-components/livestream/live-stream-layout.mdx b/...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/...ctnative/common-content/ui-components/livestream/live-stream-media-controls.mdx b/...ctnative/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/...content/ui-components/livestream/viewer-live-stream/on-leave-stream-handler.mdx b/...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/...tent/ui-components/livestream/viewer-live-stream/viewer-leave-stream-button.mdx b/...tent/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/...ent/ui-components/livestream/viewer-live-stream/viewer-live-stream-controls.mdx b/...ent/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/...ent/ui-components/livestream/viewer-live-stream/viewer-live-stream-top-view.mdx b/...ent/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/...s/react-native-sdk/src/components/Livestream/LiveStreamControls/HostStartStreamButton.tsx b/...s/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
+      }
     >
       <View
         style={[
@@ -115,7 +121,7 @@ export const HostStartStreamButton = ({
       >
         {isAwaitingResponse ? (
           <ActivityIndicator />
-        ) : isCallLive ? (
+        ) : liveOrBroadcasting ? (
           <EndBroadcastIcon />
         ) : (
           <StartStreamIcon />
@@ -131,7 +137,7 @@ export const HostStartStreamButton = ({
       >
         {isAwaitingResponse
           ? t('Loading...')
-          : isCallLive
+          : liveOrBroadcasting
           ? t('Stop Livestream')
           : t('Start Livestream')}
       </Text>

diff --git a/...es/react-native-sdk/src/components/Livestream/LiveStreamTopView/HostLiveStreamTopView.tsx b/...es/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 = ({
       />
       <View style={[styles.rightElement, hostLiveStreamTopView.rightElement]}>
         <View style={[styles.liveInfo, hostLiveStreamTopView.liveInfo]}>
-          {LiveIndicator && <LiveIndicator />}
+          {liveOrBroadcasting && LiveIndicator && <LiveIndicator />}
           {FollowerCount && <FollowerCount />}
         </View>
       </View>