@stream-io/video-react-native-sdk 0.1.9 → 0.1.11

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import {
+  ViewerLeaveStreamButton as DefaultViewerLeaveStreamButton,
+  ViewerLeaveStreamButtonProps,
+} from './ViewerLeaveStreamButton';
+import { useTheme } from '../../../contexts';
+import { Z_INDEX } from '../../../constants';
+
+/**
+ * Props for the ViewerLivestreamControls component.
+ */
+export type ViewerLivestreamControlsProps = ViewerLeaveStreamButtonProps & {
+  /**
+   * Component to customize the leave stream button on the viewer's end live stream.
+   */
+  ViewerLeaveStreamButton?: React.ComponentType<ViewerLeaveStreamButtonProps> | null;
+};
+
+/**
+ * The ViewerLivestreamControls component displays the call controls for the live stream at viewer's end.
+ */
+export const ViewerLivestreamControls = ({
+  ViewerLeaveStreamButton = DefaultViewerLeaveStreamButton,
+  onLeaveStreamHandler,
+}: ViewerLivestreamControlsProps) => {
+  const {
+    theme: { colors, viewerLivestreamControls },
+  } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.static_overlay,
+        },
+        viewerLivestreamControls.container,
+      ]}
+    >
+      <View style={[styles.leftElement, viewerLivestreamControls.leftElement]}>
+        {ViewerLeaveStreamButton && (
+          <ViewerLeaveStreamButton
+            onLeaveStreamHandler={onLeaveStreamHandler}
+          />
+        )}
+      </View>
+      <View
+        style={[styles.rightElement, viewerLivestreamControls.rightElement]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    zIndex: Z_INDEX.IN_FRONT,
+  },
+  content: {},
+  leftElement: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  rightElement: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+});

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

@@ -0,0 +1,5 @@
+export * from './HostLivestreamControls';
+export * from './LivestreamMediaControls';
+export * from './HostStartStreamButton';
+export * from './LivestreamAudioControlButton';
+export * from './LivestreamVideoControlButton';

package/src/components/Livestream/LivestreamLayout/LivestreamLayout.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { usePaginatedLayoutSortPreset } from '../../../hooks/usePaginatedLayoutSortPreset';
+import { useTheme } from '../../../contexts';
+import {
+  VideoRenderer as DefaultVideoRenderer,
+  VideoRendererProps,
+} from '../../Participant';
+
+/**
+ * Props for the LivestreamLayout component.
+ */
+export type LivestreamLayoutProps = {
+  /*
+   * Check if device is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
+  /**
+   * Component to customize the video component of the participant.
+   */
+  VideoRenderer?: React.ComponentType<VideoRendererProps> | null;
+};
+
+const hasScreenShare = (p?: StreamVideoParticipant) =>
+  p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
+
+/**
+ * The LivestreamLayout component presents the live stream video layout.
+ */
+export const LivestreamLayout = ({
+  landscape,
+  VideoRenderer = DefaultVideoRenderer,
+}: LivestreamLayoutProps) => {
+  const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();
+  const call = useCall();
+  const {
+    theme: { colors, livestreamLayout },
+  } = useTheme();
+  const [currentSpeaker, ...otherParticipants] = useParticipants();
+  const hasOngoingScreenShare = useHasOngoingScreenShare();
+  const presenter = hasOngoingScreenShare
+    ? hasScreenShare(currentSpeaker) && currentSpeaker
+    : otherParticipants.find(hasScreenShare);
+
+  usePaginatedLayoutSortPreset(call);
+
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        landScapeStyles,
+        { backgroundColor: colors.dark_gray },
+        livestreamLayout.container,
+      ]}
+    >
+      {VideoRenderer && hasOngoingScreenShare && presenter && (
+        <VideoRenderer trackType="screenShareTrack" participant={presenter} />
+      )}
+      {VideoRenderer && !hasOngoingScreenShare && currentSpeaker && (
+        <VideoRenderer participant={currentSpeaker} trackType="videoTrack" />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

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

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

package/src/components/Livestream/LivestreamTopView/DurationBadge.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../../contexts';
+import { ShieldBadge } from '../../../icons';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { CallSessionResponse, StreamCallEvent } from '@stream-io/video-client';
+
+/**
+ * Props for the HostDurationBadge component.
+ */
+export type DurationBadgeProps = {
+  mode?: 'host' | 'viewer';
+};
+
+/**
+ * The HostDurationBadge component displays the duration while the live stream is active.
+ */
+export const DurationBadge = ({ mode }: DurationBadgeProps) => {
+  const { useCallSession } = useCallStateHooks();
+  const session = useCallSession();
+
+  const [duration, setDuration] = useState(() => {
+    if (!session || !session.live_started_at) {
+      return 0;
+    }
+    const liveStartTime = new Date(session.live_started_at);
+    const now = new Date();
+    return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);
+  });
+
+  const call = useCall();
+  const {
+    theme: {
+      colors,
+      variants: { iconSizes },
+      durationBadge,
+    },
+  } = useTheme();
+
+  // for host
+  useEffect(() => {
+    if (mode !== 'host') {
+      return;
+    }
+    let intervalId: NodeJS.Timer;
+
+    const handleLiveStarted = () => {
+      intervalId = setInterval(() => {
+        setDuration((d) => d + 1);
+      }, 1000);
+    };
+
+    const handleLiveEnded = (event: StreamCallEvent) => {
+      const callDetails = (
+        event as StreamCallEvent & {
+          call: { session: CallSessionResponse };
+        }
+      ).call.session;
+      if (callDetails?.live_ended_at !== null) {
+        clearInterval(intervalId);
+      }
+    };
+
+    const callLiveStartedUnsubscribe = call?.on(
+      'call.live_started',
+      handleLiveStarted,
+    );
+    const callUpdatedUnsubscribe = call?.on('call.updated', handleLiveEnded);
+
+    return () => {
+      if (mode !== 'host') {
+        return;
+      }
+      if (callLiveStartedUnsubscribe && callUpdatedUnsubscribe) {
+        callLiveStartedUnsubscribe();
+        callUpdatedUnsubscribe();
+      }
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [call, mode]);
+
+  // for viewer
+  useEffect(() => {
+    if (mode !== 'viewer') {
+      return;
+    }
+    let intervalId: NodeJS.Timer;
+    const handleLiveStarted = () => {
+      intervalId = setInterval(() => {
+        setDuration((d) => d + 1);
+      }, 1000);
+    };
+
+    handleLiveStarted();
+
+    return () => {
+      if (mode !== 'viewer') {
+        return;
+      }
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [mode]);
+
+  const formatDuration = (durationInMs: number) => {
+    const days = Math.floor(durationInMs / 86400);
+    const hours = Math.floor(durationInMs / 3600);
+    const minutes = Math.floor((durationInMs % 3600) / 60);
+    const seconds = durationInMs % 60;
+
+    return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${
+      minutes < 10 ? '0' : ''
+    }${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colors.dark_gray },
+        durationBadge.container,
+      ]}
+    >
+      <View
+        style={[
+          styles.icon,
+          {
+            height: iconSizes.xs,
+            width: iconSizes.xs,
+          },
+          durationBadge.icon,
+        ]}
+      >
+        <ShieldBadge />
+      </View>
+      <Text
+        style={[
+          styles.label,
+          { color: colors.static_white },
+          durationBadge.label,
+        ]}
+      >
+        {formatDuration(duration)}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {},
+  label: {
+    textAlign: 'center',
+    fontSize: 13,
+    fontWeight: '400',
+    flexShrink: 1,
+    includeFontPadding: false,
+    paddingLeft: 4,
+  },
+});

package/src/components/Livestream/LivestreamTopView/FollowerCount.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../../contexts';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { Eye } from '../../../icons';
+
+/**
+ * Props for the FollowerCount component.
+ */
+export type FollowerCountProps = {};
+
+/**
+ * The FollowerCount component that displays the number of participants while in the call.
+ */
+export const FollowerCount = ({}: FollowerCountProps) => {
+  const {
+    theme: {
+      colors,
+      variants: { iconSizes },
+      followerCount,
+    },
+  } = useTheme();
+  const { useParticipantCount } = useCallStateHooks();
+  const totalParticipants = useParticipantCount();
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colors.dark_gray },
+        followerCount.container,
+      ]}
+    >
+      <View
+        style={[
+          styles.icon,
+          { height: iconSizes.xs, width: iconSizes.xs },
+          followerCount.icon,
+        ]}
+      >
+        <Eye />
+      </View>
+      <Text
+        style={[
+          styles.label,
+          { color: colors.static_white },
+          followerCount.label,
+        ]}
+      >
+        {totalParticipants}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderTopRightRadius: 4,
+    borderBottomRightRadius: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {},
+  label: {
+    fontSize: 13,
+    fontWeight: '400',
+    flexShrink: 1,
+    textAlign: 'center',
+    includeFontPadding: false,
+    marginLeft: 4,
+  },
+});

package/src/components/Livestream/LivestreamTopView/HostLivestreamTopView.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  DurationBadge as DefaultDurationBadge,
+  DurationBadgeProps,
+} from './DurationBadge';
+import {
+  LiveIndicator as DefaultLiveIndicator,
+  LiveIndicatorProps,
+} from './LiveIndicator';
+import {
+  FollowerCount as DefaultFollowerCount,
+  FollowerCountProps,
+} from './FollowerCount';
+import { useTheme } from '../../../contexts';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { Z_INDEX } from '../../../constants';
+
+/**
+ * Props for the HostLivestreamTopView component.
+ */
+export type HostLivestreamTopViewProps = {
+  /**
+   * Component to customize the Duration badge component on the host's live stream's top view.
+   */
+  DurationBadge?: React.ComponentType<DurationBadgeProps> | null;
+  /**
+   * Component to customize the Live indicator on the host's live stream's top view.
+   */
+  LiveIndicator?: React.ComponentType<LiveIndicatorProps> | null;
+  /**
+   * Component to customize the Follower count indicator on the host's live stream's top view.
+   */
+  FollowerCount?: React.ComponentType<FollowerCountProps> | null;
+};
+
+/**
+ * The HostLivestreamTopView component displays the top view component of the host's live stream.
+ */
+export const HostLivestreamTopView = ({
+  DurationBadge = DefaultDurationBadge,
+  LiveIndicator = DefaultLiveIndicator,
+  FollowerCount = DefaultFollowerCount,
+}: HostLivestreamTopViewProps) => {
+  const { useIsCallLive, useIsCallBroadcastingInProgress } =
+    useCallStateHooks();
+  const isCallLive = useIsCallLive();
+  const isBroadcasting = useIsCallBroadcastingInProgress();
+
+  const liveOrBroadcasting = isCallLive || isBroadcasting;
+  const {
+    theme: { colors, hostLivestreamTopView },
+  } = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colors.static_overlay },
+        hostLivestreamTopView.container,
+      ]}
+    >
+      <View style={[styles.leftElement, hostLivestreamTopView.leftElement]}>
+        {DurationBadge && <DurationBadge mode="host" />}
+      </View>
+      <View
+        style={[styles.centerElement, hostLivestreamTopView.centerElement]}
+      />
+      <View style={[styles.rightElement, hostLivestreamTopView.rightElement]}>
+        <View style={[styles.liveInfo, hostLivestreamTopView.liveInfo]}>
+          {liveOrBroadcasting && LiveIndicator && <LiveIndicator />}
+          {FollowerCount && <FollowerCount />}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    borderBottomEndRadius: 8,
+    borderBottomStartRadius: 8,
+    zIndex: Z_INDEX.IN_FRONT,
+  },
+  liveInfo: {
+    flexDirection: 'row',
+  },
+  leftElement: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  centerElement: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  rightElement: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+});

package/src/components/Livestream/LivestreamTopView/LiveIndicator.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../../contexts';
+import { useI18n } from '@stream-io/video-react-bindings';
+
+/**
+ * Props for the LiveIndicator component.
+ */
+export type LiveIndicatorProps = {};
+
+/**
+ * The LiveIndicator component displays whether the live stream is live or not.
+ */
+export const LiveIndicator = ({}: LiveIndicatorProps) => {
+  const {
+    theme: { colors, typefaces, liveIndicator },
+  } = useTheme();
+  const { t } = useI18n();
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colors.primary },
+        liveIndicator.container,
+      ]}
+    >
+      <Text
+        style={[
+          styles.label,
+          { color: colors.static_white },
+          typefaces.subtitleBold,
+          liveIndicator.label,
+        ]}
+      >
+        {t('Live')}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderTopLeftRadius: 4,
+    borderBottomLeftRadius: 4,
+    justifyContent: 'center',
+  },
+  label: {
+    textAlign: 'center',
+    includeFontPadding: false,
+  },
+});

package/src/components/Livestream/LivestreamTopView/ViewerLivestreamTopView.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  DurationBadge as DefaultDurationBadge,
+  DurationBadgeProps,
+} from './DurationBadge';
+import {
+  LiveIndicator as DefaultLiveIndicator,
+  LiveIndicatorProps,
+} from './LiveIndicator';
+import {
+  FollowerCount as DefaultFollowerCount,
+  FollowerCountProps,
+} from './FollowerCount';
+import { useTheme } from '../../../contexts';
+import { Z_INDEX } from '../../../constants';
+
+/**
+ * Props for the ViewerLivestreamTopView component.
+ */
+export type ViewerLivestreamTopViewProps = {
+  /**
+   * Component to customize the Duration badge component on the viewer's live stream's top view.
+   */
+  DurationBadge?: React.ComponentType<DurationBadgeProps> | null;
+  /**
+   * Component to customize the Live indicator on the viewer's live stream's top view.
+   */
+  LiveIndicator?: React.ComponentType<LiveIndicatorProps> | null;
+  /**
+   * Component to customize the Follower count indicator on the viewer's live stream's top view.
+   */
+  FollowerCount?: React.ComponentType<FollowerCountProps> | null;
+};
+
+/**
+ * The ViewerLivestreamTopView component displays the top view component of the viewer's live stream.
+ */
+export const ViewerLivestreamTopView = ({
+  DurationBadge = DefaultDurationBadge,
+  LiveIndicator = DefaultLiveIndicator,
+  FollowerCount = DefaultFollowerCount,
+}: ViewerLivestreamTopViewProps) => {
+  const {
+    theme: { colors, viewerLivestreamTopView },
+  } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colors.static_overlay },
+        viewerLivestreamTopView.container,
+      ]}
+    >
+      <View style={[styles.leftElement, viewerLivestreamTopView.leftElement]}>
+        <View style={[styles.liveInfo, viewerLivestreamTopView.liveInfo]}>
+          {LiveIndicator && <LiveIndicator />}
+          {FollowerCount && <FollowerCount />}
+        </View>
+      </View>
+      <View
+        style={[styles.centerElement, viewerLivestreamTopView.centerElement]}
+      >
+        {DurationBadge && <DurationBadge mode="viewer" />}
+      </View>
+      <View
+        style={[styles.rightElement, viewerLivestreamTopView.rightElement]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    borderBottomEndRadius: 8,
+    borderBottomStartRadius: 8,
+    zIndex: Z_INDEX.IN_FRONT,
+  },
+  liveInfo: {
+    flexDirection: 'row',
+  },
+  leftElement: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  centerElement: {
+    flex: 1,
+    alignItems: 'center',
+    flexGrow: 3,
+  },
+  rightElement: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+});

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

@@ -0,0 +1,4 @@
+export * from './DurationBadge';
+export * from './FollowerCount';
+export * from './LiveIndicator';
+export * from './HostLivestreamTopView';