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

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

@@ -0,0 +1,126 @@
+import React from 'react';
+
+import { StyleSheet, SafeAreaView, View } from 'react-native';
+import { useIncallManager } from '../../../hooks';
+import { useTheme } from '../../../contexts';
+import {
+  ViewerLivestreamTopView as DefaultViewerLivestreamTopView,
+  ViewerLivestreamTopViewProps,
+} from '../LivestreamTopView/ViewerLivestreamTopView';
+import {
+  ViewerLivestreamControls as DefaultViewerLivestreamControls,
+  ViewerLivestreamControlsProps,
+} from '../LivestreamControls/ViewerLivestreamControls';
+import { ViewerLeaveStreamButtonProps } from '../LivestreamControls/ViewerLeaveStreamButton';
+import {
+  LivestreamLayout as DefaultLivestreamLayout,
+  LivestreamLayoutProps,
+} from '../LivestreamLayout';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import {
+  FloatingParticipantView as DefaultFloatingParticipantView,
+  FloatingParticipantViewProps,
+} from '../../Participant';
+import { Z_INDEX } from '../../../constants';
+
+/**
+ * Props for the ViewerLivestream component.
+ */
+export type ViewerLivestreamProps = ViewerLivestreamTopViewProps &
+  ViewerLivestreamControlsProps &
+  ViewerLeaveStreamButtonProps & {
+    /**
+     * Component to customize the top view at the viewer's live stream.
+     */
+    ViewerLivestreamTopView?: React.ComponentType<ViewerLivestreamTopViewProps> | null;
+    /**
+     * Component to customize the live stream video layout.
+     */
+    LivestreamLayout?: React.ComponentType<LivestreamLayoutProps> | null;
+    /**
+     * Component to customize the bottom view controls at the viewer's live stream.
+     */
+    ViewerLivestreamControls?: React.ComponentType<ViewerLivestreamControlsProps> | null;
+    /**
+     * Component to customize the FloatingParticipantView when screen is shared.
+     */
+    FloatingParticipantView?: React.ComponentType<FloatingParticipantViewProps> | null;
+  };
+
+/**
+ * The ViewerLivestream component renders the UI for the Viewer's live stream.
+ */
+export const ViewerLivestream = ({
+  ViewerLivestreamTopView = DefaultViewerLivestreamTopView,
+  ViewerLivestreamControls = DefaultViewerLivestreamControls,
+  LivestreamLayout = DefaultLivestreamLayout,
+  FloatingParticipantView = DefaultFloatingParticipantView,
+  LiveIndicator,
+  FollowerCount,
+  DurationBadge,
+  ViewerLeaveStreamButton,
+  onLeaveStreamHandler,
+}: ViewerLivestreamProps) => {
+  const {
+    theme: { colors, viewerLivestream },
+  } = useTheme();
+  const { useHasOngoingScreenShare, useParticipants } = useCallStateHooks();
+  const hasOngoingScreenShare = useHasOngoingScreenShare();
+  const [currentSpeaker] = useParticipants();
+
+  // Automatically route audio to speaker devices as relevant for watching videos.
+  useIncallManager({ media: 'video', auto: true });
+
+  const topViewProps: ViewerLivestreamTopViewProps = {
+    LiveIndicator,
+    FollowerCount,
+    DurationBadge,
+  };
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.container,
+        { backgroundColor: colors.static_grey },
+        viewerLivestream.container,
+      ]}
+    >
+      <View style={[styles.view, viewerLivestream.view]}>
+        {ViewerLivestreamTopView && (
+          <ViewerLivestreamTopView {...topViewProps} />
+        )}
+        <View
+          style={[
+            styles.floatingParticipantView,
+            viewerLivestream.floatingParticipantView,
+          ]}
+        >
+          {hasOngoingScreenShare && FloatingParticipantView && (
+            <FloatingParticipantView participant={currentSpeaker} />
+          )}
+        </View>
+
+        {ViewerLivestreamControls && (
+          <ViewerLivestreamControls
+            ViewerLeaveStreamButton={ViewerLeaveStreamButton}
+            onLeaveStreamHandler={onLeaveStreamHandler}
+          />
+        )}
+      </View>
+      {LivestreamLayout && <LivestreamLayout />}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  floatingParticipantView: {
+    flex: 1,
+  },
+  view: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: Z_INDEX.IN_FRONT,
+  },
+});

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

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

package/src/components/Livestream/index.ts

@@ -0,0 +1,5 @@
+export * from './HostLivestream';
+export * from './LivestreamControls';
+export * from './LivestreamTopView';
+export * from './ViewerLivestream';
+export * from './LivestreamLayout';

package/src/components/index.ts

@@ -2,3 +2,4 @@
 export * from './Call';
 export * from './utility';
 export * from './Participant';
+export * from './Livestream';

package/src/hooks/usePaginatedLayoutSortPreset.ts

@@ -0,0 +1,27 @@
+import {
+  Call,
+  CallTypes,
+  defaultSortPreset,
+  paginatedLayoutSortPreset,
+} from '@stream-io/video-client';
+import { useEffect } from 'react';
+
+const resetSortPreset = (call: Call) => {
+  // reset the sorting to the default for the call type
+  const callConfig = CallTypes.get(call.type);
+  call.setSortParticipantsBy(
+    callConfig.options.sortParticipantsBy || defaultSortPreset,
+  );
+};
+
+export const usePaginatedLayoutSortPreset = (call: Call | undefined) => {
+  useEffect(() => {
+    if (!call) {
+      return;
+    }
+    call.setSortParticipantsBy(paginatedLayoutSortPreset);
+    return () => {
+      resetSortPreset(call);
+    };
+  }, [call]);
+};

package/src/icons/EndStreamIcon.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+
+export const EndBroadcastIcon = () => {
+  return (
+    <Svg viewBox="0 0 26 26" fill="none">
+      <Path
+        d="M8.55615 10.8184C8.44365 11.2309 8.38115 11.6684 8.38115 12.1184C8.38115 13.4934 8.94365 14.7434 9.84365 15.6559L8.06865 17.4309C6.71865 16.0684 5.88115 14.1934 5.88115 12.1184C5.88115 10.9559 6.14365 9.86836 6.60615 8.88086L4.76865 7.04336C3.88115 8.53086 3.38115 10.2684 3.38115 12.1184C3.38115 14.8809 4.50615 17.3809 6.31865 19.1809L4.54365 20.9559C2.28115 18.6934 0.881152 15.5684 0.881152 12.1184C0.881152 9.56836 1.64365 7.20586 2.95615 5.23086L0.118652 2.39336L1.88115 0.630859L24.8562 23.6059L23.0937 25.3684L8.55615 10.8184ZM20.1562 15.3559C20.6187 14.3684 20.8812 13.2809 20.8812 12.1184C20.8812 10.0434 20.0437 8.16836 18.6812 6.81836L16.9062 8.59336C17.8187 9.49336 18.3812 10.7434 18.3812 12.1184C18.3812 12.5684 18.3187 13.0059 18.2062 13.4184L20.1562 15.3559ZM23.3812 12.1184C23.3812 13.9684 22.8812 15.7059 21.9937 17.1934L23.8062 19.0059C25.1187 17.0309 25.8812 14.6684 25.8812 12.1184C25.8812 8.66836 24.4812 5.54336 22.2187 3.28086L20.4437 5.05586C22.2562 6.85586 23.3812 9.35586 23.3812 12.1184Z"
+        fill="#FCFCFC"
+      />
+    </Svg>
+  );
+};

package/src/icons/Eye.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+
+export const Eye = () => {
+  return (
+    <Svg viewBox="0 0 15 10" fill="none">
+      <Path
+        d="M7.25488 1.5625C9.62363 1.5625 11.7361 2.89375 12.7674 5C11.7361 7.10625 9.62363 8.4375 7.25488 8.4375C4.88613 8.4375 2.77363 7.10625 1.74238 5C2.77363 2.89375 4.88613 1.5625 7.25488 1.5625ZM7.25488 0.3125C4.12988 0.3125 1.46113 2.25625 0.379883 5C1.46113 7.74375 4.12988 9.6875 7.25488 9.6875C10.3799 9.6875 13.0486 7.74375 14.1299 5C13.0486 2.25625 10.3799 0.3125 7.25488 0.3125ZM7.25488 3.4375C8.11738 3.4375 8.81738 4.1375 8.81738 5C8.81738 5.8625 8.11738 6.5625 7.25488 6.5625C6.39238 6.5625 5.69238 5.8625 5.69238 5C5.69238 4.1375 6.39238 3.4375 7.25488 3.4375ZM7.25488 2.1875C5.70488 2.1875 4.44238 3.45 4.44238 5C4.44238 6.55 5.70488 7.8125 7.25488 7.8125C8.80488 7.8125 10.0674 6.55 10.0674 5C10.0674 3.45 8.80488 2.1875 7.25488 2.1875Z"
+        fill="#FCFCFC"
+      />
+    </Svg>
+  );
+};

package/src/icons/LeaveStreamIcon.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+
+export const LeaveStreamIcon = () => {
+  return (
+    <Svg viewBox="0 0 25 24" fill="none">
+      <Path
+        d="M18.75 5.75L16.9875 7.5125L20.2125 10.75H7.5V13.25H20.2125L16.9875 16.475L18.75 18.25L25 12L18.75 5.75ZM2.5 3.25H12.5V0.75H2.5C1.125 0.75 0 1.875 0 3.25V20.75C0 22.125 1.125 23.25 2.5 23.25H12.5V20.75H2.5V3.25Z"
+        fill="#FCFCFC"
+      />
+    </Svg>
+  );
+};

package/src/icons/ShieldBadge.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+
+export const ShieldBadge = () => {
+  return (
+    <Svg viewBox="0 0 9 10" fill="none">
+      <Path
+        d="M2.79919 8.79157L4.02014 9.63654C4.22869 9.7774 4.49664 9.7774 4.70498 9.63654L5.92594 8.79157C7.6828 7.5523 8.75481 5.60898 8.75481 3.52489V1.60984C8.75481 1.35641 8.57617 1.13107 8.30822 1.07467L4.3774 0.257812L0.446587 1.07447C0.178632 1.13085 0 1.35619 0 1.60964V3.52469C0 5.60888 1.04233 7.58057 2.79919 8.79157ZM2.56093 4.05991L3.69256 5.13019L6.16414 2.79258L7.05753 3.63755L3.72223 6.82014L1.69742 4.90488L2.56093 4.05991Z"
+        fill="#00E2A1"
+      />
+    </Svg>
+  );
+};

package/src/icons/StartStreamIcon.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+
+export const StartStreamIcon = () => {
+  return (
+    <Svg viewBox="0 0 25 18" fill="none">
+      <Path
+        d="M7.2 14.2996C5.8375 12.9496 5 11.0746 5 8.99961C5 6.92461 5.8375 5.04961 7.2 3.69961L8.975 5.47461C8.0625 6.37461 7.5 7.62461 7.5 8.99961C7.5 10.3746 8.0625 11.6246 8.9625 12.5371L7.2 14.2996ZM17.8 14.2996C19.1625 12.9496 20 11.0746 20 8.99961C20 6.92461 19.1625 5.04961 17.8 3.69961L16.025 5.47461C16.9375 6.37461 17.5 7.62461 17.5 8.99961C17.5 10.3746 16.9375 11.6246 16.0375 12.5371L17.8 14.2996ZM12.5 6.49961C11.125 6.49961 10 7.62461 10 8.99961C10 10.3746 11.125 11.4996 12.5 11.4996C13.875 11.4996 15 10.3746 15 8.99961C15 7.62461 13.875 6.49961 12.5 6.49961ZM22.5 8.99961C22.5 11.7621 21.375 14.2621 19.5625 16.0621L21.3375 17.8371C23.6 15.5746 25 12.4496 25 8.99961C25 5.54961 23.6 2.42461 21.3375 0.162109L19.5625 1.93711C21.375 3.73711 22.5 6.23711 22.5 8.99961ZM5.4375 1.93711L3.6625 0.162109C1.4 2.42461 0 5.54961 0 8.99961C0 12.4496 1.4 15.5746 3.6625 17.8371L5.4375 16.0621C3.625 14.2621 2.5 11.7621 2.5 8.99961C2.5 6.23711 3.625 3.73711 5.4375 1.93711Z"
+        fill="#FCFCFC"
+      />
+    </Svg>
+  );
+};

package/src/icons/index.tsx

@@ -14,3 +14,8 @@ export * from './Spotlight';
 export * from './ScreenShare';
 export * from './Reaction';
 export * from './TopViewBackground';
+export * from './Eye';
+export * from './ShieldBadge';
+export * from './StartStreamIcon';
+export * from './EndStreamIcon';
+export * from './LeaveStreamIcon';

package/src/theme/theme.ts

@@ -199,6 +199,76 @@ export type Theme = {
     participantsIconContainer: ViewStyle;
     participantsCountText: TextStyle;
   };
+  hostLivestream: {
+    container: ViewStyle;
+  };
+  viewerLivestream: {
+    container: ViewStyle;
+    floatingParticipantView: ViewStyle;
+    view: ViewStyle;
+  };
+  livestreamLayout: {
+    container: ViewStyle;
+  };
+  hostLivestreamTopView: {
+    container: ViewStyle;
+    leftElement: ViewStyle;
+    centerElement: ViewStyle;
+    rightElement: ViewStyle;
+    liveInfo: ViewStyle;
+  };
+  viewerLivestreamTopView: {
+    container: ViewStyle;
+    leftElement: ViewStyle;
+    centerElement: ViewStyle;
+    rightElement: ViewStyle;
+    liveInfo: ViewStyle;
+  };
+  followerCount: {
+    container: ViewStyle;
+    icon: ViewStyle;
+    label: TextStyle;
+  };
+  durationBadge: {
+    container: ViewStyle;
+    icon: ViewStyle;
+    label: TextStyle;
+  };
+  liveIndicator: {
+    container: ViewStyle;
+    label: TextStyle;
+  };
+  hostLivestreamControls: {
+    container: ViewStyle;
+    leftElement: ViewStyle;
+    rightElement: ViewStyle;
+  };
+  viewerLivestreamControls: {
+    container: ViewStyle;
+    leftElement: ViewStyle;
+    rightElement: ViewStyle;
+  };
+  hostStartStreamButton: {
+    container: ViewStyle;
+    icon: ViewStyle;
+    text: TextStyle;
+  };
+  viewerLeaveStreamButton: {
+    container: ViewStyle;
+    icon: ViewStyle;
+    text: TextStyle;
+  };
+  livestreamMediaControls: {
+    container: ViewStyle;
+  };
+  livestreamAudioControlButton: {
+    container: ViewStyle;
+    icon: ViewStyle;
+  };
+  livestreamVideoControlButton: {
+    container: ViewStyle;
+    icon: ViewStyle;
+  };
 };
 
 export const defaultTheme: Theme = {
@@ -423,4 +493,74 @@ export const defaultTheme: Theme = {
     participantsIconContainer: {},
     participantsCountText: {},
   },
+  hostLivestream: {
+    container: {},
+  },
+  hostLivestreamTopView: {
+    container: {},
+    leftElement: {},
+    rightElement: {},
+    centerElement: {},
+    liveInfo: {},
+  },
+  viewerLivestream: {
+    container: {},
+    floatingParticipantView: {},
+    view: {},
+  },
+  livestreamLayout: {
+    container: {},
+  },
+  viewerLivestreamTopView: {
+    container: {},
+    leftElement: {},
+    centerElement: {},
+    rightElement: {},
+    liveInfo: {},
+  },
+  followerCount: {
+    container: {},
+    icon: {},
+    label: {},
+  },
+  durationBadge: {
+    container: {},
+    icon: {},
+    label: {},
+  },
+  liveIndicator: {
+    container: {},
+    label: {},
+  },
+  hostLivestreamControls: {
+    container: {},
+    leftElement: {},
+    rightElement: {},
+  },
+  viewerLivestreamControls: {
+    container: {},
+    leftElement: {},
+    rightElement: {},
+  },
+  hostStartStreamButton: {
+    container: {},
+    icon: {},
+    text: {},
+  },
+  viewerLeaveStreamButton: {
+    container: {},
+    icon: {},
+    text: {},
+  },
+  livestreamMediaControls: {
+    container: {},
+  },
+  livestreamAudioControlButton: {
+    container: {},
+    icon: {},
+  },
+  livestreamVideoControlButton: {
+    container: {},
+    icon: {},
+  },
 };

package/src/translations/en.json

@@ -6,7 +6,12 @@
   "Join": "Join",
   "You": "You",
   "Reconnecting...": "Reconnecting...",
-  "You are first to join the call.": "You are first to join the call.",
+  "Loading...": "Loading...",
+  "Start Stream": "Start Stream",
+  "End Stream": "End Stream",
+  "Leave Stream": "Leave Stream",
+  "Live": "Live",
+  "You are first to Join the call.": "You are first to Join the call.",
   "Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
   "{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",
   "{{ numberOfParticipants }} participant(s) are in the call.": "{{ numberOfParticipants }} participant(s) are in the call.",

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.1.9';
+export const version = '0.1.11';