@stream-io/video-react-native-sdk 0.1.10 → 0.1.12

package/src/components/Livestream/HostLivestream/HostLivestream.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { StyleSheet, SafeAreaView } from 'react-native';
+import { useTheme } from '../../../contexts';
+import { useIncallManager } from '../../../hooks';
+import {
+  HostLivestreamTopView as DefaultHostLivestreamTopView,
+  HostLivestreamTopViewProps,
+} from '../LivestreamTopView/HostLivestreamTopView';
+import {
+  HostLivestreamControls as DefaultHostLivestreamControls,
+  HostLivestreamControlsProps,
+} from '../LivestreamControls/HostLivestreamControls';
+import {
+  LivestreamLayout as DefaultLivestreamLayout,
+  LivestreamLayoutProps,
+} from '../LivestreamLayout';
+
+/**
+ * Props for the HostLivestream component.
+ */
+export type HostLivestreamProps = HostLivestreamTopViewProps &
+  HostLivestreamControlsProps & {
+    /**
+     * Component to customize the top view at the host's live stream.
+     */
+    HostLivestreamTopView?: React.ComponentType<HostLivestreamTopViewProps> | null;
+    /**
+     * Component to customize the live stream video layout.
+     */
+    LivestreamLayout?: React.ComponentType<LivestreamLayoutProps> | null;
+    /**
+     * Component to customize the bottom view controls at the host's live stream.
+     */
+    HostLivestreamControls?: React.ComponentType<HostLivestreamControlsProps> | null;
+    /**
+     * Enable HTTP live streaming
+     */
+    hls?: boolean;
+  };
+
+/**
+ * The HostLivestream component displays the UI for the Host's live stream.
+ */
+export const HostLivestream = ({
+  HostLivestreamTopView = DefaultHostLivestreamTopView,
+  HostLivestreamControls = DefaultHostLivestreamControls,
+  LivestreamLayout = DefaultLivestreamLayout,
+  LiveIndicator,
+  FollowerCount,
+  DurationBadge,
+  HostStartStreamButton,
+  LivestreamMediaControls,
+  onEndStreamHandler,
+  onStartStreamHandler,
+  hls = false,
+}: HostLivestreamProps) => {
+  const {
+    theme: { colors, hostLivestream },
+  } = useTheme();
+
+  // Automatically route audio to speaker devices as relevant for watching videos.
+  useIncallManager({ media: 'video', auto: true });
+
+  const topViewProps: HostLivestreamTopViewProps = {
+    LiveIndicator,
+    FollowerCount,
+    DurationBadge,
+  };
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.static_grey,
+        },
+        hostLivestream.container,
+      ]}
+    >
+      {HostLivestreamTopView && <HostLivestreamTopView {...topViewProps} />}
+      {LivestreamLayout && <LivestreamLayout />}
+      {HostLivestreamControls && (
+        <HostLivestreamControls
+          onEndStreamHandler={onEndStreamHandler}
+          onStartStreamHandler={onStartStreamHandler}
+          HostStartStreamButton={HostStartStreamButton}
+          LivestreamMediaControls={LivestreamMediaControls}
+          hls={hls}
+        />
+      )}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/components/Livestream/HostLivestream/index.ts

@@ -0,0 +1 @@
+export * from './HostLivestream';

package/src/components/Livestream/LivestreamControls/HostLivestreamControls.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  HostStartStreamButton as DefaultHostStartStreamButton,
+  HostStartStreamButtonProps,
+} from './HostStartStreamButton';
+import {
+  LivestreamMediaControls as DefaultLivestreamMediaControls,
+  LivestreamMediaControlsProps,
+} from './LivestreamMediaControls';
+import { useTheme } from '../../../contexts';
+import { Z_INDEX } from '../../../constants';
+
+/**
+ * Props for the HostLivestreamControls component.
+ */
+export type HostLivestreamControlsProps = HostStartStreamButtonProps & {
+  /**
+   * Component to customize the host's start/end live stream button.
+   */
+  HostStartStreamButton?: React.ComponentType<HostStartStreamButtonProps> | null;
+  /**
+   * Component to customize the host's media control(audio/video) buttons.
+   */
+  LivestreamMediaControls?: React.ComponentType<LivestreamMediaControlsProps> | null;
+  /**
+   * Enable HTTP live streaming
+   */
+  hls?: boolean;
+};
+
+/**
+ * The HostLivestreamControls component displays the call controls for the live stream at host's end.
+ */
+export const HostLivestreamControls = ({
+  HostStartStreamButton = DefaultHostStartStreamButton,
+  LivestreamMediaControls = DefaultLivestreamMediaControls,
+  onEndStreamHandler,
+  onStartStreamHandler,
+  hls = false,
+}: HostLivestreamControlsProps) => {
+  const {
+    theme: { colors, hostLivestreamControls },
+  } = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colors.static_overlay },
+        hostLivestreamControls.container,
+      ]}
+    >
+      <View style={[styles.leftElement, hostLivestreamControls.leftElement]}>
+        {HostStartStreamButton && (
+          <HostStartStreamButton
+            onEndStreamHandler={onEndStreamHandler}
+            onStartStreamHandler={onStartStreamHandler}
+            hls={hls}
+          />
+        )}
+      </View>
+      <View style={[styles.rightElement, hostLivestreamControls.rightElement]}>
+        {LivestreamMediaControls && <LivestreamMediaControls />}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    zIndex: Z_INDEX.IN_FRONT,
+  },
+  leftElement: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  rightElement: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+});

package/src/components/Livestream/LivestreamControls/HostStartStreamButton.tsx

@@ -0,0 +1,163 @@
+import {
+  useCall,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import React, { useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { useTheme } from '../../../contexts';
+import { EndBroadcastIcon, StartStreamIcon } from '../../../icons';
+
+/**
+ * Props for the HostStartStreamButton component.
+ */
+export type HostStartStreamButtonProps = {
+  /**
+   * Handler to be called when the Start Stream button is pressed.
+   * @returns void
+   */
+  onStartStreamHandler?: () => void;
+  /**
+   * Handler to be called when the End Stream button is pressed.
+   * @returns void
+   */
+  onEndStreamHandler?: () => void;
+  /**
+   * Enable HTTP live streaming
+   */
+  hls?: boolean;
+};
+
+/**
+ * The HostStartStreamButton component displays and controls the start and end of the host's live stream.
+ */
+export const HostStartStreamButton = ({
+  onEndStreamHandler,
+  onStartStreamHandler,
+  hls,
+}: HostStartStreamButtonProps) => {
+  const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
+  const { useIsCallLive, useIsCallBroadcastingInProgress } =
+    useCallStateHooks();
+  const {
+    theme: {
+      colors,
+      variants: { iconSizes },
+      typefaces,
+      hostStartStreamButton,
+    },
+  } = useTheme();
+
+  const call = useCall();
+  const isCallLive = useIsCallLive();
+  const isCallBroadcasting = useIsCallBroadcastingInProgress();
+  const { t } = useI18n();
+
+  const liveOrBroadcasting = isCallLive || isCallBroadcasting;
+
+  const onStartStreamButtonPress = async () => {
+    if (onStartStreamHandler) {
+      onStartStreamHandler();
+      return;
+    }
+    try {
+      setIsAwaitingResponse(true);
+      await call?.goLive();
+      if (hls) {
+        await call?.startHLS();
+      }
+      setIsAwaitingResponse(false);
+    } catch (error) {
+      console.error('Error starting livestream', error);
+    }
+  };
+
+  const onEndStreamButtonPress = async () => {
+    if (onEndStreamHandler) {
+      onEndStreamHandler();
+      return;
+    }
+    try {
+      setIsAwaitingResponse(true);
+      if (hls) {
+        await call?.stopHLS();
+      } else {
+        await call?.stopLive();
+      }
+
+      setIsAwaitingResponse(false);
+    } catch (error) {
+      console.error('Error stopping livestream', error);
+    }
+  };
+
+  return (
+    <Pressable
+      disabled={isAwaitingResponse}
+      style={[
+        styles.container,
+        {
+          backgroundColor: isAwaitingResponse
+            ? colors.dark_gray
+            : liveOrBroadcasting
+            ? colors.error
+            : colors.primary,
+        },
+        hostStartStreamButton.container,
+      ]}
+      onPress={
+        liveOrBroadcasting ? onEndStreamButtonPress : onStartStreamButtonPress
+      }
+    >
+      <View
+        style={[
+          styles.icon,
+          { height: iconSizes.xs, width: iconSizes.xs },
+          hostStartStreamButton.icon,
+        ]}
+      >
+        {isAwaitingResponse ? (
+          <ActivityIndicator />
+        ) : liveOrBroadcasting ? (
+          <EndBroadcastIcon />
+        ) : (
+          <StartStreamIcon />
+        )}
+      </View>
+      <Text
+        style={[
+          styles.text,
+          typefaces.subtitleBold,
+          { color: colors.static_white },
+          hostStartStreamButton.text,
+        ]}
+      >
+        {isAwaitingResponse
+          ? t('Loading...')
+          : liveOrBroadcasting
+          ? t('Stop Livestream')
+          : t('Start Livestream')}
+      </Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+    borderRadius: 4,
+  },
+  icon: {},
+  text: {
+    marginLeft: 8,
+    includeFontPadding: false,
+  },
+});

package/src/components/Livestream/LivestreamControls/LivestreamAudioControlButton.tsx

@@ -0,0 +1,78 @@
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import React from 'react';
+import { useTheme } from '../../../contexts';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Mic, MicOff } from '../../../icons';
+
+/**
+ * The LivestreamAudioControlButton controls the audio stream publish/unpublish while in the livestream for the host.
+ */
+export const LivestreamAudioControlButton = () => {
+  const call = useCall();
+  const { useMicrophoneState } = useCallStateHooks();
+  const { status } = useMicrophoneState();
+  const {
+    theme: {
+      colors,
+      variants: { iconSizes, buttonSizes },
+      livestreamAudioControlButton,
+    },
+  } = useTheme();
+
+  const onPress = async () => {
+    await call?.microphone.toggle();
+  };
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.dark_gray,
+          height: buttonSizes.xs,
+          width: buttonSizes.xs,
+        },
+        livestreamAudioControlButton.container,
+      ]}
+    >
+      {status === 'enabled' ? (
+        <View
+          style={[
+            styles.icon,
+            {
+              height: iconSizes.sm,
+              width: iconSizes.sm,
+            },
+            livestreamAudioControlButton.icon,
+          ]}
+        >
+          <Mic color={colors.static_white} />
+        </View>
+      ) : (
+        <View
+          style={[
+            styles.icon,
+            {
+              height: iconSizes.sm,
+              width: iconSizes.sm,
+            },
+            livestreamAudioControlButton.icon,
+          ]}
+        >
+          <MicOff color={colors.static_white} />
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 4,
+    borderRadius: 4,
+  },
+  icon: {},
+});

package/src/components/Livestream/LivestreamControls/LivestreamMediaControls.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from '../../../contexts';
+import { LivestreamAudioControlButton } from './LivestreamAudioControlButton';
+import { LivestreamVideoControlButton } from './LivestreamVideoControlButton';
+
+/**
+ * Props for the LivestreamMediaControls component.
+ */
+export type LivestreamMediaControlsProps = {};
+
+/**
+ * The LivestreamMediaControls component controls the media publish/unpublish for the host's live stream.
+ */
+export const LivestreamMediaControls = ({}: LivestreamMediaControlsProps) => {
+  const {
+    theme: { livestreamMediaControls },
+  } = useTheme();
+  return (
+    <View style={[styles.container, livestreamMediaControls.container]}>
+      <LivestreamAudioControlButton />
+      <LivestreamVideoControlButton />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/components/Livestream/LivestreamControls/LivestreamVideoControlButton.tsx

@@ -0,0 +1,78 @@
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import React from 'react';
+import { useTheme } from '../../../contexts';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Video, VideoSlash } from '../../../icons';
+
+/**
+ * The LivestreamVideoControlButton controls the video stream publish/unpublish while in the livestream for the host.
+ */
+export const LivestreamVideoControlButton = () => {
+  const call = useCall();
+  const { useCameraState } = useCallStateHooks();
+  const { status } = useCameraState();
+  const {
+    theme: {
+      colors,
+      variants: { iconSizes, buttonSizes },
+      livestreamVideoControlButton,
+    },
+  } = useTheme();
+
+  const onPress = async () => {
+    await call?.camera.toggle();
+  };
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.dark_gray,
+          height: buttonSizes.xs,
+          width: buttonSizes.xs,
+        },
+        livestreamVideoControlButton.container,
+      ]}
+    >
+      {status === 'enabled' ? (
+        <View
+          style={[
+            styles.icon,
+            {
+              height: iconSizes.sm,
+              width: iconSizes.sm,
+            },
+            livestreamVideoControlButton.icon,
+          ]}
+        >
+          <Video color={colors.static_white} />
+        </View>
+      ) : (
+        <View
+          style={[
+            styles.icon,
+            {
+              height: iconSizes.sm,
+              width: iconSizes.sm,
+            },
+            livestreamVideoControlButton.icon,
+          ]}
+        >
+          <VideoSlash color={colors.static_white} />
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 4,
+    borderRadius: 4,
+  },
+  icon: {},
+});

package/src/components/Livestream/LivestreamControls/ViewerLeaveStreamButton.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { useTheme } from '../../../contexts';
+import { LeaveStreamIcon } from '../../../icons';
+import { useCall, useI18n } from '@stream-io/video-react-bindings';
+
+/**
+ * Props for the ViewerLeaveStreamButton component.
+ */
+export type ViewerLeaveStreamButtonProps = {
+  /**
+   * Handler to be called when the viewer's leave stream button is called.
+   * @returns void
+   */
+  onLeaveStreamHandler?: () => void;
+};
+
+/**
+ * The ViewerLeaveStreamButton component displays and controls the leave stream logic of the viewer's live stream.
+ */
+export const ViewerLeaveStreamButton = ({
+  onLeaveStreamHandler,
+}: ViewerLeaveStreamButtonProps) => {
+  const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
+  const call = useCall();
+  const { t } = useI18n();
+  const {
+    theme: {
+      colors,
+      variants: { iconSizes },
+      typefaces,
+      viewerLeaveStreamButton,
+    },
+  } = useTheme();
+
+  const onLeaveStreamButtonPress = async () => {
+    if (onLeaveStreamHandler) {
+      onLeaveStreamHandler();
+      return;
+    }
+    try {
+      setIsAwaitingResponse(true);
+      await call?.leave();
+      setIsAwaitingResponse(false);
+    } catch (error) {
+      console.error('Error stopping livestream', error);
+    }
+  };
+
+  return (
+    <Pressable
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.dark_gray,
+        },
+        viewerLeaveStreamButton.container,
+      ]}
+      onPress={onLeaveStreamButtonPress}
+    >
+      <View
+        style={[
+          styles.icon,
+          { height: iconSizes.xs, width: iconSizes.xs },
+          viewerLeaveStreamButton.icon,
+        ]}
+      >
+        {isAwaitingResponse ? <ActivityIndicator /> : <LeaveStreamIcon />}
+      </View>
+      <Text
+        style={[
+          styles.text,
+          typefaces.subtitleBold,
+          { color: colors.static_white },
+          viewerLeaveStreamButton.text,
+        ]}
+      >
+        {isAwaitingResponse ? t('Loading...') : t('Leave Stream')}
+      </Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+    borderRadius: 4,
+  },
+  icon: {},
+  text: {
+    marginLeft: 8,
+    includeFontPadding: false,
+  },
+});