@stream-io/video-react-native-sdk 1.13.3 → 1.14.0

package/src/components/Livestream/LivestreamPlayer/LivestreamEnded.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { useState, useEffect, useMemo } from 'react';
+import { useTheme } from '../../../contexts';
+import { ListRecordingsResponse } from '@stream-io/video-client';
+import {
+  FlatList,
+  Pressable,
+  View,
+  Text,
+  StyleSheet,
+  Linking,
+} from 'react-native';
+
+export const CallEndedView = () => {
+  const { t } = useI18n();
+  const call = useCall();
+  const [recordingsResponse, setRecordingsResponse] = useState<
+    ListRecordingsResponse | undefined
+  >(undefined);
+
+  const styles = useStyles();
+
+  useEffect(() => {
+    let isCanceled = false;
+    const fetchRecordings = async () => {
+      if (recordingsResponse == null) {
+        try {
+          const callRecordingsResponse = await call?.queryRecordings();
+          if (!isCanceled) {
+            setRecordingsResponse(callRecordingsResponse);
+          }
+        } catch (error) {
+          console.log('Error fetching recordings:', error);
+          if (!isCanceled) {
+            setRecordingsResponse(undefined);
+          }
+        }
+      }
+    };
+
+    fetchRecordings();
+
+    return () => {
+      isCanceled = true;
+    };
+  }, [call, recordingsResponse]);
+
+  const openUrl = (url: string) => {
+    Linking.canOpenURL(url).then((supported) => {
+      if (supported) {
+        Linking.openURL(url);
+      } else {
+        console.log('Cannot open URL:', url);
+      }
+    });
+  };
+
+  const showRecordings =
+    recordingsResponse && recordingsResponse.recordings.length > 0;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{t('The livestream has ended.')}</Text>
+
+      {showRecordings && (
+        <>
+          <Text style={styles.subtitle}>{t('Watch recordings:')}</Text>
+          <View style={styles.recordingsContainer}>
+            <FlatList
+              data={recordingsResponse.recordings}
+              keyExtractor={(item) => item.session_id}
+              renderItem={({ item }) => (
+                <Pressable
+                  style={styles.recordingButton}
+                  onPress={() => openUrl(item.url)}
+                >
+                  <Text style={styles.recordingText}>
+                    {item.url.substring(0, 70)}...
+                  </Text>
+                </Pressable>
+              )}
+            />
+          </View>
+        </>
+      )}
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          backgroundColor: theme.colors.sheetPrimary,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: theme.variants.spacingSizes.md,
+        },
+        title: {
+          fontSize: theme.variants.fontSizes.lg,
+          marginBottom: theme.variants.spacingSizes.md,
+          color: theme.colors.textPrimary,
+          fontWeight: 'bold',
+        },
+        subtitle: {
+          fontSize: theme.variants.fontSizes.md,
+          marginBottom: theme.variants.spacingSizes.md,
+          color: theme.colors.textPrimary,
+          fontWeight: 'bold',
+        },
+        recordingButton: {
+          padding: theme.variants.spacingSizes.sm,
+          width: '100%',
+        },
+        recordingText: {
+          color: theme.colors.textSecondary,
+          fontSize: theme.variants.fontSizes.md,
+        },
+        recordingsContainer: {
+          width: '100%',
+          alignItems: 'center',
+        },
+      }),
+    [theme],
+  );
+};

package/src/components/Livestream/LivestreamPlayer/LivestreamPlayer.tsx

@@ -21,12 +21,26 @@ export type LivestreamPlayerProps = {
    * **Default** [ViewerLivestream](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/ViewerLivestream/ViewerLivestream.tsx)
    */
   ViewerLivestream?: React.ComponentType<ViewerLivestreamProps>;
+
+  /**
+   * Determines when the viewer joins the call.
+   *
+   * `"asap"` behavior means joining the call as soon as it is possible
+   * (either the `join_ahead_time_seconds` setting allows it, or the user
+   * has a the capability to join backstage).
+   *
+   * `"live"` behavior means joining the call when it goes live.
+   *
+   * @default "asap"
+   */
+  joinBehavior?: 'asap' | 'live';
 };
 
 export const LivestreamPlayer = ({
   callType,
   callId,
   ViewerLivestream = DefaultViewerLivestream,
+  joinBehavior = 'asap',
 }: LivestreamPlayerProps) => {
   const client = useStreamVideoClient();
 
@@ -38,10 +52,6 @@ export const LivestreamPlayer = ({
     }
     const myCall = client.call(callType, callId);
     setCall(myCall);
-    myCall.join().catch((e) => {
-      const logger = getLogger(['LivestreamPlayer']);
-      logger('error', 'Error joining call:', e);
-    });
     return () => {
       if (myCall.state.callingState !== CallingState.LEFT) {
         myCall.leave().catch((e) => {
@@ -71,7 +81,7 @@ export const LivestreamPlayer = ({
 
   return (
     <StreamCall call={call}>
-      <ViewerLivestream />
+      <ViewerLivestream joinBehavior={joinBehavior} />
     </StreamCall>
   );
 };

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

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, 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 {
   type CallSessionResponse,
@@ -19,6 +18,7 @@ export type DurationBadgeProps = {
  * The HostDurationBadge component displays the duration while the live stream is active.
  */
 export const DurationBadge = ({ mode }: DurationBadgeProps) => {
+  const styles = useStyles();
   const { useCallSession } = useCallStateHooks();
   const session = useCallSession();
 
@@ -33,11 +33,7 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => {
 
   const call = useCall();
   const {
-    theme: {
-      colors,
-      variants: { iconSizes },
-      durationBadge,
-    },
+    theme: { colors, durationBadge },
   } = useTheme();
 
   // for host
@@ -127,18 +123,7 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => {
         durationBadge.container,
       ]}
     >
-      <View
-        style={[
-          styles.icon,
-          {
-            height: iconSizes.xs,
-            width: iconSizes.xs,
-          },
-          durationBadge.icon,
-        ]}
-      >
-        <ShieldBadge />
-      </View>
+      <View style={[styles.dot, durationBadge.icon]} />
       <Text
         style={[
           styles.label,
@@ -152,22 +137,34 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => {
   );
 };
 
-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,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingHorizontal: theme.variants.spacingSizes.sm,
+          paddingVertical: theme.variants.spacingSizes.sm,
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        dot: {
+          backgroundColor: theme.colors.iconWarning,
+          marginRight: theme.variants.spacingSizes.xs,
+          borderRadius: 90,
+          height: 10,
+          width: 10,
+        },
+        label: {
+          textAlign: 'center',
+          fontSize: theme.variants.fontSizes.md,
+          fontWeight: '600',
+          flexShrink: 1,
+          paddingLeft: theme.variants.spacingSizes.xs,
+        },
+      }),
+    [theme],
+  );
+};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
@@ -13,62 +13,55 @@ export type FollowerCountProps = {};
  * The FollowerCount component that displays the number of participants while in the call.
  */
 export const FollowerCount = ({}: FollowerCountProps) => {
+  const styles = useStyles();
   const {
-    theme: {
-      colors,
-      variants: { iconSizes },
-      followerCount,
-    },
+    theme: { followerCount },
   } = useTheme();
+
   const { useParticipantCount } = useCallStateHooks();
   const totalParticipants = useParticipantCount();
+
   return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: colors.sheetTertiary },
-        followerCount.container,
-      ]}
-    >
-      <View
-        style={[
-          styles.icon,
-          { height: iconSizes.xs, width: iconSizes.xs },
-          followerCount.icon,
-        ]}
-      >
+    <View style={[styles.container, followerCount.container]}>
+      <View style={[styles.icon, followerCount.icon]}>
         <Eye />
       </View>
-      <Text
-        style={[
-          styles.label,
-          { color: colors.textPrimary },
-          followerCount.label,
-        ]}
-      >
+      <Text style={[styles.label, 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,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingHorizontal: theme.variants.spacingSizes.sm,
+          paddingVertical: 4,
+          borderTopRightRadius: 4,
+          borderBottomRightRadius: 4,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.sheetTertiary,
+        },
+        icon: {
+          height: theme.variants.iconSizes.sm,
+          width: theme.variants.iconSizes.sm,
+        },
+        label: {
+          fontSize: theme.variants.fontSizes.md,
+          fontWeight: '600',
+          flexShrink: 1,
+          textAlign: 'center',
+          includeFontPadding: false,
+          marginLeft: theme.variants.spacingSizes.xs,
+          color: theme.colors.textPrimary,
+        },
+      }),
+    [theme],
+  );
+};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts';
 import { useI18n } from '@stream-io/video-react-bindings';
@@ -12,6 +12,7 @@ export type LiveIndicatorProps = {};
  * The LiveIndicator component displays whether the live stream is live or not.
  */
 export const LiveIndicator = ({}: LiveIndicatorProps) => {
+  const styles = useStyles();
   const {
     theme: { colors, typefaces, liveIndicator },
   } = useTheme();
@@ -38,16 +39,23 @@ export const LiveIndicator = ({}: LiveIndicatorProps) => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderTopLeftRadius: 4,
-    borderBottomLeftRadius: 4,
-    justifyContent: 'center',
-  },
-  label: {
-    textAlign: 'center',
-    includeFontPadding: false,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingHorizontal: theme.variants.spacingSizes.sm,
+          paddingVertical: theme.variants.spacingSizes.sm,
+          borderTopLeftRadius: theme.variants.borderRadiusSizes.sm,
+          borderBottomLeftRadius: theme.variants.borderRadiusSizes.sm,
+          justifyContent: 'center',
+        },
+        label: {
+          textAlign: 'center',
+          includeFontPadding: false,
+        },
+      }),
+    [theme],
+  );
+};

package/src/components/Livestream/ViewerLivestream/ViewerLivestream.tsx

@@ -1,12 +1,8 @@
-import React, { useEffect, useMemo } from 'react';
-
+import React, { useEffect, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
 import { useTheme } from '../../../contexts';
-import {
-  ViewerLivestreamTopView as DefaultViewerLivestreamTopView,
-  type ViewerLivestreamTopViewProps,
-} from '../LivestreamTopView/ViewerLivestreamTopView';
+import { type ViewerLivestreamTopViewProps } from '../LivestreamTopView/ViewerLivestreamTopView';
 import {
   ViewerLivestreamControls as DefaultViewerLivestreamControls,
   type ViewerLivestreamControlsProps,
@@ -16,12 +12,14 @@ import {
   LivestreamLayout as DefaultLivestreamLayout,
   type LivestreamLayoutProps,
 } from '../LivestreamLayout';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import {
   FloatingParticipantView as DefaultFloatingParticipantView,
   type FloatingParticipantViewProps,
 } from '../../Participant';
-import { hasVideo } from '@stream-io/video-client';
+import { CallingState, hasVideo } from '@stream-io/video-client';
+import { CallEndedView } from '../LivestreamPlayer/LivestreamEnded';
+import { ViewerLobby } from './ViewerLobby';
 
 /**
  * Props for the ViewerLivestream component.
@@ -45,13 +43,21 @@ export type ViewerLivestreamProps = ViewerLivestreamTopViewProps &
      * Component to customize the FloatingParticipantView when screen is shared.
      */
     FloatingParticipantView?: React.ComponentType<FloatingParticipantViewProps> | null;
+    /**
+     * Determines when the viewer joins the call.
+     *
+     * `"asap"` behavior means joining the call as soon as it is possible
+     * (either the `join_ahead_time_seconds` setting allows it, or the user
+     * has a the capability to join backstage).
+     */
+    joinBehavior?: 'asap' | 'live';
   };
 
 /**
  * The ViewerLivestream component renders the UI for the Viewer's live stream.
  */
 export const ViewerLivestream = ({
-  ViewerLivestreamTopView = DefaultViewerLivestreamTopView,
+  ViewerLivestreamTopView,
   ViewerLivestreamControls = DefaultViewerLivestreamControls,
   LivestreamLayout = DefaultLivestreamLayout,
   FloatingParticipantView = DefaultFloatingParticipantView,
@@ -60,12 +66,24 @@ export const ViewerLivestream = ({
   DurationBadge,
   ViewerLeaveStreamButton,
   onLeaveStreamHandler,
+  joinBehavior,
 }: ViewerLivestreamProps) => {
   const styles = useStyles();
+  const call = useCall();
   const {
     theme: { viewerLivestream },
   } = useTheme();
-  const { useHasOngoingScreenShare, useParticipants } = useCallStateHooks();
+  const {
+    useHasOngoingScreenShare,
+    useParticipants,
+    useCallCallingState,
+    useCallEndedAt,
+    useIsCallLive,
+    useOwnCapabilities,
+  } = useCallStateHooks();
+  const canJoinLive = useIsCallLive();
+  const callingState = useCallCallingState();
+  const endedAt = useCallEndedAt();
   const hasOngoingScreenShare = useHasOngoingScreenShare();
   const [currentSpeaker] = useParticipants();
   const floatingParticipant =
@@ -73,6 +91,11 @@ export const ViewerLivestream = ({
     currentSpeaker &&
     hasVideo(currentSpeaker) &&
     currentSpeaker;
+  const [hasLeft, setHasLeft] = useState(false);
+
+  const canJoinEarly = useCanJoinEarly();
+  const canJoinBackstage =
+    useOwnCapabilities()?.includes('join-backstage') ?? false;
 
   const [topViewHeight, setTopViewHeight] = React.useState<number>();
   const [controlsHeight, setControlsHeight] = React.useState<number>();
@@ -83,6 +106,12 @@ export const ViewerLivestream = ({
     return () => InCallManager.stop();
   }, []);
 
+  useEffect(() => {
+    if (callingState === CallingState.LEFT) {
+      setHasLeft(true);
+    }
+  }, [callingState]);
+
   const topViewProps: ViewerLivestreamTopViewProps = {
     LiveIndicator,
     FollowerCount,
@@ -92,6 +121,41 @@ export const ViewerLivestream = ({
     },
   };
 
+  useEffect(() => {
+    const handleJoinCall = async () => {
+      try {
+        await call?.join();
+      } catch (error) {
+        console.error('Failed to join call', error);
+      }
+    };
+
+    const canJoinAsap = canJoinLive || canJoinEarly || canJoinBackstage;
+    const join = joinBehavior ?? 'asap';
+    const canJoin =
+      (join === 'asap' && canJoinAsap) || (join === 'live' && canJoinLive);
+
+    if (call && callingState === CallingState.IDLE && canJoin && !hasLeft) {
+      handleJoinCall();
+    }
+  }, [
+    canJoinLive,
+    call,
+    canJoinBackstage,
+    canJoinEarly,
+    joinBehavior,
+    callingState,
+    hasLeft,
+  ]);
+
+  if (endedAt != null) {
+    return <CallEndedView />;
+  }
+
+  if (!canJoinLive || callingState !== CallingState.JOINED) {
+    return <ViewerLobby isLive={canJoinLive} />;
+  }
+
   return (
     <View style={[styles.container, viewerLivestream.container]}>
       {ViewerLivestreamTopView && <ViewerLivestreamTopView {...topViewProps} />}
@@ -124,6 +188,39 @@ export const ViewerLivestream = ({
   );
 };
 
+const useCanJoinEarly = () => {
+  const { useCallStartsAt, useCallSettings } = useCallStateHooks();
+  const startsAt = useCallStartsAt();
+  const settings = useCallSettings();
+  const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;
+  const [canJoinEarly, setCanJoinEarly] = useState(() =>
+    checkCanJoinEarly(startsAt, joinAheadTimeSeconds),
+  );
+
+  useEffect(() => {
+    if (!canJoinEarly) {
+      const handle = setInterval(() => {
+        setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+      }, 1000);
+
+      return () => clearInterval(handle);
+    }
+  }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
+
+  return canJoinEarly;
+};
+
+const checkCanJoinEarly = (
+  startsAt: Date | undefined,
+  joinAheadTimeSeconds: number | undefined,
+) => {
+  if (!startsAt) {
+    return false;
+  }
+
+  return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
+};
+
 const useStyles = () => {
   const { theme } = useTheme();
   return useMemo(