@stream-io/video-react-native-sdk 0.0.28 → 0.1.1

package/src/components/Call/CallContent/CallContent.tsx

@@ -13,9 +13,10 @@ import {
 import {
   CallControlProps,
   CallControls as DefaultCallControls,
+  HangUpCallButtonProps,
 } from '../CallControls';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
-import { CallingState } from '@stream-io/video-client';
+import { CallingState, StreamReaction } from '@stream-io/video-client';
 import { useIncallManager } from '../../../hooks';
 import { Z_INDEX } from '../../../constants';
 import { useDebouncedValue } from '../../../utils/hooks';
@@ -25,42 +26,53 @@ import {
   ParticipantViewComponentProps,
 } from '../../Participant';
 import { useTheme } from '../../../contexts';
+import {
+  CallParticipantsListComponentProps,
+  CallParticipantsListProps,
+} from '../CallParticipantsList';
 
-export type CallParticipantsComponentProps = Pick<
-  CallParticipantsGridProps,
-  | 'CallParticipantsList'
-  | 'ParticipantLabel'
-  | 'ParticipantNetworkQualityIndicator'
-  | 'ParticipantReaction'
-  | 'ParticipantVideoFallback'
-  | 'ParticipantView'
-  | 'VideoRenderer'
-> & {
-  /**
-   * Component to customize the CallTopView component.
-   */
-  CallTopView?: React.ComponentType<CallTopViewProps> | null;
-  /**
-   * Component to customize the CallControls component.
-   */
-  CallControls?: React.ComponentType<CallControlProps> | null;
-  /**
-   * Component to customize the FloatingParticipantView.
-   */
-  FloatingParticipantView?: React.ComponentType<FloatingParticipantViewProps> | null;
+export type StreamReactionType = StreamReaction & {
+  icon: string;
 };
 
-export type CallContentProps = Pick<CallControlProps, 'onHangupCallHandler'> &
+type CallContentComponentProps = ParticipantViewComponentProps &
+  Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
+    /**
+     * Component to customize the CallTopView component.
+     */
+    CallTopView?: React.ComponentType<CallTopViewProps> | null;
+    /**
+     * Component to customize the CallControls component.
+     */
+    CallControls?: React.ComponentType<CallControlProps> | null;
+    /**
+     * Component to customize the FloatingParticipantView.
+     */
+    FloatingParticipantView?: React.ComponentType<FloatingParticipantViewProps> | null;
+    /**
+     * Component to customize the CallParticipantsList.
+     */
+    CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
+  };
+
+export type CallContentProps = Pick<
+  HangUpCallButtonProps,
+  'onHangupCallHandler'
+> &
   Pick<
     CallTopViewProps,
     'onBackPressed' | 'onParticipantInfoPress' | 'ParticipantsInfoBadge'
   > &
-  CallParticipantsComponentProps & {
+  CallContentComponentProps & {
     /**
      * This switches the participant's layout between the grid and the spotlight mode.
      */
     layout?: 'grid' | 'spotlight';
     /**
+     * Reactions that are to be supported in the call
+     */
+    supportedReactions?: StreamReactionType[];
+    /*
      * Check if device is in landscape mode.
      * This will apply the landscape mode styles to the component.
      */
@@ -83,6 +95,7 @@ export const CallContent = ({
   ParticipantsInfoBadge,
   VideoRenderer,
   layout = 'grid',
+  supportedReactions,
   landscape = true,
 }: CallContentProps) => {
   const [
@@ -150,6 +163,7 @@ export const CallContent = ({
     showLocalParticipant: isRemoteParticipantInFloatingView,
     ParticipantView,
     CallParticipantsList,
+    supportedReactions,
   };
 
   const callParticipantsSpotlightProps: CallParticipantsSpotlightProps = {
@@ -157,6 +171,7 @@ export const CallContent = ({
     landscape,
     ParticipantView,
     CallParticipantsList,
+    supportedReactions,
   };
 
   const landScapeStyles: ViewStyle = {
@@ -187,6 +202,7 @@ export const CallContent = ({
                   : localParticipant
               }
               onPressHandler={handleFloatingViewParticipantSwitch}
+              supportedReactions={supportedReactions}
               {...participantViewProps}
             />
           )}

package/src/components/Call/CallControls/CallControls.tsx

@@ -4,24 +4,20 @@ import { ToggleAudioPublishingButton } from './ToggleAudioPublishingButton';
 import { ToggleVideoPublishingButton } from './ToggleVideoPublishingButton';
 import { ToggleCameraFaceButton } from './ToggleCameraFaceButton';
 import { Z_INDEX } from '../../../constants';
-import { HangUpCallButton } from './HangupCallButton';
+import { HangUpCallButton, HangUpCallButtonProps } from './HangupCallButton';
 import { useTheme } from '../../../contexts/ThemeContext';
 
 /**
  * Props for the CallControls Component.
  */
-export type CallControlProps = Pick<ViewProps, 'style'> & {
-  /**
-   * Handler to override the hang up handler when the hangup button is pressed.
-   * @returns void
-   */
-  onHangupCallHandler?: () => void;
-  /**
-   * Check if device is in landscape mode.
-   * This will apply the landscape mode styles to the component.
-   */
-  landscape?: boolean;
-};
+export type CallControlProps = Pick<ViewProps, 'style'> &
+  Pick<HangUpCallButtonProps, 'onHangupCallHandler'> & {
+    /**
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
+  };
 
 /**
  * A list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)

package/src/components/Call/CallControls/{ReactionButton.tsx → ReactionsButton.tsx}

@@ -5,14 +5,18 @@ import { OwnCapability } from '@stream-io/video-client';
 import { ButtonTestIds } from '../../../constants/TestIds';
 import { Reaction } from '../../../icons';
 import { ReactionsPicker } from './internal/ReactionsPicker';
-import { StreamVideoRN } from '../../../utils';
 import { LayoutChangeEvent, LayoutRectangle } from 'react-native';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { StreamReactionType } from '../CallContent';
 
 /**
  * Props for the Reaction button
  */
-export type ReactionButtonProps = {
+export type ReactionsButtonProps = {
+  /**
+   * Supported Reactions to be sent while in the call.
+   */
+  supportedReactions?: StreamReactionType[];
   /**
    * Handler to be called when the reaction button is pressed.
    */
@@ -23,7 +27,10 @@ export type ReactionButtonProps = {
  * Button to display the list of Reactions supported in the call.
  * On press, it opens a view that can be used to send Reaction.
  */
-export const ReactionButton = ({ onPressHandler }: ReactionButtonProps) => {
+export const ReactionsButton = ({
+  supportedReactions,
+  onPressHandler,
+}: ReactionsButtonProps) => {
   const [showReactionsPicker, setShowReactionsPicker] =
     useState<boolean>(false);
   const [reactionsButtonLayoutRectangle, setReactionsButtonLayoutRectangle] =
@@ -48,7 +55,7 @@ export const ReactionButton = ({ onPressHandler }: ReactionButtonProps) => {
     });
   };
 
-  const reactionButtonHandler = () => {
+  const reactionsButtonHandler = () => {
     if (onPressHandler) {
       onPressHandler();
       return;
@@ -61,7 +68,7 @@ export const ReactionButton = ({ onPressHandler }: ReactionButtonProps) => {
       <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
         <CallControlsButton
           testID={ButtonTestIds.REACTION}
-          onPress={reactionButtonHandler}
+          onPress={reactionsButtonHandler}
           onLayout={onReactionsButtonLayout}
         >
           <Reaction color={colors.static_black} />
@@ -69,7 +76,7 @@ export const ReactionButton = ({ onPressHandler }: ReactionButtonProps) => {
       </Restricted>
       {showReactionsPicker && (
         <ReactionsPicker
-          reactions={StreamVideoRN.getConfig().supportedReactions}
+          supportedReactions={supportedReactions}
           reactionsButtonLayoutRectangle={reactionsButtonLayoutRectangle}
           onRequestedClose={() => {
             setShowReactionsPicker(false);

package/src/components/Call/CallControls/index.tsx

@@ -7,7 +7,7 @@ export * from './ToggleAudioPublishingButton';
 export * from './ToggleVideoPublishingButton';
 export * from './ToggleCameraFaceButton';
 export * from './ChatButton';
-export * from './ReactionButton';
+export * from './ReactionsButton';
 export * from './CallControls';
 export * from './LobbyControls';
 export * from './IncomingCallControls';

package/src/components/Call/CallControls/internal/ReactionsPicker.tsx

@@ -6,26 +6,26 @@ import {
   Animated,
   Easing,
 } from 'react-native';
-import { StreamVideoConfig } from '../../../../utils/StreamVideoRN/types';
 import { useCall } from '@stream-io/video-react-bindings';
 import { SendReactionRequest } from '@stream-io/video-client';
 import { ComponentTestIds } from '../../../../constants/TestIds';
 import { useTheme } from '../../../../contexts/ThemeContext';
+import { ReactionsButtonProps } from '../ReactionsButton';
+import { defaultEmojiReactions } from '../../../../constants';
 
-interface Props {
-  reactions: StreamVideoConfig['supportedReactions'];
+type ReactionPickerProps = Pick<ReactionsButtonProps, 'supportedReactions'> & {
   reactionsButtonLayoutRectangle?: LayoutRectangle;
   onRequestedClose: () => void;
-}
+};
 
 const TOP_PADDING = 4;
 const REACTION_MARGIN_BOTTOM = 4;
 
 export const ReactionsPicker = ({
-  reactions,
+  supportedReactions = defaultEmojiReactions,
   reactionsButtonLayoutRectangle,
   onRequestedClose,
-}: Props) => {
+}: ReactionPickerProps) => {
   const {
     theme: { colors, reactionsPicker },
   } = useTheme();
@@ -37,9 +37,9 @@ export const ReactionsPicker = ({
     // the top padding
     TOP_PADDING +
     // take margins into account
-    REACTION_MARGIN_BOTTOM * reactions.length +
+    REACTION_MARGIN_BOTTOM * supportedReactions.length +
     // the size of the reaction icon items (same size as reactions button * amount of reactions)
-    reactionItemSize * reactions.length;
+    reactionItemSize * supportedReactions.length;
 
   const reactionsPopupStyle = {
     // we should show the popup right above the reactions button and not top of it
@@ -112,9 +112,9 @@ export const ReactionsPicker = ({
         }}
       >
         {/* all the reactions */}
-        {reactions.map((reaction) => (
+        {supportedReactions.map((supportedReaction) => (
           <Pressable
-            key={reaction.emoji_code}
+            key={supportedReaction.emoji_code}
             style={[
               styles.reactionItem,
               reactionItemStyle,
@@ -126,9 +126,9 @@ export const ReactionsPicker = ({
             ]}
             onPress={() => {
               onClose({
-                type: reaction.type,
-                custom: reaction.custom,
-                emoji_code: reaction.emoji_code,
+                type: supportedReaction.type,
+                custom: supportedReaction.custom,
+                emoji_code: supportedReaction.emoji_code,
               });
             }}
           >
@@ -148,7 +148,7 @@ export const ReactionsPicker = ({
                 reactionsPicker.reactionText,
               ]}
             >
-              {reaction.icon}
+              {supportedReaction.icon}
             </Animated.Text>
           </Pressable>
         ))}

package/src/components/Call/CallLayout/CallParticipantsGrid.tsx

@@ -4,30 +4,29 @@ import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
 import {
   CallParticipantsList as DefaultCallParticipantsList,
-  CallParticipantsListProps,
   CallParticipantsListComponentProps,
 } from '../CallParticipantsList/CallParticipantsList';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { CallContentProps } from '../CallContent';
+import { ParticipantViewComponentProps } from '../../Participant';
 
 /**
  * Props for the CallParticipantsGrid component.
  */
-export type CallParticipantsGridProps = CallParticipantsListComponentProps & {
-  /**
-   * Component to customize the CallParticipantsList.
-   */
-  CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
-  /**
-   * Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
-   */
-  showLocalParticipant?: boolean;
-  /**
-   * Check if device is in landscape mode.
-   * This will apply the landscape mode styles to the component.
-   */
-  landscape?: boolean;
-};
+export type CallParticipantsGridProps = ParticipantViewComponentProps &
+  Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList'> &
+  Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
+    /**
+     * Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
+     */
+    showLocalParticipant?: boolean;
+    /**
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
+  };
 
 /**
  * Component used to display the list of participants in a grid mode.
@@ -41,6 +40,7 @@ export const CallParticipantsGrid = ({
   ParticipantView,
   VideoRenderer,
   showLocalParticipant = false,
+  supportedReactions,
   landscape,
 }: CallParticipantsGridProps) => {
   const {
@@ -89,6 +89,7 @@ export const CallParticipantsGrid = ({
       {CallParticipantsList && (
         <CallParticipantsList
           participants={participants}
+          supportedReactions={supportedReactions}
           landscape={landscape}
           {...participantViewProps}
         />

package/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx

@@ -11,23 +11,20 @@ import { ComponentTestIds } from '../../../constants/TestIds';
 import {
   CallParticipantsList as DefaultCallParticipantsList,
   CallParticipantsListComponentProps,
-  CallParticipantsListProps,
 } from '../CallParticipantsList/CallParticipantsList';
 import {
   ParticipantView as DefaultParticipantView,
   ParticipantViewComponentProps,
 } from '../../Participant';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { CallContentProps } from '../CallContent';
 
 /**
  * Props for the CallParticipantsSpotlight component.
  */
-export type CallParticipantsSpotlightProps =
-  CallParticipantsListComponentProps & {
-    /**
-     * Component to customize the CallParticipantsList.
-     */
-    CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
+export type CallParticipantsSpotlightProps = ParticipantViewComponentProps &
+  Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList'> &
+  Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
     /**
      * Check if device is in landscape mode.
      * This will apply the landscape mode styles to the component.
@@ -50,6 +47,7 @@ export const CallParticipantsSpotlight = ({
   ParticipantVideoFallback,
   ParticipantView = DefaultParticipantView,
   VideoRenderer,
+  supportedReactions,
   landscape,
 }: CallParticipantsSpotlightProps) => {
   const {
@@ -115,6 +113,7 @@ export const CallParticipantsSpotlight = ({
           trackType={
             isScreenShareOnSpotlight ? 'screenShareTrack' : 'videoTrack'
           }
+          supportedReactions={supportedReactions}
           {...participantViewProps}
         />
       )}
@@ -130,6 +129,7 @@ export const CallParticipantsSpotlight = ({
               participants={
                 isScreenShareOnSpotlight ? allParticipants : otherParticipants
               }
+              supportedReactions={supportedReactions}
               horizontal={!landscape}
               numberOfColumns={!landscape ? 2 : 1}
               landscape={landscape}

package/src/components/Call/CallParticipantsList/CallParticipantsList.tsx

@@ -21,6 +21,7 @@ import {
   ParticipantViewComponentProps,
   ParticipantViewProps,
 } from '../../Participant/ParticipantView';
+import { CallContentProps } from '../CallContent';
 
 type FlatListProps = React.ComponentProps<
   typeof FlatList<StreamVideoParticipant | StreamVideoLocalParticipant>
@@ -42,26 +43,27 @@ export type CallParticipantsListComponentProps =
 /**
  * Props of the CallParticipantsList component
  */
-export type CallParticipantsListProps = CallParticipantsListComponentProps & {
-  /**
-   * The list of participants to display in the list
-   */
-  participants: (StreamVideoParticipant | StreamVideoLocalParticipant)[];
-  /**
-   * The number of columns to display in the list of participants while in vertical or horizontal scrolling mode. This property is only used when there are more than 2 participants.
-   * @default 2
-   */
-  numberOfColumns?: number;
-  /**
-   * If true, the list will be displayed in horizontal scrolling mode
-   */
-  horizontal?: boolean;
-  /**
-   * Check if phone is in landscape mode.
-   * This will apply the landscape mode styles to the component.
-   */
-  landscape?: boolean;
-};
+export type CallParticipantsListProps = CallParticipantsListComponentProps &
+  Pick<CallContentProps, 'supportedReactions'> & {
+    /**
+     * The list of participants to display in the list
+     */
+    participants: (StreamVideoParticipant | StreamVideoLocalParticipant)[];
+    /**
+     * The number of columns to display in the list of participants while in vertical or horizontal scrolling mode. This property is only used when there are more than 2 participants.
+     * @default 2
+     */
+    numberOfColumns?: number;
+    /**
+     * If true, the list will be displayed in horizontal scrolling mode
+     */
+    horizontal?: boolean;
+    /**
+     * Check if phone is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
+  };
 
 /**
  * This component displays a list of participants in a FlatList.
@@ -79,6 +81,7 @@ export const CallParticipantsList = ({
   ParticipantReaction,
   ParticipantVideoFallback,
   VideoRenderer,
+  supportedReactions,
   landscape,
 }: CallParticipantsListProps) => {
   const [containerLayout, setContainerLayout] = useState({
@@ -195,6 +198,7 @@ export const CallParticipantsList = ({
               style={itemContainerStyle}
               trackType="videoTrack"
               isVisible={isVisible}
+              supportedReactions={supportedReactions}
               {...participantProps}
             />
           )}
@@ -220,6 +224,7 @@ export const CallParticipantsList = ({
                 style={styles.flexed}
                 trackType="videoTrack"
                 key={keyExtractor(participant, index)}
+                supportedReactions={supportedReactions}
                 {...participantProps}
               />
             )

package/src/components/Call/Lobby/Lobby.tsx

@@ -19,6 +19,10 @@ import {
 import { useTheme } from '../../../contexts/ThemeContext';
 import { useCallMediaStreamCleanup } from '../../../hooks/internal/useCallMediaStreamCleanup';
 import type { MediaStream } from '@stream-io/react-native-webrtc';
+import {
+  LobbyFooter as DefaultLobbyFooter,
+  LobbyFooterProps,
+} from './LobbyFooter';
 
 /**
  * Props for the Lobby Component.
@@ -36,6 +40,10 @@ export type LobbyProps = {
    * Component to customize the Join Call Button in the Lobby component.
    */
   JoinCallButton?: ComponentType<JoinCallButtonProps> | null;
+  /**
+   * Component to customize the Lobby Footer in the Lobby component.
+   */
+  LobbyFooter?: ComponentType<LobbyFooterProps> | null;
 };
 
 /**
@@ -45,20 +53,19 @@ export const Lobby = ({
   onJoinCallHandler,
   LobbyControls = DefaultLobbyControls,
   JoinCallButton = DefaultJoinCallButton,
+  LobbyFooter = DefaultLobbyFooter,
 }: LobbyProps) => {
   const {
     theme: { colors, lobby, typefaces },
   } = useTheme();
   const connectedUser = useConnectedUser();
-  const { useCameraState, useCallSession } = useCallStateHooks();
+  const { useCameraState } = useCallStateHooks();
   const { status: cameraStatus } = useCameraState();
   const call = useCall();
-  const session = useCallSession();
   const { t } = useI18n();
   const localVideoStream = call?.camera.state.mediaStream as unknown as
     | MediaStream
     | undefined;
-  const participantsCount = session?.participants.length;
 
   useCallMediaStreamCleanup();
 
@@ -122,35 +129,12 @@ export const Lobby = ({
           {LobbyControls && <LobbyControls />}
         </>
       )}
-      <View
-        style={[
-          styles.infoContainer,
-          { backgroundColor: colors.static_overlay },
-          lobby.infoContainer,
-        ]}
-      >
-        <Text
-          style={[
-            { color: colors.static_white },
-            typefaces.subtitleBold,
-            lobby.infoText,
-          ]}
-        >
-          {t('You are about to join a call with id {{ callId }}.', {
-            callId: call?.id,
-          }) +
-            ' ' +
-            (participantsCount
-              ? t(
-                  '{{ numberOfParticipants }} participant(s) are in the call.',
-                  { numberOfParticipants: participantsCount },
-                )
-              : t('You are first to Join the call.'))}
-        </Text>
-        {JoinCallButton && (
-          <JoinCallButton onJoinCallHandler={onJoinCallHandler} />
-        )}
-      </View>
+      {LobbyFooter && (
+        <LobbyFooter
+          JoinCallButton={JoinCallButton}
+          onJoinCallHandler={onJoinCallHandler}
+        />
+      )}
     </View>
   );
 };
@@ -229,10 +213,6 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   topView: {},
-  infoContainer: {
-    padding: 12,
-    borderRadius: 10,
-  },
   participantStatusContainer: {
     alignSelf: 'flex-start',
     flexDirection: 'row',

package/src/components/Call/Lobby/LobbyFooter.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { LobbyProps } from './Lobby';
+import { View, StyleSheet, Text } from 'react-native';
+import {
+  useCall,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+/**
+ * Props for the Lobby Footer in the Lobby component.
+ */
+export type LobbyFooterProps = Pick<
+  LobbyProps,
+  'onJoinCallHandler' | 'JoinCallButton'
+>;
+
+/**
+ * The default Lobby Footer to be used in the Lobby component.
+ */
+export const LobbyFooter = ({
+  onJoinCallHandler,
+  JoinCallButton,
+}: LobbyFooterProps) => {
+  const {
+    theme: { colors, lobby, typefaces },
+  } = useTheme();
+  const { useCallSession } = useCallStateHooks();
+
+  const { t } = useI18n();
+
+  const call = useCall();
+  const session = useCallSession();
+
+  const participantsCount = session?.participants.length;
+
+  return (
+    <View
+      style={[
+        styles.infoContainer,
+        { backgroundColor: colors.static_overlay },
+        lobby.infoContainer,
+      ]}
+    >
+      <Text
+        style={[
+          { color: colors.static_white },
+          typefaces.subtitleBold,
+          lobby.infoText,
+        ]}
+      >
+        {t('You are about to join a call with id {{ callId }}.', {
+          callId: call?.id,
+        }) +
+          ' ' +
+          (participantsCount
+            ? t('{{ numberOfParticipants }} participant(s) are in the call.', {
+                numberOfParticipants: participantsCount,
+              })
+            : t('You are first to join the call.'))}
+      </Text>
+      {JoinCallButton && (
+        <JoinCallButton onJoinCallHandler={onJoinCallHandler} />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  infoContainer: {
+    padding: 12,
+    borderRadius: 10,
+  },
+});

package/src/components/Call/Lobby/index.ts

@@ -1,2 +1,3 @@
 export * from './Lobby';
 export * from './JoinCallButton';
+export * from './LobbyFooter';