@stream-io/video-react-native-sdk 0.0.27 → 0.1.0

package/dist/typescript/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,eAAO,MAAM,yBAAyB;;;;CAIrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,eAAO,MAAM,qBAAqB,EAAE,iBAAiB,CAAC,oBAAoB,CAmBzE,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,eAAO,MAAM,yBAAyB;;;;CAIrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,eAAO,MAAM,qBAAqB,EAAE,kBAAkB,EAmBrD,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC"}

package/dist/typescript/utils/StreamVideoRN/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/StreamVideoRN/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAqB5C,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,MAAM,CAA+B;IACpD;;;;OAIG;IACH,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IAO1E;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAUvE,MAAM,CAAC,SAAS;CAGjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/StreamVideoRN/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAoB5C,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,MAAM,CAA+B;IAEpD;;;;OAIG;IACH,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IAO1E;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAUvE,MAAM,CAAC,SAAS;CAGjB"}

package/dist/typescript/utils/StreamVideoRN/types.d.ts

@@ -1,15 +1,6 @@
-import { StreamReaction, StreamVideoClient } from '@stream-io/video-client';
+import { StreamVideoClient } from '@stream-io/video-client';
 import { AndroidChannel } from '@notifee/react-native';
-type StreamReactionType = Required<StreamReaction> & {
-    icon: string | JSX.Element;
-};
 export type StreamVideoConfig = {
-    /**
-     * Reactions that are to be supported in the app.
-     *
-     * Note: This is an array of reactions that is rendered in the Reaction list.
-     */
-    supportedReactions: StreamReactionType[];
     /**
      * The configuration to be used for push notifications.
      * If undefined, push notifications will not be enabled for the app
@@ -91,5 +82,4 @@ export type StreamVideoConfig = {
         };
     };
 };
-export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/typescript/utils/StreamVideoRN/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/utils/StreamVideoRN/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,KAAK,kBAAkB,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG;IACnD,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;OAIG;IACH,kBAAkB,EAAE,kBAAkB,EAAE,CAAC;IACzC;;;;OAIG;IACH,IAAI,CAAC,EAAE;QACL,GAAG,EAAE;YACH;;;eAGG;YACH,gBAAgB,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF,OAAO,EAAE;YACP;;;;;;;;eAQG;YACH,mBAAmB,EAAE,cAAc,CAAC;YACpC;;;;;;;eAOG;YACH,mCAAmC,EAAE;gBACnC,QAAQ,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;gBAC9C,OAAO,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;aAC9C,CAAC;YACF;;;eAGG;YACH,gBAAgB,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF;;;;;;;;;;;;;;;;WAgBG;QACH,uBAAuB,EAAE,MAAM,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;QACtE,+EAA+E;QAC/E,kBAAkB,EAAE,MAAM,IAAI,CAAC;QAC/B,mIAAmI;QACnI,sBAAsB,EAAE,MAAM,IAAI,CAAC;KACpC,CAAC;IACF,iBAAiB,EAAE;QACjB,OAAO,EAAE;YACP;;eAEG;YACH,OAAO,EAAE,cAAc,CAAC;YACxB;;eAEG;YACH,iBAAiB,EAAE;gBACjB,KAAK,EAAE,MAAM,CAAC;gBACd,IAAI,EAAE,MAAM,CAAC;aACd,CAAC;SACH,CAAC;KACH,CAAC;CACH,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/utils/StreamVideoRN/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EAAE;QACL,GAAG,EAAE;YACH;;;eAGG;YACH,gBAAgB,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF,OAAO,EAAE;YACP;;;;;;;;eAQG;YACH,mBAAmB,EAAE,cAAc,CAAC;YACpC;;;;;;;eAOG;YACH,mCAAmC,EAAE;gBACnC,QAAQ,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;gBAC9C,OAAO,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;aAC9C,CAAC;YACF;;;eAGG;YACH,gBAAgB,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF;;;;;;;;;;;;;;;;WAgBG;QACH,uBAAuB,EAAE,MAAM,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;QACtE,+EAA+E;QAC/E,kBAAkB,EAAE,MAAM,IAAI,CAAC;QAC/B,mIAAmI;QACnI,sBAAsB,EAAE,MAAM,IAAI,CAAC;KACpC,CAAC;IACF,iBAAiB,EAAE;QACjB,OAAO,EAAE;YACP;;eAEG;YACH,OAAO,EAAE,cAAc,CAAC;YACxB;;eAEG;YACH,iBAAiB,EAAE;gBACjB,KAAK,EAAE,MAAM,CAAC;gBACd,IAAI,EAAE,MAAM,CAAC;aACd,CAAC;SACH,CAAC;KACH,CAAC;CACH,CAAC"}

package/dist/typescript/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "0.0.27";
+export declare const version = "0.1.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/typescript/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.0.27",
+  "version": "0.1.0",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import {
   CallTopView as DefaultCallTopView,
   CallTopViewProps,
@@ -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,41 +26,57 @@ 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.
+     */
+    landscape?: boolean;
   };
 
 export const CallContent = ({
@@ -78,6 +95,8 @@ export const CallContent = ({
   ParticipantsInfoBadge,
   VideoRenderer,
   layout = 'grid',
+  supportedReactions,
+  landscape = true,
 }: CallContentProps) => {
   const [
     showRemoteParticipantInFloatingView,
@@ -140,19 +159,27 @@ export const CallContent = ({
 
   const callParticipantsGridProps: CallParticipantsGridProps = {
     ...participantViewProps,
+    landscape,
     showLocalParticipant: isRemoteParticipantInFloatingView,
     ParticipantView,
     CallParticipantsList,
+    supportedReactions,
   };
 
   const callParticipantsSpotlightProps: CallParticipantsSpotlightProps = {
     ...participantViewProps,
+    landscape,
     ParticipantView,
     CallParticipantsList,
+    supportedReactions,
+  };
+
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
   };
 
   return (
-    <View style={[styles.container, callContent.container]}>
+    <View style={[styles.container, callContent.container, landScapeStyles]}>
       <View style={[styles.container, callContent.callParticipantsContainer]}>
         <View
           style={[styles.view, callContent.topContainer]}
@@ -175,6 +202,7 @@ export const CallContent = ({
                   : localParticipant
               }
               onPressHandler={handleFloatingViewParticipantSwitch}
+              supportedReactions={supportedReactions}
               {...participantViewProps}
             />
           )}
@@ -187,7 +215,10 @@ export const CallContent = ({
       </View>
 
       {CallControls && (
-        <CallControls onHangupCallHandler={onHangupCallHandler} />
+        <CallControls
+          onHangupCallHandler={onHangupCallHandler}
+          landscape={landscape}
+        />
       )}
     </View>
   );

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

@@ -1,22 +1,23 @@
 import React from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
+import { StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 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;
-};
+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.)
@@ -25,17 +26,24 @@ export type CallControlProps = Pick<ViewProps, 'style'> & {
 export const CallControls = ({
   style,
   onHangupCallHandler,
+  landscape,
 }: CallControlProps) => {
   const {
     theme: { colors, callControls },
   } = useTheme();
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'column-reverse' : 'row',
+    paddingHorizontal: landscape ? 12 : 0,
+    paddingVertical: landscape ? 0 : 12,
+  };
   return (
     <View
       style={[
         styles.container,
         { backgroundColor: colors.static_grey },
-        style,
         callControls.container,
+        landScapeStyles,
+        style,
       ]}
     >
       <ToggleVideoPublishingButton />
@@ -48,8 +56,6 @@ export const CallControls = ({
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 12,
-    flexDirection: 'row',
     justifyContent: 'space-evenly',
     zIndex: Z_INDEX.IN_FRONT,
   },

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

@@ -1,28 +1,32 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 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;
-};
+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.
@@ -36,6 +40,8 @@ export const CallParticipantsGrid = ({
   ParticipantView,
   VideoRenderer,
   showLocalParticipant = false,
+  supportedReactions,
+  landscape,
 }: CallParticipantsGridProps) => {
   const {
     theme: { colors, callParticipantsGrid },
@@ -48,6 +54,9 @@ export const CallParticipantsGrid = ({
   // we debounce the participants arrays to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
   const remoteParticipants = useDebouncedValue(_remoteParticipants, 300);
   const allParticipants = useDebouncedValue(_allParticipants, 300);
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
 
   const showFloatingView =
     remoteParticipants.length > 0 && remoteParticipants.length < 3;
@@ -71,6 +80,7 @@ export const CallParticipantsGrid = ({
     <View
       style={[
         styles.container,
+        landScapeStyles,
         { backgroundColor: colors.dark_gray },
         callParticipantsGrid.container,
       ]}
@@ -79,6 +89,8 @@ export const CallParticipantsGrid = ({
       {CallParticipantsList && (
         <CallParticipantsList
           participants={participants}
+          supportedReactions={supportedReactions}
+          landscape={landscape}
           {...participantViewProps}
         />
       )}

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

@@ -5,29 +5,31 @@ import {
   StreamVideoParticipant,
 } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
 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 & {
+export type CallParticipantsSpotlightProps = ParticipantViewComponentProps &
+  Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList'> &
+  Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
     /**
-     * Component to customize the CallParticipantsList.
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
      */
-    CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
+    landscape?: boolean;
   };
 
 const hasScreenShare = (p: StreamVideoParticipant) =>
@@ -45,6 +47,8 @@ export const CallParticipantsSpotlight = ({
   ParticipantVideoFallback,
   ParticipantView = DefaultParticipantView,
   VideoRenderer,
+  supportedReactions,
+  landscape,
 }: CallParticipantsSpotlightProps) => {
   const {
     theme: { colors, callParticipantsSpotlight },
@@ -71,11 +75,20 @@ export const CallParticipantsSpotlight = ({
     ParticipantView,
   };
 
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
+  const spotlightContainerLandscapeStyles: ViewStyle = {
+    marginHorizontal: landscape ? 0 : 8,
+  };
+
   return (
     <View
       testID={ComponentTestIds.CALL_PARTICIPANTS_SPOTLIGHT}
       style={[
         styles.container,
+        landScapeStyles,
         {
           backgroundColor: colors.dark_gray,
         },
@@ -93,12 +106,14 @@ export const CallParticipantsSpotlight = ({
                 ]
               : [
                   styles.spotlightContainer,
+                  spotlightContainerLandscapeStyles,
                   callParticipantsSpotlight.spotlightContainer,
                 ]
           }
           trackType={
             isScreenShareOnSpotlight ? 'screenShareTrack' : 'videoTrack'
           }
+          supportedReactions={supportedReactions}
           {...participantViewProps}
         />
       )}
@@ -114,7 +129,10 @@ export const CallParticipantsSpotlight = ({
               participants={
                 isScreenShareOnSpotlight ? allParticipants : otherParticipants
               }
-              horizontal
+              supportedReactions={supportedReactions}
+              horizontal={!landscape}
+              numberOfColumns={!landscape ? 2 : 1}
+              landscape={landscape}
               {...callParticipantsListProps}
             />
           )}
@@ -127,7 +145,6 @@ export const CallParticipantsSpotlight = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingVertical: 8,
   },
   fullScreenSpotlightContainer: {
     flex: 1,
@@ -137,7 +154,6 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     borderRadius: 10,
     marginHorizontal: 8,
-    marginBottom: 8,
   },
   callParticipantsListContainer: {
     flex: 1,