feat(react-native): live stream components for host and viewer #1135

khushal87 · 2023-10-10T07:44:42Z

This PR focuses on introducing the LiveStream components for RN SDK.

This focuses on two main components:

HostLiveStream - https://staging.getstream.io/video/docs/reactnative/ui-components/livestream/host-live-stream/
ViewerLiveStream - https://staging.getstream.io/video/docs/reactnative/ui-components/livestream/viewer-live-stream/

Almost all of the subcomponents within the above two components are customizable. The components are mainly divided into the TopView, Layout, and Controls components.

The TopView component internally consists of DurationBadge, LiveIndicator, and FollowerCount component that displays the duration of the live stream, whether the live stream is active and the follower count displays the number of people lives in the call.

The Controls View consists of HostStartStreamButton, ViewerLeaveStreamButton, and the LiveStreamMediaControls.

The LiveStreamLayout component is responsible for showing the screen sharing and the video stream of the host.

The component docs are also added.

…ming

…hal87/react-native-livestream-components

packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/03-livestream.mdx

...ages/react-native-sdk/src/components/Livestream/LiveStreamControls/HostStartStreamButton.tsx

...ges/react-native-sdk/src/components/Livestream/LiveStreamControls/HostLiveStreamControls.tsx

...s/react-native-sdk/src/components/Livestream/LiveStreamControls/ViewerLiveStreamControls.tsx

refactor: change component names refactor: change component names refactor: remove livestream dir to solve case issue refactor: remove livestream dir to solve case issue refactor: change component names refactor: change component names and directory structure

...react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-livestream.mdx

...act-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/viewer-livestream.mdx

...react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-livestream.mdx

vishalnarkhede · 2023-10-17T11:51:39Z

...react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-livestream.mdx

+- 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 publish and un-publish stream.


Suggested change

- Media controls to control publish and un-publish stream.

- Media controls to start and end the livestream.

...act-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/viewer-livestream.mdx

...react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-livestream.mdx

vishalnarkhede · 2023-10-19T09:14:08Z

packages/react-native-sdk/src/components/Livestream/LivestreamTopView/DurationBadge.tsx

+        call?.off('call.live_started', handleLiveStarted);
+        call?.off('call.updated', handleLiveEnded);


Instead of off, use the unsubscribe functions returned by on function. We ran into some issue with current approach on chat in the past.

Done @vishalnarkhede

packages/react-native-sdk/src/components/Livestream/LivestreamTopView/DurationBadge.tsx

…hal87/react-native-livestream-components

vishalnarkhede · 2023-10-19T10:19:35Z

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

+        {
+          backgroundColor: colors.static_grey,
+        },
+        hostLiveStream.container,


Suggested change

hostLiveStream.container,

hostLivestream.container,

Check if there are any more such instances needed to be fixed

vishalnarkhede · 2023-10-19T10:44:38Z

...ages/react-native-sdk/src/components/Livestream/LivestreamControls/HostStartStreamButton.tsx

+
+  const onStartStreamButtonPress = async () => {
+    if (onStartStreamHandler) {
+      onStartStreamHandler();


shouldn't we return after this?

All the other handler related props that we have in SDK, are implemented with purpose of being able to replace default logic. So I think we should be consistent.

Good catch. Thanks for spotting it. 😄

vishalnarkhede · 2023-10-19T10:49:30Z

...act-native-sdk/src/components/Livestream/LivestreamControls/LivestreamAudioControlButton.tsx

+              height: iconSizes.sm,
+              width: iconSizes.sm,
+            },
+            liveStreamAudioControlButton.icon,


Suggested change

liveStreamAudioControlButton.icon,

livestreamAudioControlButton.icon,

vishalnarkhede · 2023-10-19T10:50:52Z

...ive/common-content/ui-components/livestream/viewer-livestream/viewer-leave-stream-button.mdx

@@ -0,0 +1,5 @@
+Component to customize the leave stream button on the viewer's end live stream.


Suggested change

Component to customize the leave stream button on the viewer's end live stream.

Component to customize the leave stream button for the viewer.

Just simplifying the language

vishalnarkhede · 2023-10-19T10:51:41Z

...native/common-content/ui-components/livestream/viewer-livestream/on-leave-stream-handler.mdx

@@ -0,0 +1,5 @@
+Handler to be called when the viewer's leave stream button is called.


Suggested change

Handler to be called when the viewer's leave stream button is called.

Handler to be called when the leave stream button is pressed by the viewer.

khushal87 added 7 commits October 9, 2023 21:41

feat(react-native): live stream components

9534c6a

chore: resolve conflicts from main

b867990

feat: add live stream layout component and prop documentation and the…

8db1024

…ming

feat: enable HLS support on host end

353b3e2

docs: livestream component docs

9458afb

docs: improve docs and floating participant view

414510b

fix: landscape mode styles in livestream dogfood app

8c0f4ed

khushal87 marked this pull request as ready for review October 11, 2023 12:54

khushal87 added 2 commits October 11, 2023 18:36

fix: change screen shots

c012232

docs: fix vale lint issue

4d3c32d

khushal87 requested review from santhoshvai and vishalnarkhede October 11, 2023 13:12

khushal87 added 4 commits October 12, 2023 17:29

refactor: change variable name

e2893b7

chore: resolve conflicts from main

06e71a9

Merge branch 'main' of github.com:GetStream/stream-video-js into khus…

dc6a007

…hal87/react-native-livestream-components

docs(react-native): props variable case

1541d46

santhoshvai reviewed Oct 16, 2023

View reviewed changes

packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/03-livestream.mdx Show resolved Hide resolved

santhoshvai reviewed Oct 16, 2023

View reviewed changes

...ages/react-native-sdk/src/components/Livestream/LiveStreamControls/HostStartStreamButton.tsx Outdated Show resolved Hide resolved

santhoshvai reviewed Oct 16, 2023

View reviewed changes

...ges/react-native-sdk/src/components/Livestream/LiveStreamControls/HostLiveStreamControls.tsx Outdated Show resolved Hide resolved

santhoshvai reviewed Oct 16, 2023

View reviewed changes

...s/react-native-sdk/src/components/Livestream/LiveStreamControls/ViewerLiveStreamControls.tsx Outdated Show resolved Hide resolved

khushal87 added 3 commits October 17, 2023 11:00

refactor: simplify container in topview and call controls

6899e12

docs: update screenshots

7b9249b

khushal87 force-pushed the khushal87/react-native-livestream-components branch from a0bc93c to 251f33d Compare October 17, 2023 07:05

santhoshvai reviewed Oct 17, 2023

View reviewed changes

...react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-livestream.mdx Outdated Show resolved Hide resolved

santhoshvai reviewed Oct 17, 2023

View reviewed changes

...act-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/viewer-livestream.mdx Outdated Show resolved Hide resolved

docs: highlight line syntax

b850dc1

santhoshvai approved these changes Oct 17, 2023

View reviewed changes

vishalnarkhede reviewed Oct 17, 2023

View reviewed changes

...react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-livestream.mdx Outdated Show resolved Hide resolved

vishalnarkhede reviewed Oct 17, 2023

View reviewed changes

...act-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/viewer-livestream.mdx Outdated Show resolved Hide resolved

docs: improve documentation of host and viewer livestream

ac2cefc

vishalnarkhede reviewed Oct 17, 2023

View reviewed changes

...react-native-sdk/docusaurus/docs/reactnative/04-ui-components/livestream/host-livestream.mdx Outdated Show resolved Hide resolved

khushal87 added 2 commits October 18, 2023 10:27

docs: improve description for host and viewer livestream

2839745

fix: vale linting issues

283d8fd

vishalnarkhede reviewed Oct 19, 2023

View reviewed changes

packages/react-native-sdk/src/components/Livestream/LivestreamTopView/DurationBadge.tsx Outdated Show resolved Hide resolved

khushal87 added 3 commits October 19, 2023 15:18

Merge branch 'main' of github.com:GetStream/stream-video-js into khus…

1b46573

…hal87/react-native-livestream-components

refactor: duration logic in DurationBadge

1cb5256

refactor: duration logic in DurationBadge

07185f9

vishalnarkhede reviewed Oct 19, 2023

View reviewed changes

refactor: theme variables

8939b77

vishalnarkhede approved these changes Oct 19, 2023

View reviewed changes

vishalnarkhede merged commit 5a5f0e1 into main Oct 19, 2023
14 checks passed

vishalnarkhede deleted the khushal87/react-native-livestream-components branch October 19, 2023 14:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-native): live stream components for host and viewer #1135

feat(react-native): live stream components for host and viewer #1135

khushal87 commented Oct 10, 2023 •

edited

Loading

vishalnarkhede Oct 17, 2023 •

edited

Loading

khushal87 Oct 17, 2023

vishalnarkhede Oct 19, 2023

khushal87 Oct 19, 2023

vishalnarkhede Oct 19, 2023

vishalnarkhede Oct 19, 2023

vishalnarkhede Oct 19, 2023

vishalnarkhede Oct 19, 2023

khushal87 Oct 19, 2023

vishalnarkhede Oct 19, 2023

vishalnarkhede Oct 19, 2023

vishalnarkhede Oct 19, 2023

	- Media controls to control publish and un-publish stream.
	- Media controls to start and end the livestream.

		call?.off('call.live_started', handleLiveStarted);
		call?.off('call.updated', handleLiveEnded);

	liveStreamAudioControlButton.icon,
	livestreamAudioControlButton.icon,

		@@ -0,0 +1,5 @@
		Component to customize the leave stream button on the viewer's end live stream.

		@@ -0,0 +1,5 @@
		Handler to be called when the viewer's leave stream button is called.

	Handler to be called when the viewer's leave stream button is called.
	Handler to be called when the leave stream button is pressed by the viewer.

feat(react-native): live stream components for host and viewer #1135

feat(react-native): live stream components for host and viewer #1135

Conversation

khushal87 commented Oct 10, 2023 • edited Loading

vishalnarkhede Oct 17, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

khushal87 commented Oct 10, 2023 •

edited

Loading

vishalnarkhede Oct 17, 2023 •

edited

Loading